2022-07-01
This is the first post of my new Astro blog.
Written by: Sarthak Mohanty
I wanted to use this site to explore novel and interesting webdev tools. I ended up going with the following:
Initializing the GitHub repository, hosting on vercel and getting a custom domain.
Running through the Astro tutorial
Installing Astro: First, I created a new Astro project and set up my online accounts.
Making Pages: I then learned how to make pages by creating new .astro
files and placing them in the src/pages/
folder.
Establishing the Structure:
Styling the site: Made the decision not to use Tailwind (MAY REVISIT THIS DECISION). I’ve found that Tailwind is great for rapid prototyping, but it’s a bit more difficult to debug. Had some difficulties styling SVGs, will have to come back to it. Changed the font, but currently doing so by calling the google fonts API. Perhaps later I’ll try to do so locally. Added a profile picture, Images in Astro are still an experimental feature and I will explore the docs more on this feature.
Took a break from the project for today, mostly just fixed a few bugs (CSS 🤮). Also prototyped the Interests page.
Wanted to see how Astro handles API integrations. I started with making a simple graph displaying my latest typing test results, using the Chart.js library (for easy prototyping). I then used the fetch API to get the data from the typing test API. However, it is possible that this graph could require some client-side interactivity. I realized it was beyond time to start using a component library.
React is of course the most popular framework for this, but I wanted to try something new. Vue was more promising, but I wanted to try something newer, some that don’t even use the Virtual Dom. My options for component-based architecture quickly condensed into three options: Solid, and Svelte. For now, I’m going with Svelte, for the following reasons:
I learnt a bit of Svelte (enough to successfully create my interactive component)
Things I still have to do, in order of priority: