Personal Portfolio Website

A responsive portfolio showcasing my skills, experience, and projects at the intersection of Medical Laboratory Science, Data Science, AI, and ML

Comment

About the Project

Inspiration

This project is rooted in my journey as a Medical Laboratory Science student who’s also exploring tech and innovation. I’ve always been intrigued by how technology can transform healthcare — and this portfolio became my way of starting to connect those dots.

I wanted a space that didn’t just list skills or achievements, but actually told my story — who I am, what I value, and where I’m heading.

What I Learned

Working on this gave me a deeper understanding of:

  • Building responsive layouts that adapt across devices
  • Writing clean, reusable code in vanilla JavaScript
  • Implementing dark mode with persistent settings using localStorage
  • Leveraging libraries like SwiperJS for interactive components
  • Hosting and deploying static websites using Netlify with GitHub integration

Build Overview

The project is built entirely from scratch using HTML, CSS, and JavaScript. Every component — from animated elements to section transitions — was crafted to offer both clarity and engagement.

Key features include:

  • A dark/light mode toggle
  • A quote-powered preloader for a more meaningful load experience
  • Scroll-triggered animations and dynamic skill indicators
  • A mobile-friendly interface with an animated hamburger menu
  • Modal pop-ups for expanded project details

Challenges

There were definitely moments that tested my problem-solving:

  • Aligning the navbar with the center menu and right-aligned toggles took precision and lots of tweaking
  • Making animations smooth without hurting performance
  • Ensuring responsiveness while keeping the design consistent across screen sizes
  • Persisting user preferences (theme mode) reliably across sessions

Final Thoughts

This portfolio is more than just a showcase — it’s a reflection of my growth, values, and direction. I’m passionate about the intersection of healthcare and tech, and this site tells that story.

Thanks for checking it out. If you’re curious about how anything was built or have suggestions, I’d love to hear from you.

🚀 What It Does

  • Presents my background, skills, and projects in a clean, user-friendly format
  • Encourages connection through a built-in contact form
  • Adapts seamlessly between mobile and desktop
  • Offers visitors a light or dark theme based on their preference

🛠 How It Was Made

  • HTML5 for structure
  • CSS3 (with Flexbox & Grid) for styling and layout
  • JavaScript for interactivity
  • Font Awesome, Google Fonts, SwiperJS, and Particles.js for UI enhancements
  • Netlify for hosting

📘 What’s Next

  • Add project filtering by category or technology
  • Set up form backend for handling real messages
  • Add SEO optimization and Open Graph metadata
  • Introduce a blog or article section
  • Improve accessibility across the site

Built With

Share this project:

Updates