Skip to content

daniel-luper/portfolio

Repository files navigation

My Personal Blog & Portfolio

A lightweight blog and portfolio website, built with SvelteKit. It's deployed on Vercel, and you can see it live here.

It was built with a few goals in mind:

  • Intuitive: easy to navigate and understand
  • Fast: only load what's needed
  • Pretty: a pleasant design that is both accessible and pleasing to the eye
  • Responsive design: look and behave well on all screen sizes
  • Simple but flexible blog-writing: write posts in Markdown with support for Svelte components

📝 Managing Posts

All posts are Markdown files that are processed with MDsveX to allow using Svelte components inside them. In order to make it easier to manage posts, you can use the Front Matter VS Code extension, which gives you a nice CMS-like UI.

🛠️ Developer's Guide

Building & Running Locally

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:5173/ on your local machine, and your local machine's IP address on your network—great for testing on mobile OSes.

Histoire / Storybook

This project uses Histoire, a Vite-based Storybook alternative to be able to see and develop components in isolation. To open it, run npm run story:dev.

🖼️ Image Optimization

This website uses image-transmutation to automatically optimize images used in the site. This means that even if you use non-optimal image formats (like lossless PNGs), it will go over the images and convert images to WebP and AVIF for you, as long as you use the <Image /> component instead of <img />. This is done on build, so it doesn't change anything when running the website locally.

📜 License and Credits

This project was adapted from sveltekit-static-blog-template by Matt Fantinel.

The code is open source and available under the GPL-3.0 License.