🏁 Day 30 — Final Project: JavaScript Portfolio App

Hey Guys Congratulations! You’ve reached Day 30 — the final step of the JavaScript Advanced Course. Keep Learning Today, you will build a complete, interactive Portfolio Web Application using pure JavaScript, DOM manipulation, LocalStorage, and responsive UI techniques. This project showcases all your skills and is perfect for your resume, GitHub, and job applications.

---

🎯 1. What We Are Building

This final project is a fully interactive portfolio website built using HTML, CSS, and JavaScript only — no frameworks. Your portfolio will include:

• Navbar with smooth scrolling
• Animated hero section
• Projects section with filters
• Skills section with dynamic bars
• Contact form (with LocalStorage backup)
• Dark/Light theme switcher
• Scroll reveal animations
• Responsive layout for mobile & desktop

This project demonstrates mastery of front-end fundamentals and modern JavaScript practices.

---

📁 2. Folder Structure

portfolio-app/
│── index.html
│── style.css
└── script.js

This keeps everything clean, modular, and easy to deploy.

---

🧱 3. Building the HTML Structure

✔ Navbar + Hero Section

  

    
Home
    
Skills
    
Projects
    
Contact
  



  
Hello, I'm Rahul
  
Frontend Developer | JavaScript Enthusiast
  

✔ Skills Section (Dynamic Bars)

  
Skills
  

    JavaScript
    

  
  

    React
    

  

✔ Projects Section (Filterable)

  
Projects

  

    
    
    
  

  

✔ Contact Form

  
Contact Me

  
  
  
  

  

Now we attach interactivity using JavaScript.

---

⚙ 4. JavaScript Features (Detailed)

✔ Smooth Scrolling Navbar

document.querySelectorAll("nav a").forEach(link => {
  link.onclick = (e) => {
    e.preventDefault();
    const target = document.querySelector(link.getAttribute("href"));
    target.scrollIntoView({ behavior: "smooth" });
  };
});

✔ Dynamic Skill Bars Animation

Bars animate when the user scrolls into the skills section.

const skillBars = document.querySelectorAll(".bar");

window.addEventListener("scroll", () => {
  const trigger = window.innerHeight - 100;
  skillBars.forEach(bar => {
    const top = bar.getBoundingClientRect().top;
    if (top < trigger) {
      bar.style.width = bar.dataset.level + "%";
    }
  });
});

✔ Projects Loaded Dynamically

Project data array:

const projects = [
  { title:"Todo App", cat:"js" },
  { title:"Weather App", cat:"api" },
  { title:"Portfolio", cat:"js" }
];

Rendering logic:

const projectList = document.getElementById("projectList");

function renderProjects(filter="all"){
  projectList.innerHTML = "";
  projects
    .filter(p => filter==="all" || p.cat===filter)
    .forEach(p => {
      const div = document.createElement("div");
      div.className = "project";
      div.textContent = p.title;
      projectList.appendChild(div);
    });
}
renderProjects();

Filter buttons:

document.querySelectorAll(".filters button").forEach(btn => {
  btn.onclick = () => renderProjects(btn.dataset.filter);
});

✔ Dark / Light Theme Toggle

This uses LocalStorage for theme persistence.

const themeBtn = document.getElementById("themeToggle");

themeBtn.addEventListener("click", () => {
  document.body.classList.toggle("dark");
  localStorage.setItem("theme", 
    document.body.classList.contains("dark") ? "dark" : "light"
  );
});

Load theme on startup:

if (localStorage.getItem("theme") === "dark"){
  document.body.classList.add("dark");
}

✔ Contact Form Auto-Save (LocalStorage)

This prevents data loss if the page refreshes.

const nameField = document.getElementById("name");
const emailField = document.getElementById("email");
const msgField = document.getElementById("msg");

document.querySelectorAll("#contact input, #contact textarea")
  .forEach(el => {
    el.addEventListener("input", () => {
      localStorage.setItem("contact", JSON.stringify({
        name: nameField.value,
        email: emailField.value,
        msg: msgField.value
      }));
    });
});

Load saved form data:

const saved = JSON.parse(localStorage.getItem("contact"));
if (saved){
  nameField.value = saved.name;
  emailField.value = saved.email;
  msgField.value = saved.msg;
}

✔ Scroll Reveal Animations

Add animation classes on scroll.

const reveals = document.querySelectorAll("section");

window.addEventListener("scroll", () => {
  reveals.forEach(sec => {
    const pos = sec.getBoundingClientRect().top;
    if (pos < window.innerHeight - 100){
      sec.classList.add("reveal");
    }
  });
});

You can define fade/slide animation in CSS.

---

🎨 5. CSS Styling Essentials

A modern portfolio UI uses minimal shadows, clean typography, spacing, and smooth transitions.

body.dark {
  background:#121212;
  color:#eee;
}

nav {
  display:flex;
  justify-content:center;
  gap:20px;
}

.project {
  background:#e1f5fe;
  padding:12px;
  margin-bottom:10px;
  border-radius:6px;
}

You can expand this with animations and hover effects.

---

🧪 6. Full Project Demo (Embed)

---

📝 7. Enhancement Ideas

Add any of these to make your portfolio portfolio-ready:

• Section animations using IntersectionObserver
• Responsive hamburger menu
• Custom cursor
• 3D hover effects
• Downloadable resume button
• Project modals with screenshots
• Testimonials slider
• Theme presets (dark, light, blue, neon)

---

🏆 8. Summary — You Built a Capstone Project!

Congratulations Rahul! You have completed a **full, interactive, multi-section JavaScript Portfolio App** using only vanilla JS. You applied:

• DOM manipulation
• Form handling
• Animations
• LocalStorage persistence
• Dynamic rendering
• Theme switching
• Smooth scrolling
• Component-based UI ideas

This project is strong enough to be added to your **GitHub**, **Resume**, and **Portfolio** right away.

← Prev Next →