1
0
mirror of https://github.com/kremalicious/portfolio.git synced 2024-06-19 10:53:20 +02:00
👔 Portfolio thingy, built with Gatsby https://matthiaskretschmann.com
Go to file
dependabot[bot] 2fab1715f8
Bump next-themes from 0.2.1 to 0.3.0 (#1295)
Bumps [next-themes](https://github.com/pacocoursey/next-themes) from 0.2.1 to 0.3.0.
- [Release notes](https://github.com/pacocoursey/next-themes/releases)
- [Commits](https://github.com/pacocoursey/next-themes/commits/v0.3.0)

---
updated-dependencies:
- dependency-name: next-themes
  dependency-type: direct:production
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
2024-06-10 12:31:18 +01:00
_content add farcaster 2024-04-10 17:06:52 +01:00
.github bump github actions 2024-02-05 23:44:15 +00:00
public update robots.txt to block more AI bots 2024-03-29 13:44:47 +00:00
scripts make sure projectsOutput exists 2024-02-05 23:23:46 +00:00
src tweak location display logic 2024-04-21 14:38:01 +01:00
tests more unit tests 2024-02-06 01:29:33 +00:00
.codeclimate.yml move to app router (#1284) 2024-02-01 18:59:51 +00:00
.editorconfig put back editorconfig 2023-01-29 21:47:50 +00:00
.env.example move to app router (#1284) 2024-02-01 18:59:51 +00:00
.eslintrc.json Migrate to Next.js + TypeScript (#1038) 2022-11-15 23:14:59 +00:00
.gitignore refactor: handle content generation as prebuild step 2024-02-04 22:17:24 +00:00
.nvmrc switch to Node.js v20 2024-02-05 23:04:49 +00:00
.prettierrc refactor 2024-02-05 09:29:00 +00:00
.stylelintrc simplify stylelint/prettier setup 2020-03-22 00:27:33 +01:00
LICENSE documentation, switch to Travis 2018-05-14 01:51:47 +02:00
next-env.d.ts Migrate to Next.js + TypeScript (#1038) 2022-11-15 23:14:59 +00:00
next.config.js move to app router (#1284) 2024-02-01 18:59:51 +00:00
package-lock.json Bump next-themes from 0.2.1 to 0.3.0 (#1295) 2024-06-10 12:31:18 +01:00
package.json Bump next-themes from 0.2.1 to 0.3.0 (#1295) 2024-06-10 12:31:18 +01:00
README.md change dev command 2024-04-10 16:05:26 +01:00
tsconfig.json test tweaks, switch to strict mode 2024-02-06 01:42:05 +00:00

👔 Portfolio thingy.

matthiaskretschmann.com



🎉 Features

The whole portfolio is a React-based app built with Next.js in Typescript, using statically generated pages with a pinch of server-side rendering and server actions.

If you are looking for the former Gatsby-based app, it is archived in the gatsby-deprecated branch.

💍 One data file to rule all pages

All displayed project content is powered by one YAML file where all the portfolio's projects are defined. The project description itself is transformed from Markdown written inside the YAML file into HTML on build time.

Next.js automatically creates pages from each item in that file utilizing the scripts/prebuild.ts script and the [slug]/page.tsx template.

🖼 Project images

All project images live under public/images and are automatically attached to each project based on the inclusion of the project's slug in their filenames.

Next.js with next/image generates all required image sizes for delivering responsible, responsive images to visitors, including lazy loading of all images. For this to work, images are analyzed on build time and various image metadata is passed down as props.

🐱 GitHub repositories

The open source section at the bottom of the front page shows selected GitHub repositories, sourced from GitHub.

On build time, all my public repositories are fetched from GitHub, then filtered against the ones defined in _content/repos.json, sorted by the last push date, and provided via the pageContext of the front page.

If you want to know how, have a look at the respective components:

📍 Location

On client-side, my current and, if known, my next physical location on a city level is fetched from my (private) nomadlist.com profile and displayed in the header.

Fetching is split up into an external serverless function, a server action, and display component. Fetching is done with a serverless function as to not expose the whole profile response into the browser.

If you want to know how, have a look at the respective components:

💅 Theme switcher

Includes a theme switcher which allows user to toggle between a light and a dark theme, where by default the user's system theme is used automatically. Uses next-themes under the hood.

If you want to know how, have a look at the respective component:

📇 Client-side vCard creation

The Add to addressbook link in the footer automatically creates a downloadable vCard file on the client-side, based on data defined in _content/meta.json.

If you want to know how, have a look at the respective component:

💎 Importing SVG assets

All SVG assets will be converted to React components with the help of @svgr/webpack. Makes use of SVGR so SVG assets can be imported like so:

import Logo from './images/logo.svg'
return <Logo />

🤓 Scripts

🎈 Add a new project

To add a new project, run the following command. This adds a new item to the top of the projects.yml file, creating the title & slug from the argument:

npm run new -- "Hello"

Then continue modifying the new entry in _content/projects.yml.

Finally, add as many images as needed with the file name format and put into public/images/:

SLUG-01.png
SLUG-02.png
SLUG-03.png
...

🌄 Favicon generation

This generates all required favicon sizes from:

  • src/images/favicon-512.png
  • src/images/favicon.svg (handcrafted, adaptive based on OS theme)

Also creates a web manifest.

npm run favicon

Development

git clone git@github.com:kremalicious/portfolio.git
cd portfolio/

# GITHUB_TOKEN is required for some parts
# See https://docs.github.com/en/github/authenticating-to-github/creating-a-personal-access-token
cp .env.sample .env
vi .env

npm i
npm run dev

🔮 Linting

ESLint, Prettier, and Stylelint are setup for all linting purposes:

npm run lint

To automatically format all code files:

npm run format

👩‍🔬 Testing

Test suite is setup with Jest and react-testing-library.

To run all tests, including type checking and linting of all files:

npm test

Most test files live beside the respective component. Testing setup, fixtures, and mocks can be found in the tests/ folder.

🚚 Deployment

Every branch or Pull Request is automatically deployed by Vercel with their GitHub integration, where the main branch is automatically aliased to matthiaskretschmann.com. A link to a preview deployment will appear under each Pull Request.

🏛 Licenses

© Copyright 2024 Matthias Kretschmann

All images and projects are plain ol' copyright, most displayed projects are subject to the copyright of their respective owners.

Don't care if you fork & play with it, but you're not allowed to publish anything from it as a whole without my written permission. Also please be aware, the combination of typography, colors & layout makes up my brand identity. So please don't just clone everything, but rather do a remix!

All the rest, like all code and documentation, is under:

The MIT License

Full MIT license text