Matiss/Mati.ss
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: Matiss:fc2d41ee973fb21cee5f655c2eff68c1625564fc
Branches Tags
Matiss:main
...
compare: Matiss:main
Branches Tags
Matiss:main

19 Commits
fc2d41ee97 ... main

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
22 changed files with 681 additions and 302 deletions
Expand all files Collapse all files

8
.dockerignore Normal file
View File

@@ -0,0 +1,8 @@
node_modules
dist
.git
.gitignore
*.log
docker-compose.yml
Dockerfile
.dockerignore

20
Dockerfile Normal file
View File

@@ -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;"]

4
index.html
View File

@@ -2,9 +2,9 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <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" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>testpage</title> <title>Matiss Jurevics</title>
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>

37
nginx.conf Normal file
View File

@@ -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;
}
}

4
public/favicon.svg Normal file
View File

@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 261 B

BIN
public/images/wireframe_kit.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 368 KiB

6
src/App.jsx
View File

@@ -4,7 +4,8 @@ import HeroModel from './canvas/HeroModel';
import ProductGrid from './components/ProductGrid'; import ProductGrid from './components/ProductGrid';
import InfoTabs from './components/InfoTabs'; import InfoTabs from './components/InfoTabs';
import Footer from './components/Footer'; import Footer from './components/Footer';
import './styles/index.css'; import './index.css';
import './styles/variables.css';
import gsap from 'gsap'; import gsap from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger'; import { ScrollTrigger } from 'gsap/ScrollTrigger';
import Lenis from '@studio-freight/lenis' import Lenis from '@studio-freight/lenis'
@@ -13,6 +14,7 @@ gsap.registerPlugin(ScrollTrigger);
function App() { function App() {
const lenisRef = useRef() const lenisRef = useRef()
console.log("App")
useEffect(() => { useEffect(() => {
// Lenis setup // Lenis setup
@@ -83,7 +85,7 @@ function App() {
zIndex: 10, zIndex: 10,
pointerEvents: 'none', pointerEvents: 'none',
textAlign: 'center', 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' }}> <div style={{ overflow: 'hidden' }}>
<h1 className="hero-title" style={{ <h1 className="hero-title" style={{

29
src/canvas/Globe.jsx
View File

@@ -19,8 +19,15 @@ const GlobeMesh = () => {
const groupRef = useRef(); const groupRef = useRef();
const [bordersTexture, setBordersTexture] = useState(null); 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 // Generate Borders Texture using D3
useEffect(() => { useEffect(() => {
let texture = null;
const generateTexture = async () => { const generateTexture = async () => {
try { try {
// Fetch World Topology (small 110m res) // Fetch World Topology (small 110m res)
@@ -49,7 +56,7 @@ const GlobeMesh = () => {
context.stroke(); context.stroke();
// Create Texture // Create Texture
const texture = new THREE.CanvasTexture(canvas); texture = new THREE.CanvasTexture(canvas);
texture.needsUpdate = true; texture.needsUpdate = true;
setBordersTexture(texture); setBordersTexture(texture);
} catch (err) { } catch (err) {
@@ -58,6 +65,10 @@ const GlobeMesh = () => {
}; };
generateTexture(); generateTexture();
return () => {
if (texture) texture.dispose();
};
}, []); }, []);
// Ireland Coordinates // 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 ( return (
<group ref={groupRef}> <group ref={groupRef}>
{/* 1. Base Dark Sphere (blocks background stars/wireframe from showing through backface) */} {/* 1. Base Dark Sphere (blocks background stars/wireframe from showing through backface) */}
<mesh> <mesh>
<sphereGeometry args={[1.95, 64, 64]} /> <sphereGeometry args={[1.95, baseSphereSegments, baseSphereSegments]} />
<meshBasicMaterial color="#000000" /> <meshBasicMaterial color="#000000" />
</mesh> </mesh>
{/* 2. Light Wireframe Sphere - Outer Cage */} {/* 2. Light Wireframe Sphere - Outer Cage */}
<mesh> <mesh>
<sphereGeometry args={[2.0, 32, 32]} /> <sphereGeometry args={[2.0, wireframeSegments, wireframeSegments]} />
<meshBasicMaterial <meshBasicMaterial
color="#444" color="#444"
wireframe={true} wireframe={true}
@@ -91,7 +108,7 @@ const GlobeMesh = () => {
{/* 3. Borders Sphere (Texture) */} {/* 3. Borders Sphere (Texture) */}
{bordersTexture && ( {bordersTexture && (
<mesh> <mesh>
<sphereGeometry args={[2.01, 64, 64]} /> <sphereGeometry args={[2.01, baseSphereSegments, baseSphereSegments]} />
<meshBasicMaterial <meshBasicMaterial
map={bordersTexture} map={bordersTexture}
transparent={true} transparent={true}
@@ -105,11 +122,11 @@ const GlobeMesh = () => {
{/* Ireland Marker */} {/* Ireland Marker */}
<mesh position={irelandPos}> <mesh position={irelandPos}>
<sphereGeometry args={[0.04, 16, 16]} /> <sphereGeometry args={[0.04, markerSegments, markerSegments]} />
<meshBasicMaterial color="#ff4d00" /> <meshBasicMaterial color="#ff4d00" />
</mesh> </mesh>
<mesh position={irelandPos}> <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} /> <meshBasicMaterial color="#ff4d00" side={THREE.DoubleSide} transparent opacity={0.6} />
</mesh> </mesh>
</group> </group>

19
src/canvas/HeroModel.jsx
View File

@@ -8,8 +8,15 @@ const Terrain = () => {
const materialRef = useRef(); const materialRef = useRef();
const noise3D = useMemo(() => createNoise3D(), []); const noise3D = useMemo(() => createNoise3D(), []);
// Create geometry with HIGHER segment count for smoother, denser wave like the reference // Detect mobile device and reduce polygon count accordingly
const geometry = useMemo(() => new THREE.PlaneGeometry(20, 20, 100, 100), []); 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) => { useFrame((state) => {
if (mesh.current) { if (mesh.current) {
@@ -52,6 +59,12 @@ const Terrain = () => {
}; };
const HeroModel = () => { 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 ( return (
<div style={{ width: '100%', height: '100vh', position: 'absolute', top: 0, left: 0, zIndex: 0 }}> <div style={{ width: '100%', height: '100vh', position: 'absolute', top: 0, left: 0, zIndex: 0 }}>
<Canvas <Canvas
@@ -66,7 +79,7 @@ const HeroModel = () => {
<Terrain /> <Terrain />
{/* Fog to fade edges into background color */} {/* Fog to fade edges into background color */}
<fog attach="fog" args={['#e4e4e4', 5, 20]} /> <fog attach="fog" args={[fogColor, 5, 20]} />
</Suspense> </Suspense>
</Canvas> </Canvas>
</div> </div>

138
src/components/ActivityHeatmap.jsx
View File

@@ -6,34 +6,47 @@ const ActivityHeatmap = () => {
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
const [data, setData] = useState([]); const [data, setData] = useState([]);
const [error, setError] = useState(null); const [error, setError] = useState(null);
const [hoveredData, setHoveredData] = useState(null);
useEffect(() => { useEffect(() => {
const fetchData = async () => { const fetchData = async () => {
try { // Initialize default empty data
// 1. Fetch GitHub Data (using proxy) let githubData = { contributions: [] };
const githubRes = await fetch('https://github-contributions-api.jogruber.de/v4/MatissJurevics'); let giteaData = [];
const githubJson = await githubRes.json();
// 2. Fetch Gitea Data try {
const giteaRes = await fetch('/api/gitea/api/v1/users/Matiss/heatmap'); // 1. Fetch GitHub Data (Safe Fetch)
const giteaJson = await giteaRes.json(); // Array of { timestamp, contributions } 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 // 3. Process & Merge
const processData = () => { const processData = () => {
const merged = new Map(); 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 today = new Date();
const oneYearAgo = new Date(); const oneYearAgo = new Date();
oneYearAgo.setDate(today.getDate() - 365); oneYearAgo.setDate(today.getDate() - 365);
// Helper to normalize date string YYYY-MM-DD
const toKey = (date) => date.toISOString().split('T')[0]; const toKey = (date) => date.toISOString().split('T')[0];
// Initialize map with empty days // Initialize map with empty days
@@ -42,11 +55,8 @@ const ActivityHeatmap = () => {
} }
// Fill GitHub // Fill GitHub
// The API usually returns 'contributions' list. if (githubData && githubData.contributions) {
// If structure is complex, we might need adjustments, but let's assume flat list available or extractable. githubData.contributions.forEach(day => {
// Actually, jogruber V4 returns: { total: {}, contributions: [ { date, count, level } ... ] }
if (githubJson.contributions) {
githubJson.contributions.forEach(day => {
if (merged.has(day.date)) { if (merged.has(day.date)) {
const curr = merged.get(day.date); const curr = merged.get(day.date);
curr.github = day.count; curr.github = day.count;
@@ -56,9 +66,8 @@ const ActivityHeatmap = () => {
} }
// Fill Gitea // Fill Gitea
// Gitea heatmap endpoint returns array of { timestamp: unix_timestamp, contributions: count } if (Array.isArray(giteaData)) {
if (Array.isArray(giteaJson)) { giteaData.forEach(item => {
giteaJson.forEach(item => {
const d = new Date(item.timestamp * 1000); const d = new Date(item.timestamp * 1000);
const key = toKey(d); const key = toKey(d);
if (merged.has(key)) { if (merged.has(key)) {
@@ -75,8 +84,8 @@ const ActivityHeatmap = () => {
const processed = processData(); const processed = processData();
setData(processed); setData(processed);
} catch (err) { } catch (err) {
console.error("Error fetching activity:", err); console.error("Critical error in ActivityHeatmap:", err);
setError(err.message); // setError(err.message); // Suppress global error to show partial data
} finally { } finally {
setLoading(false); setLoading(false);
} }
@@ -95,7 +104,7 @@ const ActivityHeatmap = () => {
svg.selectAll("*").remove(); svg.selectAll("*").remove();
const g = svg.append("g") 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 // Isometric projection
// x grid runs diagonally right-down, y grid runs diagonally left-down // x grid runs diagonally right-down, y grid runs diagonally left-down
@@ -174,18 +183,18 @@ const ActivityHeatmap = () => {
// Draw Gitea Bar (Bottom) // Draw Gitea Bar (Bottom)
if (d.gitea > 0) { 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) // Draw GitHub Bar (Top)
// Adjust y position up by gitea height // Adjust y position up by gitea height
if (d.github > 0) { 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 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 // Top Face
const pathTop = `M${x} ${y - z} const pathTop = `M${x} ${y - z}
L${x + w} ${y + h - z} L${x + w} ${y + h - z}
@@ -219,11 +228,24 @@ const ActivityHeatmap = () => {
group.append("title").text(tooltipText); group.append("title").text(tooltipText);
// Hover effect // 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]); }, [data, loading]);
@@ -238,23 +260,25 @@ const ActivityHeatmap = () => {
if (error) { if (error) {
return ( return (
<div style={{ height: '600px', display: 'flex', alignItems: 'center', justifyContent: 'center', background: '#0a0a0a', color: '#ff4d00' }}> <div style={{ height: '600px', display: 'flex', alignItems: 'center', justifyContent: 'center', background: '#0a0a0a', color: '#ff4d00', flexDirection: 'column' }}>
DATA FLUX ERROR <div>DATA FLUX ERROR</div>
<div style={{ fontSize: '0.8rem', marginTop: '10px', color: '#888' }}>{error}</div>
</div> </div>
); );
} }
return ( return (
<section style={{ <section style={{
height: '600px', width: '100%',
background: '#0a0a0a', height: '100%',
color: '#e4e4e4', color: '#e4e4e4',
display: 'flex', display: 'flex',
flexDirection: 'column', flexDirection: 'column',
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center',
padding: '40px 20px', 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' }}> <h2 className="uppercase" style={{ fontSize: '1.5rem', marginBottom: '10px', color: '#888' }}>
Contribution Topography Contribution Topography
@@ -268,7 +292,37 @@ const ActivityHeatmap = () => {
</div> </div>
</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> </section>
); );
}; };

29
src/components/Footer.jsx
View File

@@ -18,10 +18,9 @@ const Footer = () => {
<div> <div>
<h4 className="uppercase" style={{ marginBottom: '20px', color: '#666' }}>Socials</h4> <h4 className="uppercase" style={{ marginBottom: '20px', color: '#666' }}>Socials</h4>
<ul style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}> <ul style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
<li><a href="#">Instagram</a></li> <li><a href="https://instagram.com/matiss.j20">Instagram</a></li>
<li><a href="#">Twitter / X</a></li> <li><a href="https://www.linkedin.com/in/matiss-jurevics-121162240/">LinkedIn</a></li>
<li><a href="#">LinkedIn</a></li> <li><a href="https://github.com/MatissJurevics">GitHub</a></li>
<li><a href="#">GitHub</a></li>
</ul> </ul>
</div> </div>
@@ -37,20 +36,20 @@ const Footer = () => {
<p style={{ marginBottom: '20px', color: '#888' }}> <p style={{ marginBottom: '20px', color: '#888' }}>
Occasional updates on new projects and experiments. Occasional updates on new projects and experiments.
</p> </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 <input
className="footer-input"
type="email" type="email"
name="email"
placeholder="email address" 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', background: 'transparent',
border: 'none', border: 'none',
color: '#ff4d00', color: '#ff4d00',
@@ -60,7 +59,7 @@ const Footer = () => {
}}> }}>
Subscribe Subscribe
</button> </button>
</div> </form>
</div> </div>
</div> </div>

193
src/components/GitHistory.jsx Normal file
View File

@@ -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;

47
src/components/GitSection.jsx Normal file
View File

@@ -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;

117
src/components/GithubHistory.jsx
View File

@@ -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;

37
src/components/InfoTabs.jsx
View File

@@ -1,7 +1,6 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import WhereAmI from './WhereAmI'; import WhereAmI from './WhereAmI';
import GithubHistory from './GithubHistory'; import GitSection from './GitSection';
import ActivityHeatmap from './ActivityHeatmap';
const InfoTabs = () => { const InfoTabs = () => {
const [activeTab, setActiveTab] = useState('location'); const [activeTab, setActiveTab] = useState('location');
@@ -34,12 +33,12 @@ const InfoTabs = () => {
Where Am I? Where Am I?
</button> </button>
<button <button
onClick={() => setActiveTab('github')} onClick={() => setActiveTab('git')}
style={{ style={{
background: 'transparent', background: 'transparent',
border: 'none', border: 'none',
borderBottom: activeTab === 'github' ? '2px solid #ff4d00' : '2px solid transparent', borderBottom: activeTab === 'git' ? '2px solid #ff4d00' : '2px solid transparent',
color: activeTab === 'github' ? '#fff' : '#666', color: activeTab === 'git' ? '#fff' : '#666',
padding: '10px 20px', padding: '10px 20px',
cursor: 'pointer', cursor: 'pointer',
fontSize: '0.9rem', fontSize: '0.9rem',
@@ -48,32 +47,18 @@ const InfoTabs = () => {
transition: 'all 0.3s ease' transition: 'all 0.3s ease'
}} }}
> >
History Git Activity
</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
</button> </button>
</div> </div>
{/* Content Area */} {/* Content Area */}
<div> <div>
{activeTab === 'location' && <WhereAmI />} <div style={{ display: activeTab === 'location' ? 'block' : 'none' }}>
{activeTab === 'github' && <GithubHistory />} <WhereAmI />
{activeTab === 'activity' && <ActivityHeatmap />} </div>
<div style={{ display: activeTab === 'git' ? 'block' : 'none' }}>
<GitSection />
</div>
</div> </div>
</div> </div>
); );

124
src/components/ProductGrid.jsx
View File

@@ -6,11 +6,12 @@ import '../styles/variables.css';
gsap.registerPlugin(ScrollTrigger); 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 = () => { const ProductGrid = () => {
@@ -18,8 +19,63 @@ const ProductGrid = () => {
const titleRef = useRef(null); const titleRef = useRef(null);
const itemRefs = useRef([]); const itemRefs = useRef([]);
const [selectedProject, setSelectedProject] = useState(null); const [selectedProject, setSelectedProject] = useState(null);
const [products, setProducts] = useState([]);
useEffect(() => { 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(() => { const ctx = gsap.context(() => {
// Animate Title // Animate Title
gsap.from(titleRef.current, { gsap.from(titleRef.current, {
@@ -52,46 +108,52 @@ const ProductGrid = () => {
}, gridRef); }, gridRef);
return () => ctx.revert(); return () => ctx.revert();
}, []); }, [products]);
const onEnter = ({ currentTarget }) => { 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('.product-img'), { scale: 1.1, duration: 0.3 });
gsap.to(currentTarget.querySelector('.indicator'), { backgroundColor: '#ff4d00', scale: 1.5, duration: 0.3 }); gsap.to(currentTarget.querySelector('.indicator'), { backgroundColor: '#ff4d00', scale: 1.5, duration: 0.3 });
}; };
const onLeave = ({ currentTarget }) => { 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('.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 ( return (
<> <>
<section id="work" ref={gridRef} style={{ <section id="work" ref={gridRef} style={{
padding: '100px 20px', padding: '100px 20px',
background: '#fff', background: 'var(--bg-color, #fff)',
minHeight: '100vh' minHeight: '100vh'
}}> }}>
<div style={{ maxWidth: '1400px', margin: '0 auto' }}> <div style={{ maxWidth: '1400px', margin: '0 auto' }}>
<div style={{ <div style={{
marginBottom: '60px', marginBottom: '60px',
borderBottom: '1px solid #000', borderBottom: '1px solid var(--text-main, #000)',
paddingBottom: '20px', paddingBottom: '20px',
display: 'flex', display: 'flex',
justifyContent: 'space-between', justifyContent: 'space-between',
alignItems: 'baseline' alignItems: 'baseline'
}} ref={titleRef}> }} ref={titleRef}>
<h2 className="uppercase" style={{ fontSize: '2rem', margin: 0 }}>Selected Work</h2> <h2 className="uppercase" style={{ fontSize: '2rem', margin: 0, color: 'var(--text-main, #000)' }}>Selected Work</h2>
<span className="mono" style={{ fontSize: '0.9rem', color: '#666' }}>DESIGN / CODE</span> <span className="mono" style={{ fontSize: '0.9rem', color: 'var(--text-dim, #666)' }}>DESIGN / CODE</span>
</div> </div>
<div style={{ <div style={{
display: 'grid', display: 'grid',
gridTemplateColumns: 'repeat(auto-fill, minmax(350px, 1fr))', gridTemplateColumns: 'repeat(auto-fill, minmax(350px, 1fr))',
gap: '2px', // Tight gap for grid lines effect gap: '2px', // Tight gap for grid lines effect
background: '#ccc', // Color of grid lines background: 'var(--grid-line, #ccc)', // Color of grid lines
border: '1px solid #ccc' border: '1px solid var(--grid-line, #ccc)'
}}> }}>
{products.map((p, i) => ( {products.map((p, i) => (
<div <div
@@ -99,7 +161,7 @@ const ProductGrid = () => {
ref={el => itemRefs.current[i] = el} ref={el => itemRefs.current[i] = el}
className="product-item" className="product-item"
style={{ style={{
background: '#f5f5f5', background: 'var(--product-bg, #f5f5f5)',
height: '450px', height: '450px',
padding: '30px', padding: '30px',
display: 'flex', display: 'flex',
@@ -114,33 +176,43 @@ const ProductGrid = () => {
onClick={() => setSelectedProject(p)} onClick={() => setSelectedProject(p)}
> >
<div style={{ display: 'flex', justifyContent: 'space-between', width: '100%', zIndex: 2 }}> <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={{ <div className="indicator" style={{
width: '8px', width: '8px',
height: '8px', height: '8px',
background: '#ccc', background: 'var(--grid-line, #ccc)',
borderRadius: '50%' borderRadius: '50%'
}}></div> }}></div>
</div> </div>
{/* Placeholder for Product Image */} {/* Product Image or Placeholder */}
<div className="product-img" style={{ <div className="product-img" style={{
flex: 1, flex: 1,
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center',
fontSize: '5rem', fontSize: '3rem',
color: '#e0e0e0', color: 'var(--text-dim, #e0e0e0)',
fontWeight: 800, 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>
<div style={{ zIndex: 2 }}> <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', color: 'var(--text-main, #000)' }}>{p.name}</h3>
<div style={{ display: 'flex', justifyContent: 'space-between', fontSize: '0.9rem', color: '#666' }}> <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: '0.9rem', color: 'var(--text-dim, #666)' }}>
<span>{p.desc}</span> <span style={{ maxWidth: '70%', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{p.desc}</span>
<span>{p.price}</span> <span>{p.price}</span>
</div> </div>
</div> </div>

25
src/components/ProjectModal.jsx
View File

@@ -102,9 +102,16 @@ const ProjectModal = ({ project, onClose }) => {
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
justifyContent: '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> </div>
{/* Right: Info */} {/* Right: Info */}
@@ -118,23 +125,18 @@ const ProjectModal = ({ project, onClose }) => {
}}> }}>
<div> <div>
<span className="mono" style={{ color: '#ff4d00', marginBottom: '10px', display: 'block' }}> <span className="mono" style={{ color: '#ff4d00', marginBottom: '10px', display: 'block' }}>
{project.price} {/* Using 'price' for Year based on previous data struct */} {project.price}
</span> </span>
<h2 className="uppercase" style={{ fontSize: '3rem', lineHeight: 1, marginBottom: '20px' }}> <h2 className="uppercase" style={{ fontSize: '3rem', lineHeight: 1, marginBottom: '20px' }}>
{project.name} {project.name}
</h2> </h2>
<p style={{ fontSize: '1.1rem', color: '#444', marginBottom: '40px', lineHeight: 1.6 }}> <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> </p>
<div className="mono" style={{ fontSize: '0.9rem', color: '#666' }}> <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>
</div> </div>
@@ -152,6 +154,7 @@ const ProjectModal = ({ project, onClose }) => {
}} }}
onMouseEnter={(e) => e.target.style.background = '#ff4d00'} onMouseEnter={(e) => e.target.style.background = '#ff4d00'}
onMouseLeave={(e) => e.target.style.background = '#000'} onMouseLeave={(e) => e.target.style.background = '#000'}
onClick={() => window.open(project.url, '_blank')}
> >
View Live View Live
</button> </button>

62
src/index.css
View File

@@ -18,14 +18,13 @@ a {
color: #646cff; color: #646cff;
text-decoration: inherit; text-decoration: inherit;
} }
a:hover { a:hover {
color: #535bf2; color: #535bf2;
} }
body { body {
margin: 0; margin: 0;
display: flex;
place-items: center;
min-width: 320px; min-width: 320px;
min-height: 100vh; min-height: 100vh;
} }
@@ -35,6 +34,48 @@ h1 {
line-height: 1.1; 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 { button {
border-radius: 8px; border-radius: 8px;
border: 1px solid transparent; border: 1px solid transparent;
@@ -46,9 +87,11 @@ button {
cursor: pointer; cursor: pointer;
transition: border-color 0.25s; transition: border-color 0.25s;
} }
button:hover { button:hover {
border-color: #646cff; border-color: #646cff;
} }
button:focus, button:focus,
button:focus-visible { button:focus-visible {
outline: 4px auto -webkit-focus-ring-color; outline: 4px auto -webkit-focus-ring-color;
@@ -59,10 +102,25 @@ button:focus-visible {
color: #213547; color: #213547;
background-color: #ffffff; background-color: #ffffff;
} }
a:hover { a:hover {
color: #747bff; color: #747bff;
} }
button { button {
background-color: #f9f9f9; 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;
}
}

2
src/main.jsx
View File

@@ -1,7 +1,7 @@
import React from 'react' import React from 'react'
import ReactDOM from 'react-dom/client' import ReactDOM from 'react-dom/client'
import App from './App.jsx' import App from './App.jsx'
import './styles/index.css' import './index.css'
ReactDOM.createRoot(document.getElementById('root')).render( ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode> <React.StrictMode>

42
src/styles/index.css
View File

@@ -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;
}

24
src/styles/variables.css
View File

@@ -1,10 +1,12 @@
:root { :root {
/* Teenage Engineering Palette */ /* Teenage Engineering Palette - Dark mode default */
--bg-color: #e4e4e4; --bg-color: #0a0a0a;
--text-main: #000000; --text-main: #e4e4e4;
--text-dim: #666666; --text-dim: #888888;
--accent-orange: #ff4d00; --accent-orange: #ff4d00;
--grid-line: #cccccc; --grid-line: #333333;
--product-bg: #1a1a1a;
--product-bg-hover: #2a2a2a;
/* Typos */ /* Typos */
--font-main: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; --font-main: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
@@ -13,3 +15,15 @@
/* Layout */ /* Layout */
--header-height: 60px; --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;
}
}

16
vite.config.js
View File

@@ -1,4 +1,4 @@
import { defineConfig } from 'vite' import { defineConfig } from 'vite' // HMR Trigger
import react from '@vitejs/plugin-react' import react from '@vitejs/plugin-react'
// https://vite.dev/config/ // https://vite.dev/config/
@@ -9,7 +9,19 @@ export default defineConfig({
'/api/gitea': { '/api/gitea': {
target: 'https://git.mati.ss', target: 'https://git.mati.ss',
changeOrigin: true, 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);
});
},
} }
} }
} }