m5rcel.
Apple Ahh Portfolio
Inspired by the golden era of Apple design (2009).
Features •
Tech Stack •
Getting Started •
License
A pixel-perfect recreation of the Snow Leopard & iPhone 3GS aesthetic.
## About The Project
> "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