Table of Contents
Starting work on the website
Soo when starting out I had a really hard time understanding how to tackle styling a webiste. Because of that my first focus when starting work on this website was
getting started with the base layout and which subpages I want to have.
I knew two things:
- I wanted to use Astro as I had some experience with it and knew it’s easy to start
- I wanted an easy and elegant way to host a blog for myself
Other than that it was important for me to use TailwindCSS and Typescript as I already had good experiences with both.
Setup
When starting out I found the perfect tutorial: Build your first Astro Blog.
Following this guide I ended up with a good looking fundament to start applying my own ideas and styles. One of my first things, was deleting pages I didn’t need nor wanted. That left me with a pretty managable amount of files.
Adding my own stuff
The first thing I wanted to do, was to create a minimalistic landing page where people could get a quick overview of who I was and what my current skillset is.
For this I modifed the index.astro files inside the pages. For this I used pretty simple HTML and tailwindCSS. But the best thing about Astro is that I can use Layouts, like a BaseLayout.astro.
This makes it easy for me to set the metadata for my site, add icons and set the Header and Footer for my page.
Here we can see a lot of thing’s at the same time but I only want to talk about a few of those things:
<Header />: Import another .astrofile containing the HTML code I wrote for the header specifically<Footer />: The same but for the footer<slot />: This is the most interesting part, Astro automatically imports HTML code from other pages at this position, if the code is written inside <BaseLayout> ... </BaseLayout> tags<link rel="manifest" ...: Indicates the target resource is a Web app manifest
- JSON text file that provides information about this web application (for example that the browser needs to install a PWA, app’s icon and name) [1]
<ThemeManager /> and <ViewTransitions /> are also important but I will talk about these in another post
Next goals
I for sure want to improve my styling and the general feel of this site. Adding a darktheme toggle is already done, but setting everything up so it works smoothly is also another TODO. I for sure will have to read the tailwindCSS-docs a bit for that but I want to do it as clean as possible.
- Adding a dark-theme toggle with styles for dark and light theme
- Improving general style and feel of this site
- Looking for new things I can add to this project
Sources
[1]
Web App Manifests - mdn web docs (https://developer.mozilla.org/en-US/docs/Web/Manifest)