chore: Configure DNS resolution and SSL for Gitea API proxy.

feat: Add console log to App component for debugging
fixed gittea not showing
2025-12-29 18:10:26 +00:00 · 2025-12-29 18:03:39 +00:00 · 2025-12-27 20:57:46 +00:00 · 2025-12-18 20:40:33 +00:00 · 2025-12-18 20:35:56 +00:00 · 2025-12-17 18:49:16 +00:00
22 changed files with 681 additions and 302 deletions
--- a/.dockerignore
+++ b/.dockerignore
@@ -0,0 +1,8 @@
+node_modules
+dist
+.git
+.gitignore
+*.log
+docker-compose.yml
+Dockerfile
+.dockerignore
--- a/20
+++ b/20
@@ -0,0 +1,20 @@
+# Stage 1: Build
+FROM oven/bun:1 AS builder
+
+WORKDIR /app
+
+COPY package.json package-lock.json ./
+RUN bun install
+
+COPY . .
+RUN bun run build
+
+# Stage 2: Serve
+FROM nginx:alpine
+
+COPY --from=builder /app/dist /usr/share/nginx/html
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+
+EXPOSE 80
+
+CMD ["nginx", "-g", "daemon off;"]
--- a/index.html
+++ b/index.html
@@ -2,9 +2,9 @@
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>testpage</title>
+    <title>Matiss Jurevics</title>
  </head>
  <body>
    <div id="root"></div>
--- a/nginx.conf
+++ b/nginx.conf
@@ -0,0 +1,37 @@
+server {
+    listen 80;
+    server_name _;
+    root /usr/share/nginx/html;
+    index index.html;
+
+    # Gitea API proxy
+    location /api/gitea {
+        resolver 1.1.1.1 8.8.8.8 valid=300s;
+        resolver_timeout 5s;
+        
+        rewrite ^/api/gitea(.*)$ $1 break;
+        proxy_pass https://git.mati.ss;
+        proxy_ssl_verify off;
+        proxy_ssl_server_name on;
+        proxy_http_version 1.1;
+        proxy_set_header Host git.mati.ss;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header X-Forwarded-Proto $scheme;
+        
+        # CORS headers (if needed)
+        add_header Access-Control-Allow-Origin * always;
+        add_header Access-Control-Allow-Methods "GET, POST, OPTIONS" always;
+        add_header Access-Control-Allow-Headers "Authorization, Content-Type" always;
+        
+        if ($request_method = OPTIONS) {
+            return 204;
+        }
+    }
+
+    # Serve static files
+    location / {
+        try_files $uri $uri/ /index.html;
+    }
+}
+
--- a/public/favicon.svg
+++ b/public/favicon.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+  <rect width="100" height="100" rx="20" fill="#000000"/>
+  <text x="50" y="70" font-family="Arial, sans-serif" font-weight="900" font-size="60" text-anchor="middle" fill="#ffffff">MJ</text>
+</svg>
--- a/public/images/wireframe_kit.png
+++ b/public/images/wireframe_kit.png
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -4,7 +4,8 @@ import HeroModel from './canvas/HeroModel';
 import ProductGrid from './components/ProductGrid';
 import InfoTabs from './components/InfoTabs';
 import Footer from './components/Footer';
-import './styles/index.css';
+import './index.css';
+import './styles/variables.css';
 import gsap from 'gsap';
 import { ScrollTrigger } from 'gsap/ScrollTrigger';
 import Lenis from '@studio-freight/lenis'
@@ -13,6 +14,7 @@ gsap.registerPlugin(ScrollTrigger);

 function App() {
  const lenisRef = useRef()
+  console.log("App")

  useEffect(() => {
    // Lenis setup
@@ -83,7 +85,7 @@ function App() {
            zIndex: 10,
            pointerEvents: 'none',
            textAlign: 'center',
-            color: '#000' // Solid black text to sit on top of wireframe
+            color: 'var(--text-main, #000)' // Adapts to dark mode
          }}>
            <div style={{ overflow: 'hidden' }}>
              <h1 className="hero-title" style={{
--- a/src/canvas/Globe.jsx
+++ b/src/canvas/Globe.jsx
@@ -19,8 +19,15 @@ const GlobeMesh = () => {
    const groupRef = useRef();
    const [bordersTexture, setBordersTexture] = useState(null);

+    // Detect mobile device and reduce polygon count accordingly
+    const isMobile = useMemo(() => {
+        return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ||
+            (window.innerWidth <= 768);
+    }, []);
+
    // Generate Borders Texture using D3
    useEffect(() => {
+        let texture = null;
        const generateTexture = async () => {
            try {
                // Fetch World Topology (small 110m res)
@@ -49,7 +56,7 @@ const GlobeMesh = () => {
                context.stroke();

                // Create Texture
-                const texture = new THREE.CanvasTexture(canvas);
+                texture = new THREE.CanvasTexture(canvas);
                texture.needsUpdate = true;
                setBordersTexture(texture);
            } catch (err) {
@@ -58,6 +65,10 @@ const GlobeMesh = () => {
        };

        generateTexture();
+
+        return () => {
+            if (texture) texture.dispose();
+        };
    }, []);

    // Ireland Coordinates
@@ -69,17 +80,23 @@ const GlobeMesh = () => {
        }
    });

+    // Reduce segment counts for mobile devices
+    const baseSphereSegments = isMobile ? 24 : 64; // Reduce from 64x64 to 24x24 on mobile
+    const wireframeSegments = isMobile ? 16 : 32; // Reduce from 32x32 to 16x16 on mobile
+    const markerSegments = isMobile ? 8 : 16; // Reduce from 16x16 to 8x8 on mobile
+    const ringSegments = isMobile ? 16 : 32; // Reduce from 32 to 16 on mobile
+
    return (
        <group ref={groupRef}>
            {/* 1. Base Dark Sphere (blocks background stars/wireframe from showing through backface) */}
            <mesh>
-                <sphereGeometry args={[1.95, 64, 64]} />
+                <sphereGeometry args={[1.95, baseSphereSegments, baseSphereSegments]} />
                <meshBasicMaterial color="#000000" />
            </mesh>

            {/* 2. Light Wireframe Sphere - Outer Cage */}
            <mesh>
-                <sphereGeometry args={[2.0, 32, 32]} />
+                <sphereGeometry args={[2.0, wireframeSegments, wireframeSegments]} />
                <meshBasicMaterial
                    color="#444"
                    wireframe={true}
@@ -91,7 +108,7 @@ const GlobeMesh = () => {
            {/* 3. Borders Sphere (Texture) */}
            {bordersTexture && (
                <mesh>
-                    <sphereGeometry args={[2.01, 64, 64]} />
+                    <sphereGeometry args={[2.01, baseSphereSegments, baseSphereSegments]} />
                    <meshBasicMaterial
                        map={bordersTexture}
                        transparent={true}
@@ -105,11 +122,11 @@ const GlobeMesh = () => {

            {/* Ireland Marker */}
            <mesh position={irelandPos}>
-                <sphereGeometry args={[0.04, 16, 16]} />
+                <sphereGeometry args={[0.04, markerSegments, markerSegments]} />
                <meshBasicMaterial color="#ff4d00" />
            </mesh>
            <mesh position={irelandPos}>
-                <ringGeometry args={[0.06, 0.09, 32]} />
+                <ringGeometry args={[0.06, 0.09, ringSegments]} />
                <meshBasicMaterial color="#ff4d00" side={THREE.DoubleSide} transparent opacity={0.6} />
            </mesh>
        </group>
--- a/src/canvas/HeroModel.jsx
+++ b/src/canvas/HeroModel.jsx
@@ -8,8 +8,15 @@ const Terrain = () => {
    const materialRef = useRef();
    const noise3D = useMemo(() => createNoise3D(), []);

-    // Create geometry with HIGHER segment count for smoother, denser wave like the reference
-    const geometry = useMemo(() => new THREE.PlaneGeometry(20, 20, 100, 100), []);
+    // Detect mobile device and reduce polygon count accordingly
+    const isMobile = useMemo(() => {
+        return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) || 
+               (window.innerWidth <= 768);
+    }, []);
+
+    // Create geometry with reduced segment count for mobile devices
+    const segments = isMobile ? 28 : 100; // Reduce from 100x100 to 28x28 on mobile (50% polygon reduction)
+    const geometry = useMemo(() => new THREE.PlaneGeometry(20, 20, segments, segments), [segments]);

    useFrame((state) => {
        if (mesh.current) {
@@ -52,6 +59,12 @@ const Terrain = () => {
 };

 const HeroModel = () => {
+    // Detect dark mode for fog color
+    const fogColor = useMemo(() => {
+        const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+        return prefersDark ? '#0a0a0a' : '#e4e4e4';
+    }, []);
+
    return (
        <div style={{ width: '100%', height: '100vh', position: 'absolute', top: 0, left: 0, zIndex: 0 }}>
            <Canvas
@@ -66,7 +79,7 @@ const HeroModel = () => {
                    <Terrain />

                    {/* Fog to fade edges into background color */}
-                    <fog attach="fog" args={['#e4e4e4', 5, 20]} />
+                    <fog attach="fog" args={[fogColor, 5, 20]} />
                </Suspense>
            </Canvas>
        </div>
--- a/src/components/ActivityHeatmap.jsx
+++ b/src/components/ActivityHeatmap.jsx
@@ -6,34 +6,47 @@ const ActivityHeatmap = () => {
    const [loading, setLoading] = useState(true);
    const [data, setData] = useState([]);
    const [error, setError] = useState(null);
+    const [hoveredData, setHoveredData] = useState(null);

    useEffect(() => {
        const fetchData = async () => {
-            try {
-                // 1. Fetch GitHub Data (using proxy)
-                const githubRes = await fetch('https://github-contributions-api.jogruber.de/v4/MatissJurevics');
-                const githubJson = await githubRes.json();
+            // Initialize default empty data
+            let githubData = { contributions: [] };
+            let giteaData = [];

-                // 2. Fetch Gitea Data
-                const giteaRes = await fetch('/api/gitea/api/v1/users/Matiss/heatmap');
-                const giteaJson = await giteaRes.json(); // Array of { timestamp, contributions }
+            try {
+                // 1. Fetch GitHub Data (Safe Fetch)
+                try {
+                    const githubRes = await fetch('https://github-contributions-api.jogruber.de/v4/MatissJurevics');
+                    if (githubRes.ok) {
+                        githubData = await githubRes.json();
+                    } else {
+                        console.warn("GitHub API fetch failed:", githubRes.status);
+                    }
+                } catch (e) {
+                    console.warn("GitHub API error:", e);
+                }
+
+                // 2. Fetch Gitea Data (Safe Fetch)
+                try {
+                    const giteaRes = await fetch('/api/gitea/api/v1/users/Matiss/heatmap');
+                    if (giteaRes.ok) {
+                        giteaData = await giteaRes.json();
+                    } else {
+                        console.warn("Gitea API fetch failed:", giteaRes.status);
+                    }
+                } catch (e) {
+                    console.warn("Gitea API error:", e);
+                    console.error('Failed to fetch Gitea heatmap. URL:', '/api/gitea/api/v1/users/Matiss/heatmap');
+                }

                // 3. Process & Merge
                const processData = () => {
                    const merged = new Map();
-
-                    // Initialize with GitHub data (usually last year)
-                    // The proxy returns 'contributions' array for the last year usually? 
-                    // Actually correct structure from jogruber api is { total: {}, contributions: [ { date, count, level } ] }
-                    // But let's check what it returns specifically or handle 'years' object.
-                    // Usually structure val: { yearly: [] , total: {} }
-
-                    // Let's rely on standard logic: get last 365 days.
                    const today = new Date();
                    const oneYearAgo = new Date();
                    oneYearAgo.setDate(today.getDate() - 365);

-                    // Helper to normalize date string YYYY-MM-DD
                    const toKey = (date) => date.toISOString().split('T')[0];

                    // Initialize map with empty days
@@ -42,11 +55,8 @@ const ActivityHeatmap = () => {
                    }

                    // Fill GitHub
-                    // The API usually returns 'contributions' list. 
-                    // If structure is complex, we might need adjustments, but let's assume flat list available or extractable.
-                    // Actually, jogruber V4 returns: { total: {}, contributions: [ { date, count, level } ... ] }
-                    if (githubJson.contributions) {
-                        githubJson.contributions.forEach(day => {
+                    if (githubData && githubData.contributions) {
+                        githubData.contributions.forEach(day => {
                            if (merged.has(day.date)) {
                                const curr = merged.get(day.date);
                                curr.github = day.count;
@@ -56,9 +66,8 @@ const ActivityHeatmap = () => {
                    }

                    // Fill Gitea
-                    // Gitea heatmap endpoint returns array of { timestamp: unix_timestamp, contributions: count }
-                    if (Array.isArray(giteaJson)) {
-                        giteaJson.forEach(item => {
+                    if (Array.isArray(giteaData)) {
+                        giteaData.forEach(item => {
                            const d = new Date(item.timestamp * 1000);
                            const key = toKey(d);
                            if (merged.has(key)) {
@@ -75,8 +84,8 @@ const ActivityHeatmap = () => {
                const processed = processData();
                setData(processed);
            } catch (err) {
-                console.error("Error fetching activity:", err);
-                setError(err.message);
+                console.error("Critical error in ActivityHeatmap:", err);
+                // setError(err.message); // Suppress global error to show partial data
            } finally {
                setLoading(false);
            }
@@ -95,7 +104,7 @@ const ActivityHeatmap = () => {
        svg.selectAll("*").remove();

        const g = svg.append("g")
-            .attr("transform", `translate(${width / 2}, ${height / 4})`); // Center top-ish
+            .attr("transform", `translate(220, 100)`); // Moved up to prevent cutoff

        // Isometric projection
        // x grid runs diagonally right-down, y grid runs diagonally left-down
@@ -174,18 +183,18 @@ const ActivityHeatmap = () => {

            // Draw Gitea Bar (Bottom)
            if (d.gitea > 0) {
-                drawBar(g, pos.x, pos.y, tileWidth, tileHeight, giteaH, colorGitea, `Gitea: ${d.gitea} on ${d.date.toDateString()}`);
+                drawBar(g, pos.x, pos.y, tileWidth, tileHeight, giteaH, colorGitea, `Gitea: ${d.gitea} on ${d.date.toDateString()}`, d);
            }

            // Draw GitHub Bar (Top)
            // Adjust y position up by gitea height
            if (d.github > 0) {
-                drawBar(g, pos.x, pos.y - giteaH, tileWidth, tileHeight, githubH, colorGithub, `GitHub: ${d.github} on ${d.date.toDateString()}`);
+                drawBar(g, pos.x, pos.y - giteaH, tileWidth, tileHeight, githubH, colorGithub, `GitHub: ${d.github} on ${d.date.toDateString()}`, d);
            }
        });

        // Function to draw isometric prism
-        function drawBar(container, x, y, w, h, z, color, tooltipText) {
+        function drawBar(container, x, y, w, h, z, color, tooltipText, dataItem) {
            // Top Face
            const pathTop = `M${x} ${y - z} 
                              L${x + w} ${y + h - z} 
@@ -219,11 +228,24 @@ const ActivityHeatmap = () => {
            group.append("title").text(tooltipText);

            // Hover effect
-            //  group.on("mouseenter", function() {
-            //      d3.select(this).selectAll("path").attr("opacity", 0.8);
-            //  }).on("mouseleave", function() {
-            //      d3.select(this).selectAll("path").attr("opacity", 1);
-            //  });
+            group.on("mouseenter", function (event) {
+                d3.select(this).selectAll("path").attr("opacity", 0.8);
+                // Calculate position relative to container
+                const [mx, my] = d3.pointer(event, svg.node());
+                setHoveredData({
+                    x: mx,
+                    y: my,
+                    date: d3.select(this).datum().date,
+                    github: d3.select(this).datum().github,
+                    gitea: d3.select(this).datum().gitea
+                });
+            }).on("mouseleave", function () {
+                d3.select(this).selectAll("path").attr("opacity", 1);
+                setHoveredData(null);
+            });
+
+            // Attach data to group for access in handler
+            group.datum(dataItem);
        }

    }, [data, loading]);
@@ -238,23 +260,25 @@ const ActivityHeatmap = () => {

    if (error) {
        return (
-            <div style={{ height: '600px', display: 'flex', alignItems: 'center', justifyContent: 'center', background: '#0a0a0a', color: '#ff4d00' }}>
-                DATA FLUX ERROR
+            <div style={{ height: '600px', display: 'flex', alignItems: 'center', justifyContent: 'center', background: '#0a0a0a', color: '#ff4d00', flexDirection: 'column' }}>
+                <div>DATA FLUX ERROR</div>
+                <div style={{ fontSize: '0.8rem', marginTop: '10px', color: '#888' }}>{error}</div>
            </div>
        );
    }

    return (
        <section style={{
-            height: '600px',
-            background: '#0a0a0a',
+            width: '100%',
+            height: '100%',
            color: '#e4e4e4',
            display: 'flex',
            flexDirection: 'column',
            alignItems: 'center',
            justifyContent: 'center',
-            padding: '40px 20px',
-            overflow: 'hidden'
+            padding: '0',
+            overflow: 'visible', // Allow tooltip to render outside if needed
+            position: 'relative' // Anchor for absolute tooltip
        }}>
            <h2 className="uppercase" style={{ fontSize: '1.5rem', marginBottom: '10px', color: '#888' }}>
                Contribution Topography
@@ -268,7 +292,37 @@ const ActivityHeatmap = () => {
                </div>
            </div>

-            <svg ref={svgRef} width="1000" height="600" style={{ maxWidth: '100%', height: 'auto', overflow: 'visible' }} />
+            <svg
+                ref={svgRef}
+                viewBox="0 0 1000 600"
+                preserveAspectRatio="xMidYMid meet"
+                style={{ width: '100%', height: 'auto', overflow: 'visible' }}
+            />
+
+            {hoveredData && (
+                <div style={{
+                    position: 'absolute',
+                    left: hoveredData.x + 10, // Closer offset
+                    top: hoveredData.y - 30,
+                    background: 'rgba(0,0,0,0.9)',
+                    border: '1px solid #444',
+                    borderRadius: '4px',
+                    padding: '10px',
+                    pointerEvents: 'none',
+                    zIndex: 10,
+                    fontSize: '0.8rem',
+                    fontFamily: 'monospace',
+                    boxShadow: '0 4px 10px rgba(0,0,0,0.5)'
+                }}>
+                    <div style={{ fontWeight: 'bold', marginBottom: '5px', color: '#fff' }}>
+                        {hoveredData.date ? hoveredData.date.toDateString() : 'Date'}
+                    </div>
+                    <div style={{ display: 'flex', flexDirection: 'column', gap: '2px' }}>
+                        <div style={{ color: '#2da44e' }}>GitHub: {hoveredData.github || 0}</div>
+                        <div style={{ color: '#ff4d00' }}>Gitea: {hoveredData.gitea || 0}</div>
+                    </div>
+                </div>
+            )}
        </section>
    );
 };
--- a/src/components/Footer.jsx
+++ b/src/components/Footer.jsx
@@ -18,10 +18,9 @@ const Footer = () => {
                <div>
                    <h4 className="uppercase" style={{ marginBottom: '20px', color: '#666' }}>Socials</h4>
                    <ul style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
-                        <li><a href="#">Instagram</a></li>
-                        <li><a href="#">Twitter / X</a></li>
-                        <li><a href="#">LinkedIn</a></li>
-                        <li><a href="#">GitHub</a></li>
+                        <li><a href="https://instagram.com/matiss.j20">Instagram</a></li>
+                        <li><a href="https://www.linkedin.com/in/matiss-jurevics-121162240/">LinkedIn</a></li>
+                        <li><a href="https://github.com/MatissJurevics">GitHub</a></li>
                    </ul>
                </div>

@@ -37,20 +36,20 @@ const Footer = () => {
                    <p style={{ marginBottom: '20px', color: '#888' }}>
                        Occasional updates on new projects and experiments.
                    </p>
-                    <div style={{ display: 'flex', borderBottom: '1px solid #333' }}>
+                    <form
+                        action="https://buttondown.com/api/emails/embed-subscribe/matiss"
+                        method="post"
+                        target="_blank"
+                        style={{ display: 'flex', borderBottom: '1px solid #333' }}
+                    >
                        <input
+                            className="footer-input"
                            type="email"
+                            name="email"
                            placeholder="email address"
-                            style={{
-                                background: 'transparent',
-                                border: 'none',
-                                color: '#fff',
-                                padding: '10px 0',
-                                flex: 1,
-                                outline: 'none'
-                            }}
                        />
-                        <button style={{
+                        <input type="hidden" value="1" name="embed" />
+                        <button type="submit" style={{
                            background: 'transparent',
                            border: 'none',
                            color: '#ff4d00',
@@ -60,7 +59,7 @@ const Footer = () => {
                        }}>
                            Subscribe
                        </button>
-                    </div>
+                    </form>
                </div>
            </div>

--- a/src/components/GitHistory.jsx
+++ b/src/components/GitHistory.jsx
@@ -0,0 +1,193 @@
+import React, { useEffect, useState } from 'react';
+
+const GitHistory = () => {
+    const [events, setEvents] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+
+    useEffect(() => {
+        const fetchHistory = async () => {
+            try {
+                // 1. Fetch GitHub Events
+                const githubPromise = fetch('https://api.github.com/users/MatissJurevics/events/public?per_page=5')
+                    .then(async res => {
+                        if (!res.ok) throw new Error('GitHub Fetch Failed');
+                        const data = await res.json();
+                        return data.map(evt => ({
+                            source: 'github',
+                            id: evt.id,
+                            type: evt.type,
+                            date: new Date(evt.created_at),
+                            repo: evt.repo.name.replace('MatissJurevics/', ''),
+                            url: `https://github.com/${evt.repo.name}`,
+                            raw: evt
+                        }));
+                    })
+                    .catch(err => {
+                        console.warn('GitHub history error:', err);
+                        return [];
+                    });
+
+                // 2. Fetch Gitea Commits (Manual Aggregation)
+                // Since 'events' endpoint is missing, we fetch repos -> recent commits
+                const giteaPromise = async () => {
+                    try {
+                        const reposRes = await fetch('/api/gitea/api/v1/users/Matiss/repos');
+                        if (!reposRes.ok) throw new Error('Gitea Repos Fetch Failed');
+                        const repos = await reposRes.json();
+
+                        // Fetch commits for each repo (limit 3 per repo to save requests/bandwidth)
+                        const commitPromises = repos.map(async repo => {
+                            try {
+                                const commitsRes = await fetch(`/api/gitea/api/v1/repos/Matiss/${repo.name}/commits?limit=3`);
+                                if (!commitsRes.ok) return [];
+                                const commits = await commitsRes.json();
+                                return commits.map(c => ({
+                                    source: 'gitea',
+                                    id: c.sha,
+                                    type: 'PushEvent', // Simulate PushEvent
+                                    date: new Date(c.commit.author.date),
+                                    repo: repo.name,
+                                    url: c.html_url,
+                                    message: c.commit.message,
+                                    raw: c
+                                }));
+                            } catch (e) {
+                                return [];
+                            }
+                        });
+
+                        const commitsArrays = await Promise.all(commitPromises);
+                        return commitsArrays.flat();
+                    } catch (err) {
+                        console.warn('Gitea history error:', err);
+                        console.error('Failed to fetch Gitea history. Check if the proxy is correctly configured and the target URL is reachable.');
+                        return [];
+                    }
+                };
+
+                const [githubEvents, giteaEvents] = await Promise.all([githubPromise, giteaPromise()]);
+                const allEvents = [...githubEvents, ...giteaEvents];
+
+                // Sort by Date Descending
+                allEvents.sort((a, b) => b.date - a.date);
+
+                // Slice top 10
+                setEvents(allEvents.slice(0, 10));
+
+            } catch (err) {
+                console.error("History fetch error:", err);
+                setError(err.message);
+            } finally {
+                setLoading(false);
+            }
+        };
+
+        fetchHistory();
+    }, []);
+
+    const getEventMessage = (event) => {
+        if (event.source === 'gitea') {
+            // Clean message (first line)
+            const msg = event.message.split('\n')[0];
+            return `Cm: ${msg}`;
+        }
+
+        // GitHub Logic
+        const e = event.raw;
+        switch (e.type) {
+            case 'PushEvent':
+                return `Pushed to ${event.repo}`;
+            case 'CreateEvent':
+                return `Created ${e.payload.ref_type} in ${event.repo}`;
+            case 'WatchEvent':
+                return `Starred ${event.repo}`;
+            case 'PullRequestEvent':
+                return `${e.payload.action} PR in ${event.repo}`;
+            default:
+                return `${e.type} on ${event.repo}`;
+        }
+    };
+
+    const formatDate = (date) => {
+        return new Intl.DateTimeFormat('en-US', { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' }).format(date);
+    };
+
+    const getSourceIcon = (source) => {
+        if (source === 'github') return <span style={{ width: '8px', height: '8px', background: '#2da44e', display: 'inline-block', marginRight: '8px', borderRadius: '50%' }}></span>
+        if (source === 'gitea') return <span style={{ width: '8px', height: '8px', background: '#ff4d00', display: 'inline-block', marginRight: '8px', borderRadius: '50%' }}></span>
+        return null;
+    };
+
+    if (loading) {
+        return (
+            <div style={{ height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#666', fontFamily: 'monospace' }}>
+                LOADING HISTORY...
+            </div>
+        );
+    }
+
+    if (error) {
+        return (
+            <div style={{ height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#ff4d00', fontFamily: 'monospace' }}>
+                ERROR LOAD HISTORY
+            </div>
+        );
+    }
+
+    return (
+        <section style={{
+            width: '100%',
+            height: '100%',
+            color: '#e4e4e4',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            padding: '0',
+            position: 'relative'
+        }}>
+            <div style={{
+                maxWidth: '600px',
+                width: '100%',
+                display: 'flex',
+                flexDirection: 'column',
+                height: '100%',
+                justifyContent: 'center'
+            }}>
+                <h2 className="uppercase" style={{ fontSize: '3rem', marginBottom: '40px', lineHeight: 1, textAlign: 'center' }}>
+                    Git <br /> History
+                </h2>
+
+                <div className="hide-scrollbar" style={{ display: 'flex', flexDirection: 'column', gap: '20px', maxHeight: '500px', overflowY: 'auto', paddingRight: '10px' }}>
+                    {events.map(event => (
+                        <div key={event.id} style={{
+                            borderLeft: `2px solid ${event.source === 'gitea' ? '#ff4d00' : '#333'}`,
+                            paddingLeft: '20px',
+                            transition: 'border-color 0.3s ease',
+                        }}
+                            onMouseEnter={(e) => e.currentTarget.style.borderColor = event.source === 'gitea' ? '#ff6600' : '#2da44e'}
+                            onMouseLeave={(e) => e.currentTarget.style.borderColor = event.source === 'gitea' ? '#ff4d00' : '#333'}
+                        >
+                            <p className="mono" style={{ fontSize: '0.8rem', color: '#666', marginBottom: '5px' }}>
+                                {getSourceIcon(event.source)}
+                                {formatDate(event.date)}
+                            </p>
+                            <a href={event.url} target="_blank" rel="noopener noreferrer" style={{ textDecoration: 'none', color: 'inherit' }}>
+                                <p style={{ fontSize: '1.1rem', fontWeight: 'bold', lineHeight: '1.4' }}>
+                                    {getEventMessage(event)}
+                                </p>
+                            </a>
+                        </div>
+                    ))}
+                </div>
+                <div style={{ marginTop: '40px', textAlign: 'center' }}>
+                    <a href="https://git.mati.ss/Matiss" target="_blank" rel="noopener noreferrer" className="mono" style={{ color: '#ff4d00', textDecoration: 'none', fontSize: '0.9rem' }}>
+                        VIEW FULL PROFILE &rarr;
+                    </a>
+                </div>
+            </div>
+        </section>
+    );
+};
+
+export default GitHistory;
--- a/src/components/GitSection.jsx
+++ b/src/components/GitSection.jsx
@@ -0,0 +1,47 @@
+import React from 'react';
+import GitHistory from './GitHistory';
+import ActivityHeatmap from './ActivityHeatmap';
+
+const GitSection = () => {
+    return (
+        <section style={{
+            background: '#0a0a0a',
+            color: '#e4e4e4',
+            padding: '40px 20px',
+            position: 'relative'
+        }}>
+            <div style={{
+                maxWidth: '1400px',
+                width: '100%',
+                margin: '0 auto',
+                display: 'flex',
+                flexDirection: 'row',
+                flexWrap: 'wrap',
+                gap: '40px',
+                justifyContent: 'center',
+                alignItems: 'flex-start' // Align top
+            }}>
+                {/* Left: Github History List */}
+                <div style={{
+                    flex: '1',
+                    minWidth: '350px',
+                    maxWidth: '500px'
+                }}>
+                    <GitHistory />
+                </div>
+
+                {/* Right: Activity Heatmap 3D */}
+                <div style={{
+                    flex: '2',
+                    minWidth: '500px',
+                    display: 'flex',
+                    justifyContent: 'center'
+                }}>
+                    <ActivityHeatmap />
+                </div>
+            </div>
+        </section>
+    );
+};
+
+export default GitSection;
--- a/src/components/GithubHistory.jsx
+++ b/src/components/GithubHistory.jsx
@@ -1,117 +0,0 @@
-import React, { useEffect, useState } from 'react';
-
-const GithubHistory = () => {
-    const [events, setEvents] = useState([]);
-    const [loading, setLoading] = useState(true);
-    const [error, setError] = useState(null);
-
-    useEffect(() => {
-        const fetchEvents = async () => {
-            try {
-                const response = await fetch('https://api.github.com/users/MatissJurevics/events/public?per_page=5');
-                if (!response.ok) {
-                    throw new Error('Failed to fetch GitHub history');
-                }
-                const data = await response.json();
-                setEvents(data);
-            } catch (err) {
-                setError(err.message);
-            } finally {
-                setLoading(false);
-            }
-        };
-
-        fetchEvents();
-    }, []);
-
-    const getEventMessage = (event) => {
-        switch (event.type) {
-            case 'PushEvent':
-                return `Pushed to ${event.repo.name.replace('MatissJurevics/', '')}`;
-            case 'CreateEvent':
-                return `Created ${event.payload.ref_type} in ${event.repo.name.replace('MatissJurevics/', '')}`;
-            case 'WatchEvent':
-                return `Starred ${event.repo.name.replace('MatissJurevics/', '')}`;
-            case 'PullRequestEvent':
-                return `${event.payload.action} PR in ${event.repo.name.replace('MatissJurevics/', '')}`;
-            default:
-                return `${event.type} on ${event.repo.name.replace('MatissJurevics/', '')}`;
-        }
-    };
-
-    const formatDate = (dateString) => {
-        const date = new Date(dateString);
-        return new Intl.DateTimeFormat('en-US', { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' }).format(date);
-    };
-
-    if (loading) {
-        return (
-            <div style={{ height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#666', fontFamily: 'monospace' }}>
-                LOADING HISTORY...
-            </div>
-        );
-    }
-
-    if (error) {
-        return (
-            <div style={{ height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#ff4d00', fontFamily: 'monospace' }}>
-                ERROR LOAD GITHUB DATA
-            </div>
-        );
-    }
-
-    return (
-        <section style={{
-            height: '600px',
-            background: '#0a0a0a',
-            color: '#e4e4e4',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            padding: '60px 20px',
-            position: 'relative'
-        }}>
-            <div style={{
-                maxWidth: '600px', // Narrower container for list
-                width: '100%',
-                display: 'flex',
-                flexDirection: 'column',
-                height: '100%',
-                justifyContent: 'center'
-            }}>
-                <h2 className="uppercase" style={{ fontSize: '3rem', marginBottom: '40px', lineHeight: 1, textAlign: 'center' }}>
-                    Github <br /> History
-                </h2>
-
-                <div style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
-                    {events.map(event => (
-                        <div key={event.id} style={{
-                            borderLeft: '2px solid #333',
-                            paddingLeft: '20px',
-                            transition: 'border-color 0.3s ease',
-                        }}
-                            onMouseEnter={(e) => e.currentTarget.style.borderColor = '#ff4d00'}
-                            onMouseLeave={(e) => e.currentTarget.style.borderColor = '#333'}
-                        >
-                            <p className="mono" style={{ fontSize: '0.8rem', color: '#666', marginBottom: '5px' }}>
-                                {formatDate(event.created_at)}
-                            </p>
-                            <a href={`https://github.com/${event.repo.name}`} target="_blank" rel="noopener noreferrer" style={{ textDecoration: 'none', color: 'inherit' }}>
-                                <p style={{ fontSize: '1.2rem', fontWeight: 'bold' }}>
-                                    {getEventMessage(event)}
-                                </p>
-                            </a>
-                        </div>
-                    ))}
-                </div>
-                <div style={{ marginTop: '40px', textAlign: 'center' }}>
-                    <a href="https://github.com/MatissJurevics" target="_blank" rel="noopener noreferrer" className="mono" style={{ color: '#ff4d00', textDecoration: 'none', fontSize: '0.9rem' }}>
-                        VIEW FULL PROFILE &rarr;
-                    </a>
-                </div>
-            </div>
-        </section>
-    );
-};
-
-export default GithubHistory;
--- a/src/components/InfoTabs.jsx
+++ b/src/components/InfoTabs.jsx
@@ -1,7 +1,6 @@
 import React, { useState } from 'react';
 import WhereAmI from './WhereAmI';
-import GithubHistory from './GithubHistory';
-import ActivityHeatmap from './ActivityHeatmap';
+import GitSection from './GitSection';

 const InfoTabs = () => {
    const [activeTab, setActiveTab] = useState('location');
@@ -34,12 +33,12 @@ const InfoTabs = () => {
                    Where Am I?
                </button>
                <button
-                    onClick={() => setActiveTab('github')}
+                    onClick={() => setActiveTab('git')}
                    style={{
                        background: 'transparent',
                        border: 'none',
-                        borderBottom: activeTab === 'github' ? '2px solid #ff4d00' : '2px solid transparent',
-                        color: activeTab === 'github' ? '#fff' : '#666',
+                        borderBottom: activeTab === 'git' ? '2px solid #ff4d00' : '2px solid transparent',
+                        color: activeTab === 'git' ? '#fff' : '#666',
                        padding: '10px 20px',
                        cursor: 'pointer',
                        fontSize: '0.9rem',
@@ -48,32 +47,18 @@ const InfoTabs = () => {
                        transition: 'all 0.3s ease'
                    }}
                >
-                    History
-                </button>
-                <button
-                    onClick={() => setActiveTab('activity')}
-                    style={{
-                        background: 'transparent',
-                        border: 'none',
-                        borderBottom: activeTab === 'activity' ? '2px solid #ff4d00' : '2px solid transparent',
-                        color: activeTab === 'activity' ? '#fff' : '#666',
-                        padding: '10px 20px',
-                        cursor: 'pointer',
-                        fontSize: '0.9rem',
-                        textTransform: 'uppercase',
-                        letterSpacing: '0.1em',
-                        transition: 'all 0.3s ease'
-                    }}
-                >
-                    Activity 3D
+                    Git Activity
                </button>
            </div>

            {/* Content Area */}
            <div>
-                {activeTab === 'location' && <WhereAmI />}
-                {activeTab === 'github' && <GithubHistory />}
-                {activeTab === 'activity' && <ActivityHeatmap />}
+                <div style={{ display: activeTab === 'location' ? 'block' : 'none' }}>
+                    <WhereAmI />
+                </div>
+                <div style={{ display: activeTab === 'git' ? 'block' : 'none' }}>
+                    <GitSection />
+                </div>
            </div>
        </div>
    );
--- a/src/components/ProductGrid.jsx
+++ b/src/components/ProductGrid.jsx
@@ -6,11 +6,12 @@ import '../styles/variables.css';

 gsap.registerPlugin(ScrollTrigger);

-const products = [
-    { id: 1, name: 'Portfolio V1', desc: 'Web Design', price: '2023' },
-    { id: 2, name: 'Neon Dreams', desc: 'WebGL Experience', price: '2024' },
-    { id: 3, name: 'Type Lab', desc: 'Typography Tool', price: '2024' },
-    { id: 4, name: 'Audio Vis', desc: 'Sound Reactive', price: '2023' },
+
+
+const REPO_LIST = [
+    'MatissJurevics/Gene-AI',
+    'MatissJurevics/movesync',
+    'MatissJurevics/script-server',
 ];

 const ProductGrid = () => {
@@ -18,8 +19,63 @@ const ProductGrid = () => {
    const titleRef = useRef(null);
    const itemRefs = useRef([]);
    const [selectedProject, setSelectedProject] = useState(null);
+    const [products, setProducts] = useState([]);

    useEffect(() => {
+        const fetchRepos = async () => {
+            const promises = REPO_LIST.map(async (repoName, index) => {
+                try {
+                    const res = await fetch(`https://api.github.com/repos/${repoName}`);
+                    if (!res.ok) throw new Error('Fetch failed');
+                    const data = await res.json();
+                    return {
+                        id: index + 1,
+                        name: data.name,
+                        desc: data.description || data.language || 'No description',
+                        price: `★ ${data.stargazers_count}`,
+                        language: data.language,
+                        url: data.html_url,
+                        raw: data
+                    };
+                } catch (e) {
+                    console.warn(`Failed to load ${repoName}`, e);
+                    // Fallback or skip
+                    return {
+                        id: index + 1,
+                        name: repoName.split('/')[1],
+                        desc: 'Loading Error',
+                        price: 'NT',
+                        url: '#'
+                    };
+                }
+            });
+
+            const results = await Promise.all(promises);
+
+            // Add Manual Gumroad Project
+            const manualProject = {
+                id: 'wireframe', // unique string ID to avoid collision
+                name: 'Wireframe UI Kit',
+                desc: 'Web Design Resource',
+                price: '$29',
+                url: 'https://saetom.gumroad.com/l/WireframeUIKit',
+                image: '/images/wireframe_kit.png',
+                details: `
+                    A comprehensive Wireframe UI Kit designed to speed up your prototyping workflow.
+                    Includes over 100+ customizable components, varying layouts, and responsive patterns.
+                    Perfect for designers and developers looking to create high-fidelity wireframes quickly.
+                `
+            };
+
+            setProducts([manualProject, ...results]);
+        };
+
+        fetchRepos();
+    }, []);
+
+    useEffect(() => {
+        if (!products.length) return; // Wait for data
+
        const ctx = gsap.context(() => {
            // Animate Title
            gsap.from(titleRef.current, {
@@ -52,46 +108,52 @@ const ProductGrid = () => {
        }, gridRef);

        return () => ctx.revert();
-    }, []);
+    }, [products]);

    const onEnter = ({ currentTarget }) => {
-        gsap.to(currentTarget, { backgroundColor: '#fff', scale: 0.98, duration: 0.3 });
+        const computedStyle = getComputedStyle(document.documentElement);
+        const hoverBg = computedStyle.getPropertyValue('--product-bg-hover').trim() || '#fff';
+        const gridLine = computedStyle.getPropertyValue('--grid-line').trim() || '#ccc';
+        gsap.to(currentTarget, { backgroundColor: hoverBg, scale: 0.98, duration: 0.3 });
        gsap.to(currentTarget.querySelector('.product-img'), { scale: 1.1, duration: 0.3 });
        gsap.to(currentTarget.querySelector('.indicator'), { backgroundColor: '#ff4d00', scale: 1.5, duration: 0.3 });
    };

    const onLeave = ({ currentTarget }) => {
-        gsap.to(currentTarget, { backgroundColor: '#f5f5f5', scale: 1, duration: 0.3 });
+        const computedStyle = getComputedStyle(document.documentElement);
+        const productBg = computedStyle.getPropertyValue('--product-bg').trim() || '#f5f5f5';
+        const gridLine = computedStyle.getPropertyValue('--grid-line').trim() || '#ccc';
+        gsap.to(currentTarget, { backgroundColor: productBg, scale: 1, duration: 0.3 });
        gsap.to(currentTarget.querySelector('.product-img'), { scale: 1, duration: 0.3 });
-        gsap.to(currentTarget.querySelector('.indicator'), { backgroundColor: '#ccc', scale: 1, duration: 0.3 });
+        gsap.to(currentTarget.querySelector('.indicator'), { backgroundColor: gridLine, scale: 1, duration: 0.3 });
    };

    return (
        <>
            <section id="work" ref={gridRef} style={{
                padding: '100px 20px',
-                background: '#fff',
+                background: 'var(--bg-color, #fff)',
                minHeight: '100vh'
            }}>
                <div style={{ maxWidth: '1400px', margin: '0 auto' }}>
                    <div style={{
                        marginBottom: '60px',
-                        borderBottom: '1px solid #000',
+                        borderBottom: '1px solid var(--text-main, #000)',
                        paddingBottom: '20px',
                        display: 'flex',
                        justifyContent: 'space-between',
                        alignItems: 'baseline'
                    }} ref={titleRef}>
-                        <h2 className="uppercase" style={{ fontSize: '2rem', margin: 0 }}>Selected Work</h2>
-                        <span className="mono" style={{ fontSize: '0.9rem', color: '#666' }}>DESIGN / CODE</span>
+                        <h2 className="uppercase" style={{ fontSize: '2rem', margin: 0, color: 'var(--text-main, #000)' }}>Selected Work</h2>
+                        <span className="mono" style={{ fontSize: '0.9rem', color: 'var(--text-dim, #666)' }}>DESIGN / CODE</span>
                    </div>

                    <div style={{
                        display: 'grid',
                        gridTemplateColumns: 'repeat(auto-fill, minmax(350px, 1fr))',
                        gap: '2px', // Tight gap for grid lines effect
-                        background: '#ccc', // Color of grid lines
-                        border: '1px solid #ccc'
+                        background: 'var(--grid-line, #ccc)', // Color of grid lines
+                        border: '1px solid var(--grid-line, #ccc)'
                    }}>
                        {products.map((p, i) => (
                            <div
@@ -99,7 +161,7 @@ const ProductGrid = () => {
                                ref={el => itemRefs.current[i] = el}
                                className="product-item"
                                style={{
-                                    background: '#f5f5f5',
+                                    background: 'var(--product-bg, #f5f5f5)',
                                    height: '450px',
                                    padding: '30px',
                                    display: 'flex',
@@ -114,33 +176,43 @@ const ProductGrid = () => {
                                onClick={() => setSelectedProject(p)}
                            >
                                <div style={{ display: 'flex', justifyContent: 'space-between', width: '100%', zIndex: 2 }}>
-                                    <span className="mono" style={{ fontSize: '0.8rem', color: '#ff4d00' }}>0{p.id}</span>
+                                    <span className="mono" style={{ fontSize: '0.8rem', color: '#ff4d00' }}>
+                                        {typeof p.id === 'number' ? `0${p.id}` : 'NEW'}
+                                    </span>
                                    <div className="indicator" style={{
                                        width: '8px',
                                        height: '8px',
-                                        background: '#ccc',
+                                        background: 'var(--grid-line, #ccc)',
                                        borderRadius: '50%'
                                    }}></div>
                                </div>

-                                {/* Placeholder for Product Image */}
+                                {/* Product Image or Placeholder */}
                                <div className="product-img" style={{
                                    flex: 1,
                                    display: 'flex',
                                    alignItems: 'center',
                                    justifyContent: 'center',
-                                    fontSize: '5rem',
-                                    color: '#e0e0e0',
+                                    fontSize: '3rem',
+                                    color: 'var(--text-dim, #e0e0e0)',
                                    fontWeight: 800,
-                                    userSelect: 'none'
+                                    userSelect: 'none',
+                                    textAlign: 'center',
+                                    wordBreak: 'break-word',
+                                    lineHeight: 1.2,
+                                    overflow: 'hidden'
                                }}>
-                                    MJ
+                                    {p.image ? (
+                                        <img src={p.image} alt={p.name} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
+                                    ) : (
+                                        p.name.substring(0, 10)
+                                    )}
                                </div>

                                <div style={{ zIndex: 2 }}>
-                                    <h3 style={{ fontSize: '1.5rem', marginBottom: '5px' }}>{p.name}</h3>
-                                    <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: '0.9rem', color: '#666' }}>
-                                        <span>{p.desc}</span>
+                                    <h3 style={{ fontSize: '1.5rem', marginBottom: '5px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', color: 'var(--text-main, #000)' }}>{p.name}</h3>
+                                    <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: '0.9rem', color: 'var(--text-dim, #666)' }}>
+                                        <span style={{ maxWidth: '70%', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{p.desc}</span>
                                        <span>{p.price}</span>
                                    </div>
                                </div>
--- a/src/components/ProjectModal.jsx
+++ b/src/components/ProjectModal.jsx
@@ -102,9 +102,16 @@ const ProjectModal = ({ project, onClose }) => {
                        display: 'flex',
                        alignItems: 'center',
                        justifyContent: 'center',
-                        borderRight: '1px solid #ccc'
+                        borderRight: '1px solid #ccc',
+                        overflow: 'hidden'
                    }}>
-                        <h1 style={{ fontSize: '8vw', color: '#f0f0f0', fontWeight: '900' }}>MJ</h1>
+                        {project.image ? (
+                            <img src={project.image} alt={project.name} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
+                        ) : (
+                            <h1 style={{ fontSize: '8vw', color: '#f0f0f0', fontWeight: '900' }}>
+                                {project.name ? project.name.substring(0, 2).toUpperCase() : 'MJ'}
+                            </h1>
+                        )}
                    </div>

                    {/* Right: Info */}
@@ -118,23 +125,18 @@ const ProjectModal = ({ project, onClose }) => {
                    }}>
                        <div>
                            <span className="mono" style={{ color: '#ff4d00', marginBottom: '10px', display: 'block' }}>
-                                {project.price} {/* Using 'price' for Year based on previous data struct */}
+                                {project.price}
                            </span>
                            <h2 className="uppercase" style={{ fontSize: '3rem', lineHeight: 1, marginBottom: '20px' }}>
                                {project.name}
                            </h2>
                            <p style={{ fontSize: '1.1rem', color: '#444', marginBottom: '40px', lineHeight: 1.6 }}>
-                                This is a detailed description of the {project.name} project.
-                                It explores the intersection of design and technology,
-                                focusing on user experience and visual impact.
+                                {project.details || project.desc || "No details available."}
                            </p>

                            <div className="mono" style={{ fontSize: '0.9rem', color: '#666' }}>
-                                <h4 style={{ color: '#000', marginBottom: '10px' }}>Role</h4>
-                                <p>Design, Development</p>
-                                <br />
-                                <h4 style={{ color: '#000', marginBottom: '10px' }}>Tech Stack</h4>
-                                <p>React, Three.js, GSAP</p>
+                                <h4 style={{ color: '#000', marginBottom: '10px' }}>Type</h4>
+                                <p>{project.language || 'Design / Resource'}</p>
                            </div>
                        </div>

@@ -152,6 +154,7 @@ const ProjectModal = ({ project, onClose }) => {
                        }}
                            onMouseEnter={(e) => e.target.style.background = '#ff4d00'}
                            onMouseLeave={(e) => e.target.style.background = '#000'}
+                            onClick={() => window.open(project.url, '_blank')}
                        >
                            View Live
                        </button>
--- a/src/index.css
+++ b/src/index.css
@@ -18,14 +18,13 @@ a {
  color: #646cff;
  text-decoration: inherit;
 }
+
 a:hover {
  color: #535bf2;
 }

 body {
  margin: 0;
-  display: flex;
-  place-items: center;
  min-width: 320px;
  min-height: 100vh;
 }
@@ -35,6 +34,48 @@ h1 {
  line-height: 1.1;
 }

+/* Footer Input */
+.footer-input {
+  background: transparent;
+  border: none;
+  color: #fff;
+  padding: 5px 0;
+  font-size: 0.9rem;
+  flex: 1;
+  outline: none;
+  transition: all 0.3s ease;
+}
+
+.footer-input:focus {
+  border-bottom: 1px solid #ff4d00;
+}
+
+.footer-input::placeholder {
+  color: #666;
+  transition: color 0.3s ease;
+}
+
+.footer-input:focus::placeholder {
+  color: #888;
+}
+
+/* Footer Links */
+footer ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+footer a {
+  color: #888;
+  text-decoration: none;
+  transition: color 0.3s ease;
+}
+
+footer a:hover {
+  color: #ff4d00;
+}
+
 button {
  border-radius: 8px;
  border: 1px solid transparent;
@@ -46,9 +87,11 @@ button {
  cursor: pointer;
  transition: border-color 0.25s;
 }
+
 button:hover {
  border-color: #646cff;
 }
+
 button:focus,
 button:focus-visible {
  outline: 4px auto -webkit-focus-ring-color;
@@ -59,10 +102,25 @@ button:focus-visible {
    color: #213547;
    background-color: #ffffff;
  }
+
  a:hover {
    color: #747bff;
  }
+
  button {
    background-color: #f9f9f9;
  }
 }
+
+/* Hero Title Mobile Responsive */
+@media (max-width: 768px) {
+  .hero-title {
+    font-size: 3rem !important;
+  }
+}
+
+@media (max-width: 480px) {
+  .hero-title {
+    font-size: 2rem !important;
+  }
+}
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
 import App from './App.jsx'
-import './styles/index.css'
+import './index.css'

 ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -1,42 +0,0 @@
-@import './variables.css';
-
-* {
-    box-sizing: border-box;
-    margin: 0;
-    padding: 0;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-}
-
-body {
-    background-color: var(--bg-color);
-    color: var(--text-main);
-    font-family: var(--font-main);
-    font-size: 14px;
-    line-height: 1.5;
-    overflow-x: hidden;
-    /* Hide scrollbar potentially */
-}
-
-a {
-    color: inherit;
-    text-decoration: none;
-}
-
-ul {
-    list-style: none;
-}
-
-/* Utilities */
-.uppercase {
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-}
-
-.mono {
-    font-family: monospace;
-}
-
-canvas {
-    touch-action: none;
-}
--- a/src/styles/variables.css
+++ b/src/styles/variables.css
@@ -1,10 +1,12 @@
 :root {
-  /* Teenage Engineering Palette */
-  --bg-color: #e4e4e4;
-  --text-main: #000000;
-  --text-dim: #666666;
+  /* Teenage Engineering Palette - Dark mode default */
+  --bg-color: #0a0a0a;
+  --text-main: #e4e4e4;
+  --text-dim: #888888;
  --accent-orange: #ff4d00;
-  --grid-line: #cccccc;
+  --grid-line: #333333;
+  --product-bg: #1a1a1a;
+  --product-bg-hover: #2a2a2a;
  
  /* Typos */
  --font-main: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
@@ -13,3 +15,15 @@
  /* Layout */
  --header-height: 60px;
 }
+
+@media (prefers-color-scheme: light) {
+  :root {
+    /* Light mode overrides */
+    --bg-color: #e4e4e4;
+    --text-main: #000000;
+    --text-dim: #666666;
+    --grid-line: #cccccc;
+    --product-bg: #f5f5f5;
+    --product-bg-hover: #ffffff;
+  }
+}
--- a/vite.config.js
+++ b/vite.config.js
@@ -1,4 +1,4 @@
-import { defineConfig } from 'vite'
+import { defineConfig } from 'vite' // HMR Trigger
 import react from '@vitejs/plugin-react'

 // https://vite.dev/config/
@@ -9,7 +9,19 @@ export default defineConfig({
      '/api/gitea': {
        target: 'https://git.mati.ss',
        changeOrigin: true,
-        rewrite: (path) => path.replace(/^\/api\/gitea/, '')
+        secure: false,
+        rewrite: (path) => path.replace(/^\/api\/gitea/, ''),
+        configure: (proxy, _options) => {
+          proxy.on('error', (err, _req, _res) => {
+            console.log('proxy error', err);
+          });
+          proxy.on('proxyReq', (proxyReq, req, _res) => {
+            console.log('Sending Request to the Target:', req.method, req.url);
+          });
+          proxy.on('proxyRes', (proxyRes, req, _res) => {
+            console.log('Received Response from the Target:', proxyRes.statusCode, req.url);
+          });
+        },
      }
    }
  }
Author	SHA1	Message	Date
Matiss Jurevics	fbe8340210	chore: Configure DNS resolution and SSL for Gitea API proxy.	2025-12-29 18:10:26 +00:00
Matiss Jurevics	55d6d494d9	feat: Add console log to App component for debugging	2025-12-29 18:03:39 +00:00
Matiss Jurevics	db1875a745	fixed gittea not showing	2025-12-27 20:57:46 +00:00
Matiss Jurevics	899ee3025d	feat: Add custom favicon and update page title.	2025-12-18 20:40:33 +00:00
Matiss Jurevics	377d3d0de3	refactor: Improve Gitea API error reporting and proxy logging, update tab content display, and add Globe texture cleanup.	2025-12-18 20:35:56 +00:00
Matiss Jurevics	8af304ffb3	Merge pull request #3 from MatissJurevics/cursor/hero-title-mobile-size-6292 Hero title mobile size	2025-12-17 18:49:16 +00:00
Matiss Jurevics	cb6cea765a	Merge pull request #2 from MatissJurevics/cursor/hero-section-polygon-reduction-d730 Hero section polygon reduction	2025-12-17 18:49:06 +00:00
Cursor Agent	ba7bbbd40e	Add responsive styles for hero title on mobile Co-authored-by: matissjurevics <matissjurevics@gmail.com>	2025-12-17 18:41:35 +00:00
Cursor Agent	b4621e1f79	Optimize terrain geometry for mobile Co-authored-by: matissjurevics <matissjurevics@gmail.com>	2025-12-17 18:40:22 +00:00
Matiss Jurevics	d7dec1741e	Merge pull request #1 from MatissJurevics/cursor/dark-mode-and-mobile-optimization-4a15 Dark mode and mobile optimization	2025-12-17 18:27:00 +00:00
Cursor Agent	ea2fc6a090	feat: Implement dark mode and mobile optimizations This commit introduces dark mode support by defining CSS variables and applies optimizations for mobile devices by reducing polygon counts in 3D models. Co-authored-by: matissjurevics <matissjurevics@gmail.com>	2025-12-17 18:26:16 +00:00
Matiss Jurevics	9e22da569c	feat: switch Docker build process from Node.js/npm to Bun	2025-12-16 23:34:41 +00:00
Matiss Jurevics	e106ee9df1	feat: Add Dockerfile for multi-stage Node.js build with Nginx and .dockerignore.	2025-12-16 00:06:26 +00:00
Matiss Jurevics	8af2ce6941	style: Refactor global CSS by deleting `styles/index.css`, updating import paths, and modifying `index.css` styles.	2025-12-15 23:59:05 +00:00
Matiss Jurevics	495f462d03	feat: Add Buttondown email subscription form to footer with new input styling.	2025-12-15 22:21:56 +00:00
Matiss Jurevics	5c5af76e46	feat: Fetch projects from GitHub API, add a manual product with image, and enhance product display and modal details.	2025-12-15 22:09:57 +00:00
Matiss Jurevics	47dd66e5e7	feat: implement custom interactive tooltips for ActivityHeatmap bars to display detailed activity data on hover.	2025-12-15 21:28:49 +00:00
Matiss Jurevics	8687d2c444	feat: replace `GithubHistory` with `GitHistory` for combined GitHub and Gitea event display, and add scrollbar utility styles.	2025-12-15 21:20:56 +00:00
Matiss Jurevics	16a3025929	feat: Introduce GitSection component to consolidate GitHub history and activity heatmap, improving data fetching robustness and layout.	2025-12-15 20:55:51 +00:00