Dennis Konkol's Portfolio

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

1. Set Up Raspberry Pi: Ensure Docker is installed on your Raspberry Pi.
2. Configure GitHub Secrets: Add the necessary secrets (e.g., GHOST_API_KEY, MY_EMAIL, MY_PASSWORD) to your GitHub repository.
3. Push to GitHub: Push your changes to the production, dev, or preview branches 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!

Author

• Dennis Konkol - GitHub | LinkedIn