[!IMPORTANT]
Forking discouraged!
This website is a work in progress and has some stuff that is very specific to my use case. I don't recommend forking it yet if you want to build your own.
In the spirit of open source, I'm building it in public. If you still want to use it as a base, at least make sure to remove my name, logo and pictures from it.
[!NOTE]
Looking for the SvelteKit version?
This website was previously built with SvelteKit. If you're looking for that, check the v4 branch. If you're looking for a SvelteKit template to use as a starting point, check out my public SvelteKit blog template.
This is my own personal website, built with Astro and Svelte. It also holds my own personal blog.
It was built with a few goals in mind:
I achieved this with the help of Astro and Svelte. There is almost no JavaScript running, and it actually works with JS disabled! While JS is awesome, it's important to know when it's not needed.
This website includes no content, and it currently requires some content to be used. Since the content is personal and I don't want to have it on the repo, you'll probably struggle to get it to work for now. I plan to make it easier to use in the future.
My "CMS" is just a bunch of Markdown files and a YAML file with some metadata. I use Obsidian to manage the content.
To run it locally, you simply have to run:
# First, install dependencies
npm install
# Then, run it on dev mode
npm run dev
The site should now be available at http://localhost:4321/ on your local machine, and your local machine's IP address on your network—great for testing on mobile OSes.
I use Storybook to develop components in isolation. To open it, run npm run storybook
.
This site is hosted on Vercel, and uses Astro's @astrojs/vercel
adapter on build. It can also be generated as a static site, and hosted pretty much anywhere.
I've recently updated the Markdown syntax to match Obsidian's. With a few added goodies.
Effect | Syntax | Example |
---|---|---|
Bold | ** or __ | **example** |
Italic | * or _ | *example* |
Strikethrough | ~~ | ~~example~~ |
Highlight | == | ==example== |
Links | []() | [text](url) |
Blockquotes | > | > Quote |
Sparkling Highlight | @@ | @@example@@ |
Button | [text](url 'button prop=value') | [Example](url 'button color=secondary href=url') |
Callout | > [!type] | > [!info] > Example |
Image |  | ![Example image || full-bleed](/test.jpg 'A sample image'] |