Homepage

A landing page for my server, an overview of my projects, and personal blog

Overview

This project implements a unified landing page for my server. It is meant to provide easier access to several web application deployed on hagen.social sub-domains. Additionally, I wanted to create an overview for myself of finished, ongoing, and planned personal projects, to maintain an overview of what I have done and what I plan to do. This will be made in such a way to also serve as a portfolio for myself. Finally, I am adding a personal blog to share thoughts and articles within my network.

At the same time, I am using this opportunity to try an alternative CSS framework to Bootstrap, which I have most experience with. I decided to try my hand with the Bulma CSS framework.

Goals

Learning Objectives

  • Implement secure Basic Authentication for REST API access.
  • Learn the use of the Bulma CSS framework.
  • Practice the interaction of pyright LSP and the SQLAlchemy ORM.

Practical Objectives

  • A landing page for my server
  • A coding project portfolio
  • A personal blog

Implementation Details

Backend Architecture

Built with Flask framework using blueprints for modular design. Implements SQLAlchemy ORM for database operations with migration support via Alembic.

Frontend Design

Responsive UI built with Bulma CSS framework. Jinja2 templates provide server-side rendering with minimal JavaScript for enhanced interactions.

Deployment Infrastructure

Deployment on a VPS served with the Gunicorn HTTP server and routed with NGINX. Data is served throught a MariaDB instance.

Development Progress

Status

Completed

Start Date

2025-10-06

Features

Dynamically populated personal blog Completed
Dynamically populated project portfolio Completed
Category, tags, and technologies tagging system Completed
Landing Page Completed

Exploratory Avenues

Project Enhancements

  • Enable comments on blogposts.
  • Allow e-mail signup for new developments.
  • Implement searching and filtering by tags/categories/languages.
  • Create related articles/projects.

Follow-up Projects

  • Create a Bulma + JS carousel.
  • Central admin dashboard.
  • Implement web analytics.