Sam Hall

No more previous blogs

Next: Journal Topic Organiser...
JavaScriptSvelteUI

Building a Portfolio Website using Svelte

January 14, 2025

gif of the here portfolio. how meta.

Overview

This article breaks down the technical implementation of this here portfolio website, built with SvelteKit. I'll walk through each major component and explain the key technical decisions and implementations.

Table of Contents

  1. Initial Setup & Framework Choice
  2. Core Design Implementation
  3. Content Components
  4. Blog System Implementation
  5. Projects Section
  6. Lessons Learned

Initial Setup & Framework Choice

The project began with a SvelteKit template and implements a clean, modular layout structure. The main app layout demonstrates this organisation:

svelte:src/routes/(app)/+layout.svelte
<script>
// import global styles
import '$lib/styles/global.css';
import DarkModeToggle from "$lib/components/darkMode/DarkModeToggle.svelte";
import Nav from '$lib/components/Nav.svelte';
import SocialIconLinks from '$lib/components/SocialIconLinks.svelte';
let activeLink = 'about'; // Set the default active link
</script>
<div id="global-padding">
<header>
<h1 class="text-3xl font-bold mt-6 pb-3">Sam Hall</h1>
<h2 class="pb-1">Product designer</h2>
<p class="pb-1">I write stories and build experiences for people on the web</p>
<Nav {activeLink} />
<SocialIconLinks />
<div class="dark-mode-wrapper">
<DarkModeToggle />
</div>
</header>
<main>
<slot /> <!-- Child route content rendered here -->
</main>
</div>

This layout establishes the core structure with header, main content area, and footer, along with the dark mode toggle implementation.

Core Design Implementation

Navigation System

The navigation system uses the Intersection Observer API to track which sections are visible and update the active state accordingly:

svelte:src/lib/components/Nav.svelte
<script>
import { smoothScroll } from '$lib/smoothScroll';
import { onMount } from 'svelte';
export let activeLink = 'about';
const observerCallback = (entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
activeLink = entry.target.id;
}
});
};
onMount(() => {
const observer = new IntersectionObserver(observerCallback, {
threshold: 0,
rootMargin: '-45% 0px -45% 0px'
});
const sections = document.querySelectorAll('section');
sections.forEach(section => observer.observe(section));
});
</script>

Modular Component Structure

The main page structure demonstrates the modular approach to component organisation:

svelte:src/routes/(app)/+page.svelte
<script>
import About from '$lib/components/about/About.svelte'
import Experience from '$lib/components/experience/Experience.svelte'
import CaseStudies from '$lib/components/caseStudies/CaseStudies.svelte';
import ProjectsLink from '$lib/components/projects/ProjectsLink.svelte';
export let data;
</script>
<About />
<Experience {data}/>
<CaseStudies {data}/>
<ProjectsLink />

Content Components

About Section

The About component includes responsive design considerations:

svelte:src/lib/components/about/About.svelte
<section id="about">
<h2 class="text-xl font-bold pb-5 pt-3">About</h2>
<p>As a student and teacher of design and programming...</p>
</section>
<style>
@media only screen and (min-width: 1024px) {
section {
padding-top: 75px;
margin-bottom: 50px;
}
h2 {
display: none;
}
p {
padding-left: 24px;
padding-top: 10px;
padding-bottom: 48px;
}
}
</style>

Experience Cards

The Experience card component handles both internal and external links with proper styling:

svelte:src/lib/components/experience/ExperienceCard.svelte
<script lang="ts">
export let experience;
import ArrowUpRight from "../../assets/arrow-up-right.svelte";
const isExternalLink = (url: string) => {
if (url.endsWith('.pdf')) return true;
if (url.startsWith('/') || url.startsWith('./')) return false;
try {
const urlObj = new URL(url, window.location.origin);
return urlObj.hostname !== window.location.hostname;
} catch {
return false;
}
}
</script>
<div class="experience-card">
<div class="date">{experience.date}</div>
<div class="content">
<h2 class="job-title">
<a href={experience.link}
rel={isExternalLink(experience.link) ? 'external' : undefined}
target={isExternalLink(experience.link) ? 'blank' : undefined}>
<span class="pr-1">{experience.title}</span>
</a>
{#if isExternalLink(experience.link)}
<span class="relative top-px inline-block"><ArrowUpRight/></span>
{/if}
</h2>
<p class="job-description">{experience.content}</p>
<div class="skills">
{#each experience.tags as tag}
<span class="skill-tag">{tag}</span>
{/each}
</div>
</div>
</div>

Blog System Implementation

Blog Layout

The blog layout includes navigation between posts and proper title handling:

svelte:src/routes/(blog)/[slug]/+layout.svelte
<script>
import '$lib/styles/global.css';
import BlogBackButton from '$lib/components/BlogBackButton.svelte';
import DarkModeBlogWrapper from '$lib/components/darkMode/DarkModeBlogWrapper.svelte';
import { page } from '$app/stores';
import { pageTitle } from '$lib/stores/pageTitle';
$: ({ prevPost, nextPost } = $page.data);
let shortenTitle = (post) =>
post.title.length > 20 ? post.title.substring(0, 30) + '...' : post.title;
</script>
<div class="layout">
<header class="pt-10 flex flex-col gap-5 md:pr-12 lg:flex-row lg:pr-56">
<div class="md:mx-12 lg:mx-0">
<BlogBackButton />
</div>
<div class="flex flex-1 flex-row justify-between gap-12 md:mx-12 lg:w-1/4 lg:ml-28 lg:mr-0">
{#if prevPost}
<a href={prevPost.slug}>Previous: {shortenTitle(prevPost)}</a>
{:else}
<p class="invisible-ink">No more previous blogs</p>
{/if}
{#if nextPost}
<a href={nextPost.slug}>Next: {shortenTitle(nextPost)}</a>
{:else}
<p class="invisible-ink">No more next blogs</p>
{/if}
</div>
</header>
<main>
<slot />
</main>
<DarkModeBlogWrapper />
</div>

Blog Post Rendering

Individual blog posts are rendered with markdown support and proper TypeScript typing:

svelte:src/routes/(blog)/[slug]/+page.svelte
<script lang='ts'>
import { marked } from 'marked';
import { pageTitle } from '$lib/stores/pageTitle';
type Post = {
content: string;
formattedDate: string;
title: string;
tags: string[];
};
export let data: { post: Post };
$: postContent = marked(data.post.content);
$: $pageTitle = data.post.title + " | Sam Hall";
</script>
<article class="mb-24 md:mx-12 lg:mx-56">
<div class="flex flex-wrap gap-5 py-5">
{#each data.post.tags as tag}
<span class="skill-tag rounded-md">{tag}</span>
{/each}
</div>
<h1 class="text-3xl font-bold">{data.post.title}</h1>
<p class="text-sm py-4">{data.post.formattedDate}</p>
<div class="prose prose-lg">{@html postContent}</div>
</article>

Projects Section

The projects section uses a clean table-based layout for listing projects:

svelte:src/routes/(general)/projects/+page.svelte
<script>
import { pageTitle } from '$lib/stores/pageTitle';
$: $pageTitle = "Projects | Sam Hall";
</script>
<h1 class="text-3xl font-bold my-6">Projects</h1>
<table class="ml-[-20px] mt-[-20px]">
<thead>
<tr>
<th>Project</th>
<th>Year</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<a href="https://github.com/hamsall/journal-topic-organiser" target="blank">
Journal Topic Organiser
</a>
</td>
<td>2024</td>
</tr>
<!-- Additional project entries -->
</tbody>
</table>

Lessons Learned

In a perfect world, I'd go back and work on these points. But life gets busy. That being said, it's good to keep track of this stuff to take forward into future projects. Building smarter, not harder.

Inconsistent Styling Approach

  • Currently mixing three different styling approaches:
    • Global CSS
    • Tailwind utility classes
    • Component-scoped Svelte styles
Next time:
  • Implement a more consistent styling strategy:
  • Use Tailwind for utility-first styling
  • Create custom Tailwind components for repeated patterns
  • Reserve global CSS only for root-level variables and resets

Layout Management

  • Current implementation mixes different layout approaches
  • Group layouts feature of SvelteKit could be better utilised
Next time:
  • Implement a clear layout hierarchy using SvelteKit's group layouts
  • Create dedicated layouts for specific sections (blog, projects, main)
  • Standardise shared components across layouts

Dark Mode Architecture

  • Current implementation splits between custom CSS variables and Tailwind
  • Mode preferences handling could be more centralised
Next time:
  • Centralise dark mode logic using mode-watcher
  • Create a single source of truth for theme variables
  • Implement consistent dark mode patterns across components

Content Organisation

  • Current content structure caused deployment issues
  • Mixed approach to static and dynamic content
Next time:
  • Move all content (markdown, images) to a dedicated content directory
  • Implement consistent naming conventions for content files
  • Use Vite's import.meta.glob for better static asset handling

Component Structure

  • Some components have mixed responsibilities
  • Navigation and layout logic could be better separated
Next time:
  • Break down larger components into smaller, focused ones
  • Implement proper TypeScript interfaces for all props
  • Create a clear component hierarchy documentation

State Handling

  • Current state management is scattered across components
  • Some state could be better centralised
Next time:
  • Implement a store for shared state (e.g., active section, theme)
  • Create clear patterns for state updates
  • Document state flow between components

Asset Management

  • Current image handling is basic
  • Missing optimisation opportunities
Next time:
  • Implement proper image optimisation strategy
  • Create standardised image components with lazy loading
  • Set up consistent image sizing and formatting rules

Blog Infrastructure

  • Current markdown processing could be more efficient
  • Content organisation could be more structured
Next time:
  • Create a more robust markdown processing pipeline
  • Implement better frontmatter validation
  • Set up proper content types and interfaces

Conclusion

I had a lot of fun working on this. It gave me a platform to write on that I enjoy tinkering with and a way to learn about Svelte. I enjoyed carefully considering the user experience, as the implementation organically grew, which is not always something that can be done on big projects.

It was cool to playing around with the responsive design, dark mode support, and smooth navigation between sections. I prefer building this way, finding cool things, jumping into the frey and not being afraid of what is discovered when delving into the unknown.