Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

Open Source has always a passion, so why not open sourcing my personal portfolio website.

The website is hosted at

The base idea is to have a portfolio, that represents me in different kind of ways. On one site, it is the contents, like the photography, projects and music that I created. But then it's also the minimalistic bright design, the animation contents or the tons of images I fit in on the pages.

alt text


  • Increase banner image quality, based on the browser size

Technologies used

  • Angular is the root framework of this application
  • Bootstrap is used for the layout, buttons and navigation
  • ng-xGallerify is my gallery component that hosts the photography portfolio

Everything else is developed from scratch. The languages that have been used are TypeScript, SCSS and HTML.

Branching should be done like the git flow, with a master, develop and feature branches, while master represents the production state of the database.

Depending on the project, my favorite set up is to work with a seperate terminal and a nice clean editor, which I both can upgrade with plug ins and adjust to my needs. I also tried to code much of this project by using GitHub Codespaces, which was a great success.


  • Install Node.js
  • Install Angular CLI
  • Clone the Repository via git clone
  • Run npm i in your local repository


  • Run ng serve to get the dev server started
  • Navigate to http://localhost:4200/
  • The app will automatically reload if you change any of the source files



  • Make sure you have rewrite rules set up on the webserver
  • Make sure deploy the api in the folder /api on the same level than the angular application. The API is part of a private repository

Build and Prerender

  • Remove all /. from the src/app/app-routing.module.ts
  • Run npm run prerender to prerender and build the project. This will generate static files for each route and prepare for SEO.
  • Upload all prerendered subfolders from dist/toni-hoffmann-com/browser to the web server
  • Add all /. back to the app-routing.module.ts
  • Run npm run prerender one more time
  • Upload all JS, HTML, Fonts from the root folder of dist/toni-hoffmann-com/browser to the web server