https://github.com/jirihofman/portfolio
Portfolio page with Jiří Hofman's hobby projects. Can be used as a template for other GitHub users. Learning Tailwind CSS along the way. Using Next.js with App router.
https://github.com/jirihofman/portfolio
github-profile nextjs-app-router nextjs-github-page nextjs-portfolio nextjs-portfolio-template portfolio portfolio-template portfolio-website react-portfolio-website
Last synced: about 2 months ago
JSON representation
Portfolio page with Jiří Hofman's hobby projects. Can be used as a template for other GitHub users. Learning Tailwind CSS along the way. Using Next.js with App router.
- Host: GitHub
- URL: https://github.com/jirihofman/portfolio
- Owner: jirihofman
- Created: 2023-04-24T07:10:55.000Z (about 2 years ago)
- Default Branch: master
- Last Pushed: 2024-10-23T20:57:11.000Z (7 months ago)
- Last Synced: 2024-10-24T01:08:49.808Z (7 months ago)
- Topics: github-profile, nextjs-app-router, nextjs-github-page, nextjs-portfolio, nextjs-portfolio-template, portfolio, portfolio-template, portfolio-website, react-portfolio-website
- Language: JavaScript
- Homepage: https://portfolio-jirihofman.vercel.app/
- Size: 790 KB
- Stars: 100
- Watchers: 1
- Forks: 25
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🔗 [portfolio-jirihofman.vercel.app](https://portfolio-jirihofman.vercel.app)
[](https://vercel.com/new/import?repository-url=https%3A%2F%2Fgithub.com%2Fjirihofman%2Fportfolio&env=GH_TOKEN,VC_TOKEN)
My personal portfolio website, built with [Next.js](https://nextjs.org/), [Tailwind CSS](https://tailwindcss.com/) and deployed to [Vercel](https://vercel.com/). Based on [chronark's site](https://chronark.com/). Some ideas borrowed from [leerob/leerob.io](https://github.com/leerob/leerob.io).
It is supposed to be used as a **template for other GitHub users' portfolios**. Data about user and projects are gathered via GitHub and Vercel API.
## Tech stack
- **Framework**: [Next.js](https://nextjs.org/)
- **Deployment**: [Vercel](https://vercel.com)
- **Styling**: [Tailwind CSS](https://tailwindcss.com)
## Running Locally
```sh
git clone https://github.com/jirihofman/portfolio.git
cd portfolio
```
### Environment variables
Create a `.env` file similar to [`.env.example`](https://github.com/jirihofman/profile/blob/main/.env.example).
```sh
mv .env.example .env.local
```
Add GitHub token into the new file.
```sh
GH_TOKEN=YOUR_GH_TOKEN
# If you have Vercel projects, create a token here https://vercel.com/account/tokens to get more info.
VC_TOKEN=YOUR_VERCEL_TOKEN
```
#### Optional environment variables
Providing an OpenAI API key is optional. If you don't have one, the site will work without it. If you do, you enable the "OpenAI Stats" section on the homepage. This will show your OpenAI API usage statistics for the last 30 days.
```sh
OPENAI_API_KEY=YOUR_OPENAI_API_KEY
```
Then install dependencies and run the development server:
```sh
# Install dependencies.
npm install
# Replace jirihofman's personal info with octocat's.
npm run setup
# Start hacking.
npm dev
```
Edit `data.json` to put your personal information there.
## Cloning / Forking
Please remove all of my personal information in `data.json` before deploying your own version of this site by running `npm run setup`. Once you are happy with your `data.json`, set
```sh
# .env or .env.local
IS_TEMPLATE=false
```
in your ENVs to prevent `npm build` from reverting `data.json` back to Octocat's data.
### To check before deploying
- [ ] `data.json`: githubUsername, description, heroNames. Handled by `setup.mjs`.
- [ ] `README.md`: link at the top
- [ ] `app/layout.jsx`: metadata - title, description, favicon. Handled by `setup.mjs`.
- [ ] `public/favicon.ico`. Handled by `setup.mjs`.