A premium, state-of-the-art single-page personal portfolio website for 2025, designed from Figma and built using pure HTML5, Vanilla CSS3, and JavaScript.
This portfolio is a high-fidelity implementation of the following design:
- Figma Design Link: Figma Project Link
- Floating Pill Navigation: A floating navbar pill styled in light off-white with smooth scroll anchors and dynamic scroll-active highlight classes.
- Professional Circular Avatar: A pixel-perfect profile container displaying a portrait cutout sitting on a solid white backing, complete with an offset outer glowing border ring.
- Unified Card Layouts: Consolidated visual structures where About card grids and Skill item icons use matching rounded card containers (
var(--color-card-bg)). - Responsive Layout Design: Fully adaptive breakpoints (Desktop, Tablet, Mobile) using fluid flexboxes and custom media queries.
- WhatsApp Form Submission: Form submit action integrates WhatsApp's click-to-chat API (
wa.me) prefilled with formatted user details (Name, Email, Message) pointing directly to the developer's chat. - Scroll Reveal Transitions: Staggered scroll entrance animations using
IntersectionObserver.
- Structure: HTML5 (Semantic elements & SEO meta tagging)
- Styling: Vanilla CSS3 (Custom variable tokens, transitions, and keyframe animations)
- Logic: JavaScript ES6 (Scroll intersections, form validations, and tab redirections)
- Typography: Outfit (headings) and Inter (body text) via Google Fonts
- Icons: Custom inline SVGs (for social links and project placeholders) and Devicons (for technical skill logos)
To host the portfolio site locally, you can use any static file server:
- Run
npx http-server(ornpx live-server) inside the root folder:npx http-server -p 8080
- Open http://localhost:8080 in your browser.
- Start Python's built-in HTTP server:
python -m http.server 8000
- Open http://localhost:8000 in your browser.