How I made this site
The first step to any programming project is to understand what the project requires. For my portfolio, I had a few I identified,
Search Engine Friendly
Can be hosted for cheap
My friend Harper and I sketched up the general layout of the website in Figma, a free design program. We focused on making sure that the page was easily readable, and didn’t require that much clicking around to use.
The Tech Stack
While Svelte lacks the libraries and support that more developed frameworks, such as React, would give me, I decided it was fine due to the low complexity of this website.
How I write blogs
One library I do use is called MDsveX. It allows me to write Markdown code that is interpreted as Svelte. It also is extremely extensible with capabilities such as letting me put Svelte code into the Markdown code, and syntax highlighting.
Search Engine Optimizations
Something that modern web developers often forget to do is use semantic HTML to suggest to the browser and screen readers the role of content in the page.
Check out web.dev’s tutorial on semantic HTML for more information.
Meta Tags and Open Graph
I use Meta Tags to add descriptions information for both search engines and previews in third party apps.
Sitemaps and RSS feeds
I built two custom scripts to generate a SiteMap and RSS feed for my website. Both of these utilize Vite’s glob import function to extract our needed data straight from the code itself.
How it came out
Honestly I’m pretty happy with my personal website right now, but there are a few things I want to change. Currently the Hero section, that is the section above the about section is basically nonexistent.
I’ll also get around to writing a blog post about the contact form sometime soon.