Update README.md
This commit is contained in:
m5rcel { Marcel }
committed by
GitHub
GitHub
parent
57c685666e
commit
78d1f39941
173
README.md
173
README.md
@@ -1,20 +1,167 @@
|
||||
<div align="center">
|
||||
<img width="1200" height="475" alt="GHBanner" src="https://github.com/user-attachments/assets/0aa67016-6eaf-458a-adb2-6e31a0763ed6" />
|
||||
</div>
|
||||
<!-- 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>
|
||||
|
||||
# Run and deploy your AI Studio app
|
||||
<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>
|
||||
|
||||
This contains everything you need to run your app locally.
|
||||
<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>
|
||||
|
||||
View your app in AI Studio: https://ai.studio/apps/drive/1TiMFoAG3MlNJvKqVz68y71I_K1ca--la
|
||||
<hr />
|
||||
|
||||
## Run Locally
|
||||
<!-- 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>
|
||||
|
||||
**Prerequisites:** Node.js
|
||||
<br />
|
||||
|
||||
## 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.
|
||||
|
||||
<br />
|
||||
|
||||
<p align="center">
|
||||
<small>Designed & Developed by <a href="https://github.com/m4rcel-lol">m5rcel</a></small>
|
||||
</p>
|
||||
|
||||
Reference in New Issue
Block a user