249 lines
7.0 KiB
Markdown
249 lines
7.0 KiB
Markdown
# 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)
|