diff --git a/README.md b/README.md index 5affe33..d1f9efc 100644 --- a/README.md +++ b/README.md @@ -1,20 +1,167 @@ -
-GHBanner -
+ +

+
+ m5rcel Avatar +

m5rcel.

+

+ Apple Ahh Portfolio +
+ Inspired by the golden era of Apple design (2009). +

+

-# Run and deploy your AI Studio app +

+ Features • + Tech Stack • + Getting Started • + License +

-This contains everything you need to run your app locally. +

+ Version + React + TypeScript + License +

-View your app in AI Studio: https://ai.studio/apps/drive/1TiMFoAG3MlNJvKqVz68y71I_K1ca--la +
-## Run Locally + +

+ Project Preview +
+ A pixel-perfect recreation of the Snow Leopard & iPhone 3GS aesthetic. +

-**Prerequisites:** Node.js +
+##  About The Project -1. Install dependencies: - `npm install` -2. Set the `GEMINI_API_KEY` in [.env.local](.env.local) to your Gemini API key -3. Run the app: - `npm run dev` +> "It’s not just about writing code. It’s about creating an experience." + +**Apple Ahh Portfolio** is a high-performance personal website that bridges the gap between nostalgia and modern engineering. It meticulously recreates the web design trends of **2009**—glossy "Aqua" buttons, wet-floor reflections, and Lucida Grande typography—while leveraging a bleeding-edge React stack. + +It features a custom **Mac OS X Boot Sequence** loading screen, fully responsive "Bento" grid layouts adapted for the 2009 style, and a robust component architecture. + +### Key Visual Features +* ✨ **Aqua Aesthetics**: Glossy, gel-like buttons and navigation bars. +* 🪞 **Webkit Reflections**: CSS-driven "wet floor" reflection effects on hero images. +* 🍎 **Typography**: The authentic font stack of the era (`Myriad Pro`, `Lucida Grande`). +* ⚙️ **Cinematic Loading**: A faithful recreation of the OS X Snow Leopard boot animation. + +--- + +## ⚡ Tech Stack + +This project is built with performance and maintainability in mind, utilizing the latest standards in the React ecosystem. + +| Category | Technology | Description | +| :--- | :--- | :--- | +| **Core** | [React 18](https://react.dev/) | Component-based UI library. | +| **Language** | [TypeScript](https://www.typescriptlang.org/) | Static typing for scalable development. | +| **Build** | [Vite](https://vitejs.dev/) | Next-generation frontend tooling. | +| **Styling** | [Tailwind CSS](https://tailwindcss.com/) | Utility-first CSS with custom "Retro" config. | +| **Motion** | [Framer Motion](https://www.framer.com/motion/) | Production-ready animation library. | +| **Icons** | [Lucide React](https://lucide.dev/) | Beautiful & consistent icon set. | + +--- + +## 📂 Project Structure + +```text +apple-ahh-portfolio/ +├── src/ +│ ├── components/ # UI Building Blocks +│ │ ├── Hero.tsx # Product showcase section +│ │ ├── Navbar.tsx # Glossy navigation bar +│ │ ├── Projects.tsx # Grid layout for work +│ │ └── ... +│ ├── constants.ts # Data source (Projects, Timeline) +│ ├── types.ts # TypeScript interfaces +│ ├── App.tsx # Main application entry +│ └── main.tsx # React DOM mounting +├── public/ # Static assets +├── index.html # Entry HTML & Tailwind Config +├── vercel.json # Production security headers +└── package.json # Dependencies & Scripts +``` + +--- + +## 🚀 Getting Started + +Follow these steps to set up the project locally on your machine. + +### Prerequisites +* **Node.js** (v16 or higher) +* **npm** or **yarn** + +### Installation + +1. **Clone the repository** + ```bash + git clone https://github.com/m4rcel-lol/apple-ahh-portfolio.git + cd apple-ahh-portfolio + ``` + +2. **Install dependencies** + ```bash + npm install + ``` + +3. **Start the Development Server** + ```bash + npm run dev + ``` + Open `http://localhost:5173` to view it in the browser. + +4. **Build for Production** + ```bash + npm run build + ``` + +--- + +## 🛠️ Customization Guide + +The content is decoupled from the UI logic, allowing you to update the portfolio without touching the components. + +### Adding Projects +Navigate to `src/constants.ts` and add a new object to the `PROJECTS` array: + +```typescript +{ + id: 'new-project', + title: 'My Awesome App', + category: 'Web Development', + description: 'A brief description of what this project does.', + image: 'https://link-to-image.com/banner.jpg', + tags: ['React', 'Node.js'], + githubUrl: 'https://github.com/username/repo', +} +``` + +### Changing Icons +Specialized SVG icons (like Fedora or Python) are handled in `src/components/Projects.tsx`. Look for the conditional rendering block inside the map function to add your own SVGs. + +--- + +## 🔒 Security & Performance + +This project includes a production-ready `vercel.json` configuration file that implements: + +* **Content Security Policy (CSP)** to prevent XSS. +* **Immutable Caching** for static assets. +* **X-Content-Type-Options** to prevent MIME sniffing. + +--- + +## 📄 License + +Distributed under the MIT License. See `LICENSE` for more information. + +
+ +

+ Designed & Developed by m5rcel +