feat: add cookie consent banner and privacy policy page; update dependencies and improve animations

app/api/og/route.tsx

@@ -0,0 +1,76 @@
+import {ImageResponse} from 'next/og';
+
+export async function GET() {
+    return new ImageResponse(
+        (
+            <div
+                style={{
+                    display: 'flex',
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                    width: '1200px',
+                    height: '630px',
+                    background: 'radial-gradient(circle at 20% 20%, #ff8185, transparent 80%),' +
+                        'radial-gradient(circle at 80% 80%, #ffaa91, transparent 80%)',
+                    backgroundSize: '100% 100%',
+                    color: '#333',
+                    fontFamily: 'Arial, sans-serif',
+                    padding: '20px',
+                }}
+            >
+                <div
+                    style={{
+                        position: 'absolute',
+                        top: '20px',
+                        left: '20px',
+                        fontSize: '24px',
+                        fontWeight: 'bold',
+                        padding: '10px',
+                    }}
+                >
+                    Dennis Konkol | Portfolio
+                </div>
+                <div
+                    style={{
+                        display: 'flex',
+                        flexDirection: 'column',
+                        alignItems: 'flex-start',
+                        justifyContent: 'center',
+                        textAlign: 'left',
+                        padding: '20px',
+                        backgroundColor: 'rgba(182,182,182,0.8)',
+                        borderRadius: '10px',
+                        boxShadow: '0 4px 8px rgba(0, 0, 0, 0.1)',
+                        maxWidth: '60%',
+                        backdropFilter: 'blur(5px)',
+                    }}
+                >
+                    <h1 style={{fontSize: '48px', margin: '0'}}>Hi, I’m Dennis</h1>
+                    <h2 style={{fontSize: '32px', margin: '10px 0'}}>Student & Software Engineer</h2>
+                    <p style={{fontSize: '24px', margin: '10px 0'}}>
+                        Based in Osnabrück, Germany
+                    </p>
+                    <p style={{fontSize: '20px', margin: '10px 0'}}>
+                        Passionate about technology, coding, and solving real-world problems.
+                    </p>
+                </div>
+                <img
+                    src="https://dki.one/images/me.jpg"
+                    alt="Image of Dennis"
+                    style={{
+                        width: '400px',
+                        height: '400px',
+                        borderRadius: '10px',
+                        boxShadow: '0 4px 8px rgba(0, 0, 0, 0.1)',
+                        objectFit: 'cover',
+                    }}
+                />
+            </div>
+        ),
+        {
+            width: 1200,
+            height: 630,
+        }
+    );
+}

app/api/projects/route.tsx

@@ -4,23 +4,31 @@ import path from 'path';
 import matter from 'gray-matter';
 
 export async function GET() {
-    const projectsDirectory = path.join(process.cwd(), 'public/projects');
-    const filenames = fs.readdirSync(projectsDirectory);
+    try {
+        const projectsDirectory = path.join(process.cwd(), 'public/projects');
+        const filenames = fs.readdirSync(projectsDirectory);
 
-    console.log('Filenames:', filenames);
+        const projects = filenames
+            .filter((filename) => {
+                const filePath = path.join(projectsDirectory, filename);
+                return fs.statSync(filePath).isFile();
+            })
+            .map((filename) => {
+                const filePath = path.join(projectsDirectory, filename);
+                const fileContents = fs.readFileSync(filePath, 'utf8');
+                const {data} = matter(fileContents);
 
-    const projects = filenames.map((filename) => {
-        const filePath = path.join(projectsDirectory, filename);
-        const fileContents = fs.readFileSync(filePath, 'utf8');
-        const {data} = matter(fileContents);
+                return {
+                    id: data.id,
+                    title: data.title,
+                    description: data.description,
+                    slug: filename.replace('.md', ''),
+                };
+            });
 
-        return {
-            id: data.id,
-            title: data.title,
-            description: data.description,
-            slug: filename.replace('.md', ''),
-        };
-    });
-
-    return NextResponse.json(projects);
+        return NextResponse.json(projects);
+    } catch (error) {
+        console.error("Failed to fetch projects:", error);
+        return NextResponse.json({error: 'Failed to fetch projects'}, {status: 500});
+    }
 }