Complete Portfolio Project

Bring everything together — build a complete responsive portfolio website using the component library, with dark mode, animations, and accessibility.

50 min•By Priygop Team•Last updated: Feb 2026

Portfolio Project Assembly

Project Structure: index.html + css/tokens.css + css/reset.css + css/components.css + css/layout.css + css/utilities.css. Import order in HTML: reset → tokens → components → layout → utilities
Hero Section: Full-viewport gradient background with animated text — use @keyframes fadeInUp for title, subtitle staggered with animation-delay. Call-to-action buttons using .btn-primary and .btn-secondary
Skills Section: CSS Grid auto-fit cards — each card shows skill icon, name, proficiency bar (width as percentage with transition for animation on scroll using IntersectionObserver + class toggle)
Projects Gallery: Responsive grid with hover overlay — .project-card img + .project-overlay with opacity: 0 transitioning to opacity: 1 on hover. Overlay shows title, description, and links
Contact Form: Styled form with floating labels — input:focus + label or input:not(:placeholder-shown) + label moves label up with transform: translateY(-100%). Custom radio/checkbox with appearance: none
Dark Mode Toggle: [data-theme='dark'] selector swaps all semantic tokens. Toggle button with smooth transition on background/color. Store preference in localStorage. Respect prefers-color-scheme as default

Try It Yourself: CSS Component Library

Try It Yourself: CSS Component LibraryCSS

CSS Editor

✓ ValidTab = 2 spaces

<!DOCTYPE html>
<html>
<head>
<style>
  * { #9cdcfe">box-sizing: border-box; #9cdcfe">margin: 0; }
  body{ #9cdcfe">font-family: Arial, sans-serif; #9cdcfe">padding: 20px; #9cdcfe">background: #f8fafc; }
  h2{ #9cdcfe">color: #7c3aed; #9cdcfe">margin-bottom: 16px; }
  .grid{ #9cdcfe">display: grid; #9cdcfe">grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); #9cdcfe">gap: 16px; #9cdcfe">margin: 16px 0; }
  .card{ #9cdcfe">background: white; #9cdcfe">border-radius: 12px; #9cdcfe">padding: 20px; #9cdcfe">box-shadow: 0 2px 8px rgba(0,0,0,0.08); #9cdcfe">transition: transform 0.2s, box-shadow 0.2s; }
  .#9cdcfe">card:hover { #9cdcfe">transform: translateY(-4px); #9cdcfe">box-shadow: 0 8px 20px rgba(0,0,0,0.12); }
  .card h3{ #9cdcfe">font-size: 16px; #9cdcfe">margin-bottom: 8px; }
  .card p{ #9cdcfe">font-size: 13px; #9cdcfe">color: #64748b; #9cdcfe">line-height: 1.5; }
  .btn{ #9cdcfe">display: inline-block; #9cdcfe">padding: 8px 20px; #9cdcfe">border-radius: 6px; #9cdcfe">font-weight: bold; #9cdcfe">font-size: 13px; #9cdcfe">cursor: pointer; #9cdcfe">border: none; #9cdcfe">margin: 4px; #9cdcfe">transition: all 0.2s; }
  .btn-primary{ #9cdcfe">background: #7c3aed; #9cdcfe">color: white; }
  .#9cdcfe">btn-primary:hover { #9cdcfe">background: #6d28d9; }
  .btn-outline{ #9cdcfe">background: transparent; #9cdcfe">border: 2px solid #7c3aed; #9cdcfe">color: #7c3aed; }
  .badge{ #9cdcfe">display: inline-block; #9cdcfe">padding: 4px 10px; #9cdcfe">border-radius: 20px; #9cdcfe">font-size: 11px; #9cdcfe">font-weight: bold; }
  .badge-green{ #9cdcfe">background: #dcfce7; #9cdcfe">color: #166534; }
  .badge-blue{ #9cdcfe">background: #dbeafe; #9cdcfe">color: #1e40af; }
  .badge-red{ #9cdcfe">background: #fee2e2; #9cdcfe">color: #991b1b; }
  .avatar{ #9cdcfe">width: 40px; #9cdcfe">height: 40px; #9cdcfe">border-radius: 50%; #9cdcfe">background: linear-gradient(135deg, #7c3aed, #2563eb); #9cdcfe">display: flex; #9cdcfe">align-items: center; #9cdcfe">justify-content: center; #9cdcfe">color: white; #9cdcfe">font-weight: bold; #9cdcfe">margin-bottom: 8px; }
</style>
</head>
<body>
  <h2>🧩 Reusable CSS Components</h2>
  <p style="#9cdcfe">color:#64748b;#9cdcfe">margin-bottom:16px";>Edit the CSS above to customize these #9cdcfe">components:<;/p>
  <div class="grid">
    <div class="card"><div class="avatar">A</div><h3>Card Component</h3><p>A reusable card with hover animation.</p><span class="badge badge-green">Active</span></div>
    <div class="card"><div class="avatar">B</div><h3>Profile Card</h3><p>Cards with avatars and badges.</p><span class="badge badge-blue">New</span></div>
    <div class="card"><div class="avatar">C</div><h3>Status Card</h3><p>Cards showing different statuses.</p><span class="badge badge-red">Urgent</span></div>
  </div>
  <div style="#9cdcfe">margin-top:16px";><button class="btn btn-primary">Primary Button</button><button class="btn btn-outline">Outline Button</button></div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<style>
  * { box-sizing: border-box; margin: 0; }
  body { font-family: Arial, sans-serif; padding: 20px; background: #f8fafc; }
  h2 { color: #7c3aed; margin-bottom: 16px; }
  .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin: 16px 0; }
  .card { background: white; border-radius: 12px; padding: 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); transition: transform 0.2s, box-shadow 0.2s; }
  .card:hover { transform: translateY(-4px); box-shadow: 0 8px 20px rgba(0,0,0,0.12); }
  .card h3 { font-size: 16px; margin-bottom: 8px; }
  .card p { font-size: 13px; color: #64748b; line-height: 1.5; }
  .btn { display: inline-block; padding: 8px 20px; border-radius: 6px; font-weight: bold; font-size: 13px; cursor: pointer; border: none; margin: 4px; transition: all 0.2s; }
  .btn-primary { background: #7c3aed; color: white; }
  .btn-primary:hover { background: #6d28d9; }
  .btn-outline { background: transparent; border: 2px solid #7c3aed; color: #7c3aed; }
  .badge { display: inline-block; padding: 4px 10px; border-radius: 20px; font-size: 11px; font-weight: bold; }
  .badge-green { background: #dcfce7; color: #166534; }
  .badge-blue { background: #dbeafe; color: #1e40af; }
  .badge-red { background: #fee2e2; color: #991b1b; }
  .avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, #7c3aed, #2563eb); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; margin-bottom: 8px; }
</style>
</head>
<body>
  <h2>🧩 Reusable CSS Components</h2>
  <p style="color:#64748b;margin-bottom:16px">Edit the CSS above to customize these components:</p>
  <div class="grid">
    <div class="card"><div class="avatar">A</div><h3>Card Component</h3><p>A reusable card with hover animation.</p><span class="badge badge-green">Active</span></div>
    <div class="card"><div class="avatar">B</div><h3>Profile Card</h3><p>Cards with avatars and badges.</p><span class="badge badge-blue">New</span></div>
    <div class="card"><div class="avatar">C</div><h3>Status Card</h3><p>Cards showing different statuses.</p><span class="badge badge-red">Urgent</span></div>
  </div>
  <div style="margin-top:16px"><button class="btn btn-primary">Primary Button</button><button class="btn btn-outline">Outline Button</button></div>
</body>
</html>

Result

Click ▶ Run to see the result

Edit the code on the left, then click Run

CSS|34 lines|2384 chars|✓ Valid syntax

UTF-8

Quick Quiz — CSS Projects

Next Module →