style: Refactor global CSS by deleting styles/index.css, updating import paths, and modifying index.css styles.

src/App.jsx

@@ -4,7 +4,7 @@ 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 gsap from 'gsap';
 import { ScrollTrigger } from 'gsap/ScrollTrigger';
 import Lenis from '@studio-freight/lenis'

src/components/ActivityHeatmap.jsx

@@ -6,6 +6,7 @@ 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 () => {
@@ -181,18 +182,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} 
@@ -226,11 +227,24 @@ const ActivityHeatmap = () => {
             group.append("title").text(tooltipText);
 
             // Hover effect
-            //  group.on("mouseenter", function() {
+            group.on("mouseenter", function (event) {
-            //      d3.select(this).selectAll("path").attr("opacity", 0.8);
+                d3.select(this).selectAll("path").attr("opacity", 0.8);
-            //  }).on("mouseleave", function() {
+                // Calculate position relative to container
-            //      d3.select(this).selectAll("path").attr("opacity", 1);
+                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]);
@@ -262,7 +276,8 @@ const ActivityHeatmap = () => {
             alignItems: 'center',
             justifyContent: 'center',
             padding: '0',
-            overflow: 'hidden'
+            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
@@ -282,6 +297,31 @@ const ActivityHeatmap = () => {
                 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>
     );
 };

src/components/Footer.jsx

@@ -36,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',
@@ -59,7 +59,7 @@ const Footer = () => {
                         }}>
                             Subscribe
                         </button>
-                    </div>
+                    </form>
                 </div>
             </div>
 

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' },
+const REPO_LIST = [
-    { id: 3, name: 'Type Lab', desc: 'Typography Tool', price: '2024' },
+    'MatissJurevics/Gene-AI',
-    { id: 4, name: 'Audio Vis', desc: 'Sound Reactive', price: '2023' },
+    '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,7 +108,7 @@ const ProductGrid = () => {
         }, gridRef);
 
         return () => ctx.revert();
-    }, []);
+    }, [products]);
 
     const onEnter = ({ currentTarget }) => {
         gsap.to(currentTarget, { backgroundColor: '#fff', scale: 0.98, duration: 0.3 });
@@ -114,7 +170,9 @@ 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',
@@ -123,24 +181,32 @@ const ProductGrid = () => {
                                     }}></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',
+                                    fontSize: '3rem',
                                     color: '#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>
+                                    <h3 style={{ fontSize: '1.5rem', marginBottom: '5px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{p.name}</h3>
                                     <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: '0.9rem', color: '#666' }}>
-                                        <span>{p.desc}</span>
+                                        <span style={{ maxWidth: '70%', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{p.desc}</span>
                                         <span>{p.price}</span>
                                     </div>
                                 </div>

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.
+                                {project.details || project.desc || "No details available."}
-                                It explores the intersection of design and technology,
-                                focusing on user experience and visual impact.
                             </p>
 
                             <div className="mono" style={{ fontSize: '0.9rem', color: '#666' }}>
-                                <h4 style={{ color: '#000', marginBottom: '10px' }}>Role</h4>
+                                <h4 style={{ color: '#000', marginBottom: '10px' }}>Type</h4>
-                                <p>Design, Development</p>
+                                <p>{project.language || 'Design / Resource'}</p>
-                                <br />
-                                <h4 style={{ color: '#000', marginBottom: '10px' }}>Tech Stack</h4>
-                                <p>React, Three.js, GSAP</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>

src/index.css

@@ -25,8 +25,6 @@ a:hover {
 
 body {
   margin: 0;
-  display: flex;
-  place-items: center;
   min-width: 320px;
   min-height: 100vh;
 }
@@ -36,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;

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>

src/styles/index.css

@@ -1,54 +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;
-}
-
-/* Utility to hide scrollbar */
-.hide-scrollbar {
-    -ms-overflow-style: none !important;
-    /* IE and Edge */
-    scrollbar-width: none !important;
-    /* Firefox */
-}
-
-.hide-scrollbar::-webkit-scrollbar {
-    display: none !important;
-}