Wyld Ruby

A blazing fast, modern web application built with Next.js, designed to deliver exceptional user experiences with cutting-edge technology.

---

Live Demo: Wyld Ruby

---

Concept 🎭

Wyld Ruby is a micro‑experience that treats each frame like a scene: slow scroll, deep reds, and unapologetically bold imagery. The goal is not to tell a full story, but to freeze five moments of desire in motion and light. Minimal copy, maximal mood—letting the model and the crimson palette do most of the talking.

Tech Stack 💻

• Next.js - A React framework for building performant web applications with features like server-side rendering and static site generation.

• React - A JavaScript library for building user interfaces, providing a component-based architecture.

• TypeScript - A superset of JavaScript that adds static typing, improving code quality and maintainability.

• Tailwind CSS - A utility-first CSS framework for rapidly designing custom user interfaces with ease.

• Biome - A next-generation linter and formatter for JavaScript, TypeScript, and CSS, ensuring code consistency and quality.

---

Getting Started ✨

First, install the dependencies:

npm install
# or
bun install

Then, run the development server:

npm run dev
# or
bun run dev

Open http://localhost:3000 with your browser to see the result. The page will automatically reload when you make changes to the code. You can also view any build errors or lint warnings in the console.

Available Scripts

• npm run dev / bun run dev – Start the development server.
• npm run build / bun run build – Create an optimized production build.
• npm run start / bun run start – Run the production server.
• npm run lint / bun run lint – Lint the project with Biome.
• npm run format / bun run format – Format code (Biome / Prettier).

---

Features 🚀

• App Router: Modern routing, layouts, and data fetching with the Next.js App Router.
• Server Components: Server‑rendered React components for better performance.
• Image Optimization: next/image for responsive, optimized, and blurred‑placeholder images.
• TypeScript: Strong typing across the codebase.
• Tailwind CSS: Rapid UI iteration with a custom, red‑forward aesthetic.
• Biome: Opinionated linting and formatting for consistent code.

---

📂 Project Structure

A brief overview of the project's directory structure:

wyld-ruby/
├── public/                 # Static assets
│   └── assets/            # Images for the application
│       ├── wyld_1.webp
│       ├── wyld_2.webp
│       ├── wyld_3.webp
│       ├── wyld_4.webp
│       └── wyld_5.webp
├── src/
│   ├── app/                # Next.js App Router
│   │   ├── pages/        # Page components
│   │   │   ├── coil.tsx    # Coil page
│   │   │   ├── gaze.tsx    # Gaze page
│   │   │   ├── glow.tsx    # Glow page
│   │   │   ├── index.ts    # Index page
│   │   │   ├── muse.tsx    # Muse page
│   │   │   └── strike.tsx  # Strike page
│   │   ├── apple-icon.png  # Apple icon
│   │   ├── favicon.ico     # Favicon
│   │   ├── globals.css     # Global styles
│   │   ├── icon.svg        # Icon
│   │   ├── layout.tsx      # Root layout
│   │   └── page.tsx        # Main entry page
│   ├── fonts/              # Local font files
│   │   └── england.otf     # Font file
├── biome.json              # Biome configuration
├── bun.lock                # bun lock file
├── cspell.json             # cspell configuration
├── LICENSE.md              # License file
├── next.config.ts          # Next.js configuration
├── next-env.d.ts           # Next.js environment file
├── node_modules/           # Project dependencies
├── package.json            # Project dependencies and scripts
├── postcss.config.mjs      # PostCSS configuration
├── README.md               # Project README
└── tsconfig.json           # TypeScript configuration

---

Code Quality 🦾

• Run npm run lint / bun run lint to check code style.
• Run npm run format / bun run format to automatically format your code.

Biome helps keep the project consistent and easy to maintain across different editors.

---

Roadmap 🗺️

• Improved Accessibility: Enhancing accessibility features to meet WCAG standards.
• More Pages: Adding more pages to showcase different aspects of the application.
• Animations and Transitions: Implementing more animations and transitions to improve user experience.

---

Learn More 📚

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

---

Deploy on Vercel 🚀

Wyld Ruby is deployed on Vercel the recommended platform for Next.js apps. See the Next.js deployment Next.js deployment documentation docs for details.

---

🧑‍🦱 Author

Contact

---

License

This project is licensed under the MIT License. See the file for more information.