# Personal Portfolio

A simple, modern, simple yet complex portfolio with silky smooth animations (at least on the home page).

Made for Hackclub's Summer Of Making.

# Backstory

While looking at many beautiful portfolios, I gained a surge of motivation to create my own. In a language AND framework I've never used before. I took advantage of this experience to learn about the **many** basic, intermediate, and complex concepts about Next.js, serverless, cloudflare, and dns. I was initially inspired by a High Seas project (forgot by who) that had super clean animations and wanted to learn how to make them. I found out (through a friend) that they used GSAP, so I made myself a personal challenge to create smooth animations for a portfolio I desperately needed.

# What I learned

I learned a ton from this project. This includes a new language, framework, and hosting. Prior to this project, I had no experience with React, let alone Next.js. So in this environment with so many new tools was a VERY humbling experience. I was practically pulling my hair out, trying to figure out why my projects API wasn't working (more on that in the Giant Challenge section). I originally thought the idea of React was pretty simple; just a bunch of components that make your code cleaner and more organised. I could not have been more wrong, I learned there was more to React than just components. I also thought: "Why use Next.js if HTML, CSS, Javascript worked just fine?", which was quickly answered by how fast I could get a component working (especially the inline typescript). Though, this would not be a learning experience without a giant challenge... I wonder when that is gonna happen?

# GIANT CHALLENGE

It's kinda like a bunch of small challenges that led up to the big challenge.

For the projects page, I wanted it to be a live display of all my Github repositories, because that's where I could reliably get all my latest projects without manual labor. So, as any normal person would do, they would go create an entire API system to fetch Github repositority stats and filter out the necessary information. I also planned on adding "tags", which would be put in the README of each repository, which I later decided to change. The development of the system worked perfectly, but I realized that I was gonna get ratelimited because of the amount of requests I was making to the Github (1 request to get all repositories, another ~ 20 requests to get the README). Thus, I decided to implement caching. The implementation went great, and I decided to attempt to deploy this. But, when I checked my deployment, the projects didn't load, so I checked the console and found out I got a forbidden error. I thought this is probably because Cloudflare's IP is blocked from accessing Github's REST API, so the obvious solution was to create a Github PAT to access the API. So, I implemented this API key through an environment variable, then into my API route, checked that it worked locally, and deployed it again (btw, my build failed 5 TIMES, A COMBINED TOTAL OF 25 MINUTES WASTED WAITING FOR THE BUILD TO FINISH, due to cloudflare errors). "That's weird", I thought, "This should be working but it isn't. I wonder what the problem is." Because I couldn't think of the problem, let alone the solution, I did what all programmers do in 2025 when they can't figure something out; look at the documentat- just kidding... ask ChatGPT. ChatGPT gave 5 hallucinated answers, ranging from GET functions that don't exist, to switching from Cloudflare Workers to Cloudflare Pages. By this point, I was already super annoyed and decided to read and try OpenNextjs's documentation on adding environment variables. This did NOT work either, I was still getting 403 - Forbidden errors. Not to mention, my local server STILL WORKED??? By this point, I was super tired, so I decided to go to bed. The next morning, my friend told me about npm run preview and npm run deploy, because I'm dum, and I decided to try out npm run preview (which should stimulate a production environment). I had the same error on this preview as production, so I decided to go forward with this preview to debug this bug (funny joke). As I asked ChatGPT (once again) how to resolve this error and give me code examples, I realized something in it's code that I didn't: User-Agent. So, I added User-Agent to my fetch request and FINALLY saw it work. I deployed this project and it worked on production too. But, here's the mystery. HOW did my local (npm run dev) work but my preview (npm run preview) did not? I had the same fetch request code for both, but my local somehow worked? Well, this is a completely different problem that I didn't want to, and still don't want to, deal with. So, I'll leave it at that.

Takeaways: ALWAYS ADD USER-AGENT IN YOUR FETCH REQUESTSSSSSSSSS