Brandon's Site - Stardance

Ship #1 Pending review

@bhlcusd on Brandon's Site · about 3 hours ago

Hey there! This is my spin on the personal site. This project took much longer than expected, with much of that time dedicated on learning the ropes of using Svelte, GitHub Pages, and a little bit of Bun. Overall, I enjoyed this project since it’s actually got me to publish my work to a larger audience. Anyways here’s the main gist of the site:

Quick Start Guide

Explore the website: Try It Now!

Features

Simple, Yet Modern Design - Rounded borders and dark mode support
About Me - Concise information about the developer
Contacts - Easy-to-see icons to the developer’s social media pages
Flexible - Designed to be scalable onto any form factor

Technicals

Built on Svelte - Chosen for its balance between bog-standard HTML & CSS and its compatibility with more complex build systems (like Bun). Even though TypeScript is not used in this project, using Svelte gives more flexibility for the developer to extend the website later in the future.
TailwindCSS - Instead of writing CSS classes by hand, TailwindCSS was used to pre-define the generic CSS classes needed for this relatively simple project
Mobile-First Design - Throughout the project, mobile-first design was implemented (i.e. make the website scale outwards to larger screens); experimented with Flexbox and Grid layouts to scale properly without too much wasted space
Customized GitHub Actions Runner - Due to the dynamic nature of Svelte, the default github-pages runner does not interface well with Svelte. Instead, the project bundles a new deploy.yml file that automatically installs all dependencies, builds the project, and loads the static files for GitHub Pages.

Acknowledgements

Svelte & SvelteKit Documentation - Assisted in the setup process and converting it into a static webpage using adapter-static.
TailwindCSS Documentation - Assisted in finding corresponding CSS tags

1 devlog
5h
Personal Site

Try project → See source code →

Open comments for this post

@bhlcusd on Brandon's Site · about 3 hours ago

5h 24m 40s logged

Devlog 1: My Personal Website Is Now Complete!

For what seems like years, I finally got my foot in the door with web development. Although this isn’t my first project concerning web development, I think this is my most refined website yet!

Quick breakdown:

I used Svelte & SvelteKit to provide scaffolding if I want to extend this project in the future; gives me access to dependencies using Bun
TailwindCSS was used for all styles; I found it easier to use than coding my own styles (CSS really sucks sometimes…)
The website can dynamically scale with the viewport due to TailwindCSS dynamic tags (no need for other views for mobile/tablets)
Modern-ish design; I wanted to have more kinetic energy but I have other things to do (and my animation skills in Blender isn’t the best)
Custom GitHub Actions runner to build & upload the Svelte project as static files

For my first Hack Club project, I’m quite proud!