Nathan Affleck
Back to projects
A screenshot of the homepage for Nathan's portfolio site, featuring a nav bar, greeting and links, on a dark green background.
Portfolio v1's landing page with a hero greeting.
A screenshot of the projects page, features a list of filter tags above a grid of projects with project metadata in each item.
Portfolio v1's project section, with clickable filter tags and card grids.
A screenshot of the tech stack section of the porfolio home page, with 3 colorful stacks of tokens each containing a skill.
Portfolio v1's interactive tech stack section from the home page.

Portfolio Site v1

Personal Project
Feb 2026

Skills used

  • Semantic HTML
  • SvelteKit
  • SCSS/CSS
  • Markdown
  • Web Design
  • Accessibility

Summary

A multi-page portfolio website, sketched in Figma and implemented with SvelteKit. Intended to showcase projects, skills and information about me to potential employers.

What Went Well

  • Implemented a circular application with an emphasis on usability, through content planning to identify navigation.
  • Expressed my frontend personality through the use of interactions, animations and color.
  • Designed the project section to be easy to maintain by automatically generating unique tag filters, project cards and articles whenever new Markdown files are added.
  • Considered accessibility by supporting keyboard navigation and using of semantic HTML.

What I Learned

  • Utilised the Javascript animation API when creating the desktop koala, whilst also considering a performant solution by avoiding unnecessary event listener logic when out of view.
  • Explored and applied new CSS properties and SCSS features to enhance the developer experience.

What I’d Improve

  • Add light mode support, to accomodate the user’s reading preference.
  • Refine visual design choices to make the site more aesthetically pleasing.
  • Add subtle animations throughout the landing page to enhance user engagement.
Back to top