Quick Developer Portfolio

Portfolio is really important, it’s a showcase for your work and also make people who are curious about your work impress about your first appearance. Just take a look at the portfolio of a designer below, it’s amazing isn’t it? (link here).

I will show you shortly how to make an impressive yet subtle and elegant portfolio using Astro JS and it’s pre-built theme.

Here’s my showcase

First, you can find the source code here.

Then, we fork the project to our repository. This step is important because it makes thing easier for the deployment process later. After all, we don’t want to spend hours just to config the web server for a portfolio site, do we?

After that, we clone the repository to our local machine and open it using VSCode (or which of your favors).

git clone <the repo which in your github accout>

cd Milky-Way 
code .

First, we modify the name in the header by editing index.astro

Don’t forget to edit the Navigation.astro and update your Github link as well.

If you do blogging and Youtube, make sure to change the content in these pages as well.

The deployment is really easy and won’t take much effort. We will deploy it to Vercel free tier. First, we import the Github repository to Vercel.

I don’t think we need to change any configurations in the import option. However, you can change it as you please.

Then, we click deploy and wait for around 1 minute.

Tadaaaaa, when it’s done you only have to click the page preview to open your page in a new tab. That’s it, easy as a piece of cake.

SSR (Server Side Rendering) and dynamic content

If you want to dynamically show the blogs and Youtube videos without having to update them manually everytime you create a new post or upload a new video, we will have to integrate with an API and add an adapter to do that. However, this post is about creating a portfolio so we should talk about it in another post.

Many thanks to the original author of the theme, If you want to support him, give his repository a star or buy him some coffee.