Building an Animated Portfolio with HTML, CSS, and JavaScript: A Vanilla Web Dev Journey

Introduction

Every developer needs a portfolio to showcase their skills, and sometimes, the simplest tools create the most impactful results. My latest project is a simple animated portfolio built using HTML, CSS, and JavaScript, designed to present my work with a touch of flair through subtle animations. Hosted live on GitHub Pages, this single-page website is a testament to the power of vanilla web technologies for creating responsive, engaging, and professional interfaces. Unlike my previous React-based projects, this portfolio embraces a back-to-basics approach, focusing on clean code, smooth animations, and accessibility. In this Dev.to post, I’ll walk you through the project’s features, technical details, challenges faced, and lessons learned, hoping to inspire fellow developers—especially beginners—to dive into vanilla JavaScript and build their own portfolios.

Project Overview

This animated portfolio is a single-page website that serves as a digital resume, featuring sections like Home, About, Skills, Projects, and Contact. The design prioritizes simplicity, responsiveness, and animation to create an engaging user experience. Key aspects include:

HTML: Provides the semantic structure for all sections, ensuring accessibility and SEO-friendliness.

CSS: Powers responsive layouts, modern styling, and keyframe animations for visual appeal.

JavaScript: Adds interactivity, such as smooth scrolling, animated section reveals, and a dynamic navbar.

Hosted on GitHub Pages, the portfolio is lightweight and accessible, making it an ideal showcase for my skills in vanilla web development. This project was a refreshing contrast to my framework-heavy projects, allowing me to deepen my understanding of core web technologies.

Technical Details

The portfolio is built with a minimalist stack, relying entirely on vanilla web technologies:

HTML: Semantic HTML5 for structuring content, with elements like , , and for clarity.

CSS: Custom styles with CSS3, including Flexbox, Grid, and keyframe animations, plus media queries for responsiveness.

JavaScript: Vanilla JavaScript for interactivity, manipulating the DOM for animations and event handling.

Version Control: Git for tracking changes, hosted on GitHub.

Deployment: GitHub Pages for free, reliable hosting of the static site.

Other Tools: VS Code for development, with extensions like Live Server for real-time previews, and Chrome DevTools for debugging.

This stack was chosen for its accessibility to beginners and its ability to create a polished portfolio without external dependencies, aligning with my goal of mastering vanilla web development.

Feature Breakdown

1. HTML: Semantic and Accessible Structure

The portfolio’s foundation is semantic HTML5, ensuring the site is well-structured, accessible, and search-engine-friendly. Key implementations include:

Sectioned Layout: Each part (Home, About, Skills, Projects, Contact) is wrapped in a with unique IDs for navigation.

Accessible Markup: Elements like , , and ARIA attributes (e.g., aria-label) improve screen reader compatibility.

Clean Code: Minimal, well-commented HTML keeps the structure lightweight and easy to maintain.

Semantic HTML not only enhanced accessibility but also made styling and scripting more intuitive, as classes and IDs were logically organized.

2. CSS: Responsive Design and Animations

CSS drives the portfolio’s visual appeal, delivering a responsive, modern design with smooth animations. Key features include:

Responsive Layouts: Flexbox and CSS Grid create fluid layouts, with media queries adjusting font sizes, margins, and card arrangements for mobile, tablet, and desktop screens.

Modern Styling: A clean color palette (e.g., soft blues, whites), Google Fonts for typography, and subtle shadows create a professional look.

Keyframe Animations: CSS @keyframes animate elements like fading in sections, sliding project cards, and pulsing buttons on hover.

Sticky Navbar: A fixed with CSS position: sticky ensures easy access to sections, with a mobile-friendly hamburger menu triggered by media queries.

Testing across devices ensured the design remained consistent, with animations optimized for performance using transform and opacity to leverage GPU acceleration.

3. JavaScript: Interactivity and Dynamic Animations

Vanilla JavaScript adds interactivity and enhances the portfolio’s animations, making it feel dynamic without relying on frameworks. Key functionalities include:

Smooth Scrolling: JavaScript’s scrollIntoView({ behavior: 'smooth' }) enables seamless navigation when clicking navbar links.

Scroll-Triggered Animations: Intersection Observer API detects when sections enter the viewport, triggering CSS classes for fade-ins or slides.

Hamburger Menu: A toggle function shows/hides the mobile navbar, with a CSS transition for a smooth effect.

Dynamic Content: JavaScript populates the Projects section by looping through an array of project objects, appending cards to the DOM.

JavaScript was kept minimal to maintain performance, with event listeners optimized to avoid memory leaks.

Challenges Faced

Building this portfolio with vanilla technologies presented several challenges, each offering valuable insights:

Responsive Design Complexity: Crafting a mobile-friendly hamburger menu and ensuring card layouts worked on all screen sizes required careful media query planning.

Animation Performance: Early CSS animations caused jank on low-end devices. I optimized them by using transform instead of top/left and reducing animation durations.

JavaScript DOM Manipulation: Dynamically generating project cards without a framework was initially tricky, requiring a solid grasp of createElement and appendChild.

Intersection Observer: Learning the Intersection Observer API for scroll animations was challenging but rewarding, as it eliminated jQuery-like dependencies.

GitHub Pages Deployment: Configuring GitHub Pages for a custom domain (if used) and ensuring assets loaded correctly involved troubleshooting relative paths.

Lessons Learned

This project reinforced my appreciation for vanilla web development and taught me several key lessons:

Vanilla is Powerful: HTML, CSS, and JavaScript alone can create sophisticated, animated websites without frameworks.

Semantics Matter: Proper HTML structure improved accessibility and made debugging easier.

Performance is Key: Optimizing animations and minimizing JavaScript kept the site fast, especially on mobile.

GitHub Pages is Awesome: Free hosting with Git integration simplified deployment, perfect for small projects.

Debugging Builds Confidence: Using Chrome DevTools to trace CSS and JavaScript issues honed my problem-solving skills.

Future Plans

While the portfolio is fully functional as a static site, I have ideas to enhance it:

More Animations: Experiment with advanced CSS animations or JavaScript libraries like GSAP for complex effects.

Accessibility Audit: Improve ARIA attributes and test with screen readers for better inclusivity.

Content Updates: Regularly update the Projects section with new work, possibly using a JSON file for easier management.

Performance Optimization: Implement lazy loading for images and minify CSS/JavaScript for faster load times.

Conclusion

Building this animated portfolio with HTML, CSS, and JavaScript was a refreshing dive into vanilla web development, proving that simple tools can create stunning results. From semantic markup to responsive layouts, smooth animations, and dynamic interactivity, every element was crafted to showcase my skills in a professional, engaging way. Hosted on GitHub Pages, the portfolio is a lightweight, accessible showcase of what’s possible without frameworks. The challenges I faced—optimizing animations, mastering the Intersection Observer, and deploying on GitHub—taught me the value of persistence and attention to detail. I hope this project inspires you to explore vanilla JavaScript or build your own portfolio! Visit the live site at syedshabeh.github.io or Share your thoughts or connect in the comments—I’d love to hear from you!

Built with 💻 and 🎨 by Syed Shabeh