adepaul.dev

Welcome to adepaul.dev, my portfolio website, which contains additional details about my projects, as well as my educational background and contact information. The site is built using Spring Boot, a popular Java framework primarily used for building web applications. As this website was my introduction to the web development world, you may be more interested in some of my other projects that use more modern frameworks:

• SDPS (Tauri/Vite)
• Poetry Site (Next.js)
• anthonydepaulmasonryinc.com (Next.js)

Project Setup

Here's an overview of how the website is structured:

• Spring Boot
  • The website consists of five controllers for the following routes: /, /contact, /legal, /projects, /projects/{project}, and an additional controller for handling errors. The home and projects controllers retrieve additional data for those pages and pass that data to the model, which is handled by Thymeleaf. The data the controllers receive is stored as JSON within the resources directory. For example, the home controller retrieves the list of featured projects from featured.json and passes that list to the model for rendering.
• Thymeleaf
  • Thymeleaf is a template engine commonly used with Spring that allows structured parts of HTML to be joined to make dynamic layouts. Thymeleaf fragments are used for common components and styles that get reused around the site. For example, the navbar, the footer, and these project write-ups are all fragments that are inserted into a larger template that defines the page. Additionally, the Thymeleaf templates receive data from the Spring controllers, which is then displayed on the page.
• Hosting
  • The website is hosted on a inexpensive Hetzner shared vCPU server located in Ashburn, Virginia. The server may not be very powerful with only 2 virtual CPUs, 2 GB of RAM, and 40 GB of storage, but it is more than enough for the occasional traffic the site can realistically expect.
  • A GitHub Actions workflow is used to push a compiled Docker image to the GitHub Container Registry (GHCR). The gradle-publish.yml workflow file is configured to set up a build environment that compiles the website, builds a Docker image, and then pushes that Docker image to GHCR every time an update is pushed to the master branch. Additionally, the action updates the GitHub dependency graph that is used to monitor the project's dependencies for any vulnerability issues that may appear. When a dependency vulnerability is found, the GitHub Dependabot sends an email alert.
  • On the Hetzner server, the site is run using Cloudflare Tunnels and Watchtower, which are configured through Docker Compose. Cloudflare Tunnels provide an easy way of serving content to the internet without opening a port on your server for everyone to see. Instead, the cloudflared Docker image is connected to the same network as the website Docker container and routes all inbound and outbound traffic to and from the website Docker container. When connecting to adepaul.dev from the public internet, the request is sent to Cloudflare's public CMS servers, which then send a request to the website through the cloudflared container. By using Cloudflare's servers, the website server is better secured from the open internet and can additionally utilize the benefits of using Cloudflare, such as easy HTTPS setup and caching. Because the site primarily serves static content, Cloudflare's caching rules have been configured to be as aggressive as possible to further reduce unnecessary traffic to the main server.
• Design
  • The site's design is primarily focused on being clean, easy to read and navigate, and responsive for all screen sizes. The styling was partially inspired by early '90s user interface design, such that each project section is contained within a simplistic window with a monospaced font. Originally, the site had an intro "boot sequence" animation upon initially visiting. The animation sequence of a splash screen followed by fake boot console output was inspired by an old Raspberry Pi I had that had a similar boot animation sequence. The intro animation can still be viewed here. The pixel filter effect was achieved by overlaying this 3×3 pixel image with the CSS darken mix-blend-mode to effectively reduce the display resolution by a factor of nine, and was inspired by this Serial Experiments Lain fan site (warning: audio played immediately and has a flashing background).
  • I have always liked tag systems for sorting large sets of items, and that was the inspiration for the projects page search filter functionality. The page provides several filter settings that allow users to easily filter the list of displayed projects that contain or exclude the tags according to the buttons selected.