Welcome to the comprehensive documentation for Prashant Koirala's Portfolio - a cutting-edge, award-worthy web development portfolio that showcases the intersection of stunning design and robust development. This project represents a masterclass in modern web development, featuring seamless animations, responsive design, and an immersive user experience that draws inspiration from Awwwards-winning websites.
- Project Overview
- Live Demo
- Features
- Technologies Used
- Project Structure
- Installation & Setup
- Design System
- Animation Architecture
- Responsive Design
- Performance Optimizations
- Browser Compatibility
- Deployment
- Contributing
- License
- Contact
This portfolio is more than just a personal website - it's a carefully crafted digital experience that demonstrates advanced web development techniques. The project showcases:
- Award-worthy design principles inspired by Awwwards-winning sites
- Seamless page transitions using GSAP animations
- Interactive storytelling through scroll-triggered animations
- Mobile-first responsive design with breakpoints at 1000px
- Performance-optimized assets with lazy loading and efficient caching
- Modern development workflow using Vite for fast development and building
The portfolio serves as both a personal showcase and a testament to modern web development capabilities, featuring smooth animations, engaging interactions, and a cohesive visual identity throughout.
Experience the portfolio in its full glory with all animations and interactions. The live version is deployed on Vercel with global CDN distribution for optimal performance worldwide.
- Smooth Page Transitions: Seamless navigation between pages with GSAP-powered animations
- Scroll-Triggered Animations: Dynamic content reveals and interactions based on scroll position
- Responsive Design: Optimized for all devices from mobile to desktop
- Interactive Navigation: Elegant slide-in menu with smooth animations
- Contact Form: Professional contact form with validation and success states
- Project Showcase: Interactive portfolio gallery with hover effects
- Performance Monitoring: Built-in performance optimizations and lazy loading
- Custom Cursor Effects: Subtle cursor interactions throughout the site
- Parallax Scrolling: Multi-layer parallax effects for depth
- Image Preloading: Intelligent image preloading for smooth transitions
- Animation Sequencing: Complex animation timelines synchronized with user interactions
- Mobile-First Animations: Touch-friendly animations optimized for mobile devices
- Accessibility Features: WCAG 2.1 compliant with keyboard navigation support
- Modern Build System: Vite-based development with hot module replacement
- Asset Optimization: Automatic image optimization and compression
- Code Splitting: Efficient JavaScript code splitting for faster load times
- SEO Optimization: Meta tags, structured data, and semantic HTML
- Progressive Enhancement: Graceful degradation for older browsers
- HTML5: Semantic markup with modern HTML features
- CSS3: Advanced CSS with custom properties, flexbox, and grid
- JavaScript ES6+: Modern JavaScript with modules and async/await
- Vite: Lightning-fast build tool and development server
- GSAP (GreenSock): Professional-grade animation library
- ScrollTrigger: GSAP plugin for scroll-based animations
- Lenis: Smooth scrolling library for enhanced user experience
- Custom Fonts: Three custom typefaces for distinctive typography
- CSS Custom Properties: Design system with CSS variables
- Responsive Units: Flexible sizing with rem, em, and viewport units
- CSS Grid & Flexbox: Modern layout techniques
- Node.js: JavaScript runtime for development tools
- npm: Package manager for dependencies
- ESLint: Code linting for consistent code quality
- Prettier: Code formatting for consistent style
- Vercel: Global edge network deployment
- GitHub: Version control and collaboration
- Custom Domain: Professional domain with SSL certificate
portfolio/
├── src/
│ ├── assets/ # Images, fonts, and other static assets
│ ├── components/ # Reusable UI components
│ ├── pages/ # Page-specific components and logic
│ ├── styles/ # CSS and SCSS files
│ ├── scripts/ # JavaScript utilities and animations
│ └── index.html # Main HTML entry point
├── dist/ # Production build output
├── public/ # Static assets served directly
├── vite.config.js # Vite configuration
├── package.json # Project dependencies and scripts
├── README.md # Project documentation
└── LICENSE # License file
- Node.js (v16 or higher)
- npm or yarn package manager
- Git for version control
-
Clone the repository:
git clone https://github.com/prashantkoirala465/portfolio.git
-
Install dependencies:
npm install
-
Start development server:
npm run dev
The development server will start at
http://localhost:5173 -
Build for production:
npm run build
The built files will be in the
dist/directory -
Preview production build:
npm run preview
npm run dev- Start development server with hot reloadnpm run build- Build optimized production bundlenpm run preview- Preview production build locallynpm run host- Start development server accessible via network
The portfolio uses a carefully curated color system defined in CSS custom properties:
- Primary:
--color-primary: #1a1a1a - Secondary:
--color-secondary: #f5f5f5 - Accent:
--color-accent: #ff6b6b - Background:
--color-bg: #ffffff
Three custom typefaces create the distinctive visual identity:
-
Rader - Used for headings (h1, h2, h3)
- Uppercase, italic style
- Tight line-height (0.95) for dramatic effect
- Responsive sizing from 2.5rem (mobile) to 5rem (desktop)
-
Formula Narrow - Used for body text and descriptions
- Clean, modern sans-serif
- Slightly condensed for better readability
- Font size: 1.25rem with 1.125 line-height
-
Supply Mono - Used for UI elements and labels
- Monospace font for technical feel
- Uppercase for consistency
- Font size: 0.875rem for subtle UI text
- Base spacing unit:
1rem(16px) - Grid system: Flexible CSS Grid and Flexbox layouts
- Breakpoints:
- Mobile:
< 1000px - Desktop:
≥ 1000px
- Mobile:
- Container max-width: Fluid layouts with padding
The portfolio features a sophisticated page transition system using GSAP:
- Entry Animation: Multi-layer overlay reveal on page load
- Exit Animation: Sequential overlay animation on navigation
- Navigation Handling: Smart link detection for same-page vs different-page transitions
- Mobile Menu Integration: Automatic menu closing during transitions
- Image Cycling: Continuous image rotation every 250ms
- Scroll Progress: Image transforms based on scroll position
- Responsive Scaling: Dynamic scaling from 0.25 to 1 based on scroll
- Rotation Effects: Subtle rotation animation (-15° to 0°)
- Horizontal Scrolling: Titles move horizontally across 4x viewport width
- Image Cards: 3D positioning with z-index manipulation
- Staggered Animations: Sequential reveal of portfolio items
- Progress Indicators: Visual feedback for scroll progress
- Card Pinning: Services cards pin during scroll for layered effect
- Vertical Movement: Smooth vertical transitions between service descriptions
- Responsive Disabling: Animations disabled on mobile for performance
- Hardware Acceleration: GPU-accelerated transforms
- Optimized Images: Preloaded and cached for smooth transitions
- Debounced Resize: Efficient window resize handling
- Scroll Throttling: Optimized scroll event handling
- Simplified Animations: Reduced or disabled complex animations
- Touch-Friendly Interactions: Larger tap targets and swipe gestures
- Optimized Typography: Reduced font sizes for mobile readability
- Stacked Layouts: Single-column layouts for better mobile experience
- Complex Animations: Full animation suite enabled
- Multi-column Layouts: Grid-based layouts for optimal space usage
- Hover Effects: Interactive hover states for enhanced engagement
- High-Resolution Assets: Retina-ready images for crisp display
- Mobile: Single-column, simplified animations
- Desktop: Multi-column, full animation suite
- JPG Format: Image format with fallbacks
- Responsive Images:
srcsetfor different screen densities - Lazy Loading: Images load as needed during scroll
- Preloading: Critical images preloaded for smooth transitions
- Code Splitting: Modular JavaScript for faster initial load
- Tree Shaking: Unused code elimination during build
- Minification: Minified JavaScript for production
- Async Loading: Non-critical scripts loaded asynchronously
- Critical CSS: Inline critical styles for faster first paint
- Unused CSS Removal: PurgeCSS integration for production builds
- Compressed Styles: Minified CSS for smaller file sizes
- Font Loading: Optimized font loading with
font-display: swap
- Vite Build Process: Lightning-fast development and building
- Asset Hashing: Cache-busting for static assets
- CDN Distribution: Global edge caching via Vercel
- Chrome: 90+
- Firefox: 88+
- Safari: 14+
- Edge: 90+
- Mobile Safari: iOS 14+
- Chrome Mobile: Android 10+
- CSS Grid Fallback: Flexbox fallback for older browsers
- JavaScript Polyfills: Core-js for ES6+ features
- Font Fallbacks: System font stack for custom font failures
- Image Fallbacks: PNG/JPEG fallbacks for WebP
- Graceful Degradation: Core functionality without JavaScript
- Feature Detection: Modernizr for feature detection
- Accessibility: WCAG 2.1 compliance across all browsers
-
Connect Repository
- Link GitHub repository to Vercel
- Automatic deployments on push to main branch
-
Environment Configuration
- No additional environment variables required
- Automatic SSL certificate generation
-
Custom Domain Setup
- Add custom domain in Vercel dashboard
- Configure DNS records as instructed
- Netlify
- GitHub Pages
- Traditional Hosting
- Build the project:
npm run build - Upload
dist/folder to your web server - Configure web server for SPA routing
- Build the project:
- Build completes without errors
- All images load correctly
- Animations work smoothly
- Contact form functionality verified
- Mobile responsiveness tested
- Performance scores verified (Lighthouse)
- SEO meta tags configured
- Analytics tracking implemented
- Code Style: Follow existing ESLint and Prettier configurations
- Commit Messages: Use conventional commit format
- Branch Naming: Use
feature/prefix for new features - Pull Requests: Include screenshots for UI changes
- Fork the repository
- Create a feature branch:
git checkout -b feature/your-feature - Commit changes:
git commit -m "feat: add your feature" - Push to branch:
git push origin feature/your-feature - Open a pull request
- All changes require review before merging
- Test on multiple devices and browsers
- Verify accessibility compliance
- Check performance impact
This project is licensed under the MIT License - see the LICENSE file for details.
Prashant Koirala
- Portfolio: prashantkoirala.info.np
- Email: [email protected]
- GitHub: @prashantkoirala465
- LinkedIn: Prashant Koirala
- Twitter: @arkynox_
- Issues: GitHub Issues
- Discussions: GitHub Discussions
- Email: Direct email for urgent inquiries
Available for:
- Custom Portfolio Development
- Animation Consulting
- Performance Optimization
- Design System Creation
- Code Reviews & Audits
- Initial portfolio release
- Complete responsive design
- Full animation suite
- Contact form integration
- Performance optimizations
- Blog Section: Technical articles and case studies
- Project Case Studies: Detailed project breakdowns
- Dark Mode Toggle: User preference support
- Multi-language Support: Internationalization
- CMS Integration: Content management system
- GSAP Team: For the incredible animation library
- Vercel: For seamless deployment and hosting
- Design Community: Inspiration from Awwwards and other design galleries
- Open Source: All the amazing open-source tools and libraries used
⭐ If this portfolio inspires you, please give it a star on GitHub!
Built with ❤️ by Prashant Koirala