Published 6.3.2024
After working with Angular and React (Next.js), I wanted to explore new options for my portfolio. I chose to use Astro because it generates static sites and does not send any JavaScript to the client by default.
However, you may have noticed some client-side components, such as the gallery in the projects section, which are called islands in Astro. Islands are components that are rendered on the client-side and are not part of the static site. This is a useful feature because it allows the use of JavaScript only when necessary.
In this post, I will explain how I created this website.
I started by creating a new Astro project with the following command:
npm create astro@latest
Astro makes it extremely easy to integrate new functionality. I added Tailwind and React to the project with the following command:
npx astro add tailwind react
After that I was ready to go.
To begin with, I started creating the home page. I took inspiration from Lee Robinson’s portfolio and created a similar layout. I used Tailwind CSS to style the page and added a few animations to make it more dynamic.
The home page is supposed to give an overview about what I do right now and what projects I have worked on. For that I created a grid layout to display my four most recent projects.
I also added a table to show my three most recent blog posts. The blog posts are a way for me to consolidate what I have learned and maybe share that knowledge with others.
This page was created to show my technical skills like programming languages, frameworks, and tools I have worked with. Additionally, I wanted to show my work experience and education. For the skills section I created a ‘SkillCard’ component that displays the skill with a logo. All these SkillCards are then combined in a grid layout and displayed to the user.
For the work experience and education I created a ‘ExperienceCard’ component that takes in company/school name, position, start and end date etc. and creates a header and footer for each card. These cards then have children props that are displayed in the body of the card. In here I can add a list of tasks I did at that job or the courses I took at that school. This provides a nice overview of my resume.
The projects page is supposed to show the user what projects I have worked on sorted by the most recent. For that I display the projects in a Card component that shows the project name, description, and a button to view the project. When the user clicks on the button, they are redirected to the project page. Here the user can see older projects that are not displayed on the home page.
The blog page is supposed to show the user all the blog posts I have written. I created a Card component that displays the blog post title, date, and a button to read the post. When the user clicks on the button, they are redirected to the blog post page. The blog is a way for me to consolidate what I have learned and if possible share that knowledge with others.
I am very happy with the result of this project. I have learned a lot about Astro and how to create a portfolio with it. I am excited to see what I can create with Astro in the future.