168 lines
5.8 KiB
Markdown
168 lines
5.8 KiB
Markdown
<!-- Header Banner Area -->
|
||
<p align="center">
|
||
<br />
|
||
<img src="https://github.com/m4rcel-lol.png" width="120" height="120" style="border-radius: 50%; border: 4px solid #d6d6d6; box-shadow: 0 4px 6px rgba(0,0,0,0.1);" alt="m5rcel Avatar" />
|
||
<h1 align="center" style="font-size: 3rem; font-weight: 700; margin-top: 10px;">m5rcel.</h1>
|
||
<p align="center">
|
||
<strong>Apple Ahh Portfolio</strong>
|
||
<br />
|
||
<em>Inspired by the golden era of Apple design (2009).</em>
|
||
</p>
|
||
</p>
|
||
|
||
<p align="center">
|
||
<a href="#features">Features</a> •
|
||
<a href="#tech-stack">Tech Stack</a> •
|
||
<a href="#getting-started">Getting Started</a> •
|
||
<a href="#license">License</a>
|
||
</p>
|
||
|
||
<p align="center">
|
||
<img src="https://img.shields.io/badge/version-1.0.0-black?style=flat-square&logo=apple" alt="Version" />
|
||
<img src="https://img.shields.io/badge/react-18.2.0-blue?style=flat-square&logo=react" alt="React" />
|
||
<img src="https://img.shields.io/badge/typescript-5.x-blue?style=flat-square&logo=typescript" alt="TypeScript" />
|
||
<img src="https://img.shields.io/badge/license-MIT-green?style=flat-square" alt="License" />
|
||
</p>
|
||
|
||
<hr />
|
||
|
||
<!-- Project Preview / Screenshot Area -->
|
||
<p align="center">
|
||
<img src="https://news-cdn.softpedia.com/images/news2/Apple-Confirms-Snow-Leopard-Is-Shipping-Early-2.jpg" alt="Project Preview" style="border-radius: 8px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);">
|
||
<br />
|
||
<em>A pixel-perfect recreation of the Snow Leopard & iPhone 3GS aesthetic.</em>
|
||
</p>
|
||
|
||
<br />
|
||
|
||
## 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.
|
||
|
||
<br />
|
||
|
||
<p align="center">
|
||
<small>Designed & Developed by <a href="https://github.com/m4rcel-lol">m5rcel</a></small>
|
||
</p>
|