A modern, interactive 3D portfolio showcasing my skills, projects, and experience through immersive visuals, smooth animations, and clean, high-performance design.
- Hero section — Rotating TorusKnot geometry with wireframe overlay, dual orbital rings, and a 300-particle floating field that responds to mouse movement in real time
- Contact section — Three intersecting animated torus rings with a 600-particle ambient cloud
- Skill & achievement cards — CSS 3D perspective tilt effect on hover (mouse-tracked)
- Editorial layout inspired by tajmirul.site — large Bebas Neue display type, outline text, numbered sections
- Warm dark palette (charcoal + gold/amber) with grain noise texture overlay
- Scroll-reveal animations using IntersectionObserver
- Custom ring cursor with hover expansion effect
- Animated gold sweep on project row hover
- Sticky nav with blur backdrop on scroll
- Hero — Name, role, CTA buttons, Three.js canvas background
- About — Career objective + personal statement (no projects listed)
- Skills — 12-card tilt grid covering languages, web, ML, cybersecurity, cloud, tools
- Experience — Internships at Codec Technologies and Eduskills Foundation
- Projects — Secure File Transfer System & AI Supply Chain Risk Predictor
- Certifications — AWS, Oracle, Infosys, GUVI, CodeChef
- Achievements — SIH 2025, SIH 2024, hackathon record
- Education — B.Tech, Class XII, Class X
- Contact — Email, GitHub, LinkedIn, phone with Three.js canvas
| Layer | Technology |
|---|---|
| Markup | HTML5 |
| Styling | CSS3 (custom properties, grid, flexbox) |
| Scripting | Vanilla JavaScript (ES6+) |
| 3D Graphics | Three.js r128 (CDN) |
| Fonts | Google Fonts — Bebas Neue, DM Serif Display, DM Sans |
No frameworks. No build tools. No dependencies to install.
All personal content is in the HTML body. Key areas to update:
| What | Where in the file |
|---|---|
| Name / title | .hero-name and <title> tag |
| Career objective | .about-objective paragraph |
| Skills | .skills-grid — edit .skill-card blocks |
| Experience | #experience — edit .exp-item blocks |
| Projects | #projects — edit .project-item blocks |
| Certifications | #certifications — edit .cert-card blocks |
| Social links | #contact .contact-links and nav |
| Color palette | :root CSS variables at the top of <style> |
:root {
--bg: #080807; /* Page background */
--bg2: #0f0f0d; /* Alternate section background */
--cream: #ede8df; /* Primary text */
--cream2: #c8c2b6; /* Secondary text */
--gold: #c8a96a; /* Accent color */
--muted: #5a5750; /* Muted text */
}Works in all modern browsers (Chrome, Firefox, Safari, Edge). Three.js requires WebGL support, which is available in all current desktop and mobile browsers.
Bhabana Kalita
This project is open source and available under the MIT License.