Redesigned my portfolio: Let's talk about some of the key features of the new design.
As-salamu alaykum! I'm Tarikul Islam, a software engineer and a full-stack developer. I'm passionate about building software that solves real-world problems. I'm also a big fan of open-source and I'm always looking for new ways to contribute to the community. In this blog post, I'll be talking about some of the key features of my new portfolio website, and how I built it.
Table of Contents
Context
Main goal was to showcase my work and skill in a clean and minimalistic way. A website that was easy to navigate, and self explainatory in terms of what I do and what I've done. I was looking for a simple design packed with complex features. So, I've been working on it on for the past few months, and I'm finally happy with the result. I'm excited to share it with you all!
Tech Stack
I've used
- Next.js for the frontend, and
- Vercel's Edge Functions for the backend.
- Tailwind CSS for styling, and Framer Motion for animations.
- PlanetScale for the database, and Prisma for the ORM.
- NextAuth.js for authentication.
- Vercel for deployment.
- Splitbee for analytics.
Packages
- React Grid layout helps you to create a draggable and resizable grid layout just like my homepage.
- Font Awesome is a font and icon toolkit.
- Framer Motion is a production-ready animation and gesture library for React.
- Mapbox is a location data platform for mobile and web applications.
- Next-themes is a React hook for managing themes in Next.js.
- Giscus is a lightweight, open-source, and privacy-friendly commenting system powered by GitHub Discussions.
- @next/mdx is a Next.js plugin for MDX.
Map
The map component is a newly added feature compared to previous version. I just wanted to share where I live. Instead of saying I'm from Dhaka, Bangladesh, in a typical way, I took a different approach. The map component adds an interactive element to my portfolio and gives a unique browsing experience to my visitors.
I could've gone for Google Maps or Apple Maps, but I wanted to keep things simple. So, I've used Mapbox. It's simple, easy to use, has some good looking maps, and perfectly meets my needs.
What is Mapbox?
Mapbox is a location data platform for mobile and web applications. It provides building blocks to add location features like maps, search, and navigation into any experience you create. It's a great tool for developers who want to add location features to their apps.
Here's some useful links that will help you get started with Mapbox:
- Mapbox official website.
- Mapbox Gallery is a collection of beautiful maps and apps built with Mapbox.
- Mapbox GL JS is a JavaScript library that uses WebGL to render interactive maps from vector tiles and Mapbox styles.
- Mapbox GL JS examples is a collection of live, editable examples of Mapbox GL JS features.
- Next.js + Mapbox GL JS is a tutorial on how to use Mapbox GL JS with Next.js.
- NPM is a package for adding a search box to your map.
Discord
I'm excited to share one of the cool features that I've included in my portfolio! As someone who spends a lot of time on Discord, I wanted to show off my current status and make it easy for others to connect with me. So, I created a live Discord status that uses the Lanyard API to display what I'm currently doing.
Lanyard
Lanyard is a service that makes it super easy to export your live Discord presence to an API endpoint api.lanyard.rest/v1/users/:your_id and to a WebSocket for you to use wherever you want. Get started here.
By using this API, I was able to integrate my current status directly into my portfolio. This means that anyone who visits my portfolio can see what I'm up to on Discord in real-time. Here's how it works: I used the following API endpoint to retrieve my current status. This API returns my current status as well as my activity details, such as the game I'm playing or the music I'm listening to.
One of the cool things about this feature is that it shows every status, whether I'm online, idle, dnd, or invisible. When I'm online, a green notification alert even blinks to let visitors know that I'm available to chat and I also added a "Add Friend" button that allows visitors to easily add me as a friend on Discord.
Status
another exciting feature that I've added to my portfolio is my Codeforces status and latest problem solution using the Codeforces API.
For those who aren't familiar, Codeforces is a competitive programming platform where users can solve coding challenges and compete in contests. As someone who enjoys coding challenges, I wanted to showcase my Codeforces activity on my portfolio.
To do this, I used the Codeforces API, which provides endpoints for accessing user information, contest information, and more. Specifically, I used the following API endpoint to retrieve my latest problem solution status: https://codeforces.com/api/user.status?handle={your_handle}. By parsing the JSON response from this API, I was able to display my latest problem solution status directly on my portfolio.
However, there was a catch: the component only shows on desktop mode. This is because I designed the component to be responsive for larger screens, where it looks best. On smaller screens, such as mobile devices, the component would not look as good, so I chose to hide it for those screens.
Guestbook
Guestbook a feature allows visitors to write beautiful messages on my site and interact with each other.
To create this guestbook, I used GitHub authentication to verify the identity of the visitors. This ensures that only real people can leave messages, and helps prevent spam and abuse. Visitors can log in to the guestbook using their GitHub account, and their name and email address will be used to display their message and enable replies.
The guestbook allows visitors to read other messages and leave their own message for others to see. They can also delete their own messages if they want to. However, visitors do not need to be logged in to view the guestbook content. This means that anyone who visits my portfolio can see what others have written, and join in the conversation if they want to.
One of the great things about this guestbook is that it provides a way for visitors to interact with me and with each other. I love hearing from people who visit my portfolio, and the guestbook provides a great way for them to share their thoughts, ideas, and feedback. It also creates a sense of community and helps to build relationships between visitors.
I would love to hear your thoughts and feedback, so don't be shy! The guestbook is a great way to interact with me and with other visitors, and I always appreciate hearing from people who stop by. So if you have something to say, whether it's a suggestion, a compliment, or just a friendly hello, please feel free to leave a message! Your words can brighten my day and inspire me to keep working hard. So go ahead, write something on the guestbook and let's connect!
Links
One thing I'm prooud of is my very own social media reference landing page that I've created with better animation, designed to make it easy for visitors to find and connect with me on various social media platforms. It's a simple page that contains links to all of my social media accounts. I've also included a link to my portfolio, so that people can find me easily.
The landing page features a clean and modern design, with easy-to-use navigation and eye-catching animations. It allows visitors to quickly access my social media profiles, portfolio, and other important sites with just a click. Plus, the smooth animations make it a fun and engaging experience that visitors are sure to enjoy.
It is that it's highly customizable. I can easily add or remove links, update the design and animation, and make other changes as needed. This means that the landing page can evolve and adapt to my needs and preferences over time, ensuring that it always meets my needs and the needs of my visitors.
Another great feature of this landing page is that it's mobile-friendly. It's designed to work seamlessly on both desktop and mobile devices, so visitors can access my links and navigate my site no matter where they are or what device they're using.
Want to create your own social media reference landing page?
- Here is the repo: Linkz
Conclusion
Finally, I've also highlighted my skills and expertise in my portfolio. I've spent tons of time honing my development skills, and I've applied it to other projects also. I'm always looking to learn and improve, and I'm excited to see what challenges and opportunities come my way.
Thanks for taking the time to read about my portfolio! If you're interested in learning more, feel free to get in touch with me.