Open Source has always a passion, so why not open sourcing my personal portfolio website.
The website is hosted at toni-hoffmann.com.
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.
- Increase banner image quality, based on the browser size
- 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 version 16.16.0
- Install Angular CLI
- Clone the Repository via
git clone git@github.com:xremix/toni-hoffmann-com.git
- Run
npm install --legacy-peer-deps
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
- Remove all
/.
from thesrc/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 theapp-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