I finally have a hero section that you can look at!

I added betterauth-ui with the hopes that
it would solve my auth ui problems, but it turned out to be a problem
itself so i nuked it.
The hero section now features stickers that you can drag around and do
fun stuff with.
I still need to add more sections under the Hero explaining the app, and
I do not know how i will style that yet.

how the hero stickers work

So it’s very simple. I call the db with an array of sticker IDs for the
ones that I want displayed. I have picked 12 IDs but only 8 are shown so
the effect seems kind of random but also not rrly random at the same
time. Then the db is called, and CDN links are fetched and cached so
reloading is quick. The stickers also deviate positions a little bit
every time.

I am planning on using this “sticker” concept design on a couple more
pages just maybe with different stickers, or for example on the users
sticker page the stickers that they own.

I completely forgot to devlog… this app is made for hack clubbers to be able to track the stickers that they receive and compete with other hack clubbers on who has the most stickers. i currently have authentication handled by betterauth and it was relatively easy to set up with hack club auth. i created /stickers that users can use to see all the stickers they can collect, and since i’m using https://stickers.hackclub.com/api/stickers to get all the available stickers, so are missing since the creators haven’t added them into the external db i don’t have access to. I pull the contents of the API into my own db table so that I wouldn’t fully depend on that api/db if one went down. i had to create multiple components to have the state of authentication show up and change the “log in” button to the pfp of the user for example.

I created the schematic and picked all the components. i will be using 0603 components since they are easier to assemble and handle. i will probably add more things like sensors in the future.

Loads of changes and a new contact form!!

Contact Page

So, on my previous site, I had a contact form that would send me a message on Slack when somebody filled it out. This time, I was thinking that it would be much easier to just have the messages come as emails straight into my inbox! I used Resend to easily send POST requests that would then send an email to me with the filled out form.
I honestly wasn’t able to decide, or think of a cool design so i kinda went for my previous design, and made it more modern looking by using elements like shadcn/ui buttons with lucide icons.

I added a link section with links to my socials and where people can find me on the right side of the page, (i’m pretty sure some of the links are still empty lol) and used
had a huge headache with the icons. Since I have started using CloudFlare CDN, I wanted to host all the assets over there for caching stuff. This is a good idea, but it kinda didn’t work for svg icons. I would always use lucide icons since they look great, but they don’t have brand icons like discord or slack, which is why I had to find svg icons of those brands. I currently have the icons hardcoded into the page, but I will probably transfer them to the CDN at some point.

The rest included a bunch of small UI tweaks and things like that. I have yet to make the About page, the Guestbook and the blog, but I think progress is good!

Changelog

• added simple headings for pages that didn’t have them, added a contact form, that sends emails to me (a8ccf63)
• fix maybe? (9331357)
• more tiny changes (861709b)
• clumsy me (3ee4c63)
• couple quick fixes (53c74c6)

I build the projects page

I used markdown files to keep records of the projects and display them on the page, so each card can look similar but have diff content. I’m making the cards open a popup with a longer description about each project which is located in each respective md file. It was pretty hard to set everything up correctly, but I got it working in the end.

I am trying to add a ‘blueprint’ (as in the YSWS) variant to the button element im using from shadcn/ui and lowk failing bcs ive forgotten how to use tailwind custom colour classes.

Bugs

• The description text in the popout card, is stuck in dark mode so the text is still white in light mode as well.

I started work on the website!!

So, the first thing I did, was create the navbar, to make life easier in the future. Having already made the entire desing in Figma, is making the process of coding SOOO much easier! I have a clear plan of what I want to implement and how I want things to look, which really helps me. I imported the hero section from the figma and stuck that dead center on the page, which looks pretty good I’d say, the sides are a little plain but I will have stickers that people will be able to drag around.

Plan

• create the section under the hero section
• design about page
• design contact page
• brainstorm and think about projects page
• host on cloudflare

I’d say that was a pretty good hour of work.

Design in Figma

Link to figma page

I layed the whole thing out (not yet done) on my figma, so that I would have a clear plan for this version. I also learned how to use autolayout and I hope that that will make it easier to layout in the future, when I start coding the site.

My design process

So this time around, I wanted to polish my site, and give it a nice modern look. This time, I will be using big headings and a nice font, for a nice modern, clean aesthetic, for all my stuff to live on. I am planning to keep the fun aspect with the guestbook, and i will be adding things like stickers on the homepage to make it fun. This is also so that the site looks good to formal ppl and that i can get a job someday.

The guestbook

I was browsing the interwebs one day, when I came across Ky Decker’s Guestbook which really caught my eye. I have a guestbook in place on my old page but now that I’m redesigning, I thought that making a super nice guestbook would be the way. I’m opting to make a postcard design that I got inspired from Ky.fyi since I feel like the postcards that I have made will really let people express themselves.

I also got started by setting up the astro site with installing shadcn/ui so that I could benefit from the rrly nice UI components they provide.

I added a feedback form which can be triggered using /vjs feedback. I had AI help me with adding the form since I needed to use a view in slack and I didn’t know how to handle the feedback that was received.

i added a feature that switches my slack pfp every 5 minutes, and that took some while to set up, since the api slack uses is rrly weird. but with some help from ai, i finally got it working whichis really cool since now my pfp switches into a different fallout pfp every 5 mins.

I ended up adding eightball, trivia and polls.
For the eightball, i used this api : https://www.eightballapi.com and it just outputs the text from the api.
for trivia, I found an API that provides 4 answers (1 correct, 3 incorrect) and i made buttons that set as the answers. Then i had gemini help with some of the logic and fs file handling for the leaderboard. I noticed that if the leaderboard was gonna send to the channel, everyone on the leaderboard would get pinged, so i made it send a hidden message to the person asking.
for the poll, the user enters their question and their answers (all in “quotation” marks so everything gets separated) and then I use slack blocks in pretty much everywhere to display the content nicely. it makes buttons for the answers and people can pick them.

i also added a weather function and gemini parses the weather api and you can choose the city and the number of days default to 1. this was kinda easy since the api also has validation and e.g. if u enter a country it auto chooses the capital.

I created the logo / icon for the slack app in figma using the anchor guide to remind myself on how to make nice logos.

I added the QR code generation feature that lets you add a link or text, and lets you choose things like color or format. I added a stock checker function, but it doesnt work very well. I also added an email checker feature that works, but is kind of shallow information wise (APIs fault)
I also added a “-q” flag that would determine if the response would be sent to the whole channel or just you.

I made the slack bot. The slack bot has some basic commands like /vjs-meow for catfacts and /vjs-joke for an arbitrary joke, but then I added some more intricate ones like a dictionary and synonym API so people could quickly find the meaning of a word. (I am planning to add a condition that would either ‘whisper’ it or just broadcast to the channel by default. I have also added /vjs-name which would let the user enter a name and it outputs the nationality of the name and the gender of the name according to an API.