{"id":13406432,"url":"https://github.com/kremalicious/portfolio","last_synced_at":"2025-04-04T20:16:20.580Z","repository":{"id":33596702,"uuid":"133283555","full_name":"kremalicious/portfolio","owner":"kremalicious","description":"👔 Portfolio thingy","archived":false,"fork":false,"pushed_at":"2024-08-02T12:26:24.000Z","size":178490,"stargazers_count":491,"open_issues_count":0,"forks_count":37,"subscribers_count":6,"default_branch":"main","last_synced_at":"2024-08-02T13:59:23.899Z","etag":null,"topics":["design","jsonresume","nextjs","portfolio","react"],"latest_commit_sha":null,"homepage":"https://matthiaskretschmann.com","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kremalicious.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-05-13T23:53:31.000Z","updated_at":"2024-08-02T12:26:27.000Z","dependencies_parsed_at":"2024-10-26T09:20:01.607Z","dependency_job_id":null,"html_url":"https://github.com/kremalicious/portfolio","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kremalicious%2Fportfolio","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kremalicious%2Fportfolio/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kremalicious%2Fportfolio/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kremalicious%2Fportfolio/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kremalicious","download_url":"https://codeload.github.com/kremalicious/portfolio/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247242681,"owners_count":20907134,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["design","jsonresume","nextjs","portfolio","react"],"created_at":"2024-07-30T19:02:30.162Z","updated_at":"2025-04-04T20:16:20.548Z","avatar_url":"https://github.com/kremalicious.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://matthiaskretschmann.com\"\u003e\u003cimg src=\"public/github-header.png\" /\u003e\u003c/a\u003e\n \u003c/p\u003e\n\u003ch2 align=\"center\"\u003e\n  👔 Portfolio thingy.\n\u003c/h2\u003e\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://matthiaskretschmann.com\"\u003ematthiaskretschmann.com\u003c/a\u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/kremalicious/portfolio/actions\"\u003e\u003cimg src=\"https://github.com/kremalicious/portfolio/workflows/CI%2FCD%20Pipeline/badge.svg\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://codeclimate.com/github/kremalicious/portfolio/maintainability\"\u003e\u003cimg src=\"https://api.codeclimate.com/v1/badges/8f561ec93e0f8c6b15d9/maintainability\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://codeclimate.com/github/kremalicious/portfolio/test_coverage\"\u003e\u003cimg src=\"https://api.codeclimate.com/v1/badges/8f561ec93e0f8c6b15d9/test_coverage\" /\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n---\n\n- [🎉 Features](#-features)\n  - [💍 One data file to rule all pages](#-one-data-file-to-rule-all-pages)\n  - [🖼 Project images](#-project-images)\n  - [🐱 GitHub repositories](#-github-repositories)\n  - [📍 Location](#-location)\n  - [💅 Theme switcher](#-theme-switcher)\n  - [📇 Client-side vCard creation](#-client-side-vcard-creation)\n  - [💎 Importing SVG assets](#-importing-svg-assets)\n- [🤓 Scripts](#-scripts)\n  - [🎈 Add a new project](#-add-a-new-project)\n  - [🌄 Favicon generation](#-favicon-generation)\n- [✨ Development](#-development)\n  - [🔮 Linting](#-linting)\n  - [👩‍🔬 Testing](#-testing)\n- [🚚 Deployment](#-deployment)\n- [🏛 Licenses](#-licenses)\n\n---\n\n## 🎉 Features\n\nThe whole [portfolio](https://matthiaskretschmann.com) is a React-based app built with [Next.js](https://nextjs.org) in Typescript, using statically generated pages with a pinch of server-side rendering and server actions.\n\nIf you are looking for the former Gatsby-based app, it is archived in the [`gatsby-deprecated`](https://github.com/kremalicious/portfolio/tree/gatsby-deprecated) branch.\n\n### 💍 One data file to rule all pages\n\nAll 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.\n\nNext.js automatically creates pages from each item in that file utilizing the [`scripts/prebuild.ts`](scripts/prebuild.ts) script and the [`[slug]/page.tsx`](src/app/[slug]/page.tsx) template.\n\n- [`_content/projects.yml`](_content/projects.yml)\n- [`scripts/prebuild.ts`](scripts/prebuild.ts)\n- [`src/app/[slug]/page.tsx`](src/app/[slug]/page.tsx)\n\n### 🖼 Project images\n\nAll 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.\n\nNext.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.\n\n- [`src/components/ProjectImage/index.tsx`](src/components/ProjectImage/index.tsx)\n- [`script/content/images.ts`](script/content/images.ts)\n\n### 🐱 GitHub repositories\n\nThe open source section at the bottom of the front page shows selected GitHub repositories, sourced from GitHub.\n\nOn 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.\n\nIf you want to know how, have a look at the respective components:\n\n- [`src/lib/github.ts`](src/lib/github.ts)\n- [`_content/repos.json`](_content/repos.json)\n- [`src/components/Repository/index.tsx`](src/components/Repository/index.tsx)\n\n### 📍 Location\n\nOn client-side, my current and, if known, my next physical location on a city level is fetched from my (private) [nomadlist.com](https://nomadlist.com) profile and displayed in the header.\n\nFetching 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.\n\nIf you want to know how, have a look at the respective components:\n\n- [`src/app/actions.ts`](src/app/actions.ts)\n- [`src/components/Location/index.tsx`](src/components/Location/index.tsx)\n- [kremalicious/location](https://github.com/kremalicious/location)\n\n### 💅 Theme switcher\n\nIncludes 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](https://github.com/pacocoursey/next-themes) under the hood.\n\nIf you want to know how, have a look at the respective component:\n\n- [`src/components/ThemeSwitch/index.tsx`](src/components/ThemeSwitch/index.tsx)\n\n### 📇 Client-side vCard creation\n\nThe _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`.\n\nIf you want to know how, have a look at the respective component:\n\n- [`src/components/Vcard/index.tsx`](src/components/Vcard/index.tsx)\n\n### 💎 Importing SVG assets\n\nAll SVG assets will be converted to React components with the help of [@svgr/webpack](https://react-svgr.com). Makes use of [SVGR](https://github.com/smooth-code/svgr) so SVG assets can be imported like so:\n\n```js\nimport Logo from \"./images/logo.svg\";\nreturn \u003cLogo /\u003e;\n```\n\n## 🤓 Scripts\n\n### 🎈 Add a new project\n\nTo add a new project, run the following command. This adds a new item to the top of the `projects.yml` file, creating the title \u0026 slug from the argument:\n\n```bash\nnpm run new -- \"Hello\"\n```\n\nThen continue modifying the new entry in [`_content/projects.yml`](_content/projects.yml).\n\nFinally, add as many images as needed with the file name format and put into `public/images/`:\n\n```text\nSLUG-01.png\nSLUG-02.png\nSLUG-03.png\n...\n```\n\n### 🌄 Favicon generation\n\nThis generates all required favicon sizes from:\n\n- `src/images/favicon-512.png`\n- `src/images/favicon.svg` (handcrafted, adaptive based on OS theme)\n\nAlso creates a web manifest.\n\n```bash\nnpm run favicon\n```\n\n## ✨ Development\n\n```bash\ngit clone git@github.com:kremalicious/portfolio.git\ncd portfolio/\n\n# GITHUB_TOKEN is required for some parts\n# See https://docs.github.com/en/github/authenticating-to-github/creating-a-personal-access-token\ncp .env.sample .env\nvi .env\n\nnpm i\nnpm run dev\n```\n\n### 🔮 Linting\n\n[Biome](https://biomejs.dev) is setup for all linting and formatting purposes:\n\n```bash\nnpm run lint\n```\n\n### 👩‍🔬 Testing\n\nTest suite is setup with [Jest](https://jestjs.io) and [react-testing-library](https://github.com/kentcdodds/react-testing-library).\n\nTo run all tests, including type checking and linting of all files:\n\n```bash\nnpm test\n```\n\nMost test files live beside the respective component. Testing setup, fixtures, and mocks can be found in the `tests/` folder.\n\n## 🚚 Deployment\n\nEvery branch or Pull Request is automatically deployed by [Vercel](https://vercel.com) 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.\n\n## 🏛 Licenses\n\n**© Copyright 2024 Matthias Kretschmann**\n\nAll images and projects are plain ol' copyright, most displayed projects are subject to the copyright of their respective owners.\n\nDon't care if you fork \u0026 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 \u0026 layout makes up my brand identity. So please don't just clone everything, but rather do a remix!\n\nAll the rest, like all code and documentation, is under:\n\n**The MIT License**\n\n[Full MIT license text](LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkremalicious%2Fportfolio","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkremalicious%2Fportfolio","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkremalicious%2Fportfolio/lists"}