personal-website

jsongo.dev

Personal website built with Next.js, TypeScript, Tailwind CSS, Sanity.io CMS

Introduction

This website is both my personal space on the internet and a living project. It serves as a place to showcase my work, experiment with ideas, and refine my approach to design and engineering. Rather than being a static portfolio, the site is built to evolve alongside my skills, interests, and career.

Design Decisions

The design prioritises clarity, performance, and longevity. Visually, the interface is intentionally minimal to keep the focus on content while avoiding trends that date quickly. Layouts are component-driven and responsive by default, ensuring consistency across pages and devices.

From an engineering perspective, the site is structured to scale. Content is decoupled from presentation, routing is kept predictable, and UI patterns are reused wherever possible. This allows new sections or experiments to be added without major refactors.

Accessibility and performance were treated as first-class concerns, influencing everything from colour contrast to font sizing and rendering strategies.

Tech Stack

The main technology used in this project is Next.js 14, using the App Router, and deployed via Netlify. Other key technologies include:

  • Next.js — powers React Server Components, nested layouts, and routing while providing strong performance characteristics out of the box
  • Tailwind CSS — a utility-first CSS framework that enables rapid styling and consistent design through className composition
  • Sanity.io — a headless CMS that separates content from code, making updates flexible and future-proof
  • TypeScript — provides strong typing, better tooling, and improved confidence when refactoring

Features

Sanity Studio

Sanity Studio acts as the content backbone of the site. It provides a clean, customisable interface for managing pages, projects, and written content without touching code. This setup allows the website to function like a small publishing platform, making it easy to iterate on content independently of development.

Performance-Focused Rendering

By leveraging React Server Components and static rendering where appropriate, the site delivers fast load times while still supporting dynamic content.

Modular Architecture

Pages are composed from reusable components and layouts, making the codebase easy to reason about and extend as the site grows.