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

Compare commits

base: Matiss:8af2ce694164789486452dfc6faeb36d6f147040
Branches Tags
Matiss:main
..
compare: Matiss:main
Branches Tags
Matiss:main

10 Commits
8af2ce6941 ... main

Author SHA1 Message Date
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
14 changed files with 147 additions and 34 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

19
Dockerfile Normal file
View File

@@ -0,0 +1,19 @@
# 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
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>

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

3
src/App.jsx
View File

@@ -5,6 +5,7 @@ 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 './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'
@@ -83,7 +84,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>

1
src/components/ActivityHeatmap.jsx
View File

@@ -37,6 +37,7 @@ const ActivityHeatmap = () => {
} }
} catch (e) { } catch (e) {
console.warn("Gitea API error:", 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

1
src/components/GitHistory.jsx
View File

@@ -61,6 +61,7 @@ const GitHistory = () => {
return commitsArrays.flat(); return commitsArrays.flat();
} catch (err) { } catch (err) {
console.warn('Gitea history error:', 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 []; return [];
} }
}; };

8
src/components/InfoTabs.jsx
View File

@@ -53,8 +53,12 @@ const InfoTabs = () => {
{/* Content Area */} {/* Content Area */}
<div> <div>
{activeTab === 'location' && <WhereAmI />} <div style={{ display: activeTab === 'location' ? 'block' : 'none' }}>
{activeTab === 'git' && <GitSection />} <WhereAmI />
</div>
<div style={{ display: activeTab === 'git' ? 'block' : 'none' }}>
<GitSection />
</div>
</div> </div>
</div> </div>
); );

34
src/components/ProductGrid.jsx
View File

@@ -111,43 +111,49 @@ const ProductGrid = () => {
}, [products]); }, [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
@@ -155,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',
@@ -176,7 +182,7 @@ const ProductGrid = () => {
<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>
@@ -188,7 +194,7 @@ const ProductGrid = () => {
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center',
fontSize: '3rem', fontSize: '3rem',
color: '#e0e0e0', color: 'var(--text-dim, #e0e0e0)',
fontWeight: 800, fontWeight: 800,
userSelect: 'none', userSelect: 'none',
textAlign: 'center', textAlign: 'center',
@@ -204,8 +210,8 @@ const ProductGrid = () => {
</div> </div>
<div style={{ zIndex: 2 }}> <div style={{ zIndex: 2 }}>
<h3 style={{ fontSize: '1.5rem', marginBottom: '5px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{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 style={{ maxWidth: '70%', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{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>

13
src/index.css
View File

@@ -110,4 +110,17 @@ button:focus-visible {
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;
}
} }

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

14
vite.config.js
View File

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