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	Component-based UI library.
Language	TypeScript	Static typing for scalable development.
Build	Vite	Next-generation frontend tooling.
Styling	Tailwind CSS	Utility-first CSS with custom "Retro" config.
Motion	Framer Motion	Production-ready animation library.
Icons	Lucide React	Beautiful & consistent icon set.

---

📂 Project Structure

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

   git clone https://github.com/m4rcel-lol/apple-ahh-portfolio.git
   cd apple-ahh-portfolio
   

2. Install dependencies

   npm install
   

3. Start the Development Server

   npm run dev
   

   Open http://localhost:5173 to view it in the browser.

4. Build for Production

   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:

{
  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