feat: introduce interactive 3D globe with country borders and GitHub activity feed.

2025-12-15 20:19:30 +00:00
parent 8dd658f206
commit 06968a6820
9 changed files with 445 additions and 7 deletions
--- a/src/components/GithubHistory.jsx
+++ b/src/components/GithubHistory.jsx
@@ -0,0 +1,117 @@
+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;