https://github.com/williamfridh/williamfridh.com-portfolio
Personal portfolio with a prompt-inspired design based on Next.js and headless WordPress.
https://github.com/williamfridh/williamfridh.com-portfolio
headless-wordpress nextjs portfolio-website
Last synced: 6 months ago
JSON representation
Personal portfolio with a prompt-inspired design based on Next.js and headless WordPress.
- Host: GitHub
- URL: https://github.com/williamfridh/williamfridh.com-portfolio
- Owner: williamfridh
- License: other
- Created: 2024-03-11T21:21:31.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-07-09T20:20:33.000Z (almost 2 years ago)
- Last Synced: 2025-02-03T00:02:43.010Z (over 1 year ago)
- Topics: headless-wordpress, nextjs, portfolio-website
- Language: TypeScript
- Homepage: https://williamfridh.com/
- Size: 5.24 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 12
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# WilliamFridh.com - Portfolio
**Welcome to the repository containing my portfolio website. It uses the technologies Next.js (thus also React JS), TypeScript, Tailwind CSS, TypeScript, GraphQL, and deploys to Vercel. A liver version is available at [WilliamFridh.com](https://williamfridh.com/). it has basic support for pages and in addition, portfolio and makes use [Advanced Custom Fields (ACF)](https://www.advancedcustomfields.com/).**
Note that this README.md file covers both folders in this repository: "app", and "cms". CMS however only contains a theme used for displaying an error message upon visiting the URL where WordPress is located.
## Background
This project is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) that I built on to achieve my vision. It was requested as part of the course [EH1021 Active Career Start](https://www.kth.se/student/kurser/kurs/EH1021) with the goal of preparing us as students for the job application process.
# Running The APP
1. Clone the repository.
2. Follow the instructions in the file ".env.example".
3. Read through the code and find what's required by the WordPress GraphQL.
4. Run the development server:
```bash
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
```
5. Open [http://localhost:3000](http://localhost:3000) with your browser to see the website in action.
# info
- No "pages/index.tsx" is used. Instead "next.config.js" redirects traffic from "/" to "/home" so that "pages/[slug].tsx" can handle the request. "/home" is stored inside ".env.local".
- This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
# WordPress
The website has unique styling for certain elements to keep the theme consistent.
## Formating data in WordPress
- Lists must start with a "header" element. For instance:
```
- Courses
- Mathematics
- Computer Programming
```
- The menu is to be loaded from a menu by the name "Main".
- The social menu is to be loaded from a menu by the name "Social".
# Sources:
- Badges from:
https://github.com/alexandresanlim/Badges4-README.md-Profile?tab=readme-ov-file