https://github.com/scorchinghot/pfol
Creative Web Developer Portfolio
https://github.com/scorchinghot/pfol
blog cms graphcms graphql nextjs nextjs-app-router portfolio seo ssg ssr typescript web-development
Last synced: 2 months ago
JSON representation
Creative Web Developer Portfolio
- Host: GitHub
- URL: https://github.com/scorchinghot/pfol
- Owner: scorchinghot
- License: mit
- Created: 2025-08-05T05:11:00.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2025-08-05T05:26:51.000Z (11 months ago)
- Last Synced: 2025-09-05T00:46:00.065Z (10 months ago)
- Topics: blog, cms, graphcms, graphql, nextjs, nextjs-app-router, portfolio, seo, ssg, ssr, typescript, web-development
- Language: JavaScript
- Homepage: https://pfol.vercel.app
- Size: 58.6 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Pfol — A Creative Web Developer Portfolio
**Pfol** is a sleek, fast, and fully responsive personal portfolio site built with [Next.js](https://nextjs.org/). It showcases modern web projects, interactive UI features, and a touch of personal flair. Think of it as a living resume — clean code meets creativity.
> ⚠️ The contact form is just there for aesthetic purposes. It looks good, but doesn’t work — I got bored and yanked a key. If you want to reach out, just send an email.
---
## Live Demo
👉 [pfol.vercel.app](https://pfol.vercel.app)
---
## Features
- **Searchable blog posts** with real-time filtering and sorting
- **Featured project carousel** (powered by `react-multi-carousel`)
- **GraphCMS blog** with full **comments** and **author bios**
- Fully SSR/SSG using **Next.js dynamic routes**
- **GraphQL comment form** with `graphql-request`
- SEO-optimized metadata (`openGraph`, `twitter`, `canonical`, etc.)
- Gradient UI, animated blurbs, responsive layout, custom styling
- Contact section with email link (no functional form)
---
## Built With
- **Next.js** (App Router, SSR, SSG)
- **TypeScript**
- **Tailwind CSS**
- **GraphQL** via `graphql-request`
- **GraphCMS** as the CMS
- **React Hooks** (`useEffect`, `useState`)
- **Formspree** (initially intended for form logic)
---
## Getting Started
- Clone the Repo and Install Dependencies
```
git clone https://github.com/scorchinghot/pfol.git
cd pfol
npm install
```
- Set Environment Variables (Hygraph api)
```
NEXT_PUBLIC_GRAPHCMS_ENDPOINT=your_graphcms_api_endpoint
GRAPHCMS_TOKEN=your_graphcms_token
```
- And Run
```
npm run dev
```
---
## Contact
- If you want to collaborate:
> forwork2k24@gmail.com
---
## Credits
- GraphCMS
- React Multi Carousel
- Formspree
- Tailwind CSS