Dennis Konkol's Portfolio Website
This is a Next.js project bootstrapped with
create-next-app.
Getting Started
First, clone the repository:
git clone https://github.com/Denshooter/my_portfolio.git
cd my_portfolio
Then, install the dependencies:
npm install
# or
yarn install
# or
pnpm install
# or
bun install
Development
To run the development server:
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
Open http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.
Build
To build the application for production:
npm run build
# or
yarn build
# or
pnpm build
# or
bun build
Start
To start the application in production mode:
npm run start
# or
yarn start
# or
pnpm start
# or
bun start
Lint
To run the linter:
npm run lint
# or
yarn lint
# or
pnpm lint
# or
bun lint
Project Structure
my_portfolio/
├── .github/
│ └── workflows/
│ └── main.yml
├── app/
│ ├── api/
│ │ ├── email/
│ │ │ └── route.tsx
│ │ ├── fetchAllProjects/
│ │ │ └── route.tsx
│ │ ├── fetchImage/
│ │ │ └── route.tsx
│ │ ├── fetchProject/
│ │ │ └── route.tsx
│ │
i mean to give more examples how it was built what it features and how it works not how to run it, but more explanations about the project and how its deployed etc.
Got it! Here's an updated README.md that provides more detailed explanations about the project, its features, how it was built, and how it is deployed:
```md
# Dennis Konkol's Portfolio
This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app). It showcases my projects, provides a way to contact me, and includes various other features.
## Features
- **Responsive Design**: The portfolio is fully responsive and works on all devices.
- **Project Showcase**: Displays a list of projects fetched from a Ghost CMS.
- **Contact Form**: Allows visitors to send me messages via email.
- **SEO Optimized**: Includes metadata and Open Graph tags for better SEO.
- **Dynamic Sitemap**: Automatically generates a sitemap for better search engine indexing.
- **Cookie Consent**: Includes a cookie consent banner to comply with GDPR.
- **Zero-Downtime Deployment**: Uses Docker and GitHub Actions for seamless deployments to a Raspberry Pi.
## Project Structure
```plaintext
my_portfolio/
├── .github/
│ └── workflows/
│ └── main.yml
├── app/
│ ├── api/
│ │ ├── email/
│ │ │ └── route.tsx
│ │ ├── fetchAllProjects/
│ │ │ └── route.tsx
│ │ ├── fetchImage/
│ │ │ └── route.tsx
│ │ ├── fetchProject/
│ │ │ └── route.tsx
│ │ ├── og/
│ │ │ └── route.tsx
│ │ ├── projects/
│ │ │ └── route.tsx
│ │ ├── sitemap/
│ │ │ └── route.tsx
│ ├── components/
│ │ ├── ClientCookieConsentBanner.tsx
│ │ ├── Contact.tsx
│ │ ├── CookieConsentBanner.tsx
│ │ ├── Footer.tsx
│ │ ├── Footer_Back.tsx
│ │ ├── Header.tsx
│ │ ├── Hero.tsx
│ │ ├── Projects.tsx
│ ├── styles/
│ │ └── ghostContent.css
│ ├── globals.css
│ ├── layout.tsx
│ ├── metadata.tsx
│ ├── not-found.tsx
│ ├── page.tsx
│ ├── privacy-policy/
│ │ └── page.tsx
│ ├── legal-notice/
│ │ └── page.tsx
│ ├── projects/
│ │ └── [slug]/
│ │ └── page.tsx
│ ├── sitemap.xml/
│ │ └── route.tsx
│ ├── utils/
│ │ └── send-email.tsx
├── public/
│ ├── icons/
│ │ ├── github.svg
│ │ ├── linkedin.svg
│ ├── images/
│ ├── robots.txt
├── Dockerfile
├── README.md
├── next.config.ts
├── package.json
├── tailwind.config.ts
├── tsconfig.json
└── eslint.config.mjs
How It Works
Project Showcase
Projects are fetched from a Ghost CMS using the Ghost Content API. The API routes in the app/api directory handle
fetching all projects, fetching a single project by slug, and fetching images.
Contact Form
The contact form allows visitors to send me messages via email. It uses the nodemailer package to send emails through
an SMTP server. The API route app/api/email/route.tsx handles the email sending logic.
SEO and Open Graph
The project includes metadata and Open Graph tags to improve SEO. The app/metadata.tsx file defines the metadata for
the site. The app/api/og/route.tsx file generates dynamic Open Graph images.
Dynamic Sitemap
A dynamic sitemap is generated to help search engines index the site. The app/api/sitemap/route.tsx file generates the
sitemap, and the app/sitemap.xml/route.tsx file serves it.
Cookie Consent
A cookie consent banner is included to comply with GDPR. The app/components/CookieConsentBanner.tsx and
app/components/ClientCookieConsentBanner.tsx components handle the display and logic of the cookie consent banner.
Zero-Downtime Deployment
The project uses Docker and GitHub Actions for zero-downtime deployments to a Raspberry Pi. The
.github/workflows/main.yml file defines the GitHub Actions workflow for deploying the project. The Dockerfile
defines the Docker image for the project.
Deployment
The project is deployed using Docker and GitHub Actions. The GitHub Actions workflow is defined in
.github/workflows/main.yml. It builds the Docker image and deploys it to a Raspberry Pi with zero downtime.
Steps to Deploy
- Set Up Raspberry Pi: Ensure Docker is installed on your Raspberry Pi.
- Configure GitHub Secrets: Add the necessary secrets (e.g.,
GHOST_API_KEY,MY_EMAIL,MY_PASSWORD) to your GitHub repository. - Push to GitHub: Push your changes to the
production,dev, orpreviewbranches to trigger the deployment workflow.
Learn More
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!