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.