--- title: "Build an Animated Portfolio Website - HTML CSS Project with Dark Mode | Modern Age Coders" description: "Build a stunning animated portfolio website with HTML and CSS. Includes smooth scroll, gradient hero, animated skill bars, project grid with hover effects, contact form, dark/light mode toggle, scroll animations, and glassmorphism. Complete code and 55+ questions." slug: project-animated-portfolio-website canonical: https://learn.modernagecoders.com/resources/html-and-css/project-animated-portfolio-website/ category: "HTML and CSS" keywords: ["portfolio website html css", "animated portfolio project", "dark mode css", "skill bars css", "glassmorphism css", "scroll animations css", "portfolio tutorial", "hover effects", "css portfolio for students", "responsive portfolio"] --- # Project: Build an Animated Portfolio Website **Difficulty:** Advanced **Reading time:** 65 min **Chapter:** 25 **Practice questions:** 55 ## What We Are Building This is the final project of the HTML and CSS track — a **stunning animated portfolio website** built entirely with HTML and CSS. One tiny sliver of JavaScript is used for the dark mode toggle (literally 3 lines), but everything visual — animations, hover effects, scroll reveals, glassmorphism, gradients — is pure CSS. The portfolio includes: 1. **Fixed navbar** with smooth anchor scrolling 2. **Hero section** with gradient text, animated background, and a pulsing CTA 3. **About section** with a glowing avatar and bio 4. **Skills section** with animated progress bars that fill on hover 5. **Projects grid** with beautiful hover effects revealing project details 6. **Contact form** with modern validation styling and `:has()` 7. **Dark/light mode toggle** using CSS variables + 3 lines of JS 8. **Scroll animations** with `@keyframes` and `animation-delay` 9. **Glassmorphism cards** with backdrop-filter: blur() 10. **Gradient borders** and neon glow effects 11. **Fully responsive** from phone to desktop The portfolio belongs to 'Aarav Kulkarni' — a 16-year-old full-stack developer from Pune. His bio, projects, and skills tell a coherent story that you can easily customize with your own content. ## Why Build an Animated Portfolio? ### 1. It Is Your Calling Card A portfolio is the first thing any internship, college, or client will look at. A custom-built portfolio (not a template) screams 'this person can actually build things'. It is worth 10x any line on a resume. ### 2. It Uses Everything You Have Learned This project combines flexbox, grid, CSS variables, pseudo-elements, `:has()`, `@keyframes`, `clamp()`, transforms, transitions, and the modern CSS features from Chapter 23. Building it proves you can use the full toolbox. ### 3. Animations Make It Feel Alive Smooth hover effects, scroll-in reveals, pulsing CTAs, and animated skill bars are what separate an 'okay' portfolio from one that looks like a professional product. These effects cost nothing to build once you know the patterns. ### 4. Dark Mode Shows Attention to Detail A working dark mode with smooth transitions tells the viewer you care about user experience. It is also a chance to flex CSS variables in their best light. ### 5. It Is Yours to Keep By the end of this chapter, Priya has a portfolio she can host, share, and update. She swaps in her real projects, changes the brand color, and ships. That confidence is worth more than any tutorial. ## Building the Portfolio Step by Step ### Step 1: Set Up Variables and Theme Start with a dual theme: dark mode on by default (more impressive for a portfolio), light mode as an override. Define every color, spacing, radius, and shadow as a variable. ``` :root { --bg: #0b0f1e; --surface: #131833; --surface-2: #1a2040; --text: #f1f5f9; --muted: #94a3b8; --brand: #a855f7; --brand-2: #06b6d4; --accent: #ec4899; --border: rgba(255,255,255,0.08); } body.light { --bg: #fafafa; --surface: #ffffff; --surface-2: #f8fafc; --text: #0f172a; --muted: #64748b; --border: #e2e8f0; } ``` ### Step 2: Fixed Navbar with Smooth Scroll ``` html { scroll-behavior: smooth; } .nav { position: fixed; top: 0; width: 100%; padding: 16px 32px; background: rgba(11, 15, 30, 0.7); backdrop-filter: blur(20px); border-bottom: 1px solid var(--border); z-index: 100; } ``` Fixed at the top, blurred background for the frosted glass look, and smooth scrolling so anchor links animate. ### Step 3: Hero with Animated Background The hero has a gradient heading, a pulsing CTA, and an animated background that slowly shifts colors. ``` .hero { min-height: 100dvh; display: grid; place-items: center; position: relative; overflow: hidden; } .hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 30% 20%, rgba(168,85,247,0.3), transparent 60%), radial-gradient(ellipse at 70% 80%, rgba(6,182,212,0.25), transparent 60%); animation: float 20s ease-in-out infinite; } @keyframes float { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(30px, -20px) scale(1.1); } } .hero h1 { font-size: clamp(40px, 7vw, 84px); line-height: 1.05; text-wrap: balance; background: linear-gradient(135deg, var(--brand), var(--brand-2), var(--accent)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: fadeUp 0.8s ease-out; } @keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } ``` ### Step 4: Skills with Animated Bars ``` .skill-bar { height: 10px; background: var(--surface-2); border-radius: 999px; overflow: hidden; } .skill-fill { height: 100%; background: linear-gradient(90deg, var(--brand), var(--brand-2)); border-radius: 999px; width: var(--width, 0); animation: fill 1.5s ease-out forwards; } @keyframes fill { from { width: 0; } to { width: var(--width); } } ``` The bar width is driven by a `--width` CSS variable on the element, so each skill can have a different value without new CSS rules. ### Step 5: Project Cards with Hover Reveals ``` .project { position: relative; border-radius: 18px; overflow: hidden; aspect-ratio: 4/3; cursor: pointer; } .project .thumb { width: 100%; height: 100%; background: gradient; transition: transform 0.5s, filter 0.5s; } .project:hover .thumb { transform: scale(1.08); filter: brightness(0.5); } .project .info { position: absolute; inset: 0; padding: 24px; color: white; display: flex; flex-direction: column; justify-content: flex-end; opacity: 0; transform: translateY(20px); transition: opacity 0.4s, transform 0.4s; } .project:hover .info { opacity: 1; transform: translateY(0); } ``` ### Step 6: Glassmorphism Cards ``` .glass { background: rgba(255,255,255,0.05); backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.1); border-radius: 20px; } ``` ### Step 7: Dark Mode Toggle Pure CSS dark mode is fine, but since we want a persistent toggle that remembers the user's choice, we use 3 lines of JavaScript to toggle a `.light` class on the body. ``` Toggle document.getElementById('themeBtn').addEventListener('click', () => { document.body.classList.toggle('light'); }); ``` Three lines. That is all. The CSS variables do the rest. ### Step 8: Scroll Animations Elements animate in as they enter the viewport using CSS animations with `animation-delay` to stagger them. ``` .reveal { opacity: 0; transform: translateY(40px); animation: reveal 0.8s ease-out forwards; } .reveal:nth-child(2) { animation-delay: 0.15s; } .reveal:nth-child(3) { animation-delay: 0.3s; } @keyframes reveal { to { opacity: 1; transform: translateY(0); } } ``` For true 'animate on scroll', you would use the Intersection Observer API (JavaScript). For a CSS-only effect, we simply animate everything on load with staggered delays — it still looks great. Now let us see the ENTIRE animated portfolio in one complete, runnable file. ## Code Examples ### COMPLETE Animated Portfolio - Full HTML + CSS ```html Aarav Kulkarni - Full Stack Developer
Aarav.dev
Available for internships

Aarav Kulkarni
Full Stack Developer

I am a 16-year-old developer from Pune who builds fast, beautiful web apps with React, Node, and a love for CSS animations.

View My Work Get In Touch
About Me

Building the Web, One Pixel at a Time

A little background about who I am and what I love.

A

Hi, I am Aarav

I started coding when I was 13, inspired by a game my older sister Priya was building. Four years later, I have shipped a dozen projects, contributed to open source, and helped my classmates build their first websites.

When I am not coding, I play chess, read sci-fi, and practice competitive maths with Rohan and Ishita. I am currently in Grade 11 at a school in Pune, and I am looking for a summer internship.

React Next.js TypeScript Node.js CSS Chess Open Source
Skills

What I Work With Every Day

The tools and languages I use to build things.

HTML and CSS95%
JavaScript and TypeScript90%
React and Next.js85%
Node.js75%
Python70%
Design (Figma)65%
Work

Selected Projects

A few things I am proud of. Hover to see details.

Kalpana Quiz

A multiplayer quiz app with live scoring and leaderboards.

ReactSocket.ioMongoDB

Trishul Weather

Fast weather dashboard with beautiful charts and forecasts.

Next.jsChart.jsOpenWeather

ShikshaBot

An AI homework helper trained on class 10 and 11 textbooks.

PythonOpenAIFlask

Chess Tracker

Track your chess games, rating, and opening repertoire.

ReactFirebase

Bhasha Notes

Bilingual note-taking app that translates as you type.

TypeScripti18next

VedaTimer

Pomodoro timer with a chakra-themed minimalist design.

HTMLCSSJS
Contact

Let Us Build Something

I am available for internships and freelance work.

``` The complete animated portfolio in a single file. Dark mode by default. Uses CSS variables for theming, clamp() for fluid typography, @keyframes for fade-up hero animations, animated background gradients, animated skill bars with CSS variables for width, project hover effects with transform and filter, glassmorphism contact form with :has() validation, and a smooth dark/light mode toggle. Three lines of JavaScript. Everything else is pure CSS. **Output:** ``` A stunning portfolio with: animated gradient background hero, gradient text heading, pulsing CTAs, glowing avatar, animated skill bars, 6 project cards with dramatic hover effects, a glassmorphism contact form with live validation, and a working dark/light mode toggle. Fully responsive. ``` ### Hero with Animated Gradient Background ```html

Priya Sharma
Web Developer

I build fast, beautiful web apps from Pune. Currently looking for my first internship.

View My Work
``` A standalone animated hero section. The background uses three radial gradients layered together, slowly floating with `@keyframes floatBg`. The heading, paragraph, and button each fade up with staggered `animation-delay`. Gradient text uses `background-clip: text`. **Output:** ``` A dark hero with soft purple, cyan, and pink glows drifting in the background. A huge gradient heading fades up, followed by the subtitle and CTA button. A cohesive, high-quality intro. ``` ### Project Card with Hover Reveal ```html

Kalpana Quiz

A multiplayer quiz with live scoring and leaderboards.

ReactSocket.io

Trishul Weather

Beautiful weather dashboard with charts and forecasts.

Next.jsChart.js

ShikshaBot

An AI homework helper trained on NCERT textbooks.

PythonOpenAI
``` Each project card shows only its title (peeking from the bottom) by default. On hover, the card lifts, the thumbnail zooms in and darkens, and the title-wrap slides fully into view showing the description and tech tags. A dramatic, interactive pattern using only transforms and filters. **Output:** ``` Three colorful project cards. Hovering any card lifts it up, darkens the thumbnail, zooms it slightly, and reveals a description and tech tags from the bottom edge. ``` ### Animated Skill Bars with CSS Variable Width ```html

Ishita's Skills

HTML and CSS95%
JavaScript88%
React80%
Python65%
``` The key trick: each skill bar's target width is set via an inline CSS variable (`style="--width: 95%"`). The `@keyframes fill` animation reads that variable with `width: var(--width)`. One animation, one class, different values per bar. Much cleaner than writing a separate animation per skill. **Output:** ``` Four skill bars that smoothly fill from 0 to their target width when the page loads. Each bar has a neon glow. Hovering the row slides it slightly right and highlights the border. ``` ### Glassmorphism Contact Form with :has() Validation ```html

Contact Ishaan

``` A glassmorphism form: semi-transparent background, `backdrop-filter: blur(25px)`, and soft borders. The form reacts with `:has()`: red border if any field is invalid, green glow if all fields are valid. Submit button is disabled while invalid. Background radial gradients add depth behind the glass. **Output:** ``` A beautiful frosted-glass form floating on a dark background with soft purple and cyan glows. As you type, the border changes color based on validation state. Submit is disabled until everything is valid. ``` ### Dark/Light Mode Toggle with CSS Variables ```html

Kavya's Notes

This entire page switches between dark and light mode with one CSS class toggle. Every color is a variable, and the body.light class overrides them. Try the button in the top-right corner.

The transition on background and color makes the switch smooth. No external libraries, no complicated JavaScript — just three lines of JS and CSS variables.

``` The simplest possible dark mode toggle. CSS variables for all colors on `:root` (dark defaults). Override them on `body.light` (light mode). A `transition` on `background` and `color` makes the switch smooth. JavaScript is just 3 lines: toggle the class, update button text. That is it. **Output:** ``` A card on a dark background. Clicking the top-right button smoothly transitions the entire page to a clean light theme. Click again to go back. The button text updates to reflect the current action. ``` ## Common Mistakes ### Using overflow: hidden on the body (Breaks Sticky/Fixed) **Wrong:** ``` body { overflow: hidden; } /* Hoping to stop horizontal scroll */ ``` `overflow: hidden` on body kills vertical scroll too. The whole page becomes unscrollable. **Correct:** ``` body { overflow-x: hidden; } /* Only stops horizontal scroll */ ``` If your animated background is causing a horizontal scrollbar, use `overflow-x: hidden` on the body to prevent it. Using plain `overflow: hidden` blocks vertical scrolling too and breaks the whole page. ### Forgetting Fallback Color with background-clip: text **Wrong:** ``` .heading { background: linear-gradient(135deg, red, blue); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; /* In very old browsers, text becomes invisible! */ } ``` If `background-clip: text` is not supported, the text becomes invisible because `-webkit-text-fill-color: transparent` still applies. **Correct:** ``` .heading { color: red; /* Fallback color */ background: linear-gradient(135deg, red, blue); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } ``` Set an explicit `color` as a fallback before the background-clip tricks. In 2026 this is rarely an issue, but it is still good practice for defensive CSS. ### Animating Too Many Properties at Once **Wrong:** ``` .card { transition: all 0.3s; } .card:hover { transform: scale(1.05); box-shadow: 0 20px 50px rgba(0,0,0,0.3); filter: brightness(1.1); background: red; margin: 10px; } ``` `transition: all` animates every changed property, including layout-affecting ones like `margin`. That triggers layout recalculation and causes jank. **Correct:** ``` .card { transition: transform 0.3s, box-shadow 0.3s, filter 0.3s; /* Only animate properties that do not trigger layout */ } .card:hover { transform: scale(1.05); box-shadow: 0 20px 50px rgba(0,0,0,0.3); filter: brightness(1.1); } ``` Prefer `transform`, `opacity`, and `filter` for animations — they are GPU-accelerated. Avoid animating `margin`, `width`, `height`, or `padding` because they force the browser to recalculate layout. ### Gradient Text Not Showing Because of Color **Wrong:** ``` .heading { color: white; background: linear-gradient(135deg, red, blue); background-clip: text; /* Missing -webkit-text-fill-color: transparent */ } ``` The text stays white because the color is not set to transparent. The gradient background is clipped to the text shape but hidden behind the solid color fill. **Correct:** ``` .heading { background: linear-gradient(135deg, red, blue); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; /* standard fallback */ } ``` Background-clip to text only shows through if the text fill is transparent. Use `-webkit-text-fill-color: transparent` (for WebKit) and `color: transparent` as a standard fallback. ## Summary - Start with dark mode variables on `:root` and light mode overrides on `body.light`. A single class toggle flips the whole theme. Add a `transition` on `background` and `color` for a smooth fade. - Use `html { scroll-behavior: smooth }` and `scroll-padding-top` matching your navbar height so anchor links animate to sections with the heading visible below the nav. - Build the hero with `min-height: 100dvh` and layered radial-gradient backgrounds that animate slowly with `@keyframes` for a dreamy ambient effect. - Gradient text: `background: linear-gradient(...); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;`. Always set a fallback `color`. - Stagger entry animations with `animation-delay`: `.eyebrow` at 0s, `h1` at 0.1s, `p` at 0.25s, `.ctas` at 0.4s. The `backwards` fill-mode prevents a flash before the delay. - Animated skill bars: set the target width via an inline `--width` CSS variable on each bar. One `@keyframes fill { to { width: var(--width); } }` animation handles every bar. - Project cards use `aspect-ratio: 4/3`, `overflow: hidden`, and hover effects: scale the thumbnail, darken it, and slide the info overlay up with `transform`. - Glassmorphism = semi-transparent background (`rgba(255,255,255,0.05)`) + `backdrop-filter: blur(20px)` + a thin border. Looks best against a colorful background. - Use `:has()` for a reactive contact form: `form:has(input:valid):not(:has(input:invalid))` matches when every field is valid. Combine with `:not(:placeholder-shown)` so empty fields do not show red immediately. - Three lines of JavaScript is all you need for a persistent dark mode toggle: get the button, add a click listener, toggle a class on the body. - For smooth performance, animate `transform`, `opacity`, and `filter` — not `width`, `height`, `margin`, or `padding`. The first three are GPU-accelerated; the others force layout recalculation. - Neon glow effect: `box-shadow: 0 0 20px rgba(168,85,247,0.5)` or double/triple shadows for depth. Works great on skill bars, buttons, and avatars. ## Related Topics - undefined - undefined - undefined - undefined --- *Source: https://learn.modernagecoders.com/resources/html-and-css/project-animated-portfolio-website/* *Practice questions: https://learn.modernagecoders.com/resources/html-and-css/project-animated-portfolio-website/practice/*