# 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).

## Getting Started

First, clone the repository:

```bash
git clone https://github.com/Denshooter/my_portfolio.git
cd my_portfolio
```

Then, install the dependencies:

```bash
npm install
# or
yarn install
# or
pnpm install
# or
bun install
```

### Development

To run the development server:

```bash
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
```

Open [http://localhost:3000](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:

```bash
npm run build
# or
yarn build
# or
pnpm build
# or
bun build
```

### Start

To start the application in production mode:

```bash
npm run start
# or
yarn start
# or
pnpm start
# or
bun start
```

### Lint

To run the linter:

```bash
npm run lint
# or
yarn lint
# or
pnpm lint
# or
bun lint
```

## Project Structure

```plaintext
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](https://nextjs.org/docs) - learn about Next.js features and API.
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.

You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions
are welcome!

## Author

- **Dennis Konkol** - [GitHub](https://github.com/Denshooter) | [LinkedIn](https://linkedin.com/in/dkonkol)