Frameworks
Glad to see that you’re a little curious about how my website works! It’s certainly not the prettiest of most functional website ever made – but it’s my little home on the internet, and I’m more than happy with it. It’s the cumlative effort of a few years of work. I’ve scrapped pieces of the site and built new ones. It’s an ever changing project.
AstroJS
The site itself uses AstroJS as the core web framework. Astro is a wonderful web framework, as it can be as simple or as complex as your site needs. It can be a static generated website or it can have dynamic parts that only load on the client or on the server. This flexibility has allowed me to build a BLAZINGLY fast website. It’s seriously fast – open your devtools (crtl ⎇ Alt I) and open the lighthouse page score tool and check out my score. My website (when last checked) got over a 95 on the lighthouse score…meaning it couldn’t be much faster than it already is.
Looks: Tailwind CSS
As for the decoration/theme of the site, I’m not using a framework. There is no general UI framework on DivNectar – everything is custom CSS made using Tailwinds’s CSS classes. I did create a custom tailwind theme that uses the Catppuccin color scheme (light and dark/mocha theme) that allows me to reference catppuccin colors that can change when the light/dark theme changes. The site is built from a mobile-first philophsy (meaning the site was built for mobile then adapted to desktop). I do utilize some helper components (like buttons, content cards, an image component for optimization, etc). Overall I’ve been very happy with the aesthetics of the website. To me it’s just lacking in content (which I am trying to fix currently)
Search Engine Optimization
If you Google DivNectar my website is the first result you see. I’ve went thru great lengths to achieve the strongest ranking for my main keyword – which is DivNectar. Most pages on my site implement jsonLD, which is a unique form of JSON that the Google crawl bot can read to add additional information to your Google listing when searched for. Check out my search results here:
The Blog
The blog on DivNectar basically just uses AstroJS features. The actual blog page which shows all of my posts is just a regular old AstroJS page that fires off an http request to my Wordpress backend. The frontend site receives this data, and then formats and displays it as Blog post cards.When clicked, the user is taken to the [slug].Astro page. The bracket notation around the word slug means that this value can be dynamic. When a user clicks a blog post to view, slug becomes the slug of the blog post – the page then knows which post to retrieve from the Wordpress backend and display to the user. Recently, I used AI to generate a plugin for my note-taking app of choice (Obsidian notes) that allows me to take a markdown file from my notes app and upload it to my Wordpress install as a post (which effectively makes it a blog post). The plugin retains the markdown format instead of converting it to HTML…this makes it easy for my site to consume and render the blog post in a custom way. AstroJS has a built-in markdown parser that can convert the markdown from the post into actual web components. So paragraphs become p tags, lists become ul tags, and so on and so forth. This gives me complete control of how things are rendered and how they look. I couldn’t be happier with this system! Write now I’m authoring this post from my phone while bored at work using a bluetooth keyboard.
// File name: index.js
print("Testing codeblocks!!!");
if(true) {
print("something else");
}
Leave a Reply