User:Astrid.tech

From IndieWeb

I'm Astrid Yu, a CS student at Cal Poly. astrid.tech is my personal website. The contents of its self-describing webpage, are mirrored here.

After having made a lot of personal projects, I realized that I had forgotten a ton of them, and there wasn't really a place to show them off. This website was made to solve that issue.

Feature List

  • Tagging system
    • Relatedness measures between tagged items
  • List of projects
  • Blog
  • Comments on blog and project pages
  • Pie chart of open source licenses
  • A resume

Planned

  • Webmentions, sending and receiving
  • Feed aggregation of activity from all my accounts, plus my self-hosted "microblogging" system

Tech stack summary

  • Frontend - statically generated, optimized SPA
    • Technologies
      • Gatsby.js
      • TypeScript
      • React
      • Sass
      • Bootstrap 4
    • Deployment
      • Github Actions
      • Github Pages
  • Backend - API-only backend (except for the admin panel)
    • Technologies
      • Python
      • Django
      • Postgres
    • Deployment
      • Docker
      • Docker Hub (with automated testing)
      • Docker Compose

Frontend

I use Gatsby to statically generate the website. However, I am considering moving off of it to Next.js.

The static site is hosted via Github Pages to statically host the website. (Going to plenglin.github.io takes you here!)

There is a Github Actions workflow that automatically builds on every push to verify that my code compiles. Additionally, if there was a push to the main branch, it will publish the build output to the plenglin.github.io repo.

UX design methodology

I've tried to make the browsing experience as user-friendly and inclusive as possible by:

  • Adopting a mobile-first methodology for designing views, and responsively sizing elements in CSS
  • Statically generating the site to reduce bandwidth consumption for users
  • Utilizing semantic tags and designing the site to be accessible for screen readers

Backend

Currently, the backend's only functionality is to serve and receive possibly anonymous comments.

I have pointed Docker Hub at my repo to build, test, and release a new :latest image on every push to main.

It is deployed as a Docker container on a Contabo VPS located in Missouri for about $8/mo. See the docker-compose.yml for deployment details. I will soon set up Watchtower to automatically pull the image, so that the only thing I need to do with deployment is push to main.

Content

The content is in its own Git submodule as a set of raw files that get aggregated and compiled on each frontend build. It is written in the following file formats:

  • Markdown
  • YAML
  • Jupyter notebooks for a few blog posts (I wrote a custom Gatsby plugin that auto-transforms the Jupyter notebooks into Markdown files)