FabledCircuit

A modern, responsive personal resume website built with pure HTML, CSS, and JavaScript.

Comment

🌟 Inspiration What better way to kick off my hackathon journey than building something centered around me? This project started as the idea of creating a resume website that not only introduces who I am currently but also becomes a living portfolio where I can showcase my hackathons, projects, and milestones as I grow in my Computer Science career. I hope I can take this first experience wherever I am and develop on this first opportunity.

💡 What it does The site serves as a personal resume and portfolio hub, featuring: A modern, responsive layout Light/Dark mode that respects system preferences Interactive social links with theme-aware icons Smooth navigation across sections (About, Skills, Contact, etc.) A foundation to expand with upcoming hackathons and projects (I'm looking forward to it)

🛠️ How I built it HTML5 for structure CSS3 (Flexbox, custom variables, responsive design) for styling Vanilla JavaScript for interactivity (theme toggle, nav menu, icon swaps) Designed to be lightweight and framework-free, ensuring I focus on mastering the basics

⚡ Challenges I ran into Implementing a theme toggle that didn’t override system preferences but still allowed manual control Making icons switch correctly between light and dark mode (Cough Github logo...) Balancing simplicity with modern design so it doesn’t look too “bland” Ensuring the site remained clean and responsive across devices - I didn't wanna focus on one device and forget others, its one for all not an all for one.

🏆 Accomplishments that I'm proud of Built a full resume website from scratch using only HTML, CSS, and JS (I have never used them before) Learned how to integrate system-level dark/light mode detection (After many Flash-bangs at 2am it finally worked) Created a strong foundation for a portfolio that I can keep expanding with future projects and hackathons Learnt and had the courage to do other things like showcase my CV and many more.

📚 What I learned How to properly separate concerns (HTML for structure, CSS for design, JS for logic) Working with prefers-color-scheme and real-time event listeners for system theme changes The importance of designing for responsiveness and readability since this is not only for me but for others as well How small touches like icon swaps and smooth navigation elevate user experience (spent quite a lot of time finding out how)

🔮 What's next for FabledCircuit Add a Hackathons section to showcase every hackathon I join and every app I build (after this one) Include animations and micro-interactions for a more polished experience Explore backend integration (contact forms, analytics) - currently it integrates well with already existing email software Continuously update the resume with new skills, tools, and accomplishments

Built With

Share this project:

Updates