One

One is a template for a Svelte based personal website and blog. It offers a simple way to create and host a site by storing it in a Git repository and deploying it through Netlify. To publish a new blog post, place it in the posts folder, and Netlify will automatically pull and deploy the update.

I use this template for my own website.

Why I Created It

• My previous website, minosiants.github.io, was outdated and needed a refresh.
• I’m working on a series of simple apps to explore various aspects of modern software development. (Zero was the first, helping me revisit CSS and JavaScript.)
• I wanted to experiment with Svelte and modern CSS to understand their potential for web applications.

My Experience

• Svelte makes building UI components straightforward and intuitive. I also like how it provides encapsulation of css and javascript for each component. So no need for BEM notation anymore.
• Modern CSS is incredibly powerful, enabling responsive UI design without relying heavily on media queries. Flexbox is a standout feature, and CSS variables add flexibility and ease.
• I started by typescript but did not like it so moved back to javascript. I think typescript is really overkill. Modern javascript is nice.

Resources That Guided Development

• Every Layout: This book elegantly explains how to create modern, responsive layouts without media queries. I applied its principles to my CSS layout.
• Refactoring UI: A fantastic guide for designing clean, effective UI components that guide users intuitively.
• Art and Visual Perception. Art is my hobby so I came across this book. Rudolf Arnheim , the author, explains the psychology how people percept visual objects. Really powerful. It’s a dense, slow read I’m still working through.
• Josh Collinsworth’s SvelteKit Blog Starter: Discovering Josh’s GitHub was a great find, and his template inspired parts of this project.
• Atkinson Hyperlegible: A clean, highly readable free font used in the project.
• Adobe Color: A helpful tool for selecting an effective color palette.