This repository contains the source code and documentation of my personal website niehaus.dev.
The goal is to offer a creative personal website, which also acts as a demonstration of my technical skills.
To represent my authentic writing and language skills, ChatGPT or equivalent tools have not been used in support of writing this documentation.
The source-code is written in TypeScript. The following technologies are used:
- React - Front End Framework
- Joy UI - React component library
- React Router - Browser Based routing
- Vite - Compiler
- Spline - 3D design tool
- Mapbox - In-browser map
- Firebase Hosting - Web Hosting
- GitLab CI/CD - DevOps
The personal website consists of a WebGL 3D model, which is a symblic representation of "my room".
To reveal information which you would typically find on personal websites, the user can interact with objects in the room.
- Laptop: Opens a terminal-style representation of my resume \
- Map: Opens a map of all my flights & travels \
- Notebook: Opens my resume (document) \
- Artboard: Opens a page showing my skills and projects \
- Radio: Plays/Pauses lofi-tunes as background music \
- Light switch: Toggles between full / reduced lighting \
- Roomba: Opens controls to move the roomba around the room. The roomba can push some elments and move them, as physics are supported by the 3D model.
The UI and 3D model reacts to dark/light mode. By default, the browser supplies the current configuration. However, the system mode can be overriden by a toggle in the floating menu on the bottom-right.
Major resume data is stored in JSON Resume, an open source JSON-based standard for resumes.
The file is located at src/resume.json and is maintained manually.
The following pages are consuming data from resume.json
- /terminal - Resume navigator in terminal style
- /skills - My skills and projects displayed in a webpage in an architectural style
I did some research on how to maintain resume data automatically from LinkedIn. Unfortunately, LinkedIn doesn't provide a simple API to query profiles. While this is possible by using third-party services with paid subscriptions, I decided to rather maintain it manually.
I am using Spline, a web-based 3D design tool to design the Room. It is then loaded into the React application using @splinetool/react-spline.
To keep the loading time as low as possible, It is important to keep objects, materials and other objects as low/simple as possible (detailed guide here). In addtion, the react-spline library, which is in beta as of Janurary 2024, doesn't seem to offer good performance in comparison to writing the scene natively in Three.js.
Still, there's a significantly large .splinecode file to load. So I have to play with some UX to make the user feel good about it (this guide has been followed).
The project is automatically built and deployed to Firebase Hosting by a GitLab CI/CD pipeline on every push to main. There are no hosted dev and staging environments.
Install dependencies
npm installStart the dev server
npm run dev