82 lines
4.6 KiB
Text
82 lines
4.6 KiB
Text
---
|
|
title: 'The beginning (Again)'
|
|
pubDate: 2024-12-17T00:49:00.000+11
|
|
description: 'This is the first post of my new website. featuring information on why I chose Astro to rewrite it and some extra fun information along the way!'
|
|
author: 'Aria'
|
|
tags: ["blogging", "learning in public", "development"]
|
|
draft: false
|
|
---
|
|
import { Picture, getImage } from "astro:assets";
|
|
import FriendLink from "../components/FriendLink.astro";
|
|
|
|
import orderConfirmedImg from "../img/blog/aira.coffee-cloudflair-alldone.png";
|
|
import useAFrameworkImg from "../img/blog/UseAFramework_20241217_002719.png";
|
|
|
|
I'll be expanding this as I work on it but for now this is my first more indepth website
|
|
|
|
## The What
|
|
|
|
Well that's simple to explain; It's a website and you're browing it now lol.
|
|
|
|
## The Why
|
|
|
|
Recently I joined a community for some very **🏳️⚧️**(mostly, there are many people of different identities there!) and it's full of many very techinical people. It's a cosy little community and I feel genuinely welcome there.
|
|
|
|
We where discussing domain names and this one wasn't owned! I'm addicted to coffee so it seemed like the perfect fit for me~
|
|
|
|
<a href ={orderConfirmedImg.src} target="_blank">
|
|
<Picture
|
|
src={orderConfirmedImg}
|
|
quality={95}
|
|
densities={[0.75, 1, 2]}
|
|
formats={['avif', 'webp', 'jpeg']}
|
|
alt="A picture of the 'Order Confirmed' pafe from cloudflair"
|
|
/>
|
|
</a>
|
|
|
|
After purchasing I needed to decide what I wanted to do with it, for a little over a day (Until not long before I started to write this) it just redirected to my [BlueSky](https://bsky.app/profile/did:plc:bzrn33tcfgjxnsanvg6py3xn) account.
|
|
|
|
I eventually got inspired by both [Alyxia](https://alyxia.dev/) and [Alex's](https://buh.moe/) websites. Finally convinced to make something from scratch I made the website you're looking at now!
|
|
|
|
This has been my first time working mostly from scratch to make my personal website, more on that described bellow!
|
|
|
|
## The How
|
|
|
|
This website was made using [Astro](https://astro.build/) for the build system and I decided to use [Tailwind](https://tailwindcss.com/) instead of basing my own css off Alex's after she convinced me.
|
|
|
|
<a href ={useAFrameworkImg.src} target="_blank">
|
|
<Picture
|
|
src={useAFrameworkImg}
|
|
quality={95}
|
|
width={630}
|
|
densities={[0.75, 1, 2,]}
|
|
formats={['avif', 'webp', 'jpeg']}
|
|
alt="A discord screenshot containing the following messages: Sent by @BuyMyMojo: 'getting my brain around css and styling hurts, I'm man handling some of your css @amemoia', Sent by @amemoia: 'DONT LOOK AT MY CSS ITS SO BAD', 'EVERYTHING HAS ITS OWN CLASS', 'USE A FRAMEWORK'"
|
|
/>
|
|
</a>
|
|
|
|
While I got started early on following the basic [blog tutorial](https://docs.astro.build/en/tutorial/0-introduction/) but took a break to make my very first 88x31px button!
|
|
|
|
<a href="https://aria.coffee/" target="_blank">
|
|
<img
|
|
alt="88x31 pixel button with the text 'Aria' and the top half of a human human face on the right hand side"
|
|
src="https://aria.coffee/static/img/buttons/aria.gif"
|
|
style="min-width: 88px; width: 176px; min-height: 31px; height: 62px; image-rendering: pixelated;"
|
|
/>
|
|
</a>
|
|
<sub>This is a version of the image hosted on archive.org so the blog doesn't change</sub>
|
|
|
|
I made it pretty quickly in Krita using the lovely picute of me which was drawn by Auryn!
|
|
|
|
88x31 buttons have a history that I wont get into here, you can read more in <a alt="This article looks back at a couple of popular screen elements in early web pages. The Powered By logo and 88x31 pixel buttons." href="https://tekeye.uk/computer_history/powered-by" target="_blank">this article</a> and if you'd like to see thhe buttons of my friends then go to the [friends page](/friends)
|
|
<sub>If you wanna exchange buttons shoot me a message on <a href="https://discord.com/users/383507911160233985" target="_blank">discord!</a></sub>
|
|
|
|
## Final thoughts
|
|
|
|
I am very greatful for these goobers who have inspured, ecouraged and debugged with me on this website, there is still a lot for me to learn about web development and more to discover about myself honestly.
|
|
|
|
I plan to make this website an outlet for a lot of my learning ~~along with my already mentioned BlueSky~~ and I hope you'll stick around.
|
|
|
|
### What's next?
|
|
|
|
Not sure, I kinda wanna figure out how to add emotes like discord into these blogs because I'm an internet degenerate who feels the ned to put emoted in every message I send, after that I might try to style the website a bit more but I think it's in an *alright* place for now lol
|