Personal Website

A fully responsive portfolio website built from scratch through iterative problem-solving.

Built a personal portfolio website from the ground up, focusing on modern front-end techniques and responsive design. Refined through continuous debugging and optimization.

Platform Web
Language HTML, CSS, JavaScript
Libraries GSAP
View on GitHub

Key Features

  • Fully responsive design using CSS clamp() for fluid scaling
  • Liquid glass header effect with backdrop-filter blur on scroll
  • GSAP-powered scroll-triggered text animations
  • Horizontal scrolling project carousel
  • Custom SVG loading screen with session-based visibility

What I Learned

  • Responsive CSS: Utilised clamp() for fluid typography without breakpoint conflicts
  • GSAP ScrollTrigger: Complex scroll-driven animations with pinning and scrub controls
  • Stacking contexts: Managing z-index and layering with position/transform/opacity
  • Box model mastery: How padding and box-sizing affect viewport heights

Challenges & Solutions

  • Responsive scaling: Fixed pixel values broke at intermediate sizes. Switched to clamp(min, preferred, max) throughout for smooth scaling at any viewport.
  • Header layering: Transparent header blocked wave animation. Changed to position: fixed with z-index: 100.
  • Loading screen flash: Animation appeared briefly on navigation. Added inline script in head to apply skip-loading class before DOM render.
  • Animation timing: Text appeared too quickly and section pinning conflicted with fade-in. Split into two ScrollTrigger timelines for independent control.

Design Decisions

  • Color palette: Minimal three-color scheme (Carbon Black, Porcelain, Soft Linen) for professional aesthetic
  • Typography: IBM Plex Mono throughout for consistent, technical aesthetic
  • Sticky sections: Each section exactly 100vh for clear boundaries and focused reading
  • Wave animation: Subtle motion on Landing and Contact only—avoids overwhelming content sections

Tools & Credits

  • Wave Animation: Adapted from wodniack's CodePen
  • Loading Animation: Custom SVG designed with SVGator
  • Domain Hosting: nedtonks.com hosted via SquareSpace
  • Libraries: GSAP (ScrollTrigger, ScrollToPlugin)
Colour Palette