Welcome to my website! This site is hosted with Nginx on a Raspberry Pi 5. I am just starting to learn how Raspberry Pis work and how to use them
It runs inside a Docker container, and after becoming curious about how websites are made, I decided to create one myself.
I am still learning how to use Docker, Nginx, HTML, and CSS, so this website is a work in progress. I will continue adding more content as I learn.
OPEN LAB FRAME CHANGELOG
This timeline runs from the latest website version back to the first Open Lab Frame page. I will continue updating this changelog as the site evolves.
● Upgraded the homelab from the old HP to a Lenovo Tiny. Smaller box, same number of things to troubleshoot.
● Refreshed the Projects page, topology, and public documentation to match what is actually running (and what is still just a plan).
• Cleaned up the website. The homelab will probably turn back into spaghetti by tomorrow.
● Updated the Public Homelab Documentation with the latest homelab information.
● Updated the Network Topology on the Projects page to match my current network setup.
● Added search and navigation icons to the Public Homelab Documentation.
● Added Pagefind search to the Public Homelab Documentation so the growing notes are easier to search.
● Updated the public documentation with the latest homelab information.
● Added a Public Homelab Documentation page so I can share the notes I actually use while working on my homelab.
● Split the notes into Hardware, Proxmox, Networking, Services, Procedures, and Projects so they're easier to browse.
● Added a Before You Read note explaining that I leave out private details while keeping the useful setup and troubleshooting information.
● Linked the Projects page to the new documentation section and removed the old duplicate notes popup from the Projects page.
● Cleaned up older notes so the public documentation better matches what I'm actually using and planning in the homelab now.
● Fixed links between documentation pages so they still work after the production build hardens the page IDs.
● Tweaked the documentation layout and sizing so it fits the rest of the site's black-and-gold style better.
● Added a Homelab Topology section to the Projects page.
● Updated the Projects page to better show how my devices, services, and virtual machines connect together.
● Continued refining the Projects page layout, visuals, and current homelab information.
● Updated the HP ProDesk 600 G4 project from Configuring to In use now that the Proxmox, Jellyfin, development, and management setup is active.
● Expanded the HP ProDesk 600 G4 project to show its current roles: Proxmox VE, Jellyfin, Open Lab Frame Dev, and Homelab Management.
● Added interactive Specs controls to the Raspberry Pi 5, Raspberry Pi 3 Model B, and HP ProDesk 600 G4 project cards so visitors can view each device's hardware details.
● Made the Specs panels work across desktop, mobile, and keyboard navigation, including hover support, tap-to-open behavior, Escape to close, responsive sizing, and accessible ARIA controls.
● Added Portainer and Nginx Proxy Manager to the Projects page service icon collection, bringing the displayed homelab services up to date with the current management stack.
● Finally started developing the Projects Page!
● Added the Raspberry Pi 5's website hosting and monitoring setup, including Docker, Nginx, Cloudflare Tunnel, Grafana, and Uptime Kuma.
● Added the Raspberry Pi 3 Model B's Tailscale and Pi-hole setup for private remote access and DNS filtering.
● Added the HP ProDesk 600 G4's Jellyfin media server project, marked as Configuring while I work on the initial setup.
● Added expandable screenshot galleries for Pi 5 system monitoring, Cloudflare Tunnel health, website uptime, Cloudflare traffic reports, and Pi-hole. Selecting a thumbnail enlarges the image over the Projects page. Close the preview with its Close button, Escape, or by clicking outside it; the gallery stays open underneath.
● Added labeled Jellyfin, Docker, Nginx, Grafana, Cloudflare, Tailscale, and Pi-hole icons below the Projects introduction, preserving their original colors and gradients. The icons are hosted with the website and wrap on smaller screens.
● Made the In use badges green for the Raspberry Pis and kept the Jellyfin project's Configuring badge gold.
● Added responsive device layouts, keyboard focus indicators, and descriptions for dashboard images while keeping the Projects page's black-and-gold design.
● Fixed duplicate body and nested main tags on the Projects page. Added its favicon, expanded page description, canonical URL, and Privacy Policy footer link.
● Updated the Setup panel with the HP ProDesk's hardware and Hostodo VPS, and removed the Raspberry Pi 3's Temporarily Down label.
● Moved the website changelog into its own file to make future version updates easier to maintain. It still opens from the clock button on the homepage.
● Added Projects page to the website but still in development so doesn't have any content yet.
● Added a Privacy Policy page to the website to explain how the website collects and uses data from visitors.
● Made Card icons much wider to make them more visible and easier to navigate.
● Did some cleanup on the website's code by removing unused code.
● Rewrote the Raspberry Pis description in the Setup panel to be more informative of what hardware is being used instead of what I'm actually using them for, that'll be the Projects page will be used for once it's complete.
● Added SKU numbers for Raspberry Pi 5 and added a link to the Raspberry Pi 3's Amazon product page.
● Redesigned the website for the 7th time.
● Completely removed the Pi Icon and added the Projects Box located below the About Me section that will send you to the project page that shows all of my completed and in-progress projects. Currently unaccessible because the project page is still in development.
● Moved the Current Setup so the location of the Box will be on the bottom of the About Me section and renamed it to Setup.
● Added a new way of accessing my social media links by clicking on the Social Hub icon right below the About Me section. This will open a panel that shows all of my social media links in a card format.
● Added Instagram to my social media links.
● Removed the background image and replaced it with a solid color background because I got sick of the background image and wanted a change.
● Redesigned the website again for the 6th time.
● Completely redesigned the Current Project Panel to Raspberry Pis and their monitoring dashboards.
● Added hover effects to the website icon and buttons to make them more interactive.
● Put a Temporary Down Tag on Pi 3 due to forgetting the password and not being able to access it. So it is temporarily down until I can get it back up and running.
● Added an extra 4 TB NVMe drive to my main PC and removed the 1 TB NVMe drive. Now I have a total of 8 TB NVMe storage instead of 5 TB NMVe storage.
● Added a link for the my main PC's hardware to PCPartPicker.com
● Resize the bottom icons so they are all the same size and aligned with each other.
● Fixed the icon alignment issues and Panel overlap issues.
● Changed the ●●● icon to a Clock icon to better represent the website's version history.
● Changed the GitHub icon to a YouTube icon.
● Added ● ● ● icon for a changelog of the website's version history.
● Grouped the Grafana dashboards and built-in service dashboards into separate sections in the Current Project panel.
● Fixed the lightbox image preview when clicking on a project screenshot it will close the preview and the Current Project panel. Now the lightbox preview will close and the Current Project panel will remain open.
● Added the Current Projects panel that shows the monitoring dashboards and built-in service dashboards used throughout my homelab.
● Added cloudflare security features to the website.
● Added an owner icon that is only visible to me when I am logged in.
● Added a visitor counter that shows the number of unique visitors to the website.
● Added social links for Discord, Github, and Steam. Made them into icons that are linked to my social media profiles.
● Added a Current Setup panel that shows the hardware and software used in my homelab.
●The website was redesigned many times until it satisfied myself. The layout was changed to a single-page design with a liquid background and a centered main content area.
●The website was also made to responsive to different screen sizes and devices.
● Bought a domain what is now called openlabframe.com Connected openlabframe.com to the Raspberry Pi 5 through an outbound Cloudflare Tunnel, allowing the site to be public without opening router ports or directly exposing the Pi.
●The website was moved into a Docker container and hosted with Nginx on the Raspberry Pi 5. This allowed for easier management of the website and its dependencies.
● Open Lab Frame began as a basic HTML and CSS page created on the Raspberry Pi 5. It was hosted Nginx on Localhost to test the website before moving it into a Docker container.
