My League of Legends Based Developer Portfolio

#react #webdev #coding #vercel

Motivation

I have been playing League of Legends for nearly a decade. I love the game's community, from the excitement of esports, the storytelling in shows like Arcane, or even making funny MS Paint fanart like the one above. Having attended two World Championships in person, the game has been a significant part of my life. When it came time to move beyond my generic React tutorial portfolio, I knew I wanted something that reflected both my passion and my skills.

My goal was to create a project that is a true reflection of myself. I hope it evokes some PTSD for fellow players and introduces newcomers to a wonderful community.

Live Demo: paulvinueza.dev
Source Code: GitHub Repository

Tech Stack

For this project, I relied heavily on React and several powerful libraries from its ecosystem. I used GSAP for subtle animations and React Three Fiber (R3F) to create a custom 3D scene of myself on the Summoner's Rift.

For the backend, I leveraged Vercel Functions. This allowed me to maintain a scalable and cost effective solution without needing to host and manage a dedicated server. The entire project is hosted on Vercel.

Key Features

Here are some of the core features I implemented to bring the League of Legends experience to my portfolio:

Authentic UI/UX: To create an authentic League experience, I started with the classic queue pop to "load" my portfolio. I reimagined iconic sections of the client, like the champion select screen, to showcase different aspects of my portfolio. For example, the rune page section now contains a carousel of my projects, and another page details my professional "lore".
Live Data Integration: A key goal for this project was to integrate real time data from various sources to showcase my ongoing activities. I built Vercel serverless functions to connect to several APIs, including:
- GitHub: To show my latest code contributions.
- LeetCode: To display my problem solving progress.
- Riot Games: To fetch my in game stats.
- Anki: I developed a custom Anki extension to write to my Upstash Redis store after every review session, offering a live look at my study habits.
Interactive 3D Model: Using React Three Fiber (R3F), I created a 3D scene featuring a custom character model within the Summoner's Rift environment, which you can explore in the "Rift" section.

Technical Challenges & Solutions

Building this project involved solving several interesting problems:

Challenge: Managing API Rate Limits: Fetching data from multiple platforms on every page load could quickly lead to exceeding API rate limits.
- Solution: To solve this, I implemented a caching layer using an Upstash Redis instance. I set a unique expiration time for each API's cached data to respect its specific rate limit. This ensures users receive recent data while protecting the application from being blocked. The code below is an example for the Riot Games API.
```
export const riotApiDetails: ApiReqDetails<RiotApiResponse> = {
  redisKey: "riot-progress",
  staleAfter: 10 * MINUTE,
  fetchFn: getRecentMatch,
};
```
Challenge: Complex UI State: Replicating the multi step process of a game lobby (queue -> pop -> champ select -> load) involves managing a significant amount of shared state across different components.
- Solution: I used Jotai for global state management. Its atom based approach made it simple to share state, like the queue timer or the currently selected project, without complex prop drilling.

What's Left?

The portfolio is at a stage where I am happy to present it, but there's still more I want to do.

Responsiveness: A mistake I made during development was not building for responsiveness from the start. Making the site fully mobile friendly is definitely my top priority, and I see it as an interesting technical problem to solve.
Character Abilities: I plan to give my 3D character a set of four "abilities" like in the game. Since this involves more 3D modeling and my current focus is on the job search, this feature is on the backburner for now.
More Real Time Stats: This type of feature is exciting because it allows me to visualize my progress in various areas. I would like to add more stats, such as my gym progress, books I'm reading, or anime I've watched. Finding the right APIs or creating my own for this sounds like a super fulfilling challenge.

Conclusion

This was the first truly "unique" project I've coded from scratch, and it was an exciting experience. Early on, I realized I was over relying on AI for development, so I challenged myself to code everything by hand for the first month. I even taught myself Vim motions during this project to become a faster, more efficient developer.

Ultimately, this project has given me the confidence to tackle other ideas I am passionate about.

You can see the live project at paulvinueza.dev and view the full source code on GitHub. Feel free to send me a message through the portfolio or on my social channels. I'd love to hear what you think. Thanks for reading!