Portfolio Landing Page

A modern, responsive portfolio website built based on a Figma design with clean aesthetics and smooth interactions.

Features

🎨 Design

• Clean & Modern: Minimalist design with focus on content
• Responsive: Fully responsive design that works on all devices
• Smooth Animations: Elegant transitions and hover effects
• Typography: Beautiful Inter font for excellent readability

🚀 Navigation

• Sidebar Navigation: Fixed left sidebar with 8 main sections
• Smooth Transitions: Seamless section switching
• Keyboard Navigation: Use arrow keys to navigate between sections
• Mobile Menu: Collapsible menu for mobile devices

📱 Responsive Design

• Desktop: Full sidebar layout (1440px design)
• Tablet: Adapted layout with responsive grids
• Mobile: Hamburger menu with slide-out navigation

🎯 Sections

1. Intro: Hero section with call-to-action buttons
2. Values: Core principles and beliefs
3. Craft: Skills and expertise areas
4. Lab: Experimental projects and explorations
5. Gigs: Recent work and projects
6. Background: Professional timeline
7. Tools: Technologies and software used
8. Skills: Skill levels with animated progress bars

File Structure

portfolio/
├── index.html          # Main HTML structure
├── styles.css          # All styling and responsive design
├── script.js           # Interactive functionality
└── README.md           # This file

Customization

🎨 Colors

The main color scheme uses:

• Primary: #007acc (Blue)
• Text: #000000 (Black)
• Background: #ffffff (White)
• Secondary Text: #333333, #666666

To change colors, update the CSS variables in styles.css.

📝 Content

1. Personal Information: Edit the hero section in index.html
2. Skills: Update the skills list and progress percentages
3. Work Experience: Modify the timeline in the Background section
4. Projects: Add your own projects in Lab and Gigs sections

🖼️ Adding Images

To add profile pictures or project images:

1. Create an images/ folder
2. Add your images
3. Update the HTML to include <img> tags where needed

Browser Support

• ✅ Chrome (recommended)
• ✅ Firefox
• ✅ Safari
• ✅ Edge
• ✅ Mobile browsers

Performance Features

• Lightweight: No external dependencies except Google Fonts
• Fast Loading: Optimized CSS and JavaScript
• Smooth Animations: Hardware-accelerated transitions
• Mobile Optimized: Touch-friendly interactions

Getting Started

1. Clone or Download the files to your project folder
2. Open index.html in your browser
3. Customize the content to match your portfolio
4. Deploy to your preferred hosting platform

Deployment

You can deploy this portfolio to:

• GitHub Pages
• Netlify
• Vercel
• Any static hosting service

Simply upload the files to your hosting platform of choice.

License

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

---

Built with ❤️ using modern web technologies