2024 Developer Wrapped
Hey everyone! As 2024 winds down, I wanted to share something I've been working on: a personalized "Developer Wrapped" web app to visualize my coding journey this past year. It's been a fantastic year of learning, building, and pushing my boundaries, and this project helped me reflect on it all.
What is Developer Wrapped?
Inspired by the popular year-in-review formats, I created a web app using Next.js, Tailwind CSS, and a few cool animation libraries to showcase my key development metrics and achievements. It's a fun, interactive way to look back at the year through the lens of data points like GitHub contributions, website traffic, and other relevant numbers.
Key Features
- Interactive Components: The app is filled with engaging elements built with custom components. You'll see things like the
Tilt
effect, smoothly animated numbers, text that loops, and fading text effects. - Modern Design: I used Tailwind CSS for styling, resulting in a sleek, modern aesthetic that's pleasing to the eye.
- Responsive Layout: The grid system adapts seamlessly to different screen sizes, so the experience is great on any device.
- Custom Icons: I created and integrated custom icons for services like GitHub and others, adding a personalized touch.
A Sneak Peek at My 2024 Wrapped
Here's a glimpse at what my 2024 Developer Wrapped looks like:
- 217 Days of Contributions: I've been actively contributing to projects on GitHub for most of the year!
- Most Active Day: Friday seems to be my prime day for coding.
- 0 Stripe Transactions: ...I'm gonna work on that in 2025.
- 5 Active Websites: I've been maintaining several websites.
- 39k Website Visitors: I'm grateful for all the visitors to my websites and blog posts.
- 1973 Contributions: This shows my level of engagement with my projects.
- 3261 Total Blog Views: Thanks for reading!
Customization
The project is designed to be highly customizable. Feel free to update the data, tweak the styling, modify the animations, or add your own icons to make it unique.
- Data: Modify the values in the
page.js
component to reflect your personal metrics. - Styling: Customize the styling using Tailwind CSS classes within the
Card
components. - Animations: Modify the animation components (
components/animation
) to create unique effects. - Icons: Add custom icons by creating additional components in
utils/icons.js
. - Layout: Adjust the grid layout to accommodate additional cards.
Looking Ahead to 2025
This project was not only a fun experiment but also a great opportunity to reflect on my progress this year. I'm excited to take this momentum into 2025, with a focus on contributing more to open source projects, learning new technologies, and further developing my skills.
I encourage you all to try this project and create your own "Developer Wrapped." It's a fantastic way to appreciate your own journey.
Thanks for reading!