Portfolio sites are an expression of self, a way to represent yourself to the world as a developer. It is important to not only build a site that represents your technical abilities, but also your aesthetic ones as well. Here I'll take you through a light guide of how I got started with my portfolio site and some ideas to think about along the way.
Before we dive in, feel free to clone this template on GitHub and use it as a template for your own site!
The first thing I recommend you do is get some inspiration. Now, maybe my site is inspiration enough, or maybe you want to go through some portfolio sites to get an idea of what is out there. Here are two portfolios that I drew inspiration from:
Once you have sufficient design inspiration, it's time to get your project started.
I used create-t3-app to bootstrap the project as that is my preference, but feel free to use create-next-app.
With create-t3-app:
pnpm create t3-app@latest
Name your project
Select TypeScript
Select Tailwind
Select Y for Git repository
Select Y to run pnpm install
Hit Enter for default import alias
Now that you have a bootstrapped project, you can start building out your portfolio! I'll walk you through some of the major components that my portfolio consists of.
Layout
Desktop View
Mobile View
I have a Layout.tsx component that takes in a MobileNavBar and a NavBar for the mobile and desktop views respectively. I use tailwind for media queries to display the layout in either view. This solution not only works, but is super simple and clean!
Home Page
I like a clean design with lots of empty space. I once heard that the essence of design is to leave things out, so that is what I attempted to do, while still adding my own flair. I use axios to get my pinned repositories from GitHub and my recent blog posts from here, but using regular fetch/await would have probably been suitable as well.
About and Current Pages
For these pages, I use markdown as they are more content heavy. I am making use of showdown, an npm package that will convert markdown to html for us. This means I can write my bio in markdown and use the file system and showdown to fetch the markdown file and convert it to html. Tailwind's prose class helped with the styling.
ChatBot
And probably the coolest part of the site, it comes with an integrated ChatGPT chatbot based off of ChatGPT-3.5. I will cover this component in a separate article as it is beyond the scope of this post, but feel free to interact and ask it questions!
Let me know what you think in the comments down below!
Top comments (0)