Personal Portfolio

Description

Hey, you’re reading the description of the page you’re on right now! It’s the second version of my web portfolio, that I’ve updated, to reflect on some of the things I’ve learned during Uni, as well as to try out new technologies like Astro or the CMS Vrite.

Story

I started this project by designing a layout in Figma based on paper sketches and portfolio inspirations from the web. Then, I tried creating a prototype with Astro and Vrite, to see if the Idea of using Vrite as a CMS would work. Here, this Vrite blog really came in helpful! Once I confirmed that, I started styling the page with the new Figma VSCode extension and TailwindCSS, which was a really pleasant experience, can totally recommend that workflow!

When I was done with the base styling, I spent some time optimizing the website for mobile use. Then, it was time to throw some tools like the Chrome Lighthouse report and some CO₂ calculator websites like Website Carbon Calculator at it! After some optimizations, Lighthouse, returned a score of:

And the carbon calculater showed that my site is cleaner than 63% of all tested web pages, which is a pretty good result in my opinion!

Before I could run the carbon calculator check, I had to publish my website. For that, I choose the provider, I had used and liked for that job before: GitHub Pages. The process was fairly easy, since Astro provides a neat GitHub Action. However, since I am using a CMS, I had some tokens saved in a .env file. My GitHub repository is public and I was planning on keeping it that way, which in return meant, I couldn’t upload the .env file (which wouldn’t have been a good idea anyway). So I looked into GitHub secrets. Luckily, Astro’s github action does build the pages to serve them statically, which means, I only need to provide the secrets during the build step. While, I didn’t find a concrete tutorial on this, I found out, that by modifying the Astro Action, I could make this work, without compromising my API Tokens:

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout your repository using git
        uses: actions/checkout@v3
      - name: Install, build, and upload your site
        uses: withastro/action@v0
        env:
          VRITE_ACCESS_TOKEN: ${{ secrets.VRITE_ACCESS_TOKEN }}
          VRITE_CONTENT_GROUP_ID: ${{ secrets.VRITE_CONTENT_GROUP_ID }}

Overall, I did quite enjoy working with Vrite as a CMS. It’s still a beta program, but the dev provided great support for every question & suggestion I had!