Personal Website (v2.0) banner

Personal Website (v2.0)

11 devlogs
20h 49m 42s

Welcome to my project! This project features a personal website where you can learn more about me, what I like to do, some skills I have, and a bunch of other random stuff.

I previously had a terminal-style website with interactive UI's (during…

Welcome to my project! This project features a personal website where you can learn more about me, what I like to do, some skills I have, and a bunch of other random stuff.

I previously had a terminal-style website with interactive UI’s (during Summer of Making), but I’d like to make a more professional website that’s easier to navigate! This project will be built with Next.js and Payload CMS for the blog, both of which I’ve never worked with before.

Demo Repository

Loading README...

Brian

Shipped this project!

Hours: 21.03
Cookies: 🍪 176
Multiplier: 8.38 cookies/hr

I finally built my first project with Next.js! :D

I was able to make a noice looking, easy-to-navigate personal website using Tailwind CSS and I can finally start my own blog now!

oh, and I learned how to setup a CMS like Payload in the process, yippee!

Brian

The website is finally coming together! Currently working on the contact page, which will have all my methods of contact and some random social links (which I haven’t finished adding yet). This will be the last page :D

Attachment
0
Brian

I’ve finally finished with the blog reader page! I ripped out the custom converters I was working on and replaced it with the @tailwindcss/typography plugin.

Attachment
0
Brian

Been working on the blog reader page but got discouraged after noticing I’m gonna have to scrap all the default Payload converters… 😭 I’ve made a couple small changes as well, like forcing the footer to the bottom of the page. I also added Vercel Blob storage compatibility for uploaded media (and wasted a bunch of time troubleshooting, but I guess that’s what you get when you use Next.js v16 with Payload CMS, since it’s technically not officially supported…). I probably wouldn’t use Vercel Blob storage for any other projects, but since I’m not planning to upload many photos for the blog, might as well simplify things.

Attachment
0
Brian

Yippee, I have finished the blogs page completely! Now it’s time to build the blog reader page, which shouldn’t be too difficult thanks to Payload CMS’s tools. :D

Attachment
0
Brian

I’ve been working on the blog page for a while, and I also added pagination! Now we just need to have <- and -> navigation on the bottom of the page :D

Attachment
0
Brian

I’m experimenting with the position of the music player, I’m thinking pinning it to the bottom of the screen might look nicer!

Attachment
0
Brian

I made a couple more refinements, and I added a music player on the homepage! I’m still playing around with its position, but for now I think this looks pretty good.

Attachment
0
Brian

I’ve been working on implementing a new API route which will display what song I’m currently listening to! It uses the Spotify API and I’ve added refresh token logic as well :D

(Yes, I’m aware the access token isn’t being persisted heh)

Attachment
0
Brian

Hello! To be honest, I completely forgot to document my journey on here (got too distracted with learning Next.js) so this devlog will cover everything I have so far.

I’ve worked on the following over the past few days…

  • Created the Next.js application and built the header and footer.
  • Added a hero, about me, and a cool navigation of skills to the homepage (as well as a neat-looking grid background).
  • Added a status section which uses the Slack API + Hackatime API to check what I’m doing at the current moment (as well as display my local time).
  • Built the database and implemented Payload CMS (which I’ll be using to build the blog page eventually).
  • Reformatted the file structure a gazillion times to make sure it’s noice and clean (also moved the status to an API endpoint rather than serving it in a server component directly).
  • Created a constants.tsx file so I can update certain labels and nav items without modifying the HTML.

But what took you so long, you may ask? Well, most of the libraries I’m using for this project are completely new to me, so most of this time was spent doing trial and error… oh and I also was super indecisive and keep adding/removing implementations.

The icons for the skills section probably took me over an hour to find, ughhh it sucked.

Attachment
4

Comments

Caleb Zaleski
Caleb Zaleski 2 months ago

makes mine look like a 3 year old did it lol

Brian
Brian 2 months ago

naaaa tailwind css is the secret lmaoo, makes website design so much faster. i would definitely recommend giving it a try for your website!

toderodavi
toderodavi 2 months ago

Great work! I’ve have been wanting to use payload for a long time but I always postpone it 😭

Brian
Brian 2 months ago

Thank you! And yeah, this is my first time using Payload and it was actually super easy :D took like 10 minutes max to setup, the documentation is great.

Brian

I’m working on my first project! This is so exciting. I can’t wait to share more updates as I build.

Attachment
0