From b6a78abae80d4d11d7d1474582de16846f386922 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?William=20S=C3=B6derberg?= <william@soderberg.tech>
Date: Tue, 10 Mar 2026 23:45:14 +0100
Subject: [PATCH] Main pages

---
 app/components/BlurredCode.tsx  |   68 +++
 app/components/MatrixRain.tsx   |   89 +++
 app/components/Navbar.tsx       |   68 +++
 app/components/PhotoGallery.tsx |   64 ++
 app/contact/page.tsx            |  101 ++++
 app/css.d.ts                    |    3 +
 app/gallery/page.tsx            |   67 ++
 app/globals.css                 |   41 +-
 app/globals.d.ts                |   22 +
 app/layout.tsx                  |   45 +-
 app/page.tsx                    |  274 +++++++--
 app/projects/code/page.tsx      |  277 +++++++++
 app/projects/design/page.tsx    |  156 +++++
 app/projects/page.tsx           |   61 ++
 next.config.ts                  |    6 +-
 package-lock.json               | 1006 ++++++++++++++++++++++++++++++-
 package.json                    |   12 +-
 17 files changed, 2244 insertions(+), 116 deletions(-)
 create mode 100644 app/components/BlurredCode.tsx
 create mode 100644 app/components/MatrixRain.tsx
 create mode 100644 app/components/Navbar.tsx
 create mode 100644 app/components/PhotoGallery.tsx
 create mode 100644 app/contact/page.tsx
 create mode 100644 app/css.d.ts
 create mode 100644 app/gallery/page.tsx
 create mode 100644 app/globals.d.ts
 create mode 100644 app/projects/code/page.tsx
 create mode 100644 app/projects/design/page.tsx
 create mode 100644 app/projects/page.tsx

diff --git a/app/components/BlurredCode.tsx b/app/components/BlurredCode.tsx
new file mode 100644
index 0000000..a6db699
--- /dev/null
+++ b/app/components/BlurredCode.tsx
@@ -0,0 +1,68 @@
+// app/components/BlurredCode.tsx
+
+'use client';
+
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { vscDarkPlus } from 'react-syntax-highlighter/dist/esm/styles/prism';
+
+const pythonCode = `import quantum_entanglement
+import neural_net_vibes
+from cosmos import dark_matter
+
+class HotdogAnalyzer(quantum_entanglement.Observer):
+    def __init__(self, mustard_ratio=0.8):
+        self.mustard_ratio = mustard_ratio
+        self.is_sandwich = None
+        self.__secret_sauce = "01101000 01101101 01101101"
+
+    async def _calculate_bun_topology(self, bread_manifold):
+        """Uses string theory to determine if a bun is contiguous."""
+        try:
+            dimensions = await dark_matter.measure(bread_manifold)
+            if dimensions > 3:
+                raise Exception("Bun exists in the 4th dimension.")
+            return dimensions * self.mustard_ratio
+        except OverflowError:
+            return "Just eat it already"
+
+    @neural_net_vibes.optimize(epochs=42069)
+    def check_is_sandwich(self, hotdog):
+        if hotdog.is_taco():
+            self.is_sandwich = False
+            return self.is_sandwich
+        
+        # Initiate brute-force topological check
+        for atom in hotdog.get_atoms():
+            if atom.vibe_check() == "sus":
+                hotdog.add_ketchup(override=True)
+        
+        self.is_sandwich = True if hotdog.entropy < 9000 else False
+        return "Maybe?"
+
+if __name__ == "__main__":
+    analyzer = HotdogAnalyzer(mustard_ratio=1.1)
+    analyzer.check_is_sandwich(target="glizzy")`;
+
+export default function BlurredCode() {
+    return (
+        <div className="absolute inset-0 overflow-hidden bg-[#0d1117] z-0 pointer-events-none flex justify-center">
+            <div className="relative w-full h-full text-left p-8 opacity-40 blur-[2px] group-hover:blur-none group-hover:opacity-100 transition-all duration-700 animate-[scrollUp_40s_linear_infinite]">
+                <SyntaxHighlighter
+                    language="python"
+                    style={vscDarkPlus}
+                    customStyle={{ background: 'transparent', margin: 0, padding: 0, fontSize: '14px' }}
+                >
+                    {pythonCode + '\n\n\n' + pythonCode + '\n\n\n' + pythonCode}
+                </SyntaxHighlighter>
+            </div>
+
+            <style dangerouslySetInnerHTML={{
+                __html: `
+                @keyframes scrollUp {
+                  0% { transform: translateY(0); }
+                  100% { transform: translateY(-33.33%); }
+                }
+            `}} />
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/app/components/MatrixRain.tsx b/app/components/MatrixRain.tsx
new file mode 100644
index 0000000..b64fbed
--- /dev/null
+++ b/app/components/MatrixRain.tsx
@@ -0,0 +1,89 @@
+// app/components/MatrixRain.tsx
+
+'use client';
+
+import { useEffect, useRef } from 'react';
+
+interface MatrixRainProps {
+    color?: string;
+    fps?: number;
+}
+
+export default function MatrixRain({ color = '#84c0a0', fps = 15 }: MatrixRainProps) {
+    const canvasRef = useRef<HTMLCanvasElement>(null);
+    const lastWidth = useRef<number>(0);
+
+    useEffect(() => {
+        const canvas = canvasRef.current;
+        if (!canvas) return;
+        const ctx = canvas.getContext('2d');
+        if (!ctx) return;
+
+        let intervalId: NodeJS.Timeout;
+        const fontSize = 16;
+        let columns = 0;
+        let drops: number[] = [];
+
+        const setCanvasSize = () => {
+            canvas.width = window.innerWidth;
+            canvas.height = window.innerHeight + 120;
+            ctx.fillStyle = '#0d1117';
+            ctx.fillRect(0, 0, canvas.width, canvas.height);
+        };
+
+        const initDrops = () => {
+            columns = Math.floor(canvas.width / fontSize);
+            drops = [];
+            for (let x = 0; x < columns; x++) {
+                drops[x] = Math.random() * -100;
+            }
+        };
+
+        lastWidth.current = window.innerWidth;
+        setCanvasSize();
+        initDrops();
+
+        const draw = () => {
+            ctx.fillStyle = 'rgba(13, 17, 23, 0.2)';
+            ctx.fillRect(0, 0, canvas.width, canvas.height);
+            ctx.font = `bold ${fontSize}px monospace`;
+
+            for (let i = 0; i < drops.length; i++) {
+                const text = Math.random() > 0.5 ? '0' : '1';
+                ctx.fillStyle = color;
+                ctx.fillText(text, i * fontSize, drops[i] * fontSize);
+
+                if (drops[i] * fontSize > canvas.height && Math.random() > 0.975) {
+                    drops[i] = 0;
+                }
+                drops[i]++;
+            }
+        };
+
+        intervalId = setInterval(draw, 1000 / fps);
+
+        const handleResize = () => {
+            if (window.innerWidth !== lastWidth.current) {
+                lastWidth.current = window.innerWidth;
+                setCanvasSize();
+                initDrops();
+            }
+        };
+
+        window.addEventListener('resize', handleResize);
+
+        return () => {
+            clearInterval(intervalId);
+            window.removeEventListener('resize', handleResize);
+        };
+    }, [color, fps]);
+
+    return (
+        <div className="fixed inset-0 pointer-events-none w-screen h-[110vh] bg-[#0d1117]" style={{ zIndex: -1 }}>
+            <canvas
+                ref={canvasRef}
+                className="absolute inset-0 w-full h-full opacity-[0.15] blur-[0.5px]"
+            />
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/app/components/Navbar.tsx b/app/components/Navbar.tsx
new file mode 100644
index 0000000..2212040
--- /dev/null
+++ b/app/components/Navbar.tsx
@@ -0,0 +1,68 @@
+// app/components/Navbar.tsx
+
+'use client';
+
+import Link from 'next/link';
+import { useState } from 'react';
+
+export default function Navbar() {
+    const [isExpanded, setIsExpanded] = useState(false);
+
+    const toggleMenu = () => setIsExpanded(!isExpanded);
+    const closeMenu = () => setIsExpanded(false);
+
+    return (
+        <header className="fixed h-25 bg-[#0d1117]/80 backdrop-blur-md border-b border-white/10 left-0 right-0 z-100 transition-all duration-300">
+            <nav className="flex justify-between h-full items-center max-w-400 px-8 mx-auto">
+
+                <Link href="/" className="group text-white no-underline flex uppercase font-extrabold items-center tracking-[1px] transition-transform hover:scale-105" onClick={closeMenu}>
+                    <div className="w-12 h-12 flex justify-center items-center rounded-full bg-[#84c0a0]/10 border border-[#84c0a0]/30 shadow-[0_0_15px_rgba(132,192,160,0.2)] group-hover:bg-[#84c0a0]/20 transition-all duration-300">
+                        <img src="/assets/logos/logo.svg" alt="Wiking" className="w-8 h-8" />
+                    </div>
+                    <span className="hidden md:block ml-4 text-sm tracking-widest text-[#84c0a0] font-mono group-hover:text-white transition-colors">
+                        SODERBERG TECH
+                    </span>
+                </Link>
+
+                <button
+                    type="button"
+                    className="cursor-pointer border-none bg-transparent w-10 h-10 flex items-center justify-center flex-col md:hidden relative group"
+                    aria-expanded={isExpanded}
+                    onClick={toggleMenu}
+                >
+                    <span className={`block h-0.5 bg-white transition-all duration-300 ease-in-out group-hover:bg-[#84c0a0] ${isExpanded ? 'absolute m-0 w-7 rotate-45' : 'w-6 m-0.75'}`}></span>
+                    <span className={`block h-0.5 bg-white transition-all duration-300 ease-in-out group-hover:bg-[#84c0a0] ${isExpanded ? 'opacity-0 w-0' : 'w-6 m-0.75'}`}></span>
+                    <span className={`block h-0.5 bg-white transition-all duration-300 ease-in-out group-hover:bg-[#84c0a0] ${isExpanded ? 'absolute m-0 w-7 -rotate-45' : 'w-6 m-0.75'}`}></span>
+                </button>
+
+                <div
+                    className={`fixed top-25 bottom-0 left-0 right-0 transition-all duration-300 md:static md:block md:opacity-100 md:visible md:h-full ${isExpanded ? 'bg-[#0d1117]/60 backdrop-blur-sm opacity-100 visible' : 'opacity-0 invisible'}`}
+                    onClick={closeMenu}
+                >
+                    <ul
+                        className={`list-none absolute flex flex-col items-center left-0 right-0 m-4 rounded-3xl bg-[#131920]/70 backdrop-blur-2xl md:backdrop-blur-none border border-white/10 shadow-2xl md:m-0 md:p-0 md:border-none md:shadow-none md:static md:flex-row md:w-full md:h-full md:bg-transparent md:justify-end gap-2 md:gap-8 transition-all duration-300 ${isExpanded ? 'p-8 translate-y-0 opacity-100' : '-translate-y-4 opacity-0 md:translate-y-0 md:opacity-100'}`}
+                        onClick={(e) => e.stopPropagation()}
+                    >
+                        {[
+                            { name: 'Home', path: '/' },
+                            { name: 'Gallery', path: '/gallery' },
+                            { name: 'Projects', path: '/projects' },
+                            { name: 'Contact', path: '/contact' },
+                        ].map((link) => (
+                            <li key={link.name} className="w-full md:w-auto">
+                                <Link
+                                    className="relative flex justify-center items-center text-gray-300 uppercase font-bold tracking-[2px] text-sm px-4 py-3 rounded-xl hover:text-white hover:bg-white/5 transition-all duration-300 group overflow-hidden"
+                                    href={link.path}
+                                    onClick={closeMenu}
+                                >
+                                    <span className="relative z-10">{link.name}</span>
+                                    <span className="absolute bottom-0 left-1/2 w-0 h-0.5 bg-[#84c0a0] transition-all duration-300 group-hover:w-1/2 group-hover:-translate-x-1/2 shadow-[0_0_10px_rgba(132,192,160,0.8)]"></span>
+                                </Link>
+                            </li>
+                        ))}
+                    </ul>
+                </div>
+            </nav>
+        </header>
+    );
+}
\ No newline at end of file
diff --git a/app/components/PhotoGallery.tsx b/app/components/PhotoGallery.tsx
new file mode 100644
index 0000000..0defe35
--- /dev/null
+++ b/app/components/PhotoGallery.tsx
@@ -0,0 +1,64 @@
+// app/components/PhotoGallery.tsx
+
+'use client';
+
+import { Gallery, Item } from 'react-photoswipe-gallery';
+import 'photoswipe/dist/photoswipe.css';
+import Image from 'next/image';
+
+interface GalleryImage {
+    src: string;
+    width: number;
+    height: number;
+    name: string;
+}
+
+export default function PhotoGallery({ images }: { images: GalleryImage[] }) {
+    return (
+        <div className="bg-[#0a0d11] flex justify-center w-full min-h-screen border-t border-white/5">
+            <Gallery>
+                <div className="grid grid-cols-2 lg:grid-cols-4 2xl:grid-cols-6 grid-flow-dense w-full">
+                    {images.map((img, index) => {
+                        const isHorizontal = img.width > img.height;
+
+                        return (
+                            <div
+                                key={index}
+                                className={`relative bg-[#0d1117] overflow-hidden group cursor-pointer border-[0.5px] border-white/5 ${isHorizontal ? 'col-span-2' : 'col-span-1'}`}
+                            >
+                                <Item
+                                    original={img.src}
+                                    thumbnail={img.src}
+                                    width={img.width}
+                                    height={img.height}
+                                    alt={`Gallery image ${img.name}`}
+                                >
+                                    {({ ref, open }) => (
+                                        <div
+                                            ref={ref as React.RefCallback<HTMLDivElement>}
+                                            onClick={open}
+                                            className="w-full h-full relative block min-h-75"
+                                        >
+                                            <div className="absolute inset-0 border-8 border-[#0d1117]/50 transition-all duration-300 z-10 pointer-events-none"></div>
+                                            <div className="absolute inset-4 border-2 border-white/10 transition-all duration-500 z-10 pointer-events-none group-hover:scale-95 group-hover:border-[#84c0a0]/60 [clip-path:polygon(0_calc(100%-1rem),0_100%,1rem_100%,1rem_0,0_0,0_1rem,100%_1rem,100%_0,calc(100%-1rem)_0,calc(100%-1rem)_100%,100%_100%,100%_calc(100%-1rem))]"></div>
+
+                                            <Image
+                                                src={img.src}
+                                                alt={`Photo of ${img.name.replace('.jpg', '')}`}
+                                                width={isHorizontal ? 1200 : 800}
+                                                height={isHorizontal ? 800 : 800}
+                                                quality={90}
+                                                sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
+                                                className="w-full h-full object-cover block opacity-80 transition-all duration-700 group-hover:scale-110 group-hover:opacity-100"
+                                            />
+                                        </div>
+                                    )}
+                                </Item>
+                            </div>
+                        );
+                    })}
+                </div>
+            </Gallery>
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/app/contact/page.tsx b/app/contact/page.tsx
new file mode 100644
index 0000000..d9733f0
--- /dev/null
+++ b/app/contact/page.tsx
@@ -0,0 +1,101 @@
+// app/contact/page.tsx
+
+import { FaInstagram, FaLinkedin, FaDiscord, FaEnvelope, FaMapMarkerAlt } from 'react-icons/fa';
+
+export default function ContactPage() {
+    return (
+        <main className="flex flex-col flex-1 relative bg-[#0d1117] overflow-hidden">
+
+            {/* 1. Immersive Mountain Background */}
+            <img
+                src="/assets/images/snowy_mountain_peaks.jpg"
+                alt="Snowy Mountains"
+                className="absolute inset-0 w-full h-full object-cover z-0"
+            />
+            {/* Dark blur overlay so the text and cards remain perfectly readable */}
+            <div className="absolute inset-0 bg-[#0d1117]/85 backdrop-blur-md z-0"></div>
+
+            <div className="h-25 shrink-0 z-10"></div>
+
+            <section className="relative z-10 flex-1 flex flex-col justify-center items-center py-12 px-6">
+
+                <div className="mb-12 text-center">
+                    <h1 className="text-white text-[40px] md:text-[55px] uppercase font-black tracking-tighter drop-shadow-lg">
+                        Find me here!
+                    </h1>
+                    <p className="text-[#84c0a0] font-mono font-bold tracking-widest mt-2 uppercase">
+                        Transmission & Socials
+                    </p>
+                </div>
+
+                <div className="w-full max-w-3xl bg-white/5 backdrop-blur-xl rounded-[32px] border border-white/10 shadow-[0_8px_32px_rgba(0,0,0,0.5)] p-8 md:p-12">
+
+                    <div className="grid grid-cols-1 md:grid-cols-2 gap-12">
+
+                        <div className="flex flex-col gap-8">
+                            <h3 className="text-white text-xl font-bold border-b border-white/10 pb-4 uppercase tracking-wider">Direct Info</h3>
+
+                            <div className="flex items-center gap-4 group">
+                                <div className="w-12 h-12 rounded-2xl bg-[#84c0a0]/10 flex items-center justify-center border border-[#84c0a0]/30 group-hover:bg-[#84c0a0]/20 transition-all">
+                                    <FaEnvelope className="text-[#84c0a0] text-xl" />
+                                </div>
+                                <div>
+                                    <p className="text-gray-400 text-xs uppercase font-bold tracking-widest">Email</p>
+                                    <a href="mailto:support@soderberg.tech" className="text-white font-medium hover:text-[#84c0a0] transition-colors break-all">
+                                        support@soderberg.tech
+                                    </a>
+                                </div>
+                            </div>
+
+                            <div className="flex items-center gap-4 group">
+                                <div className="w-12 h-12 rounded-2xl bg-[#84c0a0]/10 flex items-center justify-center border border-[#84c0a0]/30">
+                                    <FaMapMarkerAlt className="text-[#84c0a0] text-xl" />
+                                </div>
+                                <div>
+                                    <p className="text-gray-400 text-xs uppercase font-bold tracking-widest">Location</p>
+                                    <p className="text-white font-medium">Höganäs, Sweden</p>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div className="flex flex-col gap-4">
+                            <h3 className="text-white text-xl font-bold border-b border-white/10 pb-4 uppercase tracking-wider">Networks</h3>
+
+                            <div className="grid grid-cols-1 gap-3">
+                                <a href="https://www.linkedin.com/in/william-s%C3%B6derberg-5b79bb247" target="_blank" className="flex items-center justify-between p-4 rounded-2xl bg-white/5 border border-white/5 hover:border-[#0077b5]/50 hover:bg-[#0077b5]/10 transition-all group">
+                                    <div className="flex items-center gap-3 text-white font-bold">
+                                        <FaLinkedin className="text-xl text-[#0077b5]" /> LinkedIn
+                                    </div>
+                                    <span className="text-gray-500 group-hover:text-[#0077b5] group-hover:translate-x-1 transition-all">→</span>
+                                </a>
+
+                                <a href="https://discordapp.com/users/271290165106966528" target="_blank" className="flex items-center justify-between p-4 rounded-2xl bg-white/5 border border-white/5 hover:border-[#5865F2]/50 hover:bg-[#5865F2]/10 transition-all group">
+                                    <div className="flex items-center gap-3 text-white font-bold">
+                                        <FaDiscord className="text-xl text-[#5865F2]" /> Discord
+                                    </div>
+                                    <span className="text-gray-500 group-hover:text-[#5865F2] group-hover:translate-x-1 transition-all">→</span>
+                                </a>
+
+                                <a href="https://www.instagram.com/will.i.am.soderberg/" target="_blank" className="flex items-center justify-between p-4 rounded-2xl bg-white/5 border border-white/5 hover:border-[#E1306C]/50 hover:bg-[#E1306C]/10 transition-all group">
+                                    <div className="flex items-center gap-3 text-white font-bold">
+                                        <FaInstagram className="text-xl text-[#E1306C]" /> Instagram
+                                    </div>
+                                    <span className="text-gray-500 group-hover:text-[#E1306C] group-hover:translate-x-1 transition-all">→</span>
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className="mt-12">
+                        <a
+                            href="mailto:support@soderberg.tech?subject=Contact%20me"
+                            className="w-full flex items-center justify-center gap-3 py-5 rounded-2xl bg-[#84c0a0] text-[#0d1117] font-bold text-lg hover:scale-[1.02] active:scale-[0.98] transition-all shadow-[0_0_20px_rgba(132,192,160,0.3)]"
+                        >
+                            <FaEnvelope /> Send an Email
+                        </a>
+                    </div>
+                </div>
+            </section>
+        </main>
+    );
+}
\ No newline at end of file
diff --git a/app/css.d.ts b/app/css.d.ts
new file mode 100644
index 0000000..b013f38
--- /dev/null
+++ b/app/css.d.ts
@@ -0,0 +1,3 @@
+// app/css.d.ts
+
+declare module '*.css';
diff --git a/app/gallery/page.tsx b/app/gallery/page.tsx
new file mode 100644
index 0000000..0aca52e
--- /dev/null
+++ b/app/gallery/page.tsx
@@ -0,0 +1,67 @@
+// app/gallery/page.tsx
+
+import fs from 'fs';
+import path from 'path';
+import sizeOf from 'image-size';
+import PhotoGallery from '@/app/components/PhotoGallery';
+
+async function getImages() {
+    const galleryDir = path.join(process.cwd(), 'public/gallery');
+    const files = fs.readdirSync(galleryDir);
+    const images = files
+        .filter((file) => file.endsWith('.jpg') || file.endsWith('.png') || file.endsWith('.jpeg'))
+        .map((file) => {
+            const filePath = path.join(galleryDir, file);
+            const buffer = fs.readFileSync(filePath);
+            const dimensions = sizeOf(buffer);
+
+            return {
+                src: `/gallery/${file}`,
+                width: dimensions.width || 1000,
+                height: dimensions.height || 1000,
+                name: file,
+            };
+        });
+
+    return images;
+}
+
+export default async function GalleryPage() {
+    const images = await getImages();
+
+    return (
+        <main className="flex flex-col flex-1 relative bg-[#0d1117] overflow-hidden">
+
+            {/* 1. Background Ambient Glow */}
+            <div className="absolute top-0 left-1/2 -translate-x-1/2 w-150 h-150 bg-[#84c0a0]/10 blur-[150px] rounded-full pointer-events-none z-0"></div>
+
+            <div className="h-25 shrink-0"></div>
+
+            {/* 2. Modernized Header */}
+            <section className="relative z-10 flex flex-col justify-center items-center py-20 px-6">
+                <div className="text-center">
+                    <h1 className="text-white text-[40px] md:text-[55px] uppercase font-black tracking-tighter drop-shadow-lg mb-4">
+                        Visual Archives
+                    </h1>
+
+                    <div className="flex items-center justify-center gap-4 mb-6">
+                        <div className="w-12 h-px bg-[#84c0a0]"></div>
+                        <p className="text-[#84c0a0] font-mono font-bold tracking-widest uppercase text-sm">
+                            Photography Collection
+                        </p>
+                        <div className="w-12 h-px bg-[#84c0a0]"></div>
+                    </div>
+
+                    <p className="text-gray-400 font-light max-w-2xl mx-auto text-lg leading-relaxed">
+                        A curated collection of photographic captures. Finding the best subjects to capture on film, from natural landscapes to the night sky.
+                    </p>
+                </div>
+            </section>
+
+            {/* 3. The Gallery Grid */}
+            <div className="relative z-10 w-full">
+                <PhotoGallery images={images} />
+            </div>
+        </main>
+    );
+}
\ No newline at end of file
diff --git a/app/globals.css b/app/globals.css
index a2dc41e..0286821 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -1,26 +1,25 @@
+/* app/globals.css */
+
 @import "tailwindcss";
 
-:root {
-  --background: #ffffff;
-  --foreground: #171717;
+@keyframes zoomIn {
+    0% {
+        opacity: 0;
+        transform: scale3d(.3, .3, .3);
+    }
+
+    100% {
+        opacity: 1;
+        transform: scale3d(1, 1, 1);
+    }
 }
 
-@theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --font-sans: var(--font-geist-sans);
-  --font-mono: var(--font-geist-mono);
-}
+@keyframes fadeIn {
+    0% {
+        opacity: 0;
+    }
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
-  }
-}
-
-body {
-  background: var(--background);
-  color: var(--foreground);
-  font-family: Arial, Helvetica, sans-serif;
-}
+    100% {
+        opacity: 1;
+    }
+}
\ No newline at end of file
diff --git a/app/globals.d.ts b/app/globals.d.ts
new file mode 100644
index 0000000..2a1601f
--- /dev/null
+++ b/app/globals.d.ts
@@ -0,0 +1,22 @@
+// app/globals.d.ts
+
+import * as React from 'react';
+
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'model-viewer': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & {
+                src?: string;
+                poster?: string;
+                'ios-src'?: string;
+                reveal?: string;
+                'shadow-intensity'?: string | number;
+                ar?: boolean;
+                'camera-controls'?: boolean;
+                'touch-action'?: string;
+                alt?: string;
+                class?: string;
+            };
+        }
+    }
+}
\ No newline at end of file
diff --git a/app/layout.tsx b/app/layout.tsx
index f7fa87e..c97d916 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,34 +1,35 @@
-import type { Metadata } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
-import "./globals.css";
+// app/layout.tsx
 
-const geistSans = Geist({
-  variable: "--font-geist-sans",
-  subsets: ["latin"],
-});
+import Navbar from './components/Navbar';
+import './globals.css';
 
-const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",
-  subsets: ["latin"],
-});
-
-export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+export const metadata = {
+  title: 'Soderberg Tech',
+  description: 'William Söderberg, Technical high school engineer from Höganäs, Sweden',
 };
 
 export default function RootLayout({
   children,
-}: Readonly<{
+}: {
   children: React.ReactNode;
-}>) {
+}) {
   return (
     <html lang="en">
-      <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
-      >
-        {children}
+      <body className="flex flex-col min-h-screen m-0 p-0 font-sans bg-[#0d1117]">
+        <Navbar />
+
+        <main className="flex flex-col flex-1">
+          {children}
+        </main>
+
+        <footer className="w-full relative z-50 mt-auto border-t border-white/5">
+          <div className="bg-[#0d1117] flex justify-center items-center h-10">
+            <a className="text-[#a0aab6] no-underline flex font-medium items-center hover:text-white transition-colors text-sm tracking-widest uppercase" href="/">
+              © William Söderberg {new Date().getFullYear()}
+            </a>
+          </div>
+        </footer>
       </body>
     </html>
   );
-}
+}
\ No newline at end of file
diff --git a/app/page.tsx b/app/page.tsx
index 295f8fd..61ba6e0 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,65 +1,225 @@
-import Image from "next/image";
+// app/page.tsx
+
+'use client';
+
+import React from 'react';
+import Link from 'next/link';
+import MatrixRain from '@/app/components/MatrixRain';
+import { FaInstagram, FaLinkedin, FaDiscord, FaEnvelope, FaCamera, FaVolleyballBall, FaTree, FaCode } from 'react-icons/fa';
+import { TbCube3dSphere } from 'react-icons/tb';
 
 export default function Home() {
+
+  const calculateAge = (birthDateString: string): number => {
+    const today = new Date();
+    const birthDate = new Date(birthDateString);
+
+    let age = today.getFullYear() - birthDate.getFullYear();
+    const monthDiff = today.getMonth() - birthDate.getMonth();
+
+    if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
+      age--;
+    }
+
+    return age;
+  };
+
   return (
-    <div className="flex min-h-screen items-center justify-center bg-zinc-50 font-sans dark:bg-black">
-      <main className="flex min-h-screen w-full max-w-3xl flex-col items-center justify-between py-32 px-16 bg-white dark:bg-black sm:items-start">
-        <Image
-          className="dark:invert"
-          src="/next.svg"
-          alt="Next.js logo"
-          width={100}
-          height={20}
-          priority
-        />
-        <div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
-          <h1 className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
-            To get started, edit the page.tsx file.
+    <div className="relative w-full bg-[#0d1117] text-white overflow-hidden font-sans">
+
+      {/* 1. HERO SECTION */}
+      <section className="relative h-screen min-h-175 flex flex-col justify-center items-center overflow-hidden">
+
+        {/* Ambient Overlay for contrast */}
+        <div className="absolute inset-0 bg-linear-to-b from-transparent via-[#0d1117]/50 to-[#0d1117] z-1"></div>
+
+        <div className="relative z-10 flex flex-col items-center px-4">
+          <div className="bg-[#84c0a0] rounded-full h-45 w-45 md:h-55 md:w-55 flex justify-center items-center shadow-[0_0_50px_rgba(132,192,160,0.3)] animate-[zoomIn_1000ms_ease-out]">
+            <img src="/assets/logos/logo.svg" alt="Logo" className="h-[60%]" />
+          </div>
+
+          <h2 className="text-[#84c0a0] font-mono font-bold tracking-[0.3em] uppercase mt-12 text-sm md:text-xl text-center">
+            Technical High School Engineer
+          </h2>
+          <h1 className="text-white text-center uppercase text-[3rem] md:text-[6rem] font-black leading-none mt-4 drop-shadow-2xl">
+            William Söderberg
           </h1>
-          <p className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400">
-            Looking for a starting point or more instructions? Head over to{" "}
-            <a
-              href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-              className="font-medium text-zinc-950 dark:text-zinc-50"
-            >
-              Templates
-            </a>{" "}
-            or the{" "}
-            <a
-              href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-              className="font-medium text-zinc-950 dark:text-zinc-50"
-            >
-              Learning
-            </a>{" "}
-            center.
-          </p>
+
+          <div className="mt-10 flex gap-4">
+            <Link href="/projects" className="bg-[#84c0a0] text-[#0d1117] px-8 py-3 rounded-full font-bold uppercase tracking-wider hover:scale-105 transition-transform shadow-lg">
+              View Portfolios
+            </Link>
+          </div>
         </div>
-        <div className="flex flex-col gap-4 text-base font-medium sm:flex-row">
-          <a
-            className="flex h-12 w-full items-center justify-center gap-2 rounded-full bg-foreground px-5 text-background transition-colors hover:bg-[#383838] dark:hover:bg-[#ccc] md:w-[158px]"
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Image
-              className="dark:invert"
-              src="/vercel.svg"
-              alt="Vercel logomark"
-              width={16}
-              height={16}
-            />
-            Deploy Now
-          </a>
-          <a
-            className="flex h-12 w-full items-center justify-center rounded-full border border-solid border-black/[.08] px-5 transition-colors hover:border-transparent hover:bg-black/[.04] dark:border-white/[.145] dark:hover:bg-[#1a1a1a] md:w-[158px]"
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Documentation
-          </a>
+      </section>
+
+      {/* 2. ABOUT ME SECTION */}
+      <section className="relative py-24 px-6">
+        {/* Background Glow */}
+        <div className="absolute top-1/2 left-0 -translate-y-1/2 w-125 h-125 bg-[#84c0a0]/5 blur-[120px] rounded-full pointer-events-none"></div>
+
+        <div className="max-w-6xl mx-auto">
+          {/* Subtitle Header */}
+          <div className="text-center mb-12">
+            <h2 className="text-white text-4xl md:text-5xl font-black uppercase tracking-tighter">About Me</h2>
+            <p className="text-[#84c0a0] mt-4 font-mono uppercase text-sm tracking-widest font-bold">Identity & Background</p>
+          </div>
+
+          <div className="bg-white/5 backdrop-blur-xl border border-white/10 rounded-[40px] overflow-hidden flex flex-col lg:flex-row shadow-2xl">
+
+            {/* Left Column: Profile with "Scanning" Effect */}
+            <div className="lg:w-2/5 relative group border-b lg:border-b-0 lg:border-r border-white/10">
+              <img
+                src="/assets/images/profile_picture.jpg"
+                alt="William Söderberg"
+                className="w-full h-full object-cover"
+              />
+              <div className="absolute inset-0 bg-linear-to-t from-[#0d1117] via-transparent to-transparent opacity-60"></div>
+              <div className="absolute bottom-8 left-8">
+                <h3 className="text-white text-2xl font-bold uppercase tracking-tight">William Söderberg</h3>
+                <p className="text-[#84c0a0] font-mono text-sm mt-1">EST. 2002 | SWEDEN</p>
+              </div>
+            </div>
+
+            {/* Right Column: Bio Content */}
+            <div className="lg:w-3/5 p-8 md:p-16 flex flex-col justify-center">
+              <div className="flex items-center gap-4 mb-8">
+                <div className="w-12 h-1 border-t-2 border-[#84c0a0]"></div>
+                <h2 className="text-white text-3xl font-bold uppercase tracking-widest">DATA CARD</h2>
+              </div>
+              <p className="text-gray-300 text-lg leading-relaxed font-light">
+                My name is William Söderberg and I'm {calculateAge("2002-07-17")} years old. I have a degree in technical high school engineering specialized in design and industrial manufacturing, with heavy influence from IT and coding. I love problem solving and finding new ways to solve the most complicated problems.
+              </p>
+              <div className="mt-10 grid grid-cols-2 gap-6 border-t border-white/10 pt-10">
+                <div>
+                  <p className="text-xs font-bold text-[#84c0a0] uppercase tracking-widest mb-1">Focus</p>
+                  <p className="text-white font-medium text-sm">Industrial Design & IT</p>
+                </div>
+                <div>
+                  <p className="text-xs font-bold text-[#84c0a0] uppercase tracking-widest mb-1">Passions</p>
+                  <p className="text-white font-medium text-sm">Volleyball & Computers</p>
+                </div>
+              </div>
+            </div>
+          </div>
         </div>
-      </main>
+      </section>
+
+      {/* 3. WHAT DO I DO SECTION */}
+      <section className="relative py-24 px-6 overflow-hidden">
+        {/* Subtle Background Image Integration */}
+        <img src="/assets/images/leaves.jpg" alt="Leaves" className="absolute inset-0 w-full h-full object-cover z-0" />
+        <div className="absolute inset-0 bg-[#0d1117]/50 z-0"></div>
+
+        <div className="relative z-10 max-w-6xl mx-auto">
+          <div className="text-center mb-16">
+            <h2 className="text-white text-4xl md:text-5xl font-black uppercase tracking-tighter">What do I do?</h2>
+            <p className="text-[#84c0a0] mt-4 font-mono uppercase text-sm tracking-widest font-bold">A multidisciplinary engineer</p>
+          </div>
+
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+            {[
+              { icon: <FaVolleyballBall />, title: 'Volleyball', desc: 'Played for over 5 years as a middle blocker with Lerbergets and Ängelholms clubs.' },
+              { icon: <FaTree />, title: 'Young Ranger', desc: 'Part of the Youth+ Network at Europarc Federation, working in management at Kullaberg.' },
+              { icon: <FaCamera />, title: 'Photography', desc: 'Capturing nature and people, finding the best subjects on film.' },
+              { icon: <TbCube3dSphere />, title: 'CAD', desc: 'Specialized in design and manufacturing, modeling everything from concepts to architecture.' },
+              { icon: <FaCode />, title: 'Coding', desc: 'Developing automation scripts and custom programs to solve unique problems.' }
+            ].map((item, idx) => (
+              <div key={idx} className="group p-8 rounded-3xl bg-white/5 backdrop-blur-md border border-white/10 hover:border-[#84c0a0]/40 hover:bg-white/10 transition-all duration-300">
+                <div className="text-[#84c0a0] text-4xl mb-6 w-fit group-hover:scale-110 transition-transform duration-300">{item.icon}</div>
+                <h3 className="text-white text-2xl font-bold mb-4">{item.title}</h3>
+                <p className="text-gray-400 text-sm leading-relaxed">{item.desc}</p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* 4. PHOTO GALLERY SECTION */}
+      <section className="py-24 px-6 bg-[#0d1117]">
+        <div className="max-w-6xl mx-auto">
+          <div className="text-center mb-16">
+            <h2 className="text-white text-4xl md:text-5xl font-black uppercase tracking-tighter">Photography</h2>
+            <p className="text-[#84c0a0] mt-4 font-mono uppercase text-sm tracking-widest font-bold">Capturing the world</p>
+          </div>
+
+          <div className="flex flex-col lg:flex-row items-center lg:items-start gap-12 lg:gap-16">
+
+            {/* My Photos (Ynni Image) */}
+            <div className="relative w-full lg:w-1/2">
+              <img src="/assets/images/ynni.jpg" alt="My Photos" className="w-full rounded-4xl shadow-2xl object-cover lg:h-160" />
+              <div className="absolute top-[10%] -left-4 lg:-left-12 bg-white/10 backdrop-blur-xl border border-white/20 py-6 px-10 shadow-2xl rounded-2xl">
+                <h2 className="text-[30px] lg:text-[40px] text-white font-black whitespace-nowrap uppercase tracking-wider">My Photos</h2>
+              </div>
+            </div>
+
+            {/* Night Sky Collection */}
+            <div className="flex flex-col items-start w-full lg:w-1/2 lg:pt-8">
+              <img src="/assets/images/night_sky.jpg" alt="Night Sky" className="w-full max-w-125 rounded-3xl shadow-xl border border-white/10" />
+              <h3 className="text-white text-[26px] mt-8 font-bold uppercase tracking-wide">My Photography collection</h3>
+              <div className="w-12 h-1 border-t-2 border-[#84c0a0] my-4"></div>
+              <p className="text-gray-400 text-[18px] font-light leading-relaxed">
+                Taking photos is just one of my many hobbies. Finding the best subjects to capture on film, from nature to the night skies.
+              </p>
+              <Link href="/gallery" className="mt-8 bg-[#84c0a0] text-[#0d1117] px-8 py-3 rounded-full font-bold uppercase tracking-wider hover:scale-105 transition-transform shadow-[0_0_20px_rgba(132,192,160,0.3)]">
+                More photos
+              </Link>
+            </div>
+          </div>
+
+          {/* Singapore Full Width wrapper */}
+          <div className="w-full mt-32 relative h-125 md:h-175 rounded-[40px] overflow-hidden shadow-2xl border border-white/10 group">
+            <img src="/assets/images/singapore.jpg" alt="Singapore" className="absolute inset-0 w-full h-full object-cover transition-transform duration-2000 group-hover:scale-105" />
+            <div className="absolute inset-0 bg-linear-to-t from-[#0d1117]/90 via-[#0d1117]/20 to-transparent"></div>
+
+            <div className="relative z-10 w-full h-full p-8 md:p-16 flex items-end md:items-start">
+              <div className="bg-[#0d1117]/30 backdrop-blur-xl border border-white/10 p-8 max-w-87.5 rounded-3xl shadow-2xl">
+                <p className="text-[18px] font-medium text-white leading-relaxed">
+                  A cloudy day in Singapore, the New Zealand trip 2019.
+                </p>
+                <div className="mt-4 flex items-center gap-3">
+                  <span className="w-8 h-px bg-[#84c0a0]"></span>
+                  <span className="text-[#84c0a0] font-mono text-xs tracking-widest uppercase">Expedition 019</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* 5. CONTACT CALL-TO-ACTION (Compact Banner) */}
+      <section className="relative py-16 px-6 overflow-hidden border-t border-white/5">
+        {/* Immersive Mountain Background */}
+        <img
+          src="/assets/images/snowy_mountain_peaks.jpg"
+          alt="Snowy Mountains"
+          className="absolute inset-0 w-full h-full object-cover z-0"
+        />
+
+        {/* Dark overlay */}
+        <div className="absolute inset-0 bg-[#0d1117]/80 backdrop-blur-[2px] z-0"></div>
+
+        {/* Compact Glassmorphic CTA Banner */}
+        <div className="relative z-10 max-w-5xl mx-auto bg-white/5 backdrop-blur-xl border border-white/10 rounded-3xl p-8 md:px-12 md:py-10 shadow-2xl flex flex-col md:flex-row items-center justify-between gap-6">
+
+          <div className="text-center md:text-left">
+            <h2 className="text-white text-3xl md:text-4xl font-black uppercase tracking-tighter mb-2">
+              Let's Connect
+            </h2>
+            <p className="text-[#84c0a0] font-mono uppercase text-xs md:text-sm tracking-widest font-bold">
+              Transmission & Socials
+            </p>
+          </div>
+
+          <Link
+            href="/contact"
+            className="shrink-0 inline-block bg-[#84c0a0] text-[#0d1117] px-8 py-4 rounded-full font-bold uppercase tracking-wider hover:scale-105 active:scale-95 transition-all shadow-[0_0_20px_rgba(132,192,160,0.3)]"
+          >
+            Contact Me
+          </Link>
+
+        </div>
+      </section>
     </div>
   );
-}
+}
\ No newline at end of file
diff --git a/app/projects/code/page.tsx b/app/projects/code/page.tsx
new file mode 100644
index 0000000..77ab15b
--- /dev/null
+++ b/app/projects/code/page.tsx
@@ -0,0 +1,277 @@
+// app/projects/code/page.tsx
+
+import MatrixRain from '@/app/components/MatrixRain';
+import { FaCodeBranch, FaGithub, FaGitlab, FaGlobe, FaStar } from 'react-icons/fa';
+
+interface GithubProfile {
+    html_url: string;
+    avatar_url: string;
+    name: string;
+    login: string;
+    bio: string;
+    followers: number;
+    public_repos: number;
+}
+
+interface GithubRepo {
+    id: number;
+    name: string;
+    description: string;
+    html_url: string;
+    language: string;
+    stargazers_count: number;
+    forks: number;
+}
+
+interface GitlabRepo {
+    id: number;
+    name: string;
+    description: string;
+    web_url: string;
+    star_count: number;
+    forks_count: number;
+    language?: string;
+}
+
+async function getProfile(): Promise<GithubProfile | null> {
+    try {
+        const res = await fetch('https://api.github.com/users/WilliamSoderberg', { next: { revalidate: 60 } });
+        if (!res.ok) return null;
+        return res.json();
+    } catch (e) {
+        return null;
+    }
+}
+
+async function getGithubRepos(): Promise<GithubRepo[]> {
+    try {
+        const res = await fetch('https://api.github.com/users/WilliamSoderberg/repos?sort=updated', { next: { revalidate: 60 } });
+        if (!res.ok) return [];
+        return res.json();
+    } catch (e) {
+        return [];
+    }
+}
+
+async function getGitlabRepos(): Promise<GitlabRepo[]> {
+    try {
+        const res = await fetch('https://gitlab.soderberg.tech/api/v4/groups/soderberg-tech/projects', {
+            next: { revalidate: 60 }
+        });
+
+        if (!res.ok) return [];
+        const projects: GitlabRepo[] = await res.json();
+        const projectsWithLanguages = await Promise.all(
+            projects.map(async (repo) => {
+                try {
+                    const langRes = await fetch(`https://gitlab.soderberg.tech/api/v4/projects/${repo.id}/languages`, {
+                        next: { revalidate: 60 }
+                    });
+
+                    if (langRes.ok) {
+                        const languages = await langRes.json();
+                        const topLanguage = Object.keys(languages).sort((a, b) => languages[b] - languages[a])[0];
+                        return { ...repo, language: topLanguage };
+                    }
+                } catch (e) {
+                    console.error(`Failed to fetch language for GitLab repo: ${repo.id}`);
+                }
+                return repo;
+            })
+        );
+
+        return projectsWithLanguages;
+    } catch (e) {
+        console.error("GitLab fetch failed, returning empty array");
+        return [];
+    }
+}
+
+const langColors: Record<string, string> = {
+    JavaScript: 'bg-[#f1e05a]',
+    TypeScript: 'bg-[#2b7489]',
+    Python: 'bg-[#3572A5]',
+    PHP: 'bg-[#4F5D95]',
+    CSS: 'bg-[#563d7c]',
+    HTML: 'bg-[#e44b23]',
+    Vue: 'bg-[#41b883]'
+};
+
+export default async function CodePage() {
+    const [profile, githubRepos, gitlabRepos] = await Promise.all([
+        getProfile(),
+        getGithubRepos(),
+        getGitlabRepos()
+    ]);
+
+    return (
+        <main className="flex flex-col flex-1 relative min-h-dvh">
+            <MatrixRain />
+
+            <div className="h-25 shrink-0"></div>
+
+            <div className="relative z-10 w-full max-w-350 mx-auto px-4 pb-20 flex flex-col gap-16">
+
+                {/* 2. Profile Card Section */}
+                {profile && (
+                    <section className="flex justify-center mt-10">
+                        <div className="relative flex flex-col justify-center items-center bg-linear-to-b from-[#333333]/90 to-[#2a2a2a]/90 backdrop-blur-lg rounded-3xl text-center p-8 shadow-[0_8px_32px_rgba(0,0,0,0.5)] w-full max-w-md border border-white/10">
+                            <a href={profile.html_url} target="_blank" rel="noopener noreferrer">
+                                <FaGithub className="absolute text-white text-[28px] top-5 right-5 hover:text-[#84c0a0] transition-colors" />
+                            </a>
+                            <div className="w-full">
+                                <div className="relative h-37.5 w-37.5 mx-auto mb-5">
+                                    <img src={profile.avatar_url} alt="Avatar" className="h-full w-full rounded-full object-cover border-4 border-[#84c0a0] shadow-[0_0_15px_rgba(132,192,160,0.5)]" />
+                                </div>
+                                <h1 className="mb-1">
+                                    <a className="text-white text-[26px] font-bold tracking-wide no-underline hover:text-[#84c0a0] transition-colors" href={profile.html_url} target="_blank" rel="noopener noreferrer">
+                                        {profile.name}
+                                    </a>
+                                </h1>
+                                <div className="mb-5">
+                                    <a className="text-[#a0aab6] font-medium no-underline hover:text-white transition-colors" href={profile.html_url} target="_blank" rel="noopener noreferrer">
+                                        @{profile.login}
+                                    </a>
+                                </div>
+                                <p className="font-medium mx-auto text-[#84c0a0] mt-2.5 text-[15px] leading-relaxed">
+                                    {profile.bio}
+                                </p>
+                                <div className="mt-8 relative border-t border-white/10 pt-5 flex justify-around">
+                                    <div className="relative">
+                                        <div className="text-white text-[22px] font-bold">{profile.followers}</div>
+                                        <div className="text-[11px] font-bold text-[#a0aab6] tracking-widest uppercase mt-1">Followers</div>
+                                    </div>
+                                    <div className="relative">
+                                        <div className="text-white text-[22px] font-bold">{profile.public_repos}</div>
+                                        <div className="text-[11px] font-bold text-[#a0aab6] tracking-widest uppercase mt-1">Repositories</div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </section>
+                )}
+
+                {/* 3. GitLab Repositories Section */}
+                <section className="bg-[#fc6d26]/10 backdrop-blur-lg rounded-3xl border border-[#fc6d26]/30 p-8 shadow-2xl">
+                    <div className="flex justify-center items-center flex-col mb-10">
+                        <a href="https://gitlab.soderberg.tech/WilliamSoderberg" target="_blank" rel="noopener noreferrer">
+                            <FaGitlab className="text-[#fc6d26] text-[55px] drop-shadow-[0_0_15px_rgba(252,109,38,0.4)] hover:scale-110 transition-transform cursor-pointer" />
+                        </a>
+                        <h2 className="text-white mt-3.75 text-[32px] md:text-[38px] uppercase font-bold text-center tracking-wider">
+                            GitLab Projects
+                        </h2>
+                        <p className="text-gray-300 text-center max-w-2xl mt-3">Self-hosted infrastructure and private development.</p>
+                    </div>
+
+                    {gitlabRepos.length > 0 ? (
+                        <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6 justify-center">
+                            {gitlabRepos.map((repo) => (
+                                <a key={repo.id} href={repo.web_url} target="_blank" rel="noopener noreferrer" className="group flex flex-col justify-between bg-linear-to-br from-[#2a2a2a]/90 to-[#222222]/90 border border-white/10 p-6 rounded-2xl hover:-translate-y-1 hover:border-[#fc6d26]/60 hover:shadow-[0_8px_24px_rgba(252,109,38,0.2)] transition-all duration-300 no-underline">
+                                    <div>
+                                        <h3 className="text-[#fc6d26] text-[19px] font-bold group-hover:text-white transition-colors truncate">
+                                            {repo.name}
+                                        </h3>
+                                        <p className="text-[14px] mb-4 mt-2.5 text-gray-400 text-left line-clamp-3 leading-relaxed">
+                                            {repo.description || 'No description provided.'}
+                                        </p>
+                                    </div>
+                                    <div className="flex items-center text-[13px] text-[#8b949e] mt-4 font-medium">
+                                        {/* NEW: GitLab Language Badge */}
+                                        {repo.language && (
+                                            <div className="flex items-center mr-5">
+                                                <span className={`w-2.5 h-2.5 rounded-full mr-2 ${langColors[repo.language] || 'bg-gray-500'}`}></span>
+                                                <span className="text-gray-300">{repo.language}</span>
+                                            </div>
+                                        )}
+                                        {repo.star_count > 0 && (
+                                            <span className="flex items-center mr-4">
+                                                <FaStar className="mr-1.5" /> {repo.star_count}
+                                            </span>
+                                        )}
+                                        {repo.forks_count > 0 && (
+                                            <span className="flex items-center">
+                                                <FaCodeBranch className="mr-1.5" /> {repo.forks_count}
+                                            </span>
+                                        )}
+                                    </div>
+                                </a>
+                            ))}
+                        </div>
+                    ) : (
+                        <div className="text-center text-gray-400 italic py-8 bg-black/20 rounded-xl">No public GitLab repositories found or API is restricted.</div>
+                    )}
+                </section>
+
+                {/* 4. GitHub Repositories Section */}
+                <section className="bg-[#84c0a0]/10 backdrop-blur-lg rounded-3xl border border-[#84c0a0]/30 p-8 shadow-2xl">
+                    <div className="flex justify-center items-center flex-col mb-10">
+                        <FaGithub className="text-white text-[55px] drop-shadow-[0_0_15px_rgba(255,255,255,0.2)]" />
+                        <h2 className="text-white mt-3.75 text-[32px] md:text-[38px] uppercase font-bold text-center tracking-wider">
+                            Public Repositories
+                        </h2>
+                    </div>
+
+                    <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6 justify-center">
+                        {githubRepos.map((repo) => (
+                            <a key={repo.id} href={repo.html_url} target="_blank" rel="noopener noreferrer" className="group flex flex-col justify-between bg-linear-to-br from-[#2a2a2a]/90 to-[#222222]/90 border border-white/10 p-6 rounded-2xl hover:-translate-y-1 hover:border-[#84c0a0]/60 hover:shadow-[0_8px_24px_rgba(132,192,160,0.2)] transition-all duration-300 no-underline">
+                                <div>
+                                    <h3 className="text-[#4e9fff] text-[19px] font-bold group-hover:text-white transition-colors truncate">
+                                        {repo.name}
+                                    </h3>
+                                    <p className="text-[14px] mb-4 mt-2.5 text-gray-400 text-left line-clamp-3 leading-relaxed">
+                                        {repo.description || 'No description provided.'}
+                                    </p>
+                                </div>
+                                <div className="flex items-center text-[13px] text-[#8b949e] mt-4 font-medium">
+                                    {repo.language && (
+                                        <div className="flex items-center mr-5">
+                                            <span className={`w-2.5 h-2.5 rounded-full mr-2 ${langColors[repo.language] || 'bg-gray-500'}`}></span>
+                                            <span className="text-gray-300">{repo.language}</span>
+                                        </div>
+                                    )}
+                                    {repo.stargazers_count > 0 && (
+                                        <span className="flex items-center mr-4">
+                                            <FaStar className="mr-1.5" /> {repo.stargazers_count}
+                                        </span>
+                                    )}
+                                    {repo.forks > 0 && (
+                                        <span className="flex items-center">
+                                            <FaCodeBranch className="mr-1.5" /> {repo.forks}
+                                        </span>
+                                    )}
+                                </div>
+                            </a>
+                        ))}
+                    </div>
+                </section>
+
+                {/* 5. Hosted Websites Section */}
+                <section className="bg-white/5 backdrop-blur-lg rounded-3xl border border-white/10 p-10 shadow-2xl">
+                    <div className="flex justify-center items-center flex-col mb-10">
+                        <FaGlobe className="text-white text-[55px] drop-shadow-[0_0_15px_rgba(255,255,255,0.2)]" />
+                        <h2 className="text-white mt-3.75 text-[32px] md:text-[38px] uppercase font-bold text-center tracking-wider">
+                            Hosted Websites
+                        </h2>
+                    </div>
+
+                    {/* Changed from Flex to Grid for perfect centering! */}
+                    <div className="grid grid-cols-1 md:grid-cols-3 gap-12 max-w-5xl mx-auto justify-items-center items-center py-6">
+                        <a className="no-underline text-white text-[22px] flex flex-col items-center hover:scale-105 transition-transform group" href="https://soderberg.tech">
+                            <img src="/assets/logos/logo.svg" alt="Soderberg Tech" className="w-22.5 h-16.25 object-contain mb-5 drop-shadow-md group-hover:drop-shadow-[0_0_10px_rgba(255,255,255,0.5)] transition-all" />
+                            <span className="font-bold tracking-wide text-center">Soderberg Tech</span>
+                        </a>
+                        <a className="no-underline text-white text-[22px] flex flex-col items-center hover:scale-105 transition-transform group" href="https://lirkab.se">
+                            <img src="/assets/logos/lirkab.svg" alt="Lirkab" className="w-22.5 h-16.25 object-contain mb-5 drop-shadow-md group-hover:drop-shadow-[0_0_10px_rgba(255,255,255,0.5)] transition-all" />
+                            <span className="font-bold tracking-wide text-center">Lirkab</span>
+                        </a>
+                        <a className="no-underline text-white text-[22px] flex flex-col items-center hover:scale-105 transition-transform group" href="https://lerbergetsvolleyboll.se">
+                            <img src="/assets/logos/lvs.svg" alt="Lerbergets Volleyboll" className="w-22.5 h-16.25 object-contain mb-5 drop-shadow-md group-hover:drop-shadow-[0_0_10px_rgba(255,255,255,0.5)] transition-all" />
+                            <span className="font-bold tracking-wide text-center">Lerbergets Volleyboll</span>
+                        </a>
+                    </div>
+                </section>
+
+            </div>
+        </main>
+    );
+}
\ No newline at end of file
diff --git a/app/projects/design/page.tsx b/app/projects/design/page.tsx
new file mode 100644
index 0000000..9b953a4
--- /dev/null
+++ b/app/projects/design/page.tsx
@@ -0,0 +1,156 @@
+// app/projects/design/page.tsx
+
+'use client';
+
+import { Center, Environment, Loader, OrbitControls, useGLTF } from '@react-three/drei';
+import { Canvas, useThree } from '@react-three/fiber';
+import { Suspense, useEffect, useState, useTransition } from 'react';
+import { TbCube3dSphere } from 'react-icons/tb';
+import * as THREE from 'three';
+
+const models = [
+    { name: 'Wallet', src: 'Wallet' },
+    { name: 'Car', src: 'Car' },
+    { name: 'Magnet holder', src: 'Magnet holder' },
+    { name: 'PC', src: 'PC' },
+];
+
+function Model({ url, onReady }: { url: string; onReady: () => void }) {
+    const { scene } = useGLTF(url);
+
+    useEffect(() => {
+        if (scene) {
+            const timer = setTimeout(onReady, 100);
+            return () => clearTimeout(timer);
+        }
+    }, [scene, onReady]);
+
+    return <primitive object={scene} />;
+}
+
+function DynamicCamera({ radius }: { radius: number }) {
+    const { camera } = useThree();
+    useEffect(() => {
+        camera.position.set(0, radius * 0.5, radius * 2.5);
+        camera.lookAt(0, 0, 0);
+        camera.updateProjectionMatrix();
+    }, [radius, camera]);
+    return null;
+}
+
+export default function DesignPage() {
+    const [activeModel, setActiveModel] = useState(models[0].src);
+    const [modelRadius, setModelRadius] = useState(1);
+    const [isPending, startTransition] = useTransition();
+    const [isSceneReady, setIsSceneReady] = useState(false);
+    const [isCentering, setIsCentering] = useState(true);
+
+    const handleModelChange = (newModel: string) => {
+        if (newModel === activeModel) return;
+
+        setIsCentering(true);
+        setIsSceneReady(false);
+
+        startTransition(() => {
+            setActiveModel(newModel);
+        });
+    };
+
+    const showOverlay = isPending || !isSceneReady;
+
+    return (
+        <main className="flex flex-col flex-1 relative bg-[#0d1117] overflow-hidden">
+            <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-200 h-200 bg-[#84c0a0]/10 blur-[150px] rounded-full pointer-events-none z-0"></div>
+            <div className="h-25 shrink-0"></div>
+
+            <div className="relative z-10 w-full max-w-350 mx-auto px-4 pb-20 flex flex-col gap-10">
+                <div className="pt-5 flex justify-center items-center flex-col text-center">
+                    <TbCube3dSphere className="text-white text-[80px] drop-shadow-[0_0_15px_rgba(255,255,255,0.2)]" />
+                    <h2 className="text-white text-[32px] md:text-[45px] uppercase mt-3.75 font-bold tracking-wider">CAD Library</h2>
+                </div>
+
+                <section className="w-full flex justify-center">
+                    <div className="w-full relative bg-white/5 backdrop-blur-xl rounded-4xl border border-white/10 shadow-[0_8px_32px_rgba(0,0,0,0.5)] p-4 md:p-8 flex flex-col">
+                        <div className="w-full h-[50vh] md:h-[65vh] rounded-[20px] overflow-hidden relative bg-linear-to-br from-[#1a1a1a] to-[#0f0f0f] shadow-inner border border-white/5 cursor-grab active:cursor-grabbing">
+
+                            {showOverlay && (
+                                <div className="absolute inset-0 z-20 flex flex-col items-center justify-center bg-[#0d1117]/80 backdrop-blur-md transition-all duration-500">
+                                    <div className="w-12 h-12 border-4 border-[#84c0a0]/20 border-t-[#84c0a0] rounded-full animate-spin mb-4"></div>
+                                    <p className="text-[#84c0a0] font-mono text-xs uppercase tracking-[0.2em] font-bold">
+                                        {isPending ? "Fetching Data..." : "Compiling Materials..."}
+                                    </p>
+                                </div>
+                            )}
+
+                            <Canvas shadows={{ type: THREE.PCFShadowMap }} dpr={[1, 2]} camera={{ near: 0.001, far: 1000, fov: 50 }}>
+                                <ambientLight intensity={0.5} />
+                                <directionalLight position={[10, 10, 10]} intensity={1} castShadow />
+                                <Environment preset="city" />
+                                <DynamicCamera radius={modelRadius} />
+
+                                <Suspense fallback={null}>
+                                    <Center
+                                        key={activeModel}
+                                        onCentered={({ boundingSphere }) => {
+                                            setModelRadius(boundingSphere.radius);
+                                            requestAnimationFrame(() => setIsCentering(false));
+                                        }}
+                                    >
+                                        <group visible={!isCentering && isSceneReady}>
+                                            <Model
+                                                url={`/models/${activeModel}.glb`}
+                                                onReady={() => setIsSceneReady(true)}
+                                            />
+                                        </group>
+                                    </Center>
+                                </Suspense>
+
+                                <OrbitControls
+                                    makeDefault
+                                    autoRotate
+                                    autoRotateSpeed={0.5}
+                                    enablePan={true}
+                                    enableZoom={true}
+                                    minDistance={modelRadius * 0.5}
+                                    maxDistance={modelRadius * 6}
+                                />
+                            </Canvas>
+
+                            <Loader
+                                containerStyles={{ background: 'transparent' }}
+                                innerStyles={{ display: 'none' }}
+                            />
+
+                            <a href={`/models/${activeModel}.usdz`} rel="ar" className="absolute top-4 right-4 bg-black/50 backdrop-blur-md text-white text-sm px-4 py-2 rounded-full border border-white/10 hover:bg-white/20 transition-colors md:hidden z-10 flex items-center gap-2">
+                                <img src={`/models/${activeModel}.png`} alt="AR Preview" className="w-5 h-5 rounded-full object-cover" />
+                                View in AR
+                            </a>
+                        </div>
+
+                        <div className="w-full mt-8 flex justify-center">
+                            <div className="flex flex-wrap justify-center gap-4 md:gap-8 w-full px-2">
+                                {models.map((model) => (
+                                    <button
+                                        key={model.name}
+                                        className={`shrink-0 w-20 h-20 md:w-25 md:h-25 bg-contain bg-no-repeat bg-center rounded-2xl transition-all duration-300 focus:outline-none focus-visible:ring-2 focus-visible:ring-[#84c0a0] relative group ${activeModel === model.src
+                                            ? 'bg-[#2a2a2a] border-2 border-[#84c0a0] scale-110 shadow-[0_0_20px_rgba(132,192,160,0.3)]'
+                                            : 'bg-[#1a1a1a] border border-white/10 hover:bg-[#252525] hover:-translate-y-1'
+                                            }`}
+                                        style={{ backgroundImage: `url('/models/${model.src}.png')` }}
+                                        onClick={() => handleModelChange(model.src)}
+                                        onMouseEnter={() => useGLTF.preload(`/models/${model.src}.glb`)}
+                                        aria-label={`View ${model.name} model`}
+                                    >
+                                        <span className="absolute -bottom-8 left-1/2 -translate-x-1/2 text-xs font-semibold text-white opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap bg-black/80 px-2 py-1 rounded">
+                                            {model.name}
+                                        </span>
+                                    </button>
+                                ))}
+                            </div>
+                        </div>
+                    </div>
+                </section>
+            </div>
+        </main>
+    );
+}
\ No newline at end of file
diff --git a/app/projects/page.tsx b/app/projects/page.tsx
new file mode 100644
index 0000000..6b6d0dc
--- /dev/null
+++ b/app/projects/page.tsx
@@ -0,0 +1,61 @@
+// app/projects/page.tsx
+
+import Link from 'next/link';
+import BlurredCode from '@/app/components/BlurredCode';
+import { TbCube3dSphere } from 'react-icons/tb';
+import { FaCode } from 'react-icons/fa';
+
+export default function ProjectsPage() {
+    return (
+        <main className="flex flex-col flex-1 relative bg-[#0d1117] overflow-x-hidden">
+            <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-150 md:w-250 h-150 md:h-250 bg-[#84c0a0]/10 blur-[150px] rounded-full pointer-events-none z-0"></div>
+
+            <div className="h-25 shrink-0"></div>
+
+            <div className="relative z-10 flex-1 flex flex-col justify-center items-center py-10 md:py-20 px-6">
+                <div className="mb-12 text-center">
+                    <h1 className="text-white text-[32px] md:text-[55px] uppercase font-extrabold tracking-wider drop-shadow-lg">
+                        My Portfolios
+                    </h1>
+                    <p className="text-[#a0aab6] mt-2 text-base md:text-xl max-w-md mx-auto">
+                        Choose a discipline to explore my work.
+                    </p>
+                </div>
+
+                <section className="flex flex-col md:flex-row gap-8 md:gap-12 w-full max-w-275 items-stretch">
+
+                    <Link
+                        href="/projects/code"
+                        className="relative flex-1 group min-h-75 md:h-125 rounded-4xl overflow-hidden border border-white/10 shadow-[0_8px_32px_rgba(0,0,0,0.5)] transition-all duration-500 hover:-translate-y-2 hover:border-[#84c0a0]/60 no-underline"
+                    >
+                        <BlurredCode />
+                        <div className="absolute inset-0 z-10 bg-[#0d1117]/60 backdrop-blur-[2px] group-hover:bg-[#0d1117]/20 group-hover:backdrop-blur-[1px] transition-all duration-500 flex flex-col justify-center items-center p-8">
+                            <FaCode className="text-white text-[50px] md:text-[80px] mb-4 md:mb-6 opacity-80 group-hover:opacity-100 group-hover:scale-110 group-hover:text-[#84c0a0] transition-all duration-500" />
+                            <h2 className="text-white text-[32px] md:text-[50px] font-bold text-center tracking-wide">
+                                Coding
+                            </h2>
+                        </div>
+                    </Link>
+
+                    <Link
+                        href="/projects/design"
+                        className="relative flex-1 group min-h-75 md:h-125 rounded-4xl overflow-hidden border border-white/10 shadow-[0_8px_32px_rgba(0,0,0,0.5)] transition-all duration-500 hover:-translate-y-2 hover:border-[#84c0a0]/60 no-underline"
+                    >
+                        <div
+                            className="absolute inset-0 z-0 bg-center bg-cover bg-no-repeat opacity-40 group-hover:opacity-100 group-hover:scale-105 transition-all duration-700"
+                            style={{ backgroundImage: `url('/assets/images/CAD.png')` }}
+                        ></div>
+
+                        <div className="absolute inset-0 z-10 bg-[#0d1117]/60 backdrop-blur-[2px] group-hover:bg-[#0d1117]/20 group-hover:backdrop-blur-[1px] transition-all duration-500 flex flex-col justify-center items-center p-8">
+                            <TbCube3dSphere className="text-white text-[50px] md:text-[80px] mb-4 md:mb-6 opacity-80 group-hover:opacity-100 group-hover:scale-110 group-hover:text-[#84c0a0] transition-all duration-500" />
+                            <h2 className="text-white text-[32px] md:text-[50px] font-bold text-center tracking-wide">
+                                CAD & Design
+                            </h2>
+                        </div>
+                    </Link>
+
+                </section>
+            </div>
+        </main>
+    );
+}
\ No newline at end of file
diff --git a/next.config.ts b/next.config.ts
index e9ffa30..5f5cf0b 100644
--- a/next.config.ts
+++ b/next.config.ts
@@ -1,7 +1,11 @@
+// next.config.ts
+
 import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
-  /* config options here */
+  images: {
+    qualities: [75, 80, 85, 90, 95, 100], // Add 90 here!
+  },
 };
 
 export default nextConfig;
diff --git a/package-lock.json b/package-lock.json
index e745303..4be5ef1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,15 +8,25 @@
       "name": "soderberg-tech",
       "version": "0.1.0",
       "dependencies": {
+        "@react-three/drei": "^10.7.7",
+        "@react-three/fiber": "^9.5.0",
+        "image-size": "^2.0.2",
         "next": "16.1.6",
+        "photoswipe": "^5.4.4",
         "react": "19.2.3",
-        "react-dom": "19.2.3"
+        "react-dom": "19.2.3",
+        "react-icons": "^5.6.0",
+        "react-photoswipe-gallery": "^4.0.0",
+        "react-syntax-highlighter": "^16.1.1",
+        "three": "^0.183.2"
       },
       "devDependencies": {
         "@tailwindcss/postcss": "^4",
+        "@types/image-size": "^0.7.0",
         "@types/node": "^20",
         "@types/react": "^19",
         "@types/react-dom": "^19",
+        "@types/react-syntax-highlighter": "^15.5.13",
         "eslint": "^9",
         "eslint-config-next": "16.1.6",
         "tailwindcss": "^4",
@@ -228,6 +238,15 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/@babel/runtime": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.28.6.tgz",
+      "integrity": "sha512-05WQkdpL9COIMz4LjTxGpPNCdlpyimKppYNoJ5Di5EUObifl8t4tuLuUBBZEpoLYOmfvIWrsp9fCl0HoPRVTdA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/@babel/template": {
       "version": "7.28.6",
       "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.28.6.tgz",
@@ -276,6 +295,12 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@dimforge/rapier3d-compat": {
+      "version": "0.12.0",
+      "resolved": "https://registry.npmjs.org/@dimforge/rapier3d-compat/-/rapier3d-compat-0.12.0.tgz",
+      "integrity": "sha512-uekIGetywIgopfD97oDL5PfeezkFpNhwlzlaEYNOA0N6ghdsOvh/HYjSMek5Q2O1PYvRSDFcqFVJl4r4ZBwOow==",
+      "license": "Apache-2.0"
+    },
     "node_modules/@emnapi/core": {
       "version": "1.8.1",
       "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.8.1.tgz",
@@ -1021,6 +1046,24 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@mediapipe/tasks-vision": {
+      "version": "0.10.17",
+      "resolved": "https://registry.npmjs.org/@mediapipe/tasks-vision/-/tasks-vision-0.10.17.tgz",
+      "integrity": "sha512-CZWV/q6TTe8ta61cZXjfnnHsfWIdFhms03M9T7Cnd5y2mdpylJM0rF1qRq+wsQVRMLz1OYPVEBU9ph2Bx8cxrg==",
+      "license": "Apache-2.0"
+    },
+    "node_modules/@monogrid/gainmap-js": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/@monogrid/gainmap-js/-/gainmap-js-3.4.0.tgz",
+      "integrity": "sha512-2Z0FATFHaoYJ8b+Y4y4Hgfn3FRFwuU5zRrk+9dFWp4uGAdHGqVEdP7HP+gLA3X469KXHmfupJaUbKo1b/aDKIg==",
+      "license": "MIT",
+      "dependencies": {
+        "promise-worker-transferable": "^1.0.4"
+      },
+      "peerDependencies": {
+        "three": ">= 0.159.0"
+      }
+    },
     "node_modules/@napi-rs/wasm-runtime": {
       "version": "0.2.12",
       "resolved": "https://registry.npmjs.org/@napi-rs/wasm-runtime/-/wasm-runtime-0.2.12.tgz",
@@ -1226,6 +1269,94 @@
         "node": ">=12.4.0"
       }
     },
+    "node_modules/@react-three/drei": {
+      "version": "10.7.7",
+      "resolved": "https://registry.npmjs.org/@react-three/drei/-/drei-10.7.7.tgz",
+      "integrity": "sha512-ff+J5iloR0k4tC++QtD/j9u3w5fzfgFAWDtAGQah9pF2B1YgOq/5JxqY0/aVoQG5r3xSZz0cv5tk2YuBob4xEQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.26.0",
+        "@mediapipe/tasks-vision": "0.10.17",
+        "@monogrid/gainmap-js": "^3.0.6",
+        "@use-gesture/react": "^10.3.1",
+        "camera-controls": "^3.1.0",
+        "cross-env": "^7.0.3",
+        "detect-gpu": "^5.0.56",
+        "glsl-noise": "^0.0.0",
+        "hls.js": "^1.5.17",
+        "maath": "^0.10.8",
+        "meshline": "^3.3.1",
+        "stats-gl": "^2.2.8",
+        "stats.js": "^0.17.0",
+        "suspend-react": "^0.1.3",
+        "three-mesh-bvh": "^0.8.3",
+        "three-stdlib": "^2.35.6",
+        "troika-three-text": "^0.52.4",
+        "tunnel-rat": "^0.1.2",
+        "use-sync-external-store": "^1.4.0",
+        "utility-types": "^3.11.0",
+        "zustand": "^5.0.1"
+      },
+      "peerDependencies": {
+        "@react-three/fiber": "^9.0.0",
+        "react": "^19",
+        "react-dom": "^19",
+        "three": ">=0.159"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@react-three/fiber": {
+      "version": "9.5.0",
+      "resolved": "https://registry.npmjs.org/@react-three/fiber/-/fiber-9.5.0.tgz",
+      "integrity": "sha512-FiUzfYW4wB1+PpmsE47UM+mCads7j2+giRBltfwH7SNhah95rqJs3ltEs9V3pP8rYdS0QlNne+9Aj8dS/SiaIA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.17.8",
+        "@types/webxr": "*",
+        "base64-js": "^1.5.1",
+        "buffer": "^6.0.3",
+        "its-fine": "^2.0.0",
+        "react-use-measure": "^2.1.7",
+        "scheduler": "^0.27.0",
+        "suspend-react": "^0.1.3",
+        "use-sync-external-store": "^1.4.0",
+        "zustand": "^5.0.3"
+      },
+      "peerDependencies": {
+        "expo": ">=43.0",
+        "expo-asset": ">=8.4",
+        "expo-file-system": ">=11.0",
+        "expo-gl": ">=11.0",
+        "react": ">=19 <19.3",
+        "react-dom": ">=19 <19.3",
+        "react-native": ">=0.78",
+        "three": ">=0.156"
+      },
+      "peerDependenciesMeta": {
+        "expo": {
+          "optional": true
+        },
+        "expo-asset": {
+          "optional": true
+        },
+        "expo-file-system": {
+          "optional": true
+        },
+        "expo-gl": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        },
+        "react-native": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@rtsao/scc": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@rtsao/scc/-/scc-1.1.0.tgz",
@@ -1513,6 +1644,12 @@
         "tailwindcss": "4.2.1"
       }
     },
+    "node_modules/@tweenjs/tween.js": {
+      "version": "23.1.3",
+      "resolved": "https://registry.npmjs.org/@tweenjs/tween.js/-/tween.js-23.1.3.tgz",
+      "integrity": "sha512-vJmvvwFxYuGnF2axRtPYocag6Clbb5YS7kLL+SO/TeVFzHqDIWrNKYtcsPMibjDx9O+bu+psAy9NKfWklassUA==",
+      "license": "MIT"
+    },
     "node_modules/@tybys/wasm-util": {
       "version": "0.10.1",
       "resolved": "https://registry.npmjs.org/@tybys/wasm-util/-/wasm-util-0.10.1.tgz",
@@ -1524,6 +1661,12 @@
         "tslib": "^2.4.0"
       }
     },
+    "node_modules/@types/draco3d": {
+      "version": "1.4.10",
+      "resolved": "https://registry.npmjs.org/@types/draco3d/-/draco3d-1.4.10.tgz",
+      "integrity": "sha512-AX22jp8Y7wwaBgAixaSvkoG4M/+PlAcm3Qs4OW8yT9DM4xUpWKeFhLueTAyZF39pviAdcDdeJoACapiAceqNcw==",
+      "license": "MIT"
+    },
     "node_modules/@types/estree": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
@@ -1531,6 +1674,25 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/hast": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/hast/-/hast-3.0.4.tgz",
+      "integrity": "sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "*"
+      }
+    },
+    "node_modules/@types/image-size": {
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/@types/image-size/-/image-size-0.7.0.tgz",
+      "integrity": "sha512-WkmNFWsC7NggeNC+2LxFJc6we3PiPf72NJUpezGNPbSe5zZ9sBcscQnSqQjYAyax3QNCyT42kNdAeT2tTvQMcQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
     "node_modules/@types/json-schema": {
       "version": "7.0.15",
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
@@ -1555,11 +1717,22 @@
         "undici-types": "~6.21.0"
       }
     },
+    "node_modules/@types/offscreencanvas": {
+      "version": "2019.7.3",
+      "resolved": "https://registry.npmjs.org/@types/offscreencanvas/-/offscreencanvas-2019.7.3.tgz",
+      "integrity": "sha512-ieXiYmgSRXUDeOntE1InxjWyvEelZGP63M+cGuquuRLuIKKT1osnkXjxev9B7d1nXSug5vpunx+gNlbVxMlC9A==",
+      "license": "MIT"
+    },
+    "node_modules/@types/prismjs": {
+      "version": "1.26.6",
+      "resolved": "https://registry.npmjs.org/@types/prismjs/-/prismjs-1.26.6.tgz",
+      "integrity": "sha512-vqlvI7qlMvcCBbVe0AKAb4f97//Hy0EBTaiW8AalRnG/xAN5zOiWWyrNqNXeq8+KAuvRewjCVY1+IPxk4RdNYw==",
+      "license": "MIT"
+    },
     "node_modules/@types/react": {
       "version": "19.2.14",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.14.tgz",
       "integrity": "sha512-ilcTH/UniCkMdtexkoCN0bI7pMcJDvmQFPvuPvmEaYA/NSfFTAgdUSLAoVjaRJm7+6PvcM+q1zYOwS4wTYMF9w==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "csstype": "^3.2.2"
@@ -1575,6 +1748,58 @@
         "@types/react": "^19.2.0"
       }
     },
+    "node_modules/@types/react-reconciler": {
+      "version": "0.28.9",
+      "resolved": "https://registry.npmjs.org/@types/react-reconciler/-/react-reconciler-0.28.9.tgz",
+      "integrity": "sha512-HHM3nxyUZ3zAylX8ZEyrDNd2XZOnQ0D5XfunJF5FLQnZbHHYq4UWvW1QfelQNXv1ICNkwYhfxjwfnqivYB6bFg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*"
+      }
+    },
+    "node_modules/@types/react-syntax-highlighter": {
+      "version": "15.5.13",
+      "resolved": "https://registry.npmjs.org/@types/react-syntax-highlighter/-/react-syntax-highlighter-15.5.13.tgz",
+      "integrity": "sha512-uLGJ87j6Sz8UaBAooU0T6lWJ0dBmjZgN1PZTrj05TNql2/XpC6+4HhMT5syIdFUUt+FASfCeLLv4kBygNU+8qA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
+    "node_modules/@types/stats.js": {
+      "version": "0.17.4",
+      "resolved": "https://registry.npmjs.org/@types/stats.js/-/stats.js-0.17.4.tgz",
+      "integrity": "sha512-jIBvWWShCvlBqBNIZt0KAshWpvSjhkwkEu4ZUcASoAvhmrgAUI2t1dXrjSL4xXVLB4FznPrIsX3nKXFl/Dt4vA==",
+      "license": "MIT"
+    },
+    "node_modules/@types/three": {
+      "version": "0.183.1",
+      "resolved": "https://registry.npmjs.org/@types/three/-/three-0.183.1.tgz",
+      "integrity": "sha512-f2Pu5Hrepfgavttdye3PsH5RWyY/AvdZQwIVhrc4uNtvF7nOWJacQKcoVJn0S4f0yYbmAE6AR+ve7xDcuYtMGw==",
+      "license": "MIT",
+      "dependencies": {
+        "@dimforge/rapier3d-compat": "~0.12.0",
+        "@tweenjs/tween.js": "~23.1.3",
+        "@types/stats.js": "*",
+        "@types/webxr": ">=0.5.17",
+        "@webgpu/types": "*",
+        "fflate": "~0.8.2",
+        "meshoptimizer": "~1.0.1"
+      }
+    },
+    "node_modules/@types/unist": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz",
+      "integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==",
+      "license": "MIT"
+    },
+    "node_modules/@types/webxr": {
+      "version": "0.5.24",
+      "resolved": "https://registry.npmjs.org/@types/webxr/-/webxr-0.5.24.tgz",
+      "integrity": "sha512-h8fgEd/DpoS9CBrjEQXR+dIDraopAEfu4wYVNY2tEPwk60stPWhvZMf4Foo5FakuQ7HFZoa8WceaWFervK2Ovg==",
+      "license": "MIT"
+    },
     "node_modules/@typescript-eslint/eslint-plugin": {
       "version": "8.57.0",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.57.0.tgz",
@@ -2139,6 +2364,30 @@
         "win32"
       ]
     },
+    "node_modules/@use-gesture/core": {
+      "version": "10.3.1",
+      "resolved": "https://registry.npmjs.org/@use-gesture/core/-/core-10.3.1.tgz",
+      "integrity": "sha512-WcINiDt8WjqBdUXye25anHiNxPc0VOrlT8F6LLkU6cycrOGUDyY/yyFmsg3k8i5OLvv25llc0QC45GhR/C8llw==",
+      "license": "MIT"
+    },
+    "node_modules/@use-gesture/react": {
+      "version": "10.3.1",
+      "resolved": "https://registry.npmjs.org/@use-gesture/react/-/react-10.3.1.tgz",
+      "integrity": "sha512-Yy19y6O2GJq8f7CHf7L0nxL8bf4PZCPaVOCgJrusOeFHY1LvHgYXnmnXg6N5iwAnbgbZCDjo60SiM6IPJi9C5g==",
+      "license": "MIT",
+      "dependencies": {
+        "@use-gesture/core": "10.3.1"
+      },
+      "peerDependencies": {
+        "react": ">= 16.8.0"
+      }
+    },
+    "node_modules/@webgpu/types": {
+      "version": "0.1.69",
+      "resolved": "https://registry.npmjs.org/@webgpu/types/-/types-0.1.69.tgz",
+      "integrity": "sha512-RPmm6kgRbI8e98zSD3RVACvnuktIja5+yLgDAkTmxLr90BEwdTXRQWNLF3ETTTyH/8mKhznZuN5AveXYFEsMGQ==",
+      "license": "BSD-3-Clause"
+    },
     "node_modules/acorn": {
       "version": "8.16.0",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.16.0.tgz",
@@ -2432,6 +2681,26 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/base64-js": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
+      "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
     "node_modules/baseline-browser-mapping": {
       "version": "2.10.0",
       "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.10.0.tgz",
@@ -2444,6 +2713,15 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/bidi-js": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/bidi-js/-/bidi-js-1.0.3.tgz",
+      "integrity": "sha512-RKshQI1R3YQ+n9YJz2QQ147P66ELpa1FQEg20Dk8oW9t2KgLbpDLLp9aGZ7y8WHSshDknG0bknqGw5/tyCs5tw==",
+      "license": "MIT",
+      "dependencies": {
+        "require-from-string": "^2.0.2"
+      }
+    },
     "node_modules/brace-expansion": {
       "version": "1.1.12",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
@@ -2502,6 +2780,30 @@
         "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
       }
     },
+    "node_modules/buffer": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/buffer/-/buffer-6.0.3.tgz",
+      "integrity": "sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "base64-js": "^1.3.1",
+        "ieee754": "^1.2.1"
+      }
+    },
     "node_modules/call-bind": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.8.tgz",
@@ -2562,6 +2864,19 @@
         "node": ">=6"
       }
     },
+    "node_modules/camera-controls": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/camera-controls/-/camera-controls-3.1.2.tgz",
+      "integrity": "sha512-xkxfpG2ECZ6Ww5/9+kf4mfg1VEYAoe9aDSY+IwF0UEs7qEzwy0aVRfs2grImIECs/PoBtWFrh7RXsQkwG922JA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=22.0.0",
+        "npm": ">=10.5.1"
+      },
+      "peerDependencies": {
+        "three": ">=0.126.1"
+      }
+    },
     "node_modules/caniuse-lite": {
       "version": "1.0.30001777",
       "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001777.tgz",
@@ -2599,6 +2914,36 @@
         "url": "https://github.com/chalk/chalk?sponsor=1"
       }
     },
+    "node_modules/character-entities": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/character-entities/-/character-entities-2.0.2.tgz",
+      "integrity": "sha512-shx7oQ0Awen/BRIdkjkvz54PnEEI/EjwXDSIZp86/KKdbafHh1Df/RYGBhn4hbe2+uKC9FnT5UCEdyPz3ai9hQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/character-entities-legacy": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/character-entities-legacy/-/character-entities-legacy-3.0.0.tgz",
+      "integrity": "sha512-RpPp0asT/6ufRm//AJVwpViZbGM/MkjQFxJccQRHmISF/22NBtsHqAWmL+/pmkPWoIUJdWyeVleTl1wydHATVQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/character-reference-invalid": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/character-reference-invalid/-/character-reference-invalid-2.0.1.tgz",
+      "integrity": "sha512-iBZ4F4wRbyORVsu0jPV7gXkOsGYjGHPmAyv+HiHG8gi5PtC9KI2j1+v8/tlibRvjoWX027ypmG/n0HtO5t7unw==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/client-only": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
@@ -2625,6 +2970,16 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/comma-separated-tokens": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/comma-separated-tokens/-/comma-separated-tokens-2.0.3.tgz",
+      "integrity": "sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -2639,11 +2994,28 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/cross-env": {
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/cross-env/-/cross-env-7.0.3.tgz",
+      "integrity": "sha512-+/HKd6EgcQCJGh2PSjZuUitQBQynKor4wrFbRg4DtAgS1aWO+gU52xpH7M9ScGgXSYmAVS9bIJ8EzuaGw0oNAw==",
+      "license": "MIT",
+      "dependencies": {
+        "cross-spawn": "^7.0.1"
+      },
+      "bin": {
+        "cross-env": "src/bin/cross-env.js",
+        "cross-env-shell": "src/bin/cross-env-shell.js"
+      },
+      "engines": {
+        "node": ">=10.14",
+        "npm": ">=6",
+        "yarn": ">=1"
+      }
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.6",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
       "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "path-key": "^3.1.0",
@@ -2658,7 +3030,6 @@
       "version": "3.2.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
       "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/damerau-levenshtein": {
@@ -2740,6 +3111,19 @@
         }
       }
     },
+    "node_modules/decode-named-character-reference": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/decode-named-character-reference/-/decode-named-character-reference-1.3.0.tgz",
+      "integrity": "sha512-GtpQYB283KrPp6nRw50q3U9/VfOutZOe103qlN7BPP6Ad27xYnOIWv4lPzo8HCAL+mMZofJ9KEy30fq6MfaK6Q==",
+      "license": "MIT",
+      "dependencies": {
+        "character-entities": "^2.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/deep-is": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
@@ -2783,6 +3167,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/detect-gpu": {
+      "version": "5.0.70",
+      "resolved": "https://registry.npmjs.org/detect-gpu/-/detect-gpu-5.0.70.tgz",
+      "integrity": "sha512-bqerEP1Ese6nt3rFkwPnGbsUF9a4q+gMmpTVVOEzoCyeCc+y7/RvJnQZJx1JwhgQI5Ntg0Kgat8Uu7XpBqnz1w==",
+      "license": "MIT",
+      "dependencies": {
+        "webgl-constants": "^1.1.1"
+      }
+    },
     "node_modules/detect-libc": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
@@ -2806,6 +3199,12 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/draco3d": {
+      "version": "1.5.7",
+      "resolved": "https://registry.npmjs.org/draco3d/-/draco3d-1.5.7.tgz",
+      "integrity": "sha512-m6WCKt/erDXcw+70IJXnG7M3awwQPAsZvJGX5zY7beBqpELw6RDGkYVU0W43AFxye4pDZ5i2Lbyc/NNGqwjUVQ==",
+      "license": "Apache-2.0"
+    },
     "node_modules/dunder-proto": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
@@ -3540,6 +3939,25 @@
         "reusify": "^1.0.4"
       }
     },
+    "node_modules/fault": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/fault/-/fault-1.0.4.tgz",
+      "integrity": "sha512-CJ0HCB5tL5fYTEA7ToAq5+kTwd++Borf1/bifxd9iT70QcXr4MRrO3Llf8Ifs70q+SJcGHFtnIE/Nw6giCtECA==",
+      "license": "MIT",
+      "dependencies": {
+        "format": "^0.2.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/fflate": {
+      "version": "0.8.2",
+      "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.8.2.tgz",
+      "integrity": "sha512-cPJU47OaAoCbg0pBvzsgpTPhmhqI5eJjh/JIu8tPj5q+T7iLvW/JAYUqmE7KOB4R1ZyEhzBaIQpQpardBF5z8A==",
+      "license": "MIT"
+    },
     "node_modules/file-entry-cache": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-8.0.0.tgz",
@@ -3620,6 +4038,14 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/format": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/format/-/format-0.2.2.tgz",
+      "integrity": "sha512-wzsgA6WOq+09wrU1tsJ09udeR/YZRaeArL9e1wPbFg3GG2yDnC2ldKpxs4xunpFF9DgqCqOIra3bc1HWrJ37Ww==",
+      "engines": {
+        "node": ">=0.4.x"
+      }
+    },
     "node_modules/function-bind": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
@@ -3794,6 +4220,12 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/glsl-noise": {
+      "version": "0.0.0",
+      "resolved": "https://registry.npmjs.org/glsl-noise/-/glsl-noise-0.0.0.tgz",
+      "integrity": "sha512-b/ZCF6amfAUb7dJM/MxRs7AetQEahYzJ8PtgfrmEdtw6uyGOr+ZSGtgjFm6mfsBkxJ4d2W7kg+Nlqzqvn3Bc0w==",
+      "license": "MIT"
+    },
     "node_modules/gopd": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
@@ -3908,6 +4340,36 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/hast-util-parse-selector": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/hast-util-parse-selector/-/hast-util-parse-selector-4.0.0.tgz",
+      "integrity": "sha512-wkQCkSYoOGCRKERFWcxMVMOcYE2K1AaNLU8DXS9arxnLOUEWbOXKXiJUNzEpqZ3JOKpnha3jkFrumEjVliDe7A==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/hastscript": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/hastscript/-/hastscript-9.0.1.tgz",
+      "integrity": "sha512-g7df9rMFX/SPi34tyGCyUBREQoKkapwdY/T04Qn9TDWfHhAYt4/I0gMVirzK5wEzeUqIjEB+LXC/ypb7Aqno5w==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "comma-separated-tokens": "^2.0.0",
+        "hast-util-parse-selector": "^4.0.0",
+        "property-information": "^7.0.0",
+        "space-separated-tokens": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/hermes-estree": {
       "version": "0.25.1",
       "resolved": "https://registry.npmjs.org/hermes-estree/-/hermes-estree-0.25.1.tgz",
@@ -3925,6 +4387,47 @@
         "hermes-estree": "0.25.1"
       }
     },
+    "node_modules/highlight.js": {
+      "version": "10.7.3",
+      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-10.7.3.tgz",
+      "integrity": "sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/highlightjs-vue": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/highlightjs-vue/-/highlightjs-vue-1.0.0.tgz",
+      "integrity": "sha512-PDEfEF102G23vHmPhLyPboFCD+BkMGu+GuJe2d9/eH4FsCwvgBpnc9n0pGE+ffKdph38s6foEZiEjdgHdzp+IA==",
+      "license": "CC0-1.0"
+    },
+    "node_modules/hls.js": {
+      "version": "1.6.15",
+      "resolved": "https://registry.npmjs.org/hls.js/-/hls.js-1.6.15.tgz",
+      "integrity": "sha512-E3a5VwgXimGHwpRGV+WxRTKeSp2DW5DI5MWv34ulL3t5UNmyJWCQ1KmLEHbYzcfThfXG8amBL+fCYPneGHC4VA==",
+      "license": "Apache-2.0"
+    },
+    "node_modules/ieee754": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
+      "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "BSD-3-Clause"
+    },
     "node_modules/ignore": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
@@ -3935,6 +4438,24 @@
         "node": ">= 4"
       }
     },
+    "node_modules/image-size": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/image-size/-/image-size-2.0.2.tgz",
+      "integrity": "sha512-IRqXKlaXwgSMAMtpNzZa1ZAe8m+Sa1770Dhk8VkSsP9LS+iHD62Zd8FQKs8fbPiagBE7BzoFX23cxFnwshpV6w==",
+      "license": "MIT",
+      "bin": {
+        "image-size": "bin/image-size.js"
+      },
+      "engines": {
+        "node": ">=16.x"
+      }
+    },
+    "node_modules/immediate": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/immediate/-/immediate-3.0.6.tgz",
+      "integrity": "sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==",
+      "license": "MIT"
+    },
     "node_modules/import-fresh": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.1.tgz",
@@ -3977,6 +4498,30 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/is-alphabetical": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-alphabetical/-/is-alphabetical-2.0.1.tgz",
+      "integrity": "sha512-FWyyY60MeTNyeSRpkM2Iry0G9hpr7/9kD40mD/cGQEuilcZYS4okz8SN2Q6rLCJ8gbCt6fN+rC+6tMGS99LaxQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/is-alphanumerical": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-alphanumerical/-/is-alphanumerical-2.0.1.tgz",
+      "integrity": "sha512-hmbYhX/9MUMF5uh7tOXyK/n0ZvWpad5caBA17GsC6vyuCqaWliRG5K1qS9inmUhEMaOBIW7/whAnSwveW/LtZw==",
+      "license": "MIT",
+      "dependencies": {
+        "is-alphabetical": "^2.0.0",
+        "is-decimal": "^2.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/is-array-buffer": {
       "version": "3.0.5",
       "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.5.tgz",
@@ -4135,6 +4680,16 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-decimal": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-decimal/-/is-decimal-2.0.1.tgz",
+      "integrity": "sha512-AAB9hiomQs5DXWcRB1rqsxGUstbRroFOPPVAomNk/3XHR5JyEZChOyTWe2oayKnsSsr/kcGqF+z6yuH6HHpN0A==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/is-extglob": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
@@ -4194,6 +4749,16 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/is-hexadecimal": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-hexadecimal/-/is-hexadecimal-2.0.1.tgz",
+      "integrity": "sha512-DgZQp241c8oO6cA1SbTEWiXeoxV42vlcJxgH+B3hi1AiqqKruZR3ZGF8In3fj4+/y/7rHvlOZLZtgJ/4ttYGZg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/is-map": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/is-map/-/is-map-2.0.3.tgz",
@@ -4247,6 +4812,12 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-promise": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/is-promise/-/is-promise-2.2.2.tgz",
+      "integrity": "sha512-+lP4/6lKUBfQjZ2pdxThZvLUAafmZb8OAxFb8XXtiQmS35INgr85hdOGoEs124ez1FCnZJt6jau/T+alh58QFQ==",
+      "license": "MIT"
+    },
     "node_modules/is-regex": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.2.1.tgz",
@@ -4403,7 +4974,6 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
       "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
-      "dev": true,
       "license": "ISC"
     },
     "node_modules/iterator.prototype": {
@@ -4424,6 +4994,18 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/its-fine": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/its-fine/-/its-fine-2.0.0.tgz",
+      "integrity": "sha512-KLViCmWx94zOvpLwSlsx6yOCeMhZYaxrJV87Po5k/FoZzcPSahvK5qJ7fYhS61sZi5ikmh2S3Hz55A2l3U69ng==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/react-reconciler": "^0.28.9"
+      },
+      "peerDependencies": {
+        "react": "^19.0.0"
+      }
+    },
     "node_modules/jiti": {
       "version": "2.6.1",
       "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.6.1.tgz",
@@ -4438,7 +5020,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
       "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/js-yaml": {
@@ -4561,6 +5142,15 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/lie": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/lie/-/lie-3.3.0.tgz",
+      "integrity": "sha512-UaiMJzeWRlEujzAuw5LokY1L5ecNQYZKfmyZ9L7wDHb/p5etKaxXhohBcrw0EYby+G/NA52vRSN4N39dxHAIwQ==",
+      "license": "MIT",
+      "dependencies": {
+        "immediate": "~3.0.5"
+      }
+    },
     "node_modules/lightningcss": {
       "version": "1.31.1",
       "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.31.1.tgz",
@@ -4849,7 +5439,6 @@
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
       "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "js-tokens": "^3.0.0 || ^4.0.0"
@@ -4858,6 +5447,20 @@
         "loose-envify": "cli.js"
       }
     },
+    "node_modules/lowlight": {
+      "version": "1.20.0",
+      "resolved": "https://registry.npmjs.org/lowlight/-/lowlight-1.20.0.tgz",
+      "integrity": "sha512-8Ktj+prEb1RoCPkEOrPMYUN/nCggB7qAWe3a7OpMjWQkh3l2RD5wKRQ+o8Q8YuI9RG/xs95waaI/E6ym/7NsTw==",
+      "license": "MIT",
+      "dependencies": {
+        "fault": "^1.0.0",
+        "highlight.js": "~10.7.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/lru-cache": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
@@ -4868,6 +5471,16 @@
         "yallist": "^3.0.2"
       }
     },
+    "node_modules/maath": {
+      "version": "0.10.8",
+      "resolved": "https://registry.npmjs.org/maath/-/maath-0.10.8.tgz",
+      "integrity": "sha512-tRvbDF0Pgqz+9XUa4jjfgAQ8/aPKmQdWXilFu2tMy4GWj4NOsx99HlULO4IeREfbO3a0sA145DZYyvXPkybm0g==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/three": ">=0.134.0",
+        "three": ">=0.134.0"
+      }
+    },
     "node_modules/magic-string": {
       "version": "0.30.21",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
@@ -4898,6 +5511,21 @@
         "node": ">= 8"
       }
     },
+    "node_modules/meshline": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/meshline/-/meshline-3.3.1.tgz",
+      "integrity": "sha512-/TQj+JdZkeSUOl5Mk2J7eLcYTLiQm2IDzmlSvYm7ov15anEcDJ92GHqqazxTSreeNgfnYu24kiEvvv0WlbCdFQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "three": ">=0.137"
+      }
+    },
+    "node_modules/meshoptimizer": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/meshoptimizer/-/meshoptimizer-1.0.1.tgz",
+      "integrity": "sha512-Vix+QlA1YYT3FwmBBZ+49cE5y/b+pRrcXKqGpS5ouh33d3lSp2PoTpCw19E0cKDFWalembrHnIaZetf27a+W2g==",
+      "license": "MIT"
+    },
     "node_modules/micromatch": {
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
@@ -5094,7 +5722,6 @@
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
       "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
@@ -5294,6 +5921,31 @@
         "node": ">=6"
       }
     },
+    "node_modules/parse-entities": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/parse-entities/-/parse-entities-4.0.2.tgz",
+      "integrity": "sha512-GG2AQYWoLgL877gQIKeRPGO1xF9+eG1ujIb5soS5gPvLQ1y2o8FL90w2QWNdf9I361Mpp7726c+lj3U0qK1uGw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^2.0.0",
+        "character-entities-legacy": "^3.0.0",
+        "character-reference-invalid": "^2.0.0",
+        "decode-named-character-reference": "^1.0.0",
+        "is-alphanumerical": "^2.0.0",
+        "is-decimal": "^2.0.0",
+        "is-hexadecimal": "^2.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/parse-entities/node_modules/@types/unist": {
+      "version": "2.0.11",
+      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.11.tgz",
+      "integrity": "sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA==",
+      "license": "MIT"
+    },
     "node_modules/path-exists": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
@@ -5308,7 +5960,6 @@
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
       "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=8"
@@ -5321,6 +5972,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/photoswipe": {
+      "version": "5.4.4",
+      "resolved": "https://registry.npmjs.org/photoswipe/-/photoswipe-5.4.4.tgz",
+      "integrity": "sha512-WNFHoKrkZNnvFFhbHL93WDkW3ifwVOXSW3w1UuZZelSmgXpIGiZSNlZJq37rR8YejqME2rHs9EhH9ZvlvFH2NA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.12.0"
+      }
+    },
     "node_modules/picocolors": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
@@ -5379,6 +6039,12 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/potpack": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/potpack/-/potpack-1.0.2.tgz",
+      "integrity": "sha512-choctRBIV9EMT9WGAZHn3V7t0Z2pMQyl0EZE6pFc/6ml3ssw7Dlf/oAOvFwjm1HVsqfQN8GfeFyJ+d8tRzqueQ==",
+      "license": "ISC"
+    },
     "node_modules/prelude-ls": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
@@ -5389,11 +6055,29 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/prismjs": {
+      "version": "1.30.0",
+      "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.30.0.tgz",
+      "integrity": "sha512-DEvV2ZF2r2/63V+tK8hQvrR2ZGn10srHbXviTlcv7Kpzw8jWiNTqbVgjO3IY8RxrrOUF8VPMQQFysYYYv0YZxw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/promise-worker-transferable": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/promise-worker-transferable/-/promise-worker-transferable-1.0.4.tgz",
+      "integrity": "sha512-bN+0ehEnrXfxV2ZQvU2PetO0n4gqBD4ulq3MI1WOPLgr7/Mg9yRQkX5+0v1vagr74ZTsl7XtzlaYDo2EuCeYJw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "is-promise": "^2.1.0",
+        "lie": "^3.0.2"
+      }
+    },
     "node_modules/prop-types": {
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
       "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "loose-envify": "^1.4.0",
@@ -5401,6 +6085,16 @@
         "react-is": "^16.13.1"
       }
     },
+    "node_modules/property-information": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/property-information/-/property-information-7.1.0.tgz",
+      "integrity": "sha512-TwEZ+X+yCJmYfL7TPUOcvBZ4QfoT5YenQiJuX//0th53DE6w0xxLEtfK3iyryQFddXuvkIk51EEgrJQ0WJkOmQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/punycode": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
@@ -5453,13 +6147,67 @@
         "react": "^19.2.3"
       }
     },
+    "node_modules/react-icons": {
+      "version": "5.6.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.6.0.tgz",
+      "integrity": "sha512-RH93p5ki6LfOiIt0UtDyNg/cee+HLVR6cHHtW3wALfo+eOHTp8RnU2kRkI6E+H19zMIs03DyxUG/GfZMOGvmiA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
-      "dev": true,
       "license": "MIT"
     },
+    "node_modules/react-photoswipe-gallery": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/react-photoswipe-gallery/-/react-photoswipe-gallery-4.0.0.tgz",
+      "integrity": "sha512-rpvGSBddLp1hZfTZgi3UFLJKlupHfDhW6e7w6jUUr5bagTWfrxJ7nB8yzNkx+BaoiMyy4FvJBwc4n/+QW2ft4g==",
+      "license": "MIT",
+      "peerDependencies": {
+        "photoswipe": ">= 5.2.2",
+        "prop-types": ">= 15.7.0",
+        "react": ">= 16.8.0"
+      }
+    },
+    "node_modules/react-syntax-highlighter": {
+      "version": "16.1.1",
+      "resolved": "https://registry.npmjs.org/react-syntax-highlighter/-/react-syntax-highlighter-16.1.1.tgz",
+      "integrity": "sha512-PjVawBGy80C6YbC5DDZJeUjBmC7skaoEUdvfFQediQHgCL7aKyVHe57SaJGfQsloGDac+gCpTfRdtxzWWKmCXA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.28.4",
+        "highlight.js": "^10.4.1",
+        "highlightjs-vue": "^1.0.0",
+        "lowlight": "^1.17.0",
+        "prismjs": "^1.30.0",
+        "refractor": "^5.0.0"
+      },
+      "engines": {
+        "node": ">= 16.20.2"
+      },
+      "peerDependencies": {
+        "react": ">= 0.14.0"
+      }
+    },
+    "node_modules/react-use-measure": {
+      "version": "2.1.7",
+      "resolved": "https://registry.npmjs.org/react-use-measure/-/react-use-measure-2.1.7.tgz",
+      "integrity": "sha512-KrvcAo13I/60HpwGO5jpW7E9DfusKyLPLvuHlUyP5zqnmAPhNc6qTRjUQrdTADl0lpPpDVU2/Gg51UlOGHXbdg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": ">=16.13",
+        "react-dom": ">=16.13"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/reflect.getprototypeof": {
       "version": "1.0.10",
       "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.10.tgz",
@@ -5483,6 +6231,22 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/refractor": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/refractor/-/refractor-5.0.0.tgz",
+      "integrity": "sha512-QXOrHQF5jOpjjLfiNk5GFnWhRXvxjUVnlFxkeDmewR5sXkr3iM46Zo+CnRR8B+MDVqkULW4EcLVcRBNOPXHosw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "@types/prismjs": "^1.0.0",
+        "hastscript": "^9.0.0",
+        "parse-entities": "^4.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/regexp.prototype.flags": {
       "version": "1.5.4",
       "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.4.tgz",
@@ -5504,6 +6268,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/require-from-string": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
+      "integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/resolve": {
       "version": "1.22.11",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.11.tgz",
@@ -5762,7 +6535,6 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
       "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "shebang-regex": "^3.0.0"
@@ -5775,7 +6547,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
       "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=8"
@@ -5866,6 +6637,16 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/space-separated-tokens": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/space-separated-tokens/-/space-separated-tokens-2.0.2.tgz",
+      "integrity": "sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/stable-hash": {
       "version": "0.0.5",
       "resolved": "https://registry.npmjs.org/stable-hash/-/stable-hash-0.0.5.tgz",
@@ -5873,6 +6654,32 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/stats-gl": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/stats-gl/-/stats-gl-2.4.2.tgz",
+      "integrity": "sha512-g5O9B0hm9CvnM36+v7SFl39T7hmAlv541tU81ME8YeSb3i1CIP5/QdDeSB3A0la0bKNHpxpwxOVRo2wFTYEosQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/three": "*",
+        "three": "^0.170.0"
+      },
+      "peerDependencies": {
+        "@types/three": "*",
+        "three": "*"
+      }
+    },
+    "node_modules/stats-gl/node_modules/three": {
+      "version": "0.170.0",
+      "resolved": "https://registry.npmjs.org/three/-/three-0.170.0.tgz",
+      "integrity": "sha512-FQK+LEpYc0fBD+J8g6oSEyyNzjp+Q7Ks1C568WWaoMRLW+TkNNWmenWeGgJjV105Gd+p/2ql1ZcjYvNiPZBhuQ==",
+      "license": "MIT"
+    },
+    "node_modules/stats.js": {
+      "version": "0.17.0",
+      "resolved": "https://registry.npmjs.org/stats.js/-/stats.js-0.17.0.tgz",
+      "integrity": "sha512-hNKz8phvYLPEcRkeG1rsGmV5ChMjKDAWU7/OJJdDErPBNChQXxCo3WZurGpnWc6gZhAzEPFad1aVgyOANH1sMw==",
+      "license": "MIT"
+    },
     "node_modules/stop-iteration-iterator": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/stop-iteration-iterator/-/stop-iteration-iterator-1.1.0.tgz",
@@ -6072,6 +6879,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/suspend-react": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/suspend-react/-/suspend-react-0.1.3.tgz",
+      "integrity": "sha512-aqldKgX9aZqpoDp3e8/BZ8Dm7x1pJl+qI3ZKxDN0i/IQTWUwBx/ManmlVJ3wowqbno6c2bmiIfs+Um6LbsjJyQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": ">=17.0"
+      }
+    },
     "node_modules/tailwindcss": {
       "version": "4.2.1",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.2.1.tgz",
@@ -6093,6 +6909,44 @@
         "url": "https://opencollective.com/webpack"
       }
     },
+    "node_modules/three": {
+      "version": "0.183.2",
+      "resolved": "https://registry.npmjs.org/three/-/three-0.183.2.tgz",
+      "integrity": "sha512-di3BsL2FEQ1PA7Hcvn4fyJOlxRRgFYBpMTcyOgkwJIaDOdJMebEFPA+t98EvjuljDx4hNulAGwF6KIjtwI5jgQ==",
+      "license": "MIT"
+    },
+    "node_modules/three-mesh-bvh": {
+      "version": "0.8.3",
+      "resolved": "https://registry.npmjs.org/three-mesh-bvh/-/three-mesh-bvh-0.8.3.tgz",
+      "integrity": "sha512-4G5lBaF+g2auKX3P0yqx+MJC6oVt6sB5k+CchS6Ob0qvH0YIhuUk1eYr7ktsIpY+albCqE80/FVQGV190PmiAg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "three": ">= 0.159.0"
+      }
+    },
+    "node_modules/three-stdlib": {
+      "version": "2.36.1",
+      "resolved": "https://registry.npmjs.org/three-stdlib/-/three-stdlib-2.36.1.tgz",
+      "integrity": "sha512-XyGQrFmNQ5O/IoKm556ftwKsBg11TIb301MB5dWNicziQBEs2g3gtOYIf7pFiLa0zI2gUwhtCjv9fmjnxKZ1Cg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/draco3d": "^1.4.0",
+        "@types/offscreencanvas": "^2019.6.4",
+        "@types/webxr": "^0.5.2",
+        "draco3d": "^1.4.1",
+        "fflate": "^0.6.9",
+        "potpack": "^1.0.1"
+      },
+      "peerDependencies": {
+        "three": ">=0.128.0"
+      }
+    },
+    "node_modules/three-stdlib/node_modules/fflate": {
+      "version": "0.6.10",
+      "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.6.10.tgz",
+      "integrity": "sha512-IQrh3lEPM93wVCEczc9SaAOvkmcoQn/G8Bo1e8ZPlY3X3bnAxWaBdvTdvM1hP62iZp0BXWDy4vTAy4fF0+Dlpg==",
+      "license": "MIT"
+    },
     "node_modules/tinyglobby": {
       "version": "0.2.15",
       "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz",
@@ -6154,6 +7008,36 @@
         "node": ">=8.0"
       }
     },
+    "node_modules/troika-three-text": {
+      "version": "0.52.4",
+      "resolved": "https://registry.npmjs.org/troika-three-text/-/troika-three-text-0.52.4.tgz",
+      "integrity": "sha512-V50EwcYGruV5rUZ9F4aNsrytGdKcXKALjEtQXIOBfhVoZU9VAqZNIoGQ3TMiooVqFAbR1w15T+f+8gkzoFzawg==",
+      "license": "MIT",
+      "dependencies": {
+        "bidi-js": "^1.0.2",
+        "troika-three-utils": "^0.52.4",
+        "troika-worker-utils": "^0.52.0",
+        "webgl-sdf-generator": "1.1.1"
+      },
+      "peerDependencies": {
+        "three": ">=0.125.0"
+      }
+    },
+    "node_modules/troika-three-utils": {
+      "version": "0.52.4",
+      "resolved": "https://registry.npmjs.org/troika-three-utils/-/troika-three-utils-0.52.4.tgz",
+      "integrity": "sha512-NORAStSVa/BDiG52Mfudk4j1FG4jC4ILutB3foPnfGbOeIs9+G5vZLa0pnmnaftZUGm4UwSoqEpWdqvC7zms3A==",
+      "license": "MIT",
+      "peerDependencies": {
+        "three": ">=0.125.0"
+      }
+    },
+    "node_modules/troika-worker-utils": {
+      "version": "0.52.0",
+      "resolved": "https://registry.npmjs.org/troika-worker-utils/-/troika-worker-utils-0.52.0.tgz",
+      "integrity": "sha512-W1CpvTHykaPH5brv5VHLfQo9D1OYuo0cSBEUQFFT/nBUzM8iD6Lq2/tgG/f1OelbAS1WtaTPQzE5uM49egnngw==",
+      "license": "MIT"
+    },
     "node_modules/ts-api-utils": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-2.4.0.tgz",
@@ -6199,6 +7083,43 @@
       "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
       "license": "0BSD"
     },
+    "node_modules/tunnel-rat": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/tunnel-rat/-/tunnel-rat-0.1.2.tgz",
+      "integrity": "sha512-lR5VHmkPhzdhrM092lI2nACsLO4QubF0/yoOhzX7c+wIpbN1GjHNzCc91QlpxBi+cnx8vVJ+Ur6vL5cEoQPFpQ==",
+      "license": "MIT",
+      "dependencies": {
+        "zustand": "^4.3.2"
+      }
+    },
+    "node_modules/tunnel-rat/node_modules/zustand": {
+      "version": "4.5.7",
+      "resolved": "https://registry.npmjs.org/zustand/-/zustand-4.5.7.tgz",
+      "integrity": "sha512-CHOUy7mu3lbD6o6LJLfllpjkzhHXSBlX8B9+qPddUsIfeF5S/UZ5q0kmCsnRqT1UHFQZchNFDDzMbQsuesHWlw==",
+      "license": "MIT",
+      "dependencies": {
+        "use-sync-external-store": "^1.2.2"
+      },
+      "engines": {
+        "node": ">=12.7.0"
+      },
+      "peerDependencies": {
+        "@types/react": ">=16.8",
+        "immer": ">=9.0.6",
+        "react": ">=16.8"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "immer": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/type-check": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
@@ -6430,11 +7351,39 @@
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/use-sync-external-store": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.6.0.tgz",
+      "integrity": "sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/utility-types": {
+      "version": "3.11.0",
+      "resolved": "https://registry.npmjs.org/utility-types/-/utility-types-3.11.0.tgz",
+      "integrity": "sha512-6Z7Ma2aVEWisaL6TvBCy7P8rm2LQoPv6dJ7ecIaIixHcwfbJ0x7mWdbcwlIM5IGQxPZSFYeqRCqlOOeKoJYMkw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/webgl-constants": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/webgl-constants/-/webgl-constants-1.1.1.tgz",
+      "integrity": "sha512-LkBXKjU5r9vAW7Gcu3T5u+5cvSvh5WwINdr0C+9jpzVB41cjQAP5ePArDtk/WHYdVj0GefCgM73BA7FlIiNtdg=="
+    },
+    "node_modules/webgl-sdf-generator": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/webgl-sdf-generator/-/webgl-sdf-generator-1.1.1.tgz",
+      "integrity": "sha512-9Z0JcMTFxeE+b2x1LJTdnaT8rT8aEp7MVxkNwoycNmJWwPdzoXzMh0BjJSh/AEFP+KPYZUli814h8bJZFIZ2jA==",
+      "license": "MIT"
+    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
       "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
-      "dev": true,
       "license": "ISC",
       "dependencies": {
         "isexe": "^2.0.0"
@@ -6587,6 +7536,35 @@
       "peerDependencies": {
         "zod": "^3.25.0 || ^4.0.0"
       }
+    },
+    "node_modules/zustand": {
+      "version": "5.0.11",
+      "resolved": "https://registry.npmjs.org/zustand/-/zustand-5.0.11.tgz",
+      "integrity": "sha512-fdZY+dk7zn/vbWNCYmzZULHRrss0jx5pPFiOuMZ/5HJN6Yv3u+1Wswy/4MpZEkEGhtNH+pwxZB8OKgUBPzYAGg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.20.0"
+      },
+      "peerDependencies": {
+        "@types/react": ">=18.0.0",
+        "immer": ">=9.0.6",
+        "react": ">=18.0.0",
+        "use-sync-external-store": ">=1.2.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "immer": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "use-sync-external-store": {
+          "optional": true
+        }
+      }
     }
   }
 }
diff --git a/package.json b/package.json
index e501d5a..73ea5ad 100644
--- a/package.json
+++ b/package.json
@@ -9,15 +9,25 @@
     "lint": "eslint"
   },
   "dependencies": {
+    "@react-three/drei": "^10.7.7",
+    "@react-three/fiber": "^9.5.0",
+    "image-size": "^2.0.2",
     "next": "16.1.6",
+    "photoswipe": "^5.4.4",
     "react": "19.2.3",
-    "react-dom": "19.2.3"
+    "react-dom": "19.2.3",
+    "react-icons": "^5.6.0",
+    "react-photoswipe-gallery": "^4.0.0",
+    "react-syntax-highlighter": "^16.1.1",
+    "three": "^0.183.2"
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4",
+    "@types/image-size": "^0.7.0",
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",
+    "@types/react-syntax-highlighter": "^15.5.13",
     "eslint": "^9",
     "eslint-config-next": "16.1.6",
     "tailwindcss": "^4",