Levy Prado - Portfolio

Live Demo: https://levyprado.dev

A modern, responsive portfolio website showcasing full-stack development projects. Built with Next.js 16, featuring clean design, smooth animations, and a focus on user experience.

Macbook-Air-localhost-qo2_o61xj5w8qt.mp4

🚀 Features

• Responsive Design: Optimized for all devices with mobile-first approach
• Dark/Light Mode: Automatic theme switching based on system preferences
• Smooth Animations: Scroll-triggered animations and hover effects
• Video Previews: Auto-playing project demos with separate mobile/desktop versions
• Interactive Gallery: Clickable image galleries with modal views
• Type-Safe: Full TypeScript implementation with typed routes
• Performance Optimized: React Compiler, optimized imports, and static generation

🛠️ Tech Stack

Frontend

• Next.js 16 - React framework with App Router
• React 19 - UI library
• TypeScript - Type safety
• Tailwind CSS 4 - Utility-first CSS framework
• @phosphor-icons/react - Icon library
• @base-ui-components/react - Dialog component

Development Tools

• Bun - Fast JavaScript runtime and package manager
• ESLint - Code linting
• Prettier - Code formatting
• React Compiler - Automatic React optimizations

📁 Project Structure

portfolio/
├── src/
│   ├── app/                    # Next.js App Router pages
│   │   ├── about/             # About page
│   │   ├── contact/           # Contact page
│   │   ├── work/[id]/         # Dynamic project pages
│   │   ├── globals.css        # Global styles
│   │   ├── layout.tsx         # Root layout
│   │   └── page.tsx           # Home page
│   ├── components/            # Reusable components
│   │   ├── about/            # About page components
│   │   ├── contact/          # Contact components
│   │   ├── home/             # Home page components
│   │   ├── layout/           # Layout components
│   │   ├── ui/               # UI components
│   │   └── work/             # Project detail components
│   └── lib/                  # Utilities and constants
│       ├── constants.tsx     # Project data and configuration
│       └── utils.ts          # Utility functions
├── public/                   # Static assets
│   └── projects/            # Project media files
└── package.json             # Dependencies and scripts

🎨 Customization

Adding New Projects

1. Add project assets to public/projects/

   public/projects/your-project/
   ├── videos/
   │   ├── desktop.webm
   │   └── mobile.webm
   └── images/
       ├── screenshot-1.png
       ├── screenshot-2.png
       ├── screenshot-3.png
       └── screenshot-4.png
   

2. Update project data in src/lib/constants.tsx

   {
     id: 'new-project',
     title: 'New Project',
     tagline: 'Project description',
     description: 'Detailed project description...',
     gifPreview: {
       desktop: '/projects/new-project/videos/desktop.webm',
       mobile: '/projects/new-project/videos/mobile.webm',
     },
     detailedImages: [
       '/projects/new-project/images/screenshot-1.png',
       // ... more images
     ],
     stack: ['Technology 1', 'Technology 2'],
     detailsHref: '/work/new-project' as Route,
     links: [
       { label: 'Live', href: 'https://...', type: 'live' },
       { label: 'GitHub', href: 'https://...', type: 'github' },
     ],
   }

Updating Personal Information

• Name and title: Update in src/components/layout/header.tsx
• Social links: Modify the socials array in src/lib/constants.tsx
• Tech stack: Update the techStack array in src/lib/constants.tsx
• About content: Edit components in src/components/about/

Styling

• Colors: Modify CSS variables in src/app/globals.css
• Fonts: Update font imports in src/app/layout.tsx
• Animations: Adjust keyframes and transitions in src/app/globals.css

🏃 Getting Started

Prerequisites

• Node.js 18+ or Bun (recommended)
• Git

Installation

1. Clone the repository

   git clone https://github.com/levyprado/portfolio.git
   cd portfolio

2. Install dependencies

   # Using Bun (recommended)
   bun install
   
   # Or using npm
   npm install
   
   # Or using yarn
   yarn install

3. Run the development server

   # Using Bun
   bun dev
   
   # Or using npm
   npm run dev
   
   # Or using yarn
   yarn dev

4. Open your browser

   Navigate to http://localhost:3000 to see the portfolio.

📜 Available Scripts

• dev - Start the development server
• build - Build the project for production
• start - Start the production server
• lint - Run ESLint for code linting

🚀 Deployment

Vercel (Recommended)

1. Connect your repository to Vercel
2. Deploy automatically - Vercel will detect Next.js and configure it automatically
3. Custom domain (optional) - Add your custom domain in Vercel settings

Other Platforms

The project can be deployed to any platform supporting Node.js:

• Netlify
• Railway
• Render
• AWS Amplify

Build command: npm run build or bun run build Output directory: .next

🤝 Contributing

While this is a personal portfolio, feel free to:

1. Report bugs by opening an issue
2. Suggest improvements via pull requests
3. Share ideas for new features

📄 License

This project is open source and available under the MIT License.

📞 Contact

Levy Prado

• Email: levyprado28@gmail.com
• LinkedIn: levy-prado
• GitHub: @levyprado

---