Personal Website banner

Personal Website

5 devlogs
14h 17m 50s

A personal website that has both backend and frontend elements! This was one of my first times making anything of this magnitude (so there was a fair bit of ai usage…). I hope anyone who sees this will check it out! It’s deployed on vercel so the guestbook will not work for the moment, but everything else should (minus the music page cuz i genuinely dont know what to put and am waiting for inspo to strike and wanna get this over with).

Loading README...

Sebastian Wu

Shipped this project!

Hours: 14.3
Cookies: 🍪 73
Multiplier: 5.11 cookies/hr

Built my first React portfolio with a Time Machine - visitors can slide through different versions to see how the site evolved over time! Features live Last.fm music, Ottawa weather, photography gallery, and a glassmorphism design.

What I learned:
Went from zero React knowledge to understanding component architecture, state management, props, conditional rendering, and API integrations. Debugged countless errors and finally grasped how React actually works.

Tech: React, CSS3, Last.fm API, Open-Meteo API

Sebastian Wu

made & finished time travel slider - u can now view multiple past versions of the site. obv rn its placeholder stuff but ill change the stuff to match the commits when i feel like it

Attachment
Attachment
0
Sebastian Wu

Hi! If you’re just stopping by, feel free to star this post or follow this project!

I’m actually surprised that this took 3h, but it was mostly me rather than AI hehe (+ a bunch of tweaking to css). I’m overall pretty happy with how it turned out. I think I’m going to add one more tab and then a few more easter eggs, and it’ll be ready to ship!

Attachment
Attachment
Attachment
0
Sebastian Wu

Hello! If you’re just stopping by, feel free to follow / star this project!
But anyways, this devlog logs two new pages added, including a guestbook page (which replaced the photography button on the navigation page), as well as one featuring my Cubing stats. The snapshot feature seems to kinda be working now but that’s probably something I’ll be working on in the future. I’m overall pretty happy with the turnout, and I’m beginning to get a good grasp on react. Hopefully I can be coding mostly without claude as my crutch by the end of the week? :)

Attachment
Attachment
Attachment
Attachment
0
Sebastian Wu

I made a bunch of changes, not really to the base functions, but rather to the looks and stuff. Every graphic / former emoji now sources from the Lucide React library. Claude/I did a reorganization of the files (it added a backend for some reason but I’ll just keep it there for now). In addition, there is now a photography page, with photos I’ve taken (layout kinda inspired by vsco.co), a background for the website, so the ‘translucency’ (?) is more visible, and a bunch of CSS changes (a lot of the three hours were just fixing CSS 😭). There were some other features added though, including a shattering effect when you enter the konami code (up up down down left right left right B A), a navigation button, and a time travel slider that is in progress, which will hopefully show the viewer different iterations of the website in the past when completed.

Next steps are probably adding a few more pages, fixing/fully implementing the time travel slider, connecting a few things, and maybe changing some other aspects of the CSS.

Also, thank you +raghavbansal.sphere for the suggestion! Unfortunately I didn’t see it till now, but I will likely implement some form of an achievements/projects section in the homepage!

Feedback is welcome :)

Attachment
Attachment
Attachment
0
Sebastian Wu

This is the first version. I’m thinking of doing a massive overhaul and changing a lot of stuff in the future but whatever. This is mostly inspired by apple widgets and the liquid glass aesthetic (although there is no background). But it has all I really want for the basics of the website so that’s that. Built using React.

Attachment
1

Comments

3D PRINTER HELL YEAH
3D PRINTER HELL YEAH about 1 month ago

I love the aesthetics.. also i think you should add a section achievements or something like that