stefan-girlich.github.io

Hi, I'm Stefan and this project contains the codebase for my website stefan-girlich.github.io. Feel free to fork and customize it for your own purposes under the given license.

Purpose

The website represents my CV including previous jobs in my career, current skills and my professional goals and motivation.

Features

• Responsive layout with breakpoints for desktop, tablet and mobile viewports
• Customizable theme and content
• Optimized for performance, SEO and accessibility via Lighthouse
• Tested on latest desktop and mobile versions of Chrome, Firefox and Safari (as of April 2022)

Core tech stack

• TypeScript
• React, Create React App
• styled-components
• Font Awesome
• gh-pages

Installation

If you plan to use this codebase for your own website, please first read "Customization" below.

1. Make sure you have Node.js (>=v16.14.2) installed. Installation via nvm is recommended
2. Make sure you have Yarn (>=v1.22.18) installed
3. Clone this repository to a local machine and cd into the local working copy
4. Run yarn install to install all dependencies
5. You may now
   • run yarn start to run a local development server
   • run yarn deploy to build the website and deploy it to GitHub pages
   • run yarn build to create a bundle for manual deployment

Customization

This section describes the standard approach to using this codebase as a template. Feel free to modify and re-use the codebase in any way you like under the given license.

1. Prepare the following assets:
   • a font from Fontsource
   • icons for the "motivation" section from Font Awesome Free
   • a color palette, e.g. from coolors
   • a full set of favicon files, e.g. via favicon.io
2. Fork this GitHub project to create a new project named <your-github-user-name>.github.io
3. In package.json, update the value of homepage to https://<your-github-user-name>.github.io
4. Follow the Installation steps above using your own fork
5. Install your own web font
   1. In package.json, replace the dependency starting with @fontsource with the package name of your chosen font
   2. In index.css, update the value for font-family to your chosen font
   3. In index.tsx, update the import starting with @fontsource to reflect the package for your chosen font
6. Install your own icons
   1. Search for files containing an import from '@fortawesome/fontawesome-svg-core/import.macro', e.g. importing the solid function
   2. In each file, apply your own icon's names (e.g. solid('camera')). Icon names are defined by Font Awesome
   3. In the public directory, replace all .png, .ico and .svg files with your own favicon files
7. Apply your own theme
   1. In theme.ts, insert your own colors and contrast text colors
   2. Optionally, adjust font sizes, spacing and breakpoints in theme.ts
8. Apply your own text content
   1. In index.html, apply your own texts for the <title> and <meta name="description"> tags
   2. In manifest.json, update name and short_name
   3. In data.json, apply your own CV information and general UI labels
9. Run yarn install to update changed dependencies
10. Run yarn start to see the changes in a local web browser or proceed with one of the other final steps from the Installation section

Known issues

• Most text values in data.json require special characters to be provided as Unicode characters, but some may contain HTML entities since they currently contain e.g. <a> tags
• Some information (e.g. page title) needs to be defined in index.html and manifest.json rather than in data.json
• Font Awesome icons cannot be defined via data.json since Dynamic Icon Importing requires string literals to be used
• The website has not been tested with right-to-left (RTL) layouts
• The website does not yet comply with the JSON Resume standard

License

This project is licensed under GPL v3.