Portfolio

My Student Portfolio

Comment

Portfolio Website

A personal portfolio that highlights my work as a student developer, athlete, and tech enthusiast. Built to represent my projects, skills, and achievements in a creative and interactive way.

💡 Inspiration

I wanted to build something that reflects who I am — a student who loves both academics and technology.
I was inspired by professional developer portfolios that use smooth animations, gradients, and glowing effects.
I combined these ideas with my own personality to make a site that looks modern but still feels personal.

⚙️ What It Does

The portfolio showcases:

  • My projects, including school and personal coding work
  • My skills in web development, design, and academics
  • A contact section to reach me directly through email
  • Interactive animations like particles, hover effects, and scroll-based reveals for a more engaging user experience
  • Uses a dark/light mode toggle button

🧱 How We Built It

  • Languages: HTML, CSS, and JavaScript
  • Design: Custom gradients, glassmorphism, and soft glows inspired by neon-style UI
  • Features added:
    • Smooth scrolling navigation
    • Intersection Observer for fade-in animations
    • Contact form with mailto: integration
    • Animated particles in the hero section
    • Responsive design for all screen sizes

Everything was coded from scratch, with extra focus on design details and visual balance.

🚧 Challenges We Ran Into

  • Making the particles animation smooth without slowing performance
  • Balancing bright colors with dark backgrounds while keeping it readable
  • Making scroll animations work across browsers
  • Keeping the layout responsive on all devices

🏆 Accomplishments We're Proud Of

  • Designed and coded the entire site independently from scratch
  • Achieved a clean, professional and modern design
  • Made the website fully responsive
  • Integrated multiple projects and links smoothly

📚 What We Learned

  • How to combine design and code effectively
  • Key UI/UX principles like spacing, color balance, and accessibility
  • How to use Intersection Observer and CSS animations efficiently
  • How small details in timing and layout affect the final feel of a site

🚀 What’s Next for the Portfolio

  • Add a backend contact form using Node.js or Firebase
  • Add interactive sections, like a blog or project details page
  • Improve animations with GSAP or Three.js
  • Continue updating the portfolio with new projects and technologies

Built With

Share this project:

Updates