A modern, responsive portfolio website showcasing web development skills, projects, and experience. Built with pure HTML, CSS, and JavaScript featuring smooth animations, dark mode, and optimized performance.
Live Demo: Portfolio Website
- Premium Design: Modern, clean aesthetic with glassmorphism effects
- Responsive Layout: Optimized for all devices and screen sizes
- Dark Mode: System preference detection with manual toggle
- Smooth Transitions: Micro-interactions and hover effects
- Custom Scrollbar: Styled to match the overall theme
- Modular CSS: Organized architecture with reset, variables, base, components, layouts, and animations
- ES6 JavaScript: Clean, maintainable code with modules
- Performance First: Optimized loading and rendering
- Accessible: WCAG compliant with semantic HTML
- Lazy Loading: Images and resources load on demand
- Critical CSS: Above-the-fold styles inlined
- Optimized Assets: Compressed images and minified code
- Fast Loading: Efficient resource management
- Home: Hero section with animated stats and call-to-action
- About: Personal introduction and skills overview
- Skills: Technical expertise with interactive elements
- Experience: Professional background and achievements
- Projects: Portfolio showcase with live demos
- Education: Academic background and certifications
- Contact: Multi-channel contact form and social links
Chinmoy-Kumar-Biswas.github.io/ index.html styles/ reset.css variables.css base.css components.css layouts.css animations.css scripts/ main.js data-loader.js performance.js images/ chinmoy.png pro3.jpg README.md
- HTML5: Semantic markup and accessibility
- CSS3: Modern features including Grid, Flexbox, Custom Properties
- JavaScript ES6+: Modules, Classes, Async/Await
- Web APIs: Intersection Observer, Local Storage, Media Queries
- Git: Version control and deployment
- Any modern browser
- Optional: Local server for development
- Clone the repository
- Navigate to the project folder
- Open with Live Server or simply open index.html in your browser
Open http://localhost:5500 and hard-refresh (Ctrl+F5) if you change scripts.
- Personal information in index.html
- Skills and experience data in scripts/data-loader.js
- Project details and links
- Social media profiles and contact information
- Color schemes in styles/variables.css
- Typography settings in styles/base.css
- Animation preferences in styles/animations.css
- Component styling in styles/components.css
- Add section HTML to index.html
- Style components in styles/components.css
- Add animations if needed in styles/animations.css
- Update navigation in scripts/main.js
- First Contentful Paint: < 1.5s
- Largest Contentful Paint: < 2.5s
- Cumulative Layout Shift: < 0.1
- First Input Delay: < 100ms
The styles are organized in a modular structure:
eset.css - Browser normalization
- �ariables.css - Design tokens and custom properties
- �ase.css - Typography and base elements
- components.css - Reusable UI components
- layouts.css - Grid systems and page layouts
- �nimations.css - Keyframes and transitions
The scripts are organized for maintainability:
- main.js - App initialization and navigation
- data-loader.js - Dynamic content and data management
- performance.js - Loading optimizations and metrics
All content is easily customizable through dedicated data files and clearly marked sections in the HTML.
- Automatic system preference detection
- Manual toggle with persistent storage
- Smooth transition animations
- CSS custom property based implementation
- Scroll-triggered animations using Intersection Observer
- Performance-optimized with will-change properties
- Respects user's motion preferences
- Fallback for older browsers
- Critical CSS inlined
- Lazy loading for images
- Resource hints and preconnections
- Efficient DOM manipulation
- Chrome 60+
- Firefox 55+
- Safari 12+
- Edge 79+
This project is open source and available under the MIT License.
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.