Dev (#38)

* ✨ chore: update CI workflow to include testing and multi-arch build (#29) * ✨ chore: remove unused dependencies from package-lock.json and updated to a better local dev environment (#30) * ✨ test: add unit tests * ✨ test: add unit tests for whole project * ✨ feat: add whatwg-fetch for improved fetch support * ✨ chore: update Node.js version to 22 in workflow * ✨ refactor: update types and improve email handling tests * ✨ refactor: remove unused imports * ✨ fix: normalize image name to lowercase in workflows * ✨ fix: ensure Docker image names are consistently lowercase * ✨ chore: update * ✨ chore: update base URL to use secret variable * ✨ chore: update to login to ghcr * ✨ fix: add missing 'fi' to close if statement in workflow * D branch 1 (#32) * full upgrade (#31) * ✨ chore: update CI workflow to include testing and multi-arch build (#29) * ✨ chore: remove unused dependencies from package-lock.json and updated to a better local dev environment (#30) * ✨ test: add unit tests * ✨ test: add unit tests for whole project * ✨ feat: add whatwg-fetch for improved fetch support * ✨ chore: update Node.js version to 22 in workflow * ✨ refactor: update types and improve email handling tests * ✨ refactor: remove unused imports * ✨ fix: normalize image name to lowercase in workflows * ✨ fix: ensure Docker image names are consistently lowercase * ✨ chore: update * ✨ chore: update base URL to use secret variable * ✨ chore: update to login to ghcr * ✨ fix: add missing 'fi' to close if statement in workflow * 🚀 fix: update Docker run commands to use specific network * D branch 1 (#34) * full upgrade (#31) * ✨ chore: update CI workflow to include testing and multi-arch build (#29) * ✨ chore: remove unused dependencies from package-lock.json and updated to a better local dev environment (#30) * ✨ test: add unit tests * ✨ test: add unit tests for whole project * ✨ feat: add whatwg-fetch for improved fetch support * ✨ chore: update Node.js version to 22 in workflow * ✨ refactor: update types and improve email handling tests * ✨ refactor: remove unused imports * ✨ fix: normalize image name to lowercase in workflows * ✨ fix: ensure Docker image names are consistently lowercase * ✨ chore: update * ✨ chore: update base URL to use secret variable * ✨ chore: update to login to ghcr * ✨ fix: add missing 'fi' to close if statement in workflow * 🚀 fix: update Docker run commands to use specific network * ✨ fix: add error handling for invalid project data * D branch 2 (#35) * full upgrade (#31) * ✨ chore: update CI workflow to include testing and multi-arch build (#29) * ✨ chore: remove unused dependencies from package-lock.json and updated to a better local dev environment (#30) * ✨ test: add unit tests * ✨ test: add unit tests for whole project * ✨ feat: add whatwg-fetch for improved fetch support * ✨ chore: update Node.js version to 22 in workflow * ✨ refactor: update types and improve email handling tests * ✨ refactor: remove unused imports * ✨ fix: normalize image name to lowercase in workflows * ✨ fix: ensure Docker image names are consistently lowercase * ✨ chore: update * ✨ chore: update base URL to use secret variable * ✨ chore: update to login to ghcr * ✨ fix: add missing 'fi' to close if statement in workflow * ✨ fix: format code for better readability in Contact and Footer components * D branch 2 (#36) * full upgrade (#31) * ✨ chore: update CI workflow to include testing and multi-arch build (#29) * ✨ chore: remove unused dependencies from package-lock.json and updated to a better local dev environment (#30) * ✨ test: add unit tests * ✨ test: add unit tests for whole project * ✨ feat: add whatwg-fetch for improved fetch support * ✨ chore: update Node.js version to 22 in workflow * ✨ refactor: update types and improve email handling tests * ✨ refactor: remove unused imports * ✨ fix: normalize image name to lowercase in workflows * ✨ fix: ensure Docker image names are consistently lowercase * ✨ chore: update * ✨ chore: update base URL to use secret variable * ✨ chore: update to login to ghcr * ✨ fix: add missing 'fi' to close if statement in workflow * ✨ fix: format code for better readability in Contact and Footer components * 🚀 fix: update Docker commands and remove hardcoded API URL * Update main.yml * Update main.yml * Update main.yml * D branch 1 (#37) * full upgrade (#31) * ✨ chore: update CI workflow to include testing and multi-arch build (#29) * ✨ chore: remove unused dependencies from package-lock.json and updated to a better local dev environment (#30) * ✨ test: add unit tests * ✨ test: add unit tests for whole project * ✨ feat: add whatwg-fetch for improved fetch support * ✨ chore: update Node.js version to 22 in workflow * ✨ refactor: update types and improve email handling tests * ✨ refactor: remove unused imports * ✨ fix: normalize image name to lowercase in workflows * ✨ fix: ensure Docker image names are consistently lowercase * ✨ chore: update * ✨ chore: update base URL to use secret variable * ✨ chore: update to login to ghcr * ✨ fix: add missing 'fi' to close if statement in workflow * ✨ feat: display base URL in Hero component * Update main.yml * Update next.config.ts * next.config.ts aktualisieren * Update main.yml * ✨ chore: refactor environment variable handling in workflow * ✨ chore: update GitHub Actions workflow for improved security and caching * 🚀 chore: update Trivy action version and enhance config * ✨ chore: update GitHub Actions workflows and add linter * 🚫 chore: remove Docker image vulnerability scan step * ✨ chore: update environment variable logging in workflow * ✨ chore: add dynamic environment for deployment jobs * 🚀 chore: set deployment environment to GitHub ref name * 🎉 chore: remove environment variable exposure in CI/CD * ✨ chore: remove sensitive environment variable logging and update variable references * ✨ chore: log environment variables for debugging purposes * ✨ chore: create .env file for environment variables setup * ✨ feat: copy .env file to Docker image for config * ✨ refactor: update environment variables to public scope * ✨ chore: remove environment variable from Hero component * ✨ fix: update environment variable references in workflow * ✨ chore: add folder structure display to workflow steps * ✨ chore: reorder CI steps for improved workflow clarity * ✨ fix: remove unnecessary console logs and correct base URL variable
2025-02-17 09:58:58 +01:00
parent 180b9aa9f8
commit 0cbec0bb19
22 changed files with 642 additions and 526 deletions
--- a/.github/workflows/linter.yml
+++ b/.github/workflows/linter.yml
@@ -0,0 +1,55 @@
+name: Lint Code Base
+
+on:
+  push:
+    branches:
+      - dev
+      - preview
+      - production
+    paths:
+      - 'app/**'
+      - 'public/**'
+      - 'styles/**'
+      - 'Dockerfile'
+      - 'docker-compose.yml'
+      - '.github/workflows/**'
+      - 'next.config.ts'
+      - 'package.json'
+      - 'package-lock.json'
+      - 'tsconfig.json'
+      - 'tailwind.config.ts'
+  pull_request:
+    branches:
+      - dev
+      - preview
+      - production
+    paths:
+      - 'app/**'
+      - 'public/**'
+      - 'styles/**'
+      - 'Dockerfile'
+      - 'docker-compose.yml'
+      - '.github/workflows/**'
+      - 'next.config.ts'
+      - 'package.json'
+      - 'package-lock.json'
+      - 'tsconfig.json'
+      - 'tailwind.config.ts'
+
+jobs:
+  build:
+    name: Check and Lint Code Base
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Check Out Code
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Lint Code Base
+        uses: github/super-linter@v4
+        env:
+          VALIDATE_ALL_CODEBASE: false
+          DEFAULT_BRANCH: production
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
--- a/.github/workflows/main.yml
+++ b/.github/workflows/main.yml
@@ -6,6 +6,18 @@ on:
      - production
      - dev
      - preview
+    paths:
+      - 'app/**'
+      - 'public/**'
+      - 'styles/**'
+      - 'Dockerfile'
+      - 'docker-compose.yml'
+      - '.github/workflows/main.yml'
+      - 'next.config.ts'
+      - 'package.json'
+      - 'package-lock.json'
+      - 'tsconfig.json'
+      - 'tailwind.config.ts'

 jobs:
  test_and_build:
@@ -15,10 +27,32 @@ jobs:
        uses: actions/checkout@v4

      - name: Set up Node
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
        with:
          node-version: '22'

+      - name: Cache Node.js modules
+        uses: actions/cache@v4
+        with:
+          path: ~/.npm
+          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-node-
+
+      - name: Create env file
+        run: |
+          touch .env
+          echo "NEXT_PUBLIC_BASE_URL=${{ vars.NEXT_PUBLIC_BASE_URL }}" >> .env
+          echo "NEXT_PUBLIC_GHOST_API_URL=${{ vars.NEXT_PUBLIC_GHOST_API_URL }}" >> .env
+          echo "NEXT_PUBLIC_GHOST_API_KEY=${{ secrets.NEXT_PUBLIC_GHOST_API_KEY }}" >> .env
+          echo "NEXT_PUBLIC_MY_EMAIL=${{ vars.NEXT_PUBLIC_MY_EMAIL }}" >> .env
+          echo "NEXT_PUBLIC_MY_PASSWORD=${{ secrets.NEXT_PUBLIC_MY_PASSWORD }}" >> .env
+          cat .env
+
+      - name: Show folder structure
+        run: |
+          ls -la
+
      - name: Install Dependencies
        run: npm install

@@ -32,14 +66,12 @@ jobs:
      - name: Build and Push Multi-Arch Docker Image
        run: |
          IMAGE_NAME="ghcr.io/${{ github.repository_owner }}/my-nextjs-app:${{ github.ref_name }}"
-          IMAGE_NAME=$(echo "$IMAGE_NAME" | tr '[:upper:]' '[:lower:]')
          docker buildx create --use
          docker buildx build \
-            --platform linux/arm64,linux/amd64 \
+            --platform linux/arm64 \
            -t "$IMAGE_NAME" \
            --push \
            .
-
  deploy:
    runs-on: self-hosted
    needs: test_and_build
@@ -82,19 +114,19 @@ jobs:
            docker rm -f "$NEW_CONTAINER_NAME" || true
          fi

+          echo "Deploying $CONTAINER_NAME with $IMAGE_NAME"
+
          # Start new container on a temporary internal port
-          docker run -d --name "$NEW_CONTAINER_NAME" -p 40000:3000 \
-            -e GHOST_API_KEY="${{ secrets.GHOST_API_KEY }}" \
-            -e NEXT_PUBLIC_BASE_URL="${{ secrets.NEXT_PUBLIC_BASE_URL }}" \
-            -e MY_EMAIL="${{ secrets.MY_EMAIL }}" \
-            -e MY_PASSWORD="${{ secrets.MY_PASSWORD }}" \
-            -e GHOST_API_URL="${{ secrets.GHOST_API_URL }}" \
+          docker run -d --name "$NEW_CONTAINER_NAME" --network big-bear-ghost_ghost-network -p 40000:3000 \
            "$IMAGE_NAME"

          # Wait for the new container to start
          sleep 10

-          if [ "$(docker inspect --format='{{.State.Running}}' $NEW_CONTAINER_NAME)" = "true" ]; then
+          # Debugging: Check if the environment variables are set correctly
+          docker exec "$NEW_CONTAINER_NAME" printenv
+
+          if [ "$(docker inspect --format='{{.State.Running}}' "$NEW_CONTAINER_NAME")" = "true" ]; then
            # Stop/remove the old container
            if [ "$(docker ps -aq -f name=$CONTAINER_NAME)" ]; then
              docker stop "$CONTAINER_NAME" || true
@@ -104,12 +136,8 @@ jobs:
            # Replace the new container with final name/port
            docker stop  "$NEW_CONTAINER_NAME" || true
            docker rm    "$NEW_CONTAINER_NAME" || true
-            docker run -d --name "$CONTAINER_NAME" -p $PORT:3000 \
-              -e GHOST_API_KEY="${{ secrets.GHOST_API_KEY }}" \
-              -e NEXT_PUBLIC_BASE_URL="${{ secrets.NEXT_PUBLIC_BASE_URL }}" \
-              -e MY_EMAIL="${{ secrets.MY_EMAIL }}" \
-              -e MY_PASSWORD="${{ secrets.MY_PASSWORD }}" \
-              -e GHOST_API_URL="${{ secrets.GHOST_API_URL }}" \
+
+            docker run -d --name "$CONTAINER_NAME" --network big-bear-ghost_ghost-network -p $PORT:3000 \
              "$IMAGE_NAME"
          else
            echo "New container failed to start."
--- a/3
+++ b/3
@@ -13,6 +13,9 @@ RUN npm install
 # Copy the application code
 COPY . .

+# Copy the .env file
+COPY .env .env
+
 # Build the Next.js application
 RUN npm run build

--- a/app/tests/api/email.test.tsx
+++ b/app/tests/api/email.test.tsx
@@ -10,8 +10,8 @@ jest.mock('next/server', () => ({

 beforeEach(() => {
  nodemailermock.mock.reset();
-  process.env.MY_EMAIL = 'test@dki.one';
-  process.env.MY_PASSWORD = 'test-password';
+  process.env.NEXT_PUBLIC_MY_EMAIL = 'test@dki.one';
+  process.env.NEXT_PUBLIC_MY_PASSWORD = 'test-password';
 });

 describe('POST /api/email', () => {
@@ -35,8 +35,8 @@ describe('POST /api/email', () => {
  });

  it('should return an error if EMAIL or PASSWORD is missing', async () => {
-    delete process.env.MY_EMAIL;
-    delete process.env.MY_PASSWORD;
+    delete process.env.NEXT_PUBLIC_MY_EMAIL;
+    delete process.env.NEXT_PUBLIC_MY_PASSWORD;

    const mockRequest = {
      json: jest.fn().mockResolvedValue({
--- a/app/tests/api/fetchAllProjects.test.tsx
+++ b/app/tests/api/fetchAllProjects.test.tsx
@@ -10,8 +10,8 @@ jest.mock('next/server', () => ({

 describe('GET /api/fetchAllProjects', () => {
  beforeAll(() => {
-    process.env.GHOST_API_URL = 'http://localhost:2368';
-    process.env.GHOST_API_KEY = 'some-key';
+    process.env.NEXT_PUBLIC_GHOST_API_URL = 'http://localhost:2368';
+    process.env.NEXT_PUBLIC_GHOST_API_KEY = 'some-key';
    global.fetch = mockFetch({
      posts: [
        {
--- a/app/tests/api/fetchProject.test.tsx
+++ b/app/tests/api/fetchProject.test.tsx
@@ -10,8 +10,9 @@ jest.mock('next/server', () => ({

 describe('GET /api/fetchProject', () => {
  beforeAll(() => {
-    process.env.GHOST_API_URL = 'http://localhost:2368';
-    process.env.GHOST_API_KEY = 'some-key';
+    process.env.NEXT_PUBLIC_GHOST_API_URL = 'http://localhost:2368';
+    process.env.NEXT_PUBLIC_GHOST_API_KEY = 'some-key';
+
    global.fetch = mockFetch({
      posts: [
        {
--- a/app/tests/api/sitemap.test.tsx
+++ b/app/tests/api/sitemap.test.tsx
@@ -7,8 +7,8 @@ jest.mock('next/server', () => ({

 describe('GET /api/sitemap', () => {
  beforeAll(() => {
-    process.env.GHOST_API_URL = 'http://localhost:2368';
-    process.env.GHOST_API_KEY = 'test-api-key';
+    process.env.NEXT_PUBLIC_GHOST_API_URL = 'http://localhost:2368';
+    process.env.NEXT_PUBLIC_GHOST_API_KEY = 'test-api-key';
    process.env.NEXT_PUBLIC_BASE_URL = 'https://dki.one';
    global.fetch = mockFetch({
      posts: [
--- a/app/tests/components/Projects.test.tsx
+++ b/app/tests/components/Projects.test.tsx
@@ -6,8 +6,8 @@ import { mockFetch } from '@/app/__tests__/__mocks__/mock-fetch';

 describe('Projects', () => {
    beforeAll(() => {
-      process.env.GHOST_API_URL = 'http://localhost:2368';
-      process.env.GHOST_API_KEY = 'some-key';
+      process.env.NEXT_PUBLIC_GHOST_API_URL = 'http://localhost:2368';
+      process.env.NEXT_PUBLIC_GHOST_API_KEY = 'some-key';
      global.fetch = mockFetch({
        posts: [
          {
--- a/app/tests/projects/[slug]/page.test.tsx
+++ b/app/tests/projects/[slug]/page.test.tsx
@@ -13,8 +13,8 @@ jest.mock('next/navigation', () => ({

 describe('ProjectDetails', () => {
  beforeAll(() => {
-    process.env.GHOST_API_URL = 'http://localhost:2368';
-    process.env.GHOST_API_KEY = 'some-key';
+    process.env.NEXT_PUBLIC_GHOST_API_URL = 'http://localhost:2368';
+    process.env.NEXT_PUBLIC_GHOST_API_KEY = 'some-key';
    global.fetch = mockFetch({
      posts: [
        {
--- a/app/api/email/route.tsx
+++ b/app/api/email/route.tsx
@@ -11,8 +11,8 @@ export async function POST(request: NextRequest) {
    };
    const { email, name, message } = body;

-    const user = process.env.MY_EMAIL ?? "";
-    const pass = process.env.MY_PASSWORD ?? "";
+    const user = process.env.NEXT_PUBLIC_MY_EMAIL ?? "";
+    const pass = process.env.NEXT_PUBLIC_MY_PASSWORD ?? "";

    if (!user || !pass) {
        console.error("Missing email/password environment variables");
--- a/app/api/fetchAllProjects/route.tsx
+++ b/app/api/fetchAllProjects/route.tsx
@@ -2,8 +2,8 @@ import { NextResponse } from "next/server";

 export const runtime = "nodejs"; // Force Node runtime

-const GHOST_API_URL = process.env.GHOST_API_URL || "http://192.168.179.31:2368";
-const GHOST_API_KEY = process.env.GHOST_API_KEY;
+const GHOST_API_URL = process.env.NEXT_PUBLIC_GHOST_API_URL;
+const GHOST_API_KEY = process.env.NEXT_PUBLIC_GHOST_API_KEY;

 export async function GET() {
  try {
@@ -15,6 +15,11 @@ export async function GET() {
      return NextResponse.json([]);
    }
    const posts = await response.json();
+
+    if (!posts || !posts.posts) {
+      console.error("Invalid posts data");
+      return NextResponse.json([]);
+    }
    return NextResponse.json(posts);
  } catch (error) {
    console.error("Failed to fetch posts from Ghost:", error);
--- a/app/api/fetchProject/route.tsx
+++ b/app/api/fetchProject/route.tsx
@@ -2,8 +2,8 @@ import { NextResponse } from "next/server";

 export const runtime = "nodejs"; // Force Node runtime

-const GHOST_API_URL = process.env.GHOST_API_URL || "http://192.168.179.31:2368";
-const GHOST_API_KEY = process.env.GHOST_API_KEY;
+const GHOST_API_URL = process.env.NEXT_PUBLIC_GHOST_API_URL;
+const GHOST_API_KEY = process.env.NEXT_PUBLIC_GHOST_API_KEY;

 export async function GET(request: Request) {
  const { searchParams } = new URL(request.url);
--- a/app/api/sitemap/route.tsx
+++ b/app/api/sitemap/route.tsx
@@ -12,8 +12,8 @@ interface ProjectsData {
 export const dynamic = "force-dynamic";
 export const runtime = "nodejs"; // Force Node runtime

-const GHOST_API_URL = process.env.GHOST_API_URL || "http://192.168.179.31:2368";
-const GHOST_API_KEY = process.env.GHOST_API_KEY;
+const GHOST_API_URL = process.env.NEXT_PUBLIC_GHOST_API_URL;
+const GHOST_API_KEY = process.env.NEXT_PUBLIC_GHOST_API_KEY;

 // Funktion, um die XML für die Sitemap zu generieren
 function generateXml(sitemapRoutes: { url: string; lastModified: string }[]) {
@@ -38,7 +38,7 @@ function generateXml(sitemapRoutes: { url: string; lastModified: string }[]) {
 }

 export async function GET() {
-  const baseUrl = process.env.NEXT_PUBLIC_BASE_URL || "https://dki.one";
+  const baseUrl = process.env.NEXT_PUBLIC_BASE_URL;

  // Statische Routen
  const staticRoutes = [
--- a/app/components/Contact.tsx
+++ b/app/components/Contact.tsx
@@ -54,7 +54,6 @@ export default function Contact() {
      setBanner((prev) => ({ ...prev, show: false }));
    }, 3000);
  }
-
  return (
    <section
      id="contact"
--- a/app/components/Footer.tsx
+++ b/app/components/Footer.tsx
@@ -1,82 +1,88 @@
 import Link from "next/link";
-import {useEffect, useState} from "react";
+import { useEffect, useState } from "react";

 export default function Footer() {
-    const [isVisible, setIsVisible] = useState(false);
+  const [isVisible, setIsVisible] = useState(false);

-    useEffect(() => {
-        setTimeout(() => {
-            setIsVisible(true);
-        }, 450); // Delay to start the animation
-    }, []);
+  useEffect(() => {
+    setTimeout(() => {
+      setIsVisible(true);
+    }, 450); // Delay to start the animation
+  }, []);

-    const scrollToSection = (id: string) => {
-        const element = document.getElementById(id);
-        if (element) {
-            element.scrollIntoView({behavior: "smooth"});
-        }
-    };
+  const scrollToSection = (id: string) => {
+    const element = document.getElementById(id);
+    if (element) {
+      element.scrollIntoView({ behavior: "smooth" });
+    }
+  };

-    return (
-        <footer
-            className={`sticky- bottom-0 p-3 bg-gradient-to-br from-white/60 to-white/30 backdrop-blur-lg rounded-2xl shadow-xl text-center text-gray-800 ${isVisible ? "animate-fly-in" : "opacity-0"}`}
-        >
-            <div className={`flex flex-col md:flex-row items-center justify-between`}>
-                <div className={`flex-col items-center`}>
-                    <h1 className="md:text-xl font-bold">Thank You for Visiting</h1>
-                    <p className="md:mt-1 text-lg">
-                        Connect with me on social platforms:
-                    </p>
-                    <div className="flex justify-center items-center space-x-4 mt-4">
-                        <Link aria-label={"Dennis Github"} href="https://github.com/Denshooter" target="_blank">
-                            <svg
-                                className="w-10 h-10"
-                                fill="currentColor"
-                                viewBox="0 0 24 24"
-                            >
-                                <path
-                                    d="M12 0C5.37 0 0 5.37 0 12c0 5.3 3.438 9.8 8.205 11.387.6.11.82-.26.82-.577v-2.17c-3.338.726-4.042-1.61-4.042-1.61-.546-1.387-1.333-1.757-1.333-1.757-1.09-.746.083-.73.083-.73 1.205.084 1.84 1.237 1.84 1.237 1.07 1.835 2.807 1.305 3.492.997.108-.774.42-1.305.763-1.605-2.665-.305-5.466-1.332-5.466-5.93 0-1.31.467-2.38 1.235-3.22-.123-.303-.535-1.527.117-3.18 0 0 1.008-.322 3.3 1.23.957-.266 1.98-.4 3-.405 1.02.005 2.043.14 3 .405 2.29-1.552 3.297-1.23 3.297-1.23.653 1.653.24 2.877.118 3.18.77.84 1.233 1.91 1.233 3.22 0 4.61-2.803 5.62-5.475 5.92.43.37.823 1.1.823 2.22v3.293c0 .32.218.694.825.577C20.565 21.8 24 17.3 24 12c0-6.63-5.37-12-12-12z"/>
-                            </svg>
-                        </Link>
-                        <Link aria-label={"Dennis Linked In"} href="https://linkedin.com/in/dkonkol" target="_blank">
-                            <svg
-                                className="w-10 h-10"
-                                fill="currentColor"
-                                viewBox="0 0 24 24"
-                            >
-                                <path
-                                    d="M19 0h-14c-2.76 0-5 2.24-5 5v14c0 2.76 2.24 5 5 5h14c2.76 0 5-2.24 5-5v-14c0-2.76-2.24-5-5-5zm-11 19h-3v-10h3v10zm-1.5-11.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm13.5 11.5h-3v-5.5c0-1.38-1.12-2.5-2.5-2.5s-2.5 1.12-2.5 2.5v5.5h-3v-10h3v1.5c.83-1.17 2.17-1.5 3.5-1.5 2.48 0 4.5 2.02 4.5 4.5v5.5z"/>
-                            </svg>
-                        </Link>
-                    </div>
-                </div>
-                <div className="mt-4 md:absolute md:left-1/2 md:transform md:-translate-x-1/2">
-                    <button
-                        onClick={() => scrollToSection("about")}
-                        className="p-4 mt-4 md:px-4 md:my-6 text-white bg-gradient-to-r from-blue-500 to-purple-500 rounded-2xl hover:from-blue-600 hover:to-purple-600 transition"
-                    >
-                        Back to Top
-                    </button>
-                </div>
-                <div className="flex-col">
-                    <div className="mt-4">
-                        <Link
-                            href="/privacy-policy"
-                            className="text-blue-800 transition-underline"
-                        >
-                            Privacy Policy
-                        </Link>
-                        <Link
-                            href="/legal-notice"
-                            className="ml-4 text-blue-800 transition-underline"
-                        >
-                            Legal Notice
-                        </Link>
-                    </div>
+  return (
+    <footer
+      className={`sticky- bottom-0 p-3 bg-gradient-to-br from-white/60 to-white/30 backdrop-blur-lg rounded-2xl shadow-xl text-center text-gray-800 ${isVisible ? "animate-fly-in" : "opacity-0"}`}
+    >
+      <div className={`flex flex-col md:flex-row items-center justify-between`}>
+        <div className={`flex-col items-center`}>
+          <h1 className="md:text-xl font-bold">Thank You for Visiting</h1>
+          <p className="md:mt-1 text-lg">
+            Connect with me on social platforms:
+          </p>
+          <div className="flex justify-center items-center space-x-4 mt-4">
+            <Link
+              aria-label={"Dennis Github"}
+              href="https://github.com/Denshooter"
+              target="_blank"
+            >
+              <svg
+                className="w-10 h-10"
+                fill="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path d="M12 0C5.37 0 0 5.37 0 12c0 5.3 3.438 9.8 8.205 11.387.6.11.82-.26.82-.577v-2.17c-3.338.726-4.042-1.61-4.042-1.61-.546-1.387-1.333-1.757-1.333-1.757-1.09-.746.083-.73.083-.73 1.205.084 1.84 1.237 1.84 1.237 1.07 1.835 2.807 1.305 3.492.997.108-.774.42-1.305.763-1.605-2.665-.305-5.466-1.332-5.466-5.93 0-1.31.467-2.38 1.235-3.22-.123-.303-.535-1.527.117-3.18 0 0 1.008-.322 3.3 1.23.957-.266 1.98-.4 3-.405 1.02.005 2.043.14 3 .405 2.29-1.552 3.297-1.23 3.297-1.23.653 1.653.24 2.877.118 3.18.77.84 1.233 1.91 1.233 3.22 0 4.61-2.803 5.62-5.475 5.92.43.37.823 1.1.823 2.22v3.293c0 .32.218.694.825.577C20.565 21.8 24 17.3 24 12c0-6.63-5.37-12-12-12z" />
+              </svg>
+            </Link>
+            <Link
+              aria-label={"Dennis Linked In"}
+              href="https://linkedin.com/in/dkonkol"
+              target="_blank"
+            >
+              <svg
+                className="w-10 h-10"
+                fill="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path d="M19 0h-14c-2.76 0-5 2.24-5 5v14c0 2.76 2.24 5 5 5h14c2.76 0 5-2.24 5-5v-14c0-2.76-2.24-5-5-5zm-11 19h-3v-10h3v10zm-1.5-11.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm13.5 11.5h-3v-5.5c0-1.38-1.12-2.5-2.5-2.5s-2.5 1.12-2.5 2.5v5.5h-3v-10h3v1.5c.83-1.17 2.17-1.5 3.5-1.5 2.48 0 4.5 2.02 4.5 4.5v5.5z" />
+              </svg>
+            </Link>
+          </div>
+        </div>
+        <div className="mt-4 md:absolute md:left-1/2 md:transform md:-translate-x-1/2">
+          <button
+            onClick={() => scrollToSection("about")}
+            className="p-4 mt-4 md:px-4 md:my-6 text-white bg-gradient-to-r from-blue-500 to-purple-500 rounded-2xl hover:from-blue-600 hover:to-purple-600 transition"
+          >
+            Back to Top
+          </button>
+        </div>
+        <div className="flex-col">
+          <div className="mt-4">
+            <Link
+              href="/privacy-policy"
+              className="text-blue-800 transition-underline"
+            >
+              Privacy Policy
+            </Link>
+            <Link
+              href="/legal-notice"
+              className="ml-4 text-blue-800 transition-underline"
+            >
+              Legal Notice
+            </Link>
+          </div>

-                    <p className="md:mt-4">© Dennis Konkol 2025</p>
-                </div>
-            </div>
-        </footer>
-    );
+          <p className="md:mt-4">© Dennis Konkol 2025</p>
+        </div>
+      </div>
+    </footer>
+  );
 }
--- a/app/components/Footer_Back.tsx
+++ b/app/components/Footer_Back.tsx
@@ -1,73 +1,79 @@
 import Link from "next/link";
-import {useEffect, useState} from "react";
+import { useEffect, useState } from "react";

 export default function Footer_Back() {
-    const [isVisible, setIsVisible] = useState(false);
+  const [isVisible, setIsVisible] = useState(false);

-    useEffect(() => {
-        setTimeout(() => {
-            setIsVisible(true);
-        }, 450); // Delay to start the animation
-    }, []);
+  useEffect(() => {
+    setTimeout(() => {
+      setIsVisible(true);
+    }, 450); // Delay to start the animation
+  }, []);

-    return (
-        <footer
-            className={`p-3 bg-gradient-to-br from-white/60 to-white/30 backdrop-blur-lg rounded-2xl shadow-xl text-center text-gray-800 ${isVisible ? "animate-fly-in" : "opacity-0"}`}
-        >
-            <div className={`flex flex-col md:flex-row items-center justify-between`}>
-                <div className={`flex-col items-center`}>
-                    <p className="md:mt-1 text-lg">
-                        Connect with me on social platforms:
-                    </p>
-                    <div className="flex justify-center items-center space-x-4 mt-4">
-                        <Link aria-label={"Dennis Github"} href="https://github.com/Denshooter" target="_blank">
-                            <svg
-                                className="w-10 h-10"
-                                fill="currentColor"
-                                viewBox="0 0 24 24"
-                            >
-                                <path
-                                    d="M12 0C5.37 0 0 5.37 0 12c0 5.3 3.438 9.8 8.205 11.387.6.11.82-.26.82-.577v-2.17c-3.338.726-4.042-1.61-4.042-1.61-.546-1.387-1.333-1.757-1.333-1.757-1.09-.746.083-.73.083-.73 1.205.084 1.84 1.237 1.84 1.237 1.07 1.835 2.807 1.305 3.492.997.108-.774.42-1.305.763-1.605-2.665-.305-5.466-1.332-5.466-5.93 0-1.31.467-2.38 1.235-3.22-.123-.303-.535-1.527.117-3.18 0 0 1.008-.322 3.3 1.23.957-.266 1.98-.4 3-.405 1.02.005 2.043.14 3 .405 2.29-1.552 3.297-1.23 3.297-1.23.653 1.653.24 2.877.118 3.18.77.84 1.233 1.91 1.233 3.22 0 4.61-2.803 5.62-5.475 5.92.43.37.823 1.1.823 2.22v3.293c0 .32.218.694.825.577C20.565 21.8 24 17.3 24 12c0-6.63-5.37-12-12-12z"/>
-                            </svg>
-                        </Link>
-                        <Link aria-label={"Dennis Linked In"} href="https://linkedin.com/in/dkonkol" target="_blank">
-                            <svg
-                                className="w-10 h-10"
-                                fill="currentColor"
-                                viewBox="0 0 24 24"
-                            >
-                                <path
-                                    d="M19 0h-14c-2.76 0-5 2.24-5 5v14c0 2.76 2.24 5 5 5h14c2.76 0 5-2.24 5-5v-14c0-2.76-2.24-5-5-5zm-11 19h-3v-10h3v10zm-1.5-11.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm13.5 11.5h-3v-5.5c0-1.38-1.12-2.5-2.5-2.5s-2.5 1.12-2.5 2.5v5.5h-3v-10h3v1.5c.83-1.17 2.17-1.5 3.5-1.5 2.48 0 4.5 2.02 4.5 4.5v5.5z"/>
-                            </svg>
-                        </Link>
-                    </div>
-                </div>
-                <div className="mt-4 md:absolute md:left-1/2 md:transform md:-translate-x-1/2">
-                    <Link
-                        href={"/"}
-                        className="p-4 mt-4 md:px-4 md:my-6 text-white bg-gradient-to-r from-blue-500 to-purple-500 rounded-2xl hover:from-blue-600 hover:to-purple-600 transition"
-                    >
-                        Back to main page
-                    </Link>
-                </div>
-                <div className="flex-col">
-                    <div className="mt-4">
-                        <Link
-                            href="/privacy-policy"
-                            className="text-blue-800 transition-underline"
-                        >
-                            Privacy Policy
-                        </Link>
-                        <Link
-                            href="/legal-notice"
-                            className="ml-4 text-blue-800 transition-underline"
-                        >
-                            Legal Notice
-                        </Link>
-                    </div>
-                    <p className="md:mt-4">© Dennis Konkol 2025</p>
-                </div>
-            </div>
-        </footer>
-    );
+  return (
+    <footer
+      className={`p-3 bg-gradient-to-br from-white/60 to-white/30 backdrop-blur-lg rounded-2xl shadow-xl text-center text-gray-800 ${isVisible ? "animate-fly-in" : "opacity-0"}`}
+    >
+      <div className={`flex flex-col md:flex-row items-center justify-between`}>
+        <div className={`flex-col items-center`}>
+          <p className="md:mt-1 text-lg">
+            Connect with me on social platforms:
+          </p>
+          <div className="flex justify-center items-center space-x-4 mt-4">
+            <Link
+              aria-label={"Dennis Github"}
+              href="https://github.com/Denshooter"
+              target="_blank"
+            >
+              <svg
+                className="w-10 h-10"
+                fill="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path d="M12 0C5.37 0 0 5.37 0 12c0 5.3 3.438 9.8 8.205 11.387.6.11.82-.26.82-.577v-2.17c-3.338.726-4.042-1.61-4.042-1.61-.546-1.387-1.333-1.757-1.333-1.757-1.09-.746.083-.73.083-.73 1.205.084 1.84 1.237 1.84 1.237 1.07 1.835 2.807 1.305 3.492.997.108-.774.42-1.305.763-1.605-2.665-.305-5.466-1.332-5.466-5.93 0-1.31.467-2.38 1.235-3.22-.123-.303-.535-1.527.117-3.18 0 0 1.008-.322 3.3 1.23.957-.266 1.98-.4 3-.405 1.02.005 2.043.14 3 .405 2.29-1.552 3.297-1.23 3.297-1.23.653 1.653.24 2.877.118 3.18.77.84 1.233 1.91 1.233 3.22 0 4.61-2.803 5.62-5.475 5.92.43.37.823 1.1.823 2.22v3.293c0 .32.218.694.825.577C20.565 21.8 24 17.3 24 12c0-6.63-5.37-12-12-12z" />
+              </svg>
+            </Link>
+            <Link
+              aria-label={"Dennis Linked In"}
+              href="https://linkedin.com/in/dkonkol"
+              target="_blank"
+            >
+              <svg
+                className="w-10 h-10"
+                fill="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path d="M19 0h-14c-2.76 0-5 2.24-5 5v14c0 2.76 2.24 5 5 5h14c2.76 0 5-2.24 5-5v-14c0-2.76-2.24-5-5-5zm-11 19h-3v-10h3v10zm-1.5-11.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm13.5 11.5h-3v-5.5c0-1.38-1.12-2.5-2.5-2.5s-2.5 1.12-2.5 2.5v5.5h-3v-10h3v1.5c.83-1.17 2.17-1.5 3.5-1.5 2.48 0 4.5 2.02 4.5 4.5v5.5z" />
+              </svg>
+            </Link>
+          </div>
+        </div>
+        <div className="mt-4 md:absolute md:left-1/2 md:transform md:-translate-x-1/2">
+          <Link
+            href={"/"}
+            className="p-4 mt-4 md:px-4 md:my-6 text-white bg-gradient-to-r from-blue-500 to-purple-500 rounded-2xl hover:from-blue-600 hover:to-purple-600 transition"
+          >
+            Back to main page
+          </Link>
+        </div>
+        <div className="flex-col">
+          <div className="mt-4">
+            <Link
+              href="/privacy-policy"
+              className="text-blue-800 transition-underline"
+            >
+              Privacy Policy
+            </Link>
+            <Link
+              href="/legal-notice"
+              className="ml-4 text-blue-800 transition-underline"
+            >
+              Legal Notice
+            </Link>
+          </div>
+          <p className="md:mt-4">© Dennis Konkol 2025</p>
+        </div>
+      </div>
+    </footer>
+  );
 }
--- a/app/components/Header.tsx
+++ b/app/components/Header.tsx
@@ -1,132 +1,138 @@
 "use client";

-import {useEffect, useState} from "react";
+import { useEffect, useState } from "react";
 import Link from "next/link";

 export default function Header() {
+  const [isVisible, setIsVisible] = useState(false);

-    const [isVisible, setIsVisible] = useState(false);
+  useEffect(() => {
+    setTimeout(() => {
+      setIsVisible(true);
+    }, 50); // Delay to start the animation after Projects
+  }, []);

-    useEffect(() => {
-        setTimeout(() => {
-            setIsVisible(true);
-        }, 50); // Delay to start the animation after Projects
-    }, []);
+  const [isSidebarOpen, setIsSidebarOpen] = useState(false);

-    const [isSidebarOpen, setIsSidebarOpen] = useState(false);
+  const toggleSidebar = () => {
+    setIsSidebarOpen(!isSidebarOpen);
+  };

-    const toggleSidebar = () => {
-        setIsSidebarOpen(!isSidebarOpen);
-    };
+  const scrollToSection = (id: string) => {
+    const element = document.getElementById(id);
+    if (element) {
+      element.scrollIntoView({ behavior: "smooth" });
+    } else {
+      /*go to main page and scroll*/
+      window.location.href = `/#${id}`;
+    }
+  };

-    const scrollToSection = (id: string) => {
-        const element = document.getElementById(id);
-        if (element) {
-            element.scrollIntoView({behavior: "smooth"});
-        } else {
-            /*go to main page and scroll*/
-            window.location.href = `/#${id}`;
-        }
-    };
-
-    return (
-        <div className={`p-4 ${isVisible ? 'animate-fly-in' : 'opacity-0'}`}>
-            <div
-                className={`fixed top-4 left-4 right-4 p-4 bg-white/45 text-gray-700 backdrop-blur-md shadow-xl rounded-2xl z-50 ${isSidebarOpen ? 'transform -translate-y-full' : ''}`}>
-                <header className="w-full">
-                    <nav className="flex flex-row items-center px-4">
-                        <Link href="/" className="flex justify-start">
-                            <h1 className="text-xl md:text-2xl">Dennis Konkol</h1>
-                        </Link>
-                        <div className="flex-grow"></div>
-                        <button
-                            className="text-gray-700 hover:text-gray-900 md:hidden"
-                            onClick={toggleSidebar}
-                            aria-label={"Open menu"}
-                        >
-                            <svg
-                                className="w-6 h-6"
-                                fill="none"
-                                stroke="currentColor"
-                                viewBox="0 0 24 24"
-                                xmlns="http://www.w3.org/2000/svg"
-                            >
-                                <path
-                                    strokeLinecap="round"
-                                    strokeLinejoin="round"
-                                    strokeWidth="2"
-                                    d="M4 6h16M4 12h16M4 18h16"
-                                />
-                            </svg>
-                        </button>
-                        <div className="hidden md:flex space-x-4 md:space-x-6">
-                            <button
-                                onClick={() => scrollToSection("about")}
-                                className="relative px-4 py-2 text-gray-700 hover:text-gray-900 text-xl md:text-2xl group">
-                                About
-                            </button>
-                            <button
-                                onClick={() => scrollToSection("projects")}
-                                className="relative px-4 py-2 text-gray-700 hover:text-gray-900 text-xl md:text-2xl group">
-                                Projects
-                            </button>
-                            <button
-                                onClick={() => scrollToSection("contact")}
-                                className="relative pl-4 py-2 text-gray-700 hover:text-gray-900 text-xl md:text-2xl group">
-                                Contact
-                            </button>
-                        </div>
-                    </nav>
-                </header>
-            </div>
-
-            <div
-                className={`fixed inset-0 bg-black bg-opacity-50 transition-opacity ${isSidebarOpen ? 'opacity-100' : 'opacity-0 pointer-events-none'}`}
-                onClick={toggleSidebar}
-            ></div>
-
-            <div
-                className={`fixed z-10 top-0 right-0 h-full bg-white w-1/3 transform transition-transform flex flex-col ${isSidebarOpen ? 'translate-x-0' : 'translate-x-full'}`}
+  return (
+    <div className={`p-4 ${isVisible ? "animate-fly-in" : "opacity-0"}`}>
+      <div
+        className={`fixed top-4 left-4 right-4 p-4 bg-white/45 text-gray-700 backdrop-blur-md shadow-xl rounded-2xl z-50 ${isSidebarOpen ? "transform -translate-y-full" : ""}`}
+      >
+        <header className="w-full">
+          <nav className="flex flex-row items-center px-4">
+            <Link href="/" className="flex justify-start">
+              <h1 className="text-xl md:text-2xl">Dennis Konkol</h1>
+            </Link>
+            <div className="flex-grow"></div>
+            <button
+              className="text-gray-700 hover:text-gray-900 md:hidden"
+              onClick={toggleSidebar}
+              aria-label={"Open menu"}
            >
-                <button
-                    aria-label={"Close menu"}
-                    className="absolute top-4 right-4 text-gray-700 hover:text-gray-900"
-                    onClick={toggleSidebar}
-                >
-                    <svg
-                        className="w-6 h-6"
-                        fill="none"
-                        stroke="currentColor"
-                        viewBox="0 0 24 24"
-                        xmlns="http://www.w3.org/2000/svg"
-                    >
-                        <path
-                            strokeLinecap="round"
-                            strokeLinejoin="round"
-                            strokeWidth="2"
-                            d="M6 18L18 6M6 6l12 12"
-                        />
-                    </svg>
-                </button>
-                <div className="pt-8 space-y-4 flex-grow">
-                    <button
-                        onClick={() => scrollToSection("about")}
-                        className="w-full px-4 py-2 pt-8 text-gray-700 hover:text-gray-900 text-xl md:text-2xl group">
-                        About
-                    </button>
-                    <button
-                        onClick={() => scrollToSection("projects")}
-                        className="w-full px-4 py-2 text-gray-700 hover:text-gray-900 text-xl md:text-2xl group">
-                        Projects
-                    </button>
-                    <button
-                        onClick={() => scrollToSection("contact")}
-                        className="w-full px-4 py-2 text-gray-700 hover:text-gray-900 text-xl md:text-2xl group">
-                        Contact
-                    </button>
-                </div>
-                <p className="text-center text-xs text-gray-500 p-4">© 2025 Dennis</p>
+              <svg
+                className="w-6 h-6"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="2"
+                  d="M4 6h16M4 12h16M4 18h16"
+                />
+              </svg>
+            </button>
+            <div className="hidden md:flex space-x-4 md:space-x-6">
+              <button
+                onClick={() => scrollToSection("about")}
+                className="relative px-4 py-2 text-gray-700 hover:text-gray-900 text-xl md:text-2xl group"
+              >
+                About
+              </button>
+              <button
+                onClick={() => scrollToSection("projects")}
+                className="relative px-4 py-2 text-gray-700 hover:text-gray-900 text-xl md:text-2xl group"
+              >
+                Projects
+              </button>
+              <button
+                onClick={() => scrollToSection("contact")}
+                className="relative pl-4 py-2 text-gray-700 hover:text-gray-900 text-xl md:text-2xl group"
+              >
+                Contact
+              </button>
            </div>
+          </nav>
+        </header>
+      </div>
+
+      <div
+        className={`fixed inset-0 bg-black bg-opacity-50 transition-opacity ${isSidebarOpen ? "opacity-100" : "opacity-0 pointer-events-none"}`}
+        onClick={toggleSidebar}
+      ></div>
+
+      <div
+        className={`fixed z-10 top-0 right-0 h-full bg-white w-1/3 transform transition-transform flex flex-col ${isSidebarOpen ? "translate-x-0" : "translate-x-full"}`}
+      >
+        <button
+          aria-label={"Close menu"}
+          className="absolute top-4 right-4 text-gray-700 hover:text-gray-900"
+          onClick={toggleSidebar}
+        >
+          <svg
+            className="w-6 h-6"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth="2"
+              d="M6 18L18 6M6 6l12 12"
+            />
+          </svg>
+        </button>
+        <div className="pt-8 space-y-4 flex-grow">
+          <button
+            onClick={() => scrollToSection("about")}
+            className="w-full px-4 py-2 pt-8 text-gray-700 hover:text-gray-900 text-xl md:text-2xl group"
+          >
+            About
+          </button>
+          <button
+            onClick={() => scrollToSection("projects")}
+            className="w-full px-4 py-2 text-gray-700 hover:text-gray-900 text-xl md:text-2xl group"
+          >
+            Projects
+          </button>
+          <button
+            onClick={() => scrollToSection("contact")}
+            className="w-full px-4 py-2 text-gray-700 hover:text-gray-900 text-xl md:text-2xl group"
+          >
+            Contact
+          </button>
        </div>
-    );
+        <p className="text-center text-xs text-gray-500 p-4">© 2025 Dennis</p>
+      </div>
+    </div>
+  );
 }
--- a/app/components/Hero.tsx
+++ b/app/components/Hero.tsx
@@ -1,15 +1,14 @@
-// app/components/Hero.tsx
-import React, {useEffect, useState} from "react";
+import React, { useEffect, useState } from "react";
 import Image from "next/image";

 export default function Hero() {
-    const [isVisible, setIsVisible] = useState(false);
+  const [isVisible, setIsVisible] = useState(false);

-    useEffect(() => {
-        setTimeout(() => {
-            setIsVisible(true);
-        }, 150); // Delay to start the animation
-    }, []);
+  useEffect(() => {
+    setTimeout(() => {
+      setIsVisible(true);
+    }, 150); // Delay to start the animation
+  }, []);

    return (
        <div
--- a/app/components/Projects.tsx
+++ b/app/components/Projects.tsx
@@ -1,84 +1,88 @@
-import React, {useEffect, useState} from "react";
+import React, { useEffect, useState } from "react";
 import Link from "next/link";

 interface Project {
-    slug: string;
-    id: string;
-    title: string;
-    feature_image: string;
-    visibility: string;
-    published_at: string;
-    updated_at: string;
-    html: string;
-    reading_time: number;
-    meta_description: string;
+  slug: string;
+  id: string;
+  title: string;
+  feature_image: string;
+  visibility: string;
+  published_at: string;
+  updated_at: string;
+  html: string;
+  reading_time: number;
+  meta_description: string;
 }

 interface ProjectsData {
-    posts: Project[];
+  posts: Project[];
 }

 export default function Projects() {
-    const [projects, setProjects] = useState<Project[]>([]);
-    const [isVisible, setIsVisible] = useState(false);
+  const [projects, setProjects] = useState<Project[]>([]);
+  const [isVisible, setIsVisible] = useState(false);

-    useEffect(() => {
-        const fetchProjects = async () => {
-            try {
-                const response = await fetch("/api/fetchAllProjects");
-                if (!response.ok) {
-                    console.error(`Failed to fetch projects: ${response.statusText}`);
-                    return [];
-                }
-                const projectsData = (await response.json()) as ProjectsData;
-                setProjects(projectsData.posts);
+  useEffect(() => {
+    const fetchProjects = async () => {
+      try {
+        const response = await fetch("/api/fetchAllProjects");
+        if (!response.ok) {
+          console.error(`Failed to fetch projects: ${response.statusText}`);
+          return [];
+        }
+        const projectsData = (await response.json()) as ProjectsData;
+        if (!projectsData || !projectsData.posts) {
+          console.error("Invalid projects data");
+          return;
+        }
+        setProjects(projectsData.posts);

-                setTimeout(() => {
-                    setIsVisible(true);
-                }, 250); // Delay to start the animation after Hero
-            } catch (error) {
-                console.error("Failed to fetch projects:", error);
-            }
-        };
-        fetchProjects();
-    }, []);
+        setTimeout(() => {
+          setIsVisible(true);
+        }, 250); // Delay to start the animation after Hero
+      } catch (error) {
+        console.error("Failed to fetch projects:", error);
+      }
+    };
+    fetchProjects();
+  }, []);

-    const numberOfProjects = projects.length;
-    return (
-        <section
-            id="projects"
-            className={`p-10 ${isVisible ? "animate-fly-in" : "opacity-0"}`}
-        >
-            <h2 className="text-3xl font-bold text-center text-gray-800">Projects</h2>
-            <div className="mt-6 grid grid-cols-1 md:grid-cols-2 gap-6">
-                {projects.map((project, index) => (
-                    <Link
-                        key={project.id}
-                        href={{
-                            pathname: `/projects/${project.slug}`,
-                            query: {project: JSON.stringify(project)},
-                        }}
-                        className="cursor-pointer"
-                    >
-                        <div
-                            className={`p-4 border shadow-lg bg-white/45 rounded-2xl animate-fly-in`}
-                            style={{animationDelay: `${index * 0.1}s`}}
-                        >
-                            <h3 className="text-2xl font-bold text-gray-800">
-                                {project.title}
-                            </h3>
-                            <p className="mt-2 text-gray-500">{project.meta_description}</p>
-                        </div>
-                    </Link>
-                ))}
-                <div
-                    className={`p-4 border shadow-lg bg-white/45 rounded-2xl animate-fly-in`}
-                    style={{animationDelay: `${(numberOfProjects + 1) * 0.1}s`}}
-                >
-                    <h3 className="text-2xl font-bold text-gray-800">More to come</h3>
-                    <p className="mt-2 text-gray-500">...</p>
-                </div>
+  const numberOfProjects = projects.length;
+  return (
+    <section
+      id="projects"
+      className={`p-10 ${isVisible ? "animate-fly-in" : "opacity-0"}`}
+    >
+      <h2 className="text-3xl font-bold text-center text-gray-800">Projects</h2>
+      <div className="mt-6 grid grid-cols-1 md:grid-cols-2 gap-6">
+        {projects.map((project, index) => (
+          <Link
+            key={project.id}
+            href={{
+              pathname: `/projects/${project.slug}`,
+              query: { project: JSON.stringify(project) },
+            }}
+            className="cursor-pointer"
+          >
+            <div
+              className={`p-4 border shadow-lg bg-white/45 rounded-2xl animate-fly-in`}
+              style={{ animationDelay: `${index * 0.1}s` }}
+            >
+              <h3 className="text-2xl font-bold text-gray-800">
+                {project.title}
+              </h3>
+              <p className="mt-2 text-gray-500">{project.meta_description}</p>
            </div>
-        </section>
-    );
+          </Link>
+        ))}
+        <div
+          className={`p-4 border shadow-lg bg-white/45 rounded-2xl animate-fly-in`}
+          style={{ animationDelay: `${(numberOfProjects + 1) * 0.1}s` }}
+        >
+          <h3 className="text-2xl font-bold text-gray-800">More to come</h3>
+          <p className="mt-2 text-gray-500">...</p>
+        </div>
+      </div>
+    </section>
+  );
 }
--- a/app/projects/[slug]/page.tsx
+++ b/app/projects/[slug]/page.tsx
@@ -1,12 +1,12 @@
 "use client";

 import {
-    useRouter,
-    useSearchParams,
-    useParams,
-    usePathname,
+  useRouter,
+  useSearchParams,
+  useParams,
+  usePathname,
 } from "next/navigation";
-import {useEffect, useState} from "react";
+import { useEffect, useState } from "react";

 import Link from "next/link";

@@ -16,154 +16,156 @@ import Image from "next/image";
 import "@/app/styles/ghostContent.css"; // Import the global styles

 interface Project {
-    slug: string;
-    id: string;
-    title: string;
-    feature_image: string;
-    visibility: string;
-    published_at: string;
-    updated_at: string;
-    html: string;
-    reading_time: number;
-    meta_description: string;
+  slug: string;
+  id: string;
+  title: string;
+  feature_image: string;
+  visibility: string;
+  published_at: string;
+  updated_at: string;
+  html: string;
+  reading_time: number;
+  meta_description: string;
 }

 const ProjectDetails = () => {
-    const router = useRouter();
-    const searchParams = useSearchParams();
-    const params = useParams();
-    const pathname = usePathname();
-    const [project, setProject] = useState<Project | null>(null);
-    const [isVisible, setIsVisible] = useState(false);
-    const [error, setError] = useState<string | null>(null);
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const params = useParams();
+  const pathname = usePathname();
+  const [project, setProject] = useState<Project | null>(null);
+  const [isVisible, setIsVisible] = useState(false);
+  const [error, setError] = useState<string | null>(null);

-    useEffect(() => {
-        setTimeout(() => {
-            setIsVisible(true);
-        }, 150); // Delay to start the animation
-    }, []);
+  useEffect(() => {
+    setTimeout(() => {
+      setIsVisible(true);
+    }, 150); // Delay to start the animation
+  }, []);

-    useEffect(() => {
-        const projectData = searchParams.get("project");
-        if (projectData) {
-            setProject(JSON.parse(projectData as string));
-            // Remove the project data from the URL without reloading the page
-            if (typeof window !== "undefined") {
-                const url = new URL(window.location.href);
-                url.searchParams.delete("project");
-                window.history.replaceState({}, "", url.toString());
-            }
-        } else {
-            // Fetch project data based on slug from URL
-            const slug = params.slug as string;
-            try {
-                fetchProjectData(slug);
-            } catch (error) {
-                console.error(error);
-                setError("Failed to fetch project data");
-            }
-        }
-    }, [searchParams, router, params, pathname]);
-
-    const fetchProjectData = async (slug: string) => {
-        try {
-            const response = await fetch(`/api/fetchProject?slug=${slug}`);
-            if (!response.ok) {
-                setError("Failed to fetch project Data");
-            }
-            const projectData = (await response.json()) as { posts: Project[] };
-            if (projectData.posts.length === 0) {
-                setError("Project not found");
-            }
-            setProject(projectData.posts[0]);
-        } catch (error) {
-            console.error("Failed to fetch project data:", error);
-            setError("Project not found");
-        }
-    };
-
-    if (error) {
-        return (
-            <div className="min-h-screen flex flex-col bg-radiant">
-                <Header/>
-                <div className="flex-grow flex items-center justify-center">
-                    <div className="text-center p-10 bg-white dark:bg-gray-700 rounded shadow-md">
-                        <h1 className="text-6xl font-bold text-gray-800 dark:text-white">
-                            404
-                        </h1>
-                        <p className="mt-4 text-xl text-gray-600 dark:text-gray-300">
-                            {error}
-                        </p>
-                        <Link
-                            href="/"
-                            className="mt-6 inline-block text-blue-500 hover:underline"
-                        >
-                            Go Back Home
-                        </Link>
-                    </div>
-                </div>
-                <Footer_Back/>
-            </div>
-        );
+  useEffect(() => {
+    const projectData = searchParams.get("project");
+    if (projectData) {
+      setProject(JSON.parse(projectData as string));
+      // Remove the project data from the URL without reloading the page
+      if (typeof window !== "undefined") {
+        const url = new URL(window.location.href);
+        url.searchParams.delete("project");
+        window.history.replaceState({}, "", url.toString());
+      }
+    } else {
+      // Fetch project data based on slug from URL
+      const slug = params.slug as string;
+      try {
+        fetchProjectData(slug);
+      } catch (error) {
+        console.error(error);
+        setError("Failed to fetch project data");
+      }
    }
+  }, [searchParams, router, params, pathname]);

-    if (!project) {
-        return (
-            <div className="min-h-screen flex flex-col bg-radiant">
-                <Header/>
-                <div className="flex-grow flex items-center justify-center">
-                    <div
-                        className="loader ease-linear rounded-full border-8 border-t-8 border-gray-200 h-32 w-32"></div>
-                </div>
-                <Footer_Back/>
-            </div>
-        );
+  const fetchProjectData = async (slug: string) => {
+    try {
+      const response = await fetch(`/api/fetchProject?slug=${slug}`);
+      if (!response.ok) {
+        setError("Failed to fetch project Data");
+      }
+      const projectData = (await response.json()) as { posts: Project[] };
+      if (
+        !projectData ||
+        !projectData.posts ||
+        projectData.posts.length === 0
+      ) {
+        setError("Project not found");
+      }
+      setProject(projectData.posts[0]);
+    } catch (error) {
+      console.error("Failed to fetch project data:", error);
+      setError("Project not found");
    }
+  };

-    const featureImageUrl = project.feature_image
-        ? `/api/fetchImage?url=${encodeURIComponent(project.feature_image)}`
-        : "";
-
+  if (error) {
    return (
-        <div
-            className={`min-h-screen flex flex-col bg-radiant ${isVisible ? "animate-fly-in" : "opacity-0"}`}
-        >
-            <Header/>
-            <div className="flex-grow">
-                <div className="flex justify-center mt-14 md:mt-28 px-4 md:px-0">
-                    {featureImageUrl && (
-                        <div className="relative w-full max-w-4xl h-0 pb-[56.25%] rounded-2xl overflow-hidden">
-                            <Image
-                                src={featureImageUrl}
-                                alt={project.title}
-                                fill
-                                style={{objectFit: "cover"}}
-                                className="rounded-2xl"
-                                priority={true}
-                            />
-                        </div>
-                    )}
-                </div>
-                <div className="flex items-center justify-center mt-4">
-                    <h1 className="text-4xl md:text-6xl font-bold text-gray-600">
-                        {project.title}
-                    </h1>
-                </div>
-
-                {/* Project Content */}
-                <div className="p-10 pt-12">
-                    <div
-                        className="flex flex-col p-8 bg-gradient-to-br from-white/60 to-white/30 backdrop-blur-lg rounded-2xl shadow-xl">
-                        <div
-                            className="content mt-4 text-gray-600 text-lg leading-relaxed"
-                            dangerouslySetInnerHTML={{__html: project.html}}
-                        ></div>
-                    </div>
-                </div>
-            </div>
-            <Footer_Back/>
+      <div className="min-h-screen flex flex-col bg-radiant">
+        <Header />
+        <div className="flex-grow flex items-center justify-center">
+          <div className="text-center p-10 bg-white dark:bg-gray-700 rounded shadow-md">
+            <h1 className="text-6xl font-bold text-gray-800 dark:text-white">
+              404
+            </h1>
+            <p className="mt-4 text-xl text-gray-600 dark:text-gray-300">
+              {error}
+            </p>
+            <Link
+              href="/"
+              className="mt-6 inline-block text-blue-500 hover:underline"
+            >
+              Go Back Home
+            </Link>
+          </div>
        </div>
+        <Footer_Back />
+      </div>
    );
+  }
+
+  if (!project) {
+    return (
+      <div className="min-h-screen flex flex-col bg-radiant">
+        <Header />
+        <div className="flex-grow flex items-center justify-center">
+          <div className="loader ease-linear rounded-full border-8 border-t-8 border-gray-200 h-32 w-32"></div>
+        </div>
+        <Footer_Back />
+      </div>
+    );
+  }
+
+  const featureImageUrl = project.feature_image
+    ? `/api/fetchImage?url=${encodeURIComponent(project.feature_image)}`
+    : "";
+
+  return (
+    <div
+      className={`min-h-screen flex flex-col bg-radiant ${isVisible ? "animate-fly-in" : "opacity-0"}`}
+    >
+      <Header />
+      <div className="flex-grow">
+        <div className="flex justify-center mt-14 md:mt-28 px-4 md:px-0">
+          {featureImageUrl && (
+            <div className="relative w-full max-w-4xl h-0 pb-[56.25%] rounded-2xl overflow-hidden">
+              <Image
+                src={featureImageUrl}
+                alt={project.title}
+                fill
+                style={{ objectFit: "cover" }}
+                className="rounded-2xl"
+                priority={true}
+              />
+            </div>
+          )}
+        </div>
+        <div className="flex items-center justify-center mt-4">
+          <h1 className="text-4xl md:text-6xl font-bold text-gray-600">
+            {project.title}
+          </h1>
+        </div>
+
+        {/* Project Content */}
+        <div className="p-10 pt-12">
+          <div className="flex flex-col p-8 bg-gradient-to-br from-white/60 to-white/30 backdrop-blur-lg rounded-2xl shadow-xl">
+            <div
+              className="content mt-4 text-gray-600 text-lg leading-relaxed"
+              dangerouslySetInnerHTML={{ __html: project.html }}
+            ></div>
+          </div>
+        </div>
+      </div>
+      <Footer_Back />
+    </div>
+  );
 };

 export default ProjectDetails;
--- a/app/sitemap.xml/route.tsx
+++ b/app/sitemap.xml/route.tsx
@@ -3,7 +3,7 @@ import {NextResponse} from "next/server";
 export const dynamic = 'force-dynamic';

 export async function GET() {
-    const baseUrl = process.env.NEXT_PUBLIC_BASE_URL || "https://dki.one";
+    const baseUrl = process.env.NEXT_PUBLIC_BASE_URL;
    const apiUrl = `${baseUrl}/api/sitemap`; // Verwende die vollständige URL zur API

    try {
--- a/next.config.ts
+++ b/next.config.ts
@@ -1,14 +1,16 @@
 import type { NextConfig } from "next";
 import dotenv from "dotenv";
+import path from "path";

-dotenv.config();
+// Lade die .env Datei aus dem Arbeitsverzeichnis
+dotenv.config({ path: path.resolve(__dirname, '.env') });

 const nextConfig: NextConfig = {
  env: {
-    GHOST_API_KEY: process.env.GHOST_API_KEY,
-    GHOST_API_URL: process.env.GHOST_API_URL,
-    MY_EMAIL: process.env.MY_EMAIL,
-    MY_PASSWORD: process.env.MY_PASSWORD,
+    NEXT_PUBLIC_GHOST_API_KEY: process.env.NEXT_PUBLIC_GHOST_API_KEY,
+    NEXT_PUBLIC_GHOST_API_URL: process.env.NEXT_PUBLIC_GHOST_API_URL,
+    NEXT_PUBLIC_MY_EMAIL: process.env.NEXT_PUBLIC_MY_EMAIL,
+    NEXT_PUBLIC_MY_PASSWORD: process.env.NEXT_PUBLIC_MY_PASSWORD,
    NEXT_PUBLIC_BASE_URL: process.env.NEXT_PUBLIC_BASE_URL,
  },
 };