Soumil Mukhopadhyay | Personal Portfolio

A modern, interactive portfolio website showcasing my skills, projects, and experience as a software engineer. Built with cutting-edge web technologies featuring 3D elements, smooth animations and responsive design.

Features

• 3D Computer Model - Interactive Three.js scene
• Scrambled Text Animation - Dynamic text effects
• Hover & Expand Tech Skills - Interactive technology showcase
• Project Showcase - Animated project cards with GitHub links
• Responsive Design - Works on all device sizes
• Smooth Animations - Framer Motion transitions
• Dual Mode Aesthetic - Easy-on-the-eyes design
• Starry Background - Particle-like, with 3 hooks utilized

Technologies Used

Frontend

• React.js - Frontend framework
• Tailwind CSS - Utility-first CSS framework
• Framer Motion - Animation library
• Three.js - 3D graphics library
• React Three Fiber - Three.js for React

Backend & Deployment

• Vite - Build tool
• Vercel - Deployment platform
• Python - For preprocessing & displaying light-mode 3D animations

Sections

1. Hero Section - Introduction with animated text, resume and info cards
2. About - Overview with service cards
3. Experience - Work history timeline
4. Open Source - Showcase of merged PRs / contributions made to prominent OSS
5. Achievements - Honors and awards
6. Projects - Showcase of featured work
7. Heatmap - Dynamically updating GitHub heatmap showcase
8. Skills - Categorically classified tech stack
9. Certifications - Professional credentials
10. Contact - 3D computer and contact form

Installation

To run this project locally:

1. Clone the repository:

   git clone https://github.com/Soumilgit/Soumil_Portfolio.git

2. Navigate to the project directory:

   cd Soumil_Portfolio

3. Install dependencies:

   npm install

4. Start the development server:

   npm run dev

Customization

To personalize this portfolio:

1. Update personal information & work, skillset etc. details in src/constants/index.js
2. Replace 3D model in public/desktop_pc/
3. Adjust colors in tailwind.config.cjs, src/index.css and src/styles.js
4. Add your own flavour in existing files under folders Marquees, svg, utils etc.

Recent Updates

• Dual-Theme Support (Light & Dark): Full implementation of light and dark mode toggles with customized CSS themes. Light mode includes a custom grayscale-processed aurora background and white-bg versions of images.
• Asset Preprocessing Script: Added a Python script (scripts/preprocess_light_assets.py) that handles grayscale mapping of image/animation frame elements, specifically adjusting contrast for the background sky, aurora waves, and star particles.
• Theme-Aware Media Assets: Dynamic asset loading in components like Hero and Achievements (e.g., swapping between codolio.png / codolio-dark.png and light/dark circular logo variants for Emfinity).
• ESM & SSR Interop Optimization: Resolved production-minified React Error #130 crashes by introducing robust interop checks to handle double-default wrapped CommonJS libraries (react-fast-marquee and react-github-calendar) in ESM/Vite environments.
• Re-ordered positioning of components for better UX: First, I swapped the positions of Skillset with Achievements, then, further swapped the positions of Skillset with Projects. Finally, applied the same reordering across the navlinks as well.

Performance

• Optimized 3D assets
• Lazy loading components
• Efficient animations
• Responsive image handling

License

This project is licensed under the MIT License.

Connect with Me

• GitHub
• LinkedIn
• X
• Instagram