🎨 Design Agency Milan - Apple Like Modern Portfolio Website

A sleek, modern portfolio website built with cutting-edge technologies. This project showcases a minimalist design approach with smooth animations and responsive layout.

PREVIEW 📷

✨ Features

• Modern Design: Clean, minimalist aesthetic with Apple-inspired design principles
• Dark/Light Mode: Seamless theme switching with smooth transitions
• Smooth Animations: GSAP-powered animations for enhanced user experience
• Responsive Design: Fully responsive across all devices
• Performance Optimized: Built with Vite for lightning-fast development and builds
• TypeScript: Full type safety and better development experience

🛠️ Technologies Used

Frontend Framework

• React 18 - Modern React with hooks and functional components
• TypeScript - Type-safe development
• Vite - Lightning-fast build tool and dev server

Styling & UI

• Tailwind CSS - Utility-first CSS framework
• shadcn/ui - Beautiful, accessible component library
• GSAP - Professional-grade animations
• Lucide React - Beautiful, customizable icons

Development Tools

• ESLint - Code linting and formatting
• PostCSS - CSS processing
• React Router DOM - Client-side routing

🚀 Getting Started

Prerequisites

• Node.js (v16 or higher)
• npm or yarn

Installation

1. Clone the repository

   git clone <your-repo-url>
   cd apple-minimal-folio

2. Install dependencies

   npm install

3. Start development server

   npm run dev

4. Open your browser Navigate to http://localhost:8080

Available Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run preview - Preview production build
• npm run lint - Run ESLint

📁 Project Structure

src/
├── components/          # React components
│   ├── ui/            # shadcn/ui components
│   ├── Hero.tsx       # Hero section
│   ├── About.tsx      # About section
│   ├── Projects.tsx   # Projects showcase
│   ├── Contact.tsx    # Contact section
│   └── Navigation.tsx # Navigation bar
├── contexts/          # React contexts
├── hooks/             # Custom hooks
├── lib/               # Utility functions
└── pages/             # Page components

🎯 Key Components

• Hero Section: Animated hero with parallax effects
• About Section: Company information with smooth reveals
• Projects Grid: Interactive project showcase with hover effects
• Contact Section: Professional contact information
• Navigation: Fixed navigation with theme toggle

🌟 Design Highlights

• Minimalist Aesthetic: Clean lines and plenty of whitespace
• Smooth Transitions: GSAP-powered animations throughout
• Responsive Grid: Flexible layouts that adapt to any screen
• Accessibility: WCAG compliant with proper ARIA labels
• Performance: Optimized images and lazy loading

📱 Responsive Design

The website is fully responsive and optimized for:

• Desktop (1920px+)
• Tablet (768px - 1024px)
• Mobile (320px - 767px)

🎨 Customization

Colors

The project uses a comprehensive design system with CSS custom properties for easy theming.

Animations

GSAP animations can be customized in the useGSAP hook and individual components.

Content

All content is easily editable in the component files.

📄 License

This project is proprietary and confidential. All rights reserved.

---

⚠️ Important Notice

This is a client project with modified content for copyright and privacy purposes. All names, company information, and specific details have been altered from the original client work. This repository serves as a portfolio showcase of technical implementation and design capabilities.

---

Built with ❤️ by Michael Torres (MikixIT)

For inquiries about custom development work, please reach out through the contact information in the project.