feat: initialize reactjs project using vite
This commit is contained in:
Melvin Ragusa
@@ -1,33 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
<title>Page Not Found</title>
|
|
||||||
|
|
||||||
<style media="screen">
|
|
||||||
body { background: #ECEFF1; color: rgba(0,0,0,0.87); font-family: Roboto, Helvetica, Arial, sans-serif; margin: 0; padding: 0; }
|
|
||||||
#message { background: white; max-width: 360px; margin: 100px auto 16px; padding: 32px 24px 16px; border-radius: 3px; }
|
|
||||||
#message h3 { color: #888; font-weight: normal; font-size: 16px; margin: 16px 0 12px; }
|
|
||||||
#message h2 { color: #ffa100; font-weight: bold; font-size: 16px; margin: 0 0 8px; }
|
|
||||||
#message h1 { font-size: 22px; font-weight: 300; color: rgba(0,0,0,0.6); margin: 0 0 16px;}
|
|
||||||
#message p { line-height: 140%; margin: 16px 0 24px; font-size: 14px; }
|
|
||||||
#message a { display: block; text-align: center; background: #039be5; text-transform: uppercase; text-decoration: none; color: white; padding: 16px; border-radius: 4px; }
|
|
||||||
#message, #message a { box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); }
|
|
||||||
#load { color: rgba(0,0,0,0.4); text-align: center; font-size: 13px; }
|
|
||||||
@media (max-width: 600px) {
|
|
||||||
body, #message { margin-top: 0; background: white; box-shadow: none; }
|
|
||||||
body { border-top: 16px solid #ffa100; }
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div id="message">
|
|
||||||
<h2>404</h2>
|
|
||||||
<h1>Page Not Found</h1>
|
|
||||||
<p>The specified file was not found on this website. Please check the URL for mistakes and try again.</p>
|
|
||||||
<h3>Why am I seeing this?</h3>
|
|
||||||
<p>This page was generated by the Firebase Command-Line Interface. To modify it, edit the <code>404.html</code> file in your project's configured <code>public</code> directory.</p>
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
3
build/assets/index-BdWk3V4v.js
Normal file
3
build/assets/index-BdWk3V4v.js
Normal file
File diff suppressed because one or more lines are too long
1
build/assets/index-DBnSnrbo.css
Normal file
1
build/assets/index-DBnSnrbo.css
Normal file
File diff suppressed because one or more lines are too long
1
build/assets/motion-BIOHP8Ul.js
Normal file
1
build/assets/motion-BIOHP8Ul.js
Normal file
File diff suppressed because one or more lines are too long
4041
build/assets/three-CMo9PyBJ.js
Normal file
4041
build/assets/three-CMo9PyBJ.js
Normal file
File diff suppressed because one or more lines are too long
5
build/favicon.svg
Normal file
5
build/favicon.svg
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
|
||||||
|
<rect width="100" height="100" rx="20" fill="#0F1410"/>
|
||||||
|
<text x="50" y="62" font-family="system-ui, sans-serif" font-size="36" font-weight="700" text-anchor="middle" fill="#E1E3DF">R</text>
|
||||||
|
<text x="68" y="62" font-family="system-ui, sans-serif" font-size="36" font-weight="700" text-anchor="middle" fill="#7FD998">IT</text>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 401 B |
@@ -1,89 +1,21 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html lang="de">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||||
<title>Welcome to Firebase Hosting</title>
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<meta name="description" content="Ragusa IT-Consulting - Professionelle Webentwicklung, IT-Beratung und technischer Support" />
|
||||||
<!-- update the version number as needed -->
|
<meta name="theme-color" content="#0F1410" />
|
||||||
<script defer src="/__/firebase/12.8.0/firebase-app-compat.js"></script>
|
<title>Ragusa IT-Consulting | Webentwicklung & IT-Beratung</title>
|
||||||
<!-- include only the Firebase features as you need -->
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
<script defer src="/__/firebase/12.8.0/firebase-auth-compat.js"></script>
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
<script defer src="/__/firebase/12.8.0/firebase-database-compat.js"></script>
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
|
||||||
<script defer src="/__/firebase/12.8.0/firebase-firestore-compat.js"></script>
|
<script type="module" crossorigin src="/assets/index-BdWk3V4v.js"></script>
|
||||||
<script defer src="/__/firebase/12.8.0/firebase-functions-compat.js"></script>
|
<link rel="modulepreload" crossorigin href="/assets/three-CMo9PyBJ.js">
|
||||||
<script defer src="/__/firebase/12.8.0/firebase-messaging-compat.js"></script>
|
<link rel="modulepreload" crossorigin href="/assets/motion-BIOHP8Ul.js">
|
||||||
<script defer src="/__/firebase/12.8.0/firebase-storage-compat.js"></script>
|
<link rel="stylesheet" crossorigin href="/assets/index-DBnSnrbo.css">
|
||||||
<script defer src="/__/firebase/12.8.0/firebase-analytics-compat.js"></script>
|
|
||||||
<script defer src="/__/firebase/12.8.0/firebase-remote-config-compat.js"></script>
|
|
||||||
<script defer src="/__/firebase/12.8.0/firebase-performance-compat.js"></script>
|
|
||||||
<!--
|
|
||||||
initialize the SDK after all desired features are loaded, set useEmulator to false
|
|
||||||
to avoid connecting the SDK to running emulators.
|
|
||||||
-->
|
|
||||||
<script defer src="/__/firebase/init.js?useEmulator=true"></script>
|
|
||||||
|
|
||||||
<style media="screen">
|
|
||||||
body { background: #ECEFF1; color: rgba(0,0,0,0.87); font-family: Roboto, Helvetica, Arial, sans-serif; margin: 0; padding: 0; }
|
|
||||||
#message { background: white; max-width: 360px; margin: 100px auto 16px; padding: 32px 24px; border-radius: 3px; }
|
|
||||||
#message h2 { color: #ffa100; font-weight: bold; font-size: 16px; margin: 0 0 8px; }
|
|
||||||
#message h1 { font-size: 22px; font-weight: 300; color: rgba(0,0,0,0.6); margin: 0 0 16px;}
|
|
||||||
#message p { line-height: 140%; margin: 16px 0 24px; font-size: 14px; }
|
|
||||||
#message a { display: block; text-align: center; background: #039be5; text-transform: uppercase; text-decoration: none; color: white; padding: 16px; border-radius: 4px; }
|
|
||||||
#message, #message a { box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); }
|
|
||||||
#load { color: rgba(0,0,0,0.4); text-align: center; font-size: 13px; }
|
|
||||||
@media (max-width: 600px) {
|
|
||||||
body, #message { margin-top: 0; background: white; box-shadow: none; }
|
|
||||||
body { border-top: 16px solid #ffa100; }
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="message">
|
<div id="root"></div>
|
||||||
<h2>Welcome</h2>
|
|
||||||
<h1>Firebase Hosting Setup Complete</h1>
|
|
||||||
<p>You're seeing this because you've successfully setup Firebase Hosting. Now it's time to go build something extraordinary!</p>
|
|
||||||
<a target="_blank" href="https://firebase.google.com/docs/hosting/">Open Hosting Documentation</a>
|
|
||||||
</div>
|
|
||||||
<p id="load">Firebase SDK Loading…</p>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
document.addEventListener('DOMContentLoaded', function() {
|
|
||||||
const loadEl = document.querySelector('#load');
|
|
||||||
// // 🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥
|
|
||||||
// // The Firebase SDK is initialized and available here!
|
|
||||||
//
|
|
||||||
// firebase.auth().onAuthStateChanged(user => { });
|
|
||||||
// firebase.database().ref('/path/to/ref').on('value', snapshot => { });
|
|
||||||
// firebase.firestore().doc('/foo/bar').get().then(() => { });
|
|
||||||
// firebase.functions().httpsCallable('yourFunction')().then(() => { });
|
|
||||||
// firebase.messaging().requestPermission().then(() => { });
|
|
||||||
// firebase.storage().ref('/path/to/ref').getDownloadURL().then(() => { });
|
|
||||||
// firebase.analytics(); // call to activate
|
|
||||||
// firebase.analytics().logEvent('tutorial_completed');
|
|
||||||
// firebase.performance(); // call to activate
|
|
||||||
//
|
|
||||||
// // 🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥
|
|
||||||
|
|
||||||
try {
|
|
||||||
let app = firebase.app();
|
|
||||||
let features = [
|
|
||||||
'auth',
|
|
||||||
'database',
|
|
||||||
'firestore',
|
|
||||||
'functions',
|
|
||||||
'messaging',
|
|
||||||
'storage',
|
|
||||||
'analytics',
|
|
||||||
'remoteConfig',
|
|
||||||
'performance',
|
|
||||||
].filter(feature => typeof app[feature] === 'function');
|
|
||||||
loadEl.textContent = `Firebase SDK loaded with ${features.join(', ')}`;
|
|
||||||
} catch (e) {
|
|
||||||
console.error(e);
|
|
||||||
loadEl.textContent = 'Error loading the Firebase SDK, check the console.';
|
|
||||||
}
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
18
index.html
Normal file
18
index.html
Normal file
@@ -0,0 +1,18 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<meta name="description" content="Ragusa IT-Consulting - Professionelle Webentwicklung, IT-Beratung und technischer Support" />
|
||||||
|
<meta name="theme-color" content="#0F1410" />
|
||||||
|
<title>Ragusa IT-Consulting | Webentwicklung & IT-Beratung</title>
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="root"></div>
|
||||||
|
<script type="module" src="/src/main.tsx"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
2660
package-lock.json
generated
Normal file
2660
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
35
package.json
Normal file
35
package.json
Normal file
@@ -0,0 +1,35 @@
|
|||||||
|
{
|
||||||
|
"name": "ragusaitweb",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"description": "Ragusa IT-Consulting - Web Development & IT Support",
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "tsc && vite build",
|
||||||
|
"preview": "vite preview"
|
||||||
|
},
|
||||||
|
"repository": {
|
||||||
|
"type": "git",
|
||||||
|
"url": "git+https://github.com/ragusa-it/ragusaitweb.git"
|
||||||
|
},
|
||||||
|
"author": "Ragusa IT-Consulting",
|
||||||
|
"license": "ISC",
|
||||||
|
"dependencies": {
|
||||||
|
"@emailjs/browser": "^4.4.1",
|
||||||
|
"@react-three/drei": "^10.7.7",
|
||||||
|
"@react-three/fiber": "^9.5.0",
|
||||||
|
"motion": "^12.28.1",
|
||||||
|
"react": "^19.2.3",
|
||||||
|
"react-dom": "^19.2.3",
|
||||||
|
"react-router-dom": "^7.12.0",
|
||||||
|
"three": "^0.182.0"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@types/react": "^19.2.9",
|
||||||
|
"@types/react-dom": "^19.2.3",
|
||||||
|
"@types/three": "^0.182.0",
|
||||||
|
"@vitejs/plugin-react": "^5.1.2",
|
||||||
|
"typescript": "^5.9.3",
|
||||||
|
"vite": "^7.3.1"
|
||||||
|
}
|
||||||
|
}
|
||||||
5
public/favicon.svg
Normal file
5
public/favicon.svg
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
|
||||||
|
<rect width="100" height="100" rx="20" fill="#0F1410"/>
|
||||||
|
<text x="50" y="62" font-family="system-ui, sans-serif" font-size="36" font-weight="700" text-anchor="middle" fill="#E1E3DF">R</text>
|
||||||
|
<text x="68" y="62" font-family="system-ui, sans-serif" font-size="36" font-weight="700" text-anchor="middle" fill="#7FD998">IT</text>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 401 B |
22
src/App.tsx
Normal file
22
src/App.tsx
Normal file
@@ -0,0 +1,22 @@
|
|||||||
|
import { BrowserRouter, Routes, Route } from 'react-router-dom';
|
||||||
|
import { LanguageProvider } from './i18n';
|
||||||
|
import { Navbar, Footer, CustomCursor } from './components/layout';
|
||||||
|
import { Home, About, Contact } from './pages';
|
||||||
|
import './styles/global.css';
|
||||||
|
|
||||||
|
export function App() {
|
||||||
|
return (
|
||||||
|
<LanguageProvider>
|
||||||
|
<BrowserRouter>
|
||||||
|
<CustomCursor />
|
||||||
|
<Navbar />
|
||||||
|
<Routes>
|
||||||
|
<Route path="/" element={<Home />} />
|
||||||
|
<Route path="/about" element={<About />} />
|
||||||
|
<Route path="/contact" element={<Contact />} />
|
||||||
|
</Routes>
|
||||||
|
<Footer />
|
||||||
|
</BrowserRouter>
|
||||||
|
</LanguageProvider>
|
||||||
|
);
|
||||||
|
}
|
||||||
20
src/components/effects/Scene3D.module.css
Normal file
20
src/components/effects/Scene3D.module.css
Normal file
@@ -0,0 +1,20 @@
|
|||||||
|
.container {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
z-index: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container canvas {
|
||||||
|
touch-action: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Fade out on smaller screens */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.container {
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
}
|
||||||
96
src/components/effects/Scene3D.tsx
Normal file
96
src/components/effects/Scene3D.tsx
Normal file
@@ -0,0 +1,96 @@
|
|||||||
|
import { useRef, useMemo } from 'react';
|
||||||
|
import { Canvas, useFrame } from '@react-three/fiber';
|
||||||
|
import { Float, MeshDistortMaterial } from '@react-three/drei';
|
||||||
|
import * as THREE from 'three';
|
||||||
|
import styles from './Scene3D.module.css';
|
||||||
|
|
||||||
|
function FloatingShape() {
|
||||||
|
const meshRef = useRef<THREE.Mesh>(null);
|
||||||
|
|
||||||
|
useFrame((state) => {
|
||||||
|
if (meshRef.current) {
|
||||||
|
meshRef.current.rotation.x = state.clock.elapsedTime * 0.1;
|
||||||
|
meshRef.current.rotation.y = state.clock.elapsedTime * 0.15;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Float
|
||||||
|
speed={2}
|
||||||
|
rotationIntensity={0.5}
|
||||||
|
floatIntensity={1}
|
||||||
|
>
|
||||||
|
<mesh ref={meshRef} scale={2.5}>
|
||||||
|
<icosahedronGeometry args={[1, 1]} />
|
||||||
|
<MeshDistortMaterial
|
||||||
|
color="#7FD998"
|
||||||
|
emissive="#004D2A"
|
||||||
|
emissiveIntensity={0.3}
|
||||||
|
roughness={0.4}
|
||||||
|
metalness={0.8}
|
||||||
|
distort={0.3}
|
||||||
|
speed={2}
|
||||||
|
/>
|
||||||
|
</mesh>
|
||||||
|
</Float>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function ParticleField() {
|
||||||
|
const count = 100;
|
||||||
|
|
||||||
|
const positions = useMemo(() => {
|
||||||
|
const pos = new Float32Array(count * 3);
|
||||||
|
for (let i = 0; i < count; i++) {
|
||||||
|
pos[i * 3] = (Math.random() - 0.5) * 20;
|
||||||
|
pos[i * 3 + 1] = (Math.random() - 0.5) * 20;
|
||||||
|
pos[i * 3 + 2] = (Math.random() - 0.5) * 20;
|
||||||
|
}
|
||||||
|
return pos;
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const pointsRef = useRef<THREE.Points>(null);
|
||||||
|
|
||||||
|
useFrame((state) => {
|
||||||
|
if (pointsRef.current) {
|
||||||
|
pointsRef.current.rotation.y = state.clock.elapsedTime * 0.02;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
return (
|
||||||
|
<points ref={pointsRef}>
|
||||||
|
<bufferGeometry>
|
||||||
|
<bufferAttribute
|
||||||
|
attach="attributes-position"
|
||||||
|
args={[positions, 3]}
|
||||||
|
/>
|
||||||
|
</bufferGeometry>
|
||||||
|
<pointsMaterial
|
||||||
|
size={0.05}
|
||||||
|
color="#7FD998"
|
||||||
|
transparent
|
||||||
|
opacity={0.6}
|
||||||
|
sizeAttenuation
|
||||||
|
/>
|
||||||
|
</points>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function Scene3D() {
|
||||||
|
return (
|
||||||
|
<div className={styles.container}>
|
||||||
|
<Canvas
|
||||||
|
camera={{ position: [0, 0, 8], fov: 45 }}
|
||||||
|
dpr={[1, 2]}
|
||||||
|
gl={{ antialias: true, alpha: true }}
|
||||||
|
>
|
||||||
|
<ambientLight intensity={0.5} />
|
||||||
|
<directionalLight position={[10, 10, 5]} intensity={1} />
|
||||||
|
<pointLight position={[-10, -10, -5]} intensity={0.5} color="#7FD998" />
|
||||||
|
|
||||||
|
<FloatingShape />
|
||||||
|
<ParticleField />
|
||||||
|
</Canvas>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
1
src/components/effects/index.ts
Normal file
1
src/components/effects/index.ts
Normal file
@@ -0,0 +1 @@
|
|||||||
|
export { Scene3D } from './Scene3D';
|
||||||
67
src/components/layout/CustomCursor.module.css
Normal file
67
src/components/layout/CustomCursor.module.css
Normal file
@@ -0,0 +1,67 @@
|
|||||||
|
.cursor {
|
||||||
|
position: fixed;
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
border: 2px solid var(--md-sys-color-primary);
|
||||||
|
border-radius: 50%;
|
||||||
|
pointer-events: none;
|
||||||
|
z-index: 9999;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
transition:
|
||||||
|
width 0.15s ease-out,
|
||||||
|
height 0.15s ease-out,
|
||||||
|
border-color 0.15s ease-out,
|
||||||
|
background-color 0.15s ease-out,
|
||||||
|
opacity 0.15s ease-out;
|
||||||
|
mix-blend-mode: difference;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cursorDot {
|
||||||
|
position: fixed;
|
||||||
|
width: 6px;
|
||||||
|
height: 6px;
|
||||||
|
background-color: var(--md-sys-color-primary);
|
||||||
|
border-radius: 50%;
|
||||||
|
pointer-events: none;
|
||||||
|
z-index: 10000;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
transition: opacity 0.15s ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cursor.pointer {
|
||||||
|
width: 60px;
|
||||||
|
height: 60px;
|
||||||
|
border-color: var(--md-sys-color-primary);
|
||||||
|
background-color: rgba(127, 217, 152, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.cursor.clicking {
|
||||||
|
width: 35px;
|
||||||
|
height: 35px;
|
||||||
|
background-color: rgba(127, 217, 152, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.cursor.hidden,
|
||||||
|
.cursorDot.hidden {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Hide on touch devices and when reduced motion is preferred */
|
||||||
|
@media (hover: none), (prefers-reduced-motion: reduce) {
|
||||||
|
.cursor,
|
||||||
|
.cursorDot {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Add global cursor hide for devices with custom cursor */
|
||||||
|
@media (hover: hover) {
|
||||||
|
:global(body) {
|
||||||
|
cursor: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(a),
|
||||||
|
:global(button) {
|
||||||
|
cursor: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
74
src/components/layout/CustomCursor.tsx
Normal file
74
src/components/layout/CustomCursor.tsx
Normal file
@@ -0,0 +1,74 @@
|
|||||||
|
import { useState, useEffect, useCallback } from 'react';
|
||||||
|
import styles from './CustomCursor.module.css';
|
||||||
|
|
||||||
|
export function CustomCursor() {
|
||||||
|
const [position, setPosition] = useState({ x: 0, y: 0 });
|
||||||
|
const [isPointer, setIsPointer] = useState(false);
|
||||||
|
const [isHidden, setIsHidden] = useState(true);
|
||||||
|
const [isClicking, setIsClicking] = useState(false);
|
||||||
|
|
||||||
|
const handleMouseMove = useCallback((e: MouseEvent) => {
|
||||||
|
setPosition({ x: e.clientX, y: e.clientY });
|
||||||
|
setIsHidden(false);
|
||||||
|
|
||||||
|
const target = e.target as HTMLElement;
|
||||||
|
const isClickable =
|
||||||
|
target.tagName === 'A' ||
|
||||||
|
target.tagName === 'BUTTON' ||
|
||||||
|
!!target.closest('a') ||
|
||||||
|
!!target.closest('button') ||
|
||||||
|
window.getComputedStyle(target).cursor === 'pointer';
|
||||||
|
|
||||||
|
setIsPointer(isClickable);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const handleMouseDown = useCallback(() => setIsClicking(true), []);
|
||||||
|
const handleMouseUp = useCallback(() => setIsClicking(false), []);
|
||||||
|
const handleMouseLeave = useCallback(() => setIsHidden(true), []);
|
||||||
|
const handleMouseEnter = useCallback(() => setIsHidden(false), []);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
// Don't show custom cursor on touch devices
|
||||||
|
if (window.matchMedia('(hover: none)').matches) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
document.addEventListener('mousemove', handleMouseMove);
|
||||||
|
document.addEventListener('mousedown', handleMouseDown);
|
||||||
|
document.addEventListener('mouseup', handleMouseUp);
|
||||||
|
document.addEventListener('mouseleave', handleMouseLeave);
|
||||||
|
document.addEventListener('mouseenter', handleMouseEnter);
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
document.removeEventListener('mousemove', handleMouseMove);
|
||||||
|
document.removeEventListener('mousedown', handleMouseDown);
|
||||||
|
document.removeEventListener('mouseup', handleMouseUp);
|
||||||
|
document.removeEventListener('mouseleave', handleMouseLeave);
|
||||||
|
document.removeEventListener('mouseenter', handleMouseEnter);
|
||||||
|
};
|
||||||
|
}, [handleMouseMove, handleMouseDown, handleMouseUp, handleMouseLeave, handleMouseEnter]);
|
||||||
|
|
||||||
|
// Don't render on touch devices
|
||||||
|
if (typeof window !== 'undefined' && window.matchMedia('(hover: none)').matches) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div
|
||||||
|
className={`${styles.cursor} ${isPointer ? styles.pointer : ''} ${isHidden ? styles.hidden : ''} ${isClicking ? styles.clicking : ''}`}
|
||||||
|
style={{
|
||||||
|
left: position.x,
|
||||||
|
top: position.y,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
className={`${styles.cursorDot} ${isHidden ? styles.hidden : ''}`}
|
||||||
|
style={{
|
||||||
|
left: position.x,
|
||||||
|
top: position.y,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
88
src/components/layout/Footer.module.css
Normal file
88
src/components/layout/Footer.module.css
Normal file
@@ -0,0 +1,88 @@
|
|||||||
|
.footer {
|
||||||
|
margin-top: auto;
|
||||||
|
padding: var(--space-2xl) 0;
|
||||||
|
background-color: var(--md-sys-color-surface-container-lowest);
|
||||||
|
border-top: 1px solid var(--md-sys-color-outline-variant);
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: var(--space-lg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.brand {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: var(--space-sm);
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.25em;
|
||||||
|
font-size: 1.25rem;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logoText {
|
||||||
|
color: var(--md-sys-color-on-surface);
|
||||||
|
}
|
||||||
|
|
||||||
|
.logoAccent {
|
||||||
|
color: var(--md-sys-color-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.copyright {
|
||||||
|
font-size: 0.875rem;
|
||||||
|
color: var(--md-sys-color-on-surface);
|
||||||
|
opacity: 0.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.links {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--space-md);
|
||||||
|
}
|
||||||
|
|
||||||
|
.socialLink {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 44px;
|
||||||
|
height: 44px;
|
||||||
|
color: var(--md-sys-color-on-surface);
|
||||||
|
background-color: var(--md-sys-color-surface-container);
|
||||||
|
border-radius: var(--radius-full);
|
||||||
|
transition: color var(--transition-fast), background-color var(--transition-fast), transform var(--transition-fast);
|
||||||
|
}
|
||||||
|
|
||||||
|
.socialLink:hover {
|
||||||
|
color: var(--md-sys-color-primary);
|
||||||
|
background-color: var(--md-sys-color-surface-container-high);
|
||||||
|
transform: translateY(-2px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.credit {
|
||||||
|
font-size: 0.875rem;
|
||||||
|
color: var(--md-sys-color-on-surface);
|
||||||
|
opacity: 0.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.heart {
|
||||||
|
color: var(--md-sys-color-primary);
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.content {
|
||||||
|
flex-direction: column;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.brand {
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
52
src/components/layout/Footer.tsx
Normal file
52
src/components/layout/Footer.tsx
Normal file
@@ -0,0 +1,52 @@
|
|||||||
|
import { useTranslation } from '../../i18n';
|
||||||
|
import styles from './Footer.module.css';
|
||||||
|
|
||||||
|
export function Footer() {
|
||||||
|
const { t } = useTranslation();
|
||||||
|
const currentYear = new Date().getFullYear();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<footer className={styles.footer}>
|
||||||
|
<div className={`${styles.content} container`}>
|
||||||
|
<div className={styles.brand}>
|
||||||
|
<span className={styles.logo}>
|
||||||
|
<span className={styles.logoText}>Ragusa</span>
|
||||||
|
<span className={styles.logoAccent}>IT</span>
|
||||||
|
</span>
|
||||||
|
<p className={styles.copyright}>
|
||||||
|
{t.footer.copyright.replace('{year}', String(currentYear))}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className={styles.links}>
|
||||||
|
<a
|
||||||
|
href="https://github.com/ragusa-it"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className={styles.socialLink}
|
||||||
|
aria-label="GitHub"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
width="24"
|
||||||
|
height="24"
|
||||||
|
fill="currentColor"
|
||||||
|
aria-hidden="true"
|
||||||
|
>
|
||||||
|
<path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z" />
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className={styles.credit}>
|
||||||
|
<p>
|
||||||
|
{t.footer.madeWith}{' '}
|
||||||
|
<span className={styles.heart}>React</span>{' '}
|
||||||
|
{t.footer.and}{' '}
|
||||||
|
<span className={styles.heart}>TypeScript</span>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
);
|
||||||
|
}
|
||||||
204
src/components/layout/Navbar.module.css
Normal file
204
src/components/layout/Navbar.module.css
Normal file
@@ -0,0 +1,204 @@
|
|||||||
|
.header {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
z-index: 100;
|
||||||
|
padding: var(--space-md) 0;
|
||||||
|
transition: background-color var(--transition-normal), backdrop-filter var(--transition-normal);
|
||||||
|
}
|
||||||
|
|
||||||
|
.header.scrolled {
|
||||||
|
background-color: rgba(15, 20, 16, 0.85);
|
||||||
|
backdrop-filter: blur(12px);
|
||||||
|
border-bottom: 1px solid var(--md-sys-color-outline-variant);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: var(--space-lg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.25em;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
font-weight: 700;
|
||||||
|
text-decoration: none;
|
||||||
|
color: var(--md-sys-color-on-surface);
|
||||||
|
}
|
||||||
|
|
||||||
|
.logoText {
|
||||||
|
color: var(--md-sys-color-on-surface);
|
||||||
|
}
|
||||||
|
|
||||||
|
.logoAccent {
|
||||||
|
color: var(--md-sys-color-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.navLinks {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--space-xl);
|
||||||
|
}
|
||||||
|
|
||||||
|
.navLink {
|
||||||
|
position: relative;
|
||||||
|
padding: var(--space-sm) var(--space-md);
|
||||||
|
font-size: 0.95rem;
|
||||||
|
font-weight: 500;
|
||||||
|
color: var(--md-sys-color-on-surface);
|
||||||
|
text-decoration: none;
|
||||||
|
opacity: 0.8;
|
||||||
|
transition: opacity var(--transition-fast), color var(--transition-fast);
|
||||||
|
}
|
||||||
|
|
||||||
|
.navLink:hover {
|
||||||
|
opacity: 1;
|
||||||
|
color: var(--md-sys-color-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.navLink.active {
|
||||||
|
opacity: 1;
|
||||||
|
color: var(--md-sys-color-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.activeIndicator {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
width: 4px;
|
||||||
|
height: 4px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background-color: var(--md-sys-color-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.actions {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--space-md);
|
||||||
|
}
|
||||||
|
|
||||||
|
.langToggle {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.25em;
|
||||||
|
padding: var(--space-sm) var(--space-md);
|
||||||
|
font-size: 0.85rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--md-sys-color-on-surface);
|
||||||
|
background: transparent;
|
||||||
|
border: 1px solid var(--md-sys-color-outline-variant);
|
||||||
|
border-radius: var(--radius-full);
|
||||||
|
cursor: pointer;
|
||||||
|
transition: border-color var(--transition-fast), background-color var(--transition-fast);
|
||||||
|
}
|
||||||
|
|
||||||
|
.langToggle:hover {
|
||||||
|
border-color: var(--md-sys-color-primary);
|
||||||
|
background-color: var(--md-sys-color-surface-container);
|
||||||
|
}
|
||||||
|
|
||||||
|
.langDivider {
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.activeLang {
|
||||||
|
color: var(--md-sys-color-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobileMenuBtn {
|
||||||
|
display: none;
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
padding: 0;
|
||||||
|
background: transparent;
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hamburger {
|
||||||
|
position: relative;
|
||||||
|
display: block;
|
||||||
|
width: 24px;
|
||||||
|
height: 2px;
|
||||||
|
margin: 0 auto;
|
||||||
|
background-color: var(--md-sys-color-on-surface);
|
||||||
|
border-radius: 2px;
|
||||||
|
transition: background-color var(--transition-fast);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hamburger::before,
|
||||||
|
.hamburger::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
width: 24px;
|
||||||
|
height: 2px;
|
||||||
|
background-color: var(--md-sys-color-on-surface);
|
||||||
|
border-radius: 2px;
|
||||||
|
transition: transform var(--transition-normal);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hamburger::before {
|
||||||
|
top: -7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hamburger::after {
|
||||||
|
bottom: -7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hamburger.open {
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hamburger.open::before {
|
||||||
|
transform: translateY(7px) rotate(45deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hamburger.open::after {
|
||||||
|
transform: translateY(-7px) rotate(-45deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Mobile styles */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.navLinks {
|
||||||
|
position: fixed;
|
||||||
|
top: 70px;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0;
|
||||||
|
padding: var(--space-lg);
|
||||||
|
background-color: rgba(15, 20, 16, 0.98);
|
||||||
|
backdrop-filter: blur(12px);
|
||||||
|
border-bottom: 1px solid var(--md-sys-color-outline-variant);
|
||||||
|
transform: translateY(-100%);
|
||||||
|
opacity: 0;
|
||||||
|
visibility: hidden;
|
||||||
|
transition: transform var(--transition-normal), opacity var(--transition-normal), visibility var(--transition-normal);
|
||||||
|
}
|
||||||
|
|
||||||
|
.navLinks.open {
|
||||||
|
transform: translateY(0);
|
||||||
|
opacity: 1;
|
||||||
|
visibility: visible;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navLink {
|
||||||
|
width: 100%;
|
||||||
|
padding: var(--space-md);
|
||||||
|
text-align: center;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobileMenuBtn {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
90
src/components/layout/Navbar.tsx
Normal file
90
src/components/layout/Navbar.tsx
Normal file
@@ -0,0 +1,90 @@
|
|||||||
|
import { useState, useEffect } from 'react';
|
||||||
|
import { Link, useLocation } from 'react-router-dom';
|
||||||
|
import { motion } from 'motion/react';
|
||||||
|
import { useTranslation } from '../../i18n';
|
||||||
|
import styles from './Navbar.module.css';
|
||||||
|
|
||||||
|
export function Navbar() {
|
||||||
|
const { t, language, setLanguage } = useTranslation();
|
||||||
|
const location = useLocation();
|
||||||
|
const [isScrolled, setIsScrolled] = useState(false);
|
||||||
|
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const handleScroll = () => {
|
||||||
|
setIsScrolled(window.scrollY > 20);
|
||||||
|
};
|
||||||
|
window.addEventListener('scroll', handleScroll, { passive: true });
|
||||||
|
return () => window.removeEventListener('scroll', handleScroll);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
setIsMobileMenuOpen(false);
|
||||||
|
}, [location.pathname]);
|
||||||
|
|
||||||
|
const navLinks = [
|
||||||
|
{ path: '/', label: t.nav.home },
|
||||||
|
{ path: '/about', label: t.nav.about },
|
||||||
|
{ path: '/contact', label: t.nav.contact },
|
||||||
|
];
|
||||||
|
|
||||||
|
const toggleLanguage = () => {
|
||||||
|
setLanguage(language === 'de' ? 'en' : 'de');
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<motion.header
|
||||||
|
className={`${styles.header} ${isScrolled ? styles.scrolled : ''}`}
|
||||||
|
initial={{ y: -100 }}
|
||||||
|
animate={{ y: 0 }}
|
||||||
|
transition={{ duration: 0.5, ease: 'easeOut' }}
|
||||||
|
>
|
||||||
|
<nav className={`${styles.nav} container`}>
|
||||||
|
<Link to="/" className={styles.logo}>
|
||||||
|
<span className={styles.logoText}>Ragusa</span>
|
||||||
|
<span className={styles.logoAccent}>IT</span>
|
||||||
|
</Link>
|
||||||
|
|
||||||
|
<div className={`${styles.navLinks} ${isMobileMenuOpen ? styles.open : ''}`}>
|
||||||
|
{navLinks.map((link) => (
|
||||||
|
<Link
|
||||||
|
key={link.path}
|
||||||
|
to={link.path}
|
||||||
|
className={`${styles.navLink} ${location.pathname === link.path ? styles.active : ''}`}
|
||||||
|
>
|
||||||
|
{link.label}
|
||||||
|
{location.pathname === link.path && (
|
||||||
|
<motion.div
|
||||||
|
className={styles.activeIndicator}
|
||||||
|
layoutId="activeNav"
|
||||||
|
transition={{ type: 'spring', stiffness: 380, damping: 30 }}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</Link>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className={styles.actions}>
|
||||||
|
<button
|
||||||
|
onClick={toggleLanguage}
|
||||||
|
className={styles.langToggle}
|
||||||
|
aria-label={`Switch to ${language === 'de' ? 'English' : 'German'}`}
|
||||||
|
>
|
||||||
|
<span className={language === 'de' ? styles.activeLang : ''}>DE</span>
|
||||||
|
<span className={styles.langDivider}>/</span>
|
||||||
|
<span className={language === 'en' ? styles.activeLang : ''}>EN</span>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button
|
||||||
|
className={styles.mobileMenuBtn}
|
||||||
|
onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
|
||||||
|
aria-label="Toggle menu"
|
||||||
|
aria-expanded={isMobileMenuOpen}
|
||||||
|
>
|
||||||
|
<span className={`${styles.hamburger} ${isMobileMenuOpen ? styles.open : ''}`} />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</motion.header>
|
||||||
|
);
|
||||||
|
}
|
||||||
3
src/components/layout/index.ts
Normal file
3
src/components/layout/index.ts
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
export { Navbar } from './Navbar';
|
||||||
|
export { Footer } from './Footer';
|
||||||
|
export { CustomCursor } from './CustomCursor';
|
||||||
146
src/components/sections/Hero.module.css
Normal file
146
src/components/sections/Hero.module.css
Normal file
@@ -0,0 +1,146 @@
|
|||||||
|
.hero {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
min-height: 100vh;
|
||||||
|
padding: var(--space-3xl) 0;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text {
|
||||||
|
max-width: 800px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.greeting {
|
||||||
|
font-size: 1.125rem;
|
||||||
|
font-weight: 500;
|
||||||
|
color: var(--md-sys-color-primary);
|
||||||
|
margin-bottom: var(--space-md);
|
||||||
|
letter-spacing: 0.05em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: clamp(2.5rem, 6vw, 5rem);
|
||||||
|
font-weight: 700;
|
||||||
|
line-height: 1.1;
|
||||||
|
margin-bottom: var(--space-lg);
|
||||||
|
background: linear-gradient(
|
||||||
|
135deg,
|
||||||
|
var(--md-sys-color-on-surface) 0%,
|
||||||
|
var(--md-sys-color-primary) 50%,
|
||||||
|
var(--md-sys-color-on-surface) 100%
|
||||||
|
);
|
||||||
|
background-size: 200% auto;
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
background-clip: text;
|
||||||
|
animation: shimmer 3s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes shimmer {
|
||||||
|
0%, 100% {
|
||||||
|
background-position: 0% center;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
background-position: 100% center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.tagline {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 0.5em;
|
||||||
|
font-size: clamp(1.25rem, 3vw, 2rem);
|
||||||
|
color: var(--md-sys-color-on-surface);
|
||||||
|
opacity: 0.9;
|
||||||
|
margin-bottom: var(--space-2xl);
|
||||||
|
}
|
||||||
|
|
||||||
|
.typed {
|
||||||
|
color: var(--md-sys-color-primary);
|
||||||
|
font-weight: 600;
|
||||||
|
min-width: 200px;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cursor {
|
||||||
|
display: inline-block;
|
||||||
|
margin-left: 2px;
|
||||||
|
animation: blink 1s step-end infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes blink {
|
||||||
|
0%, 100% {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.cta {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: var(--space-md);
|
||||||
|
}
|
||||||
|
|
||||||
|
.scrollIndicator {
|
||||||
|
position: absolute;
|
||||||
|
bottom: var(--space-2xl);
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scrollMouse {
|
||||||
|
width: 26px;
|
||||||
|
height: 42px;
|
||||||
|
border: 2px solid var(--md-sys-color-outline);
|
||||||
|
border-radius: 13px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
padding-top: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scrollWheel {
|
||||||
|
width: 4px;
|
||||||
|
height: 8px;
|
||||||
|
background-color: var(--md-sys-color-primary);
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.typed {
|
||||||
|
min-width: auto;
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cta {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cta a {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cta button {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
92
src/components/sections/Hero.tsx
Normal file
92
src/components/sections/Hero.tsx
Normal file
@@ -0,0 +1,92 @@
|
|||||||
|
import { Link } from 'react-router-dom';
|
||||||
|
import { motion } from 'motion/react';
|
||||||
|
import { useTranslation } from '../../i18n';
|
||||||
|
import { useTypingEffect } from '../../hooks';
|
||||||
|
import { Scene3D } from '../effects';
|
||||||
|
import { Button } from '../ui';
|
||||||
|
import styles from './Hero.module.css';
|
||||||
|
|
||||||
|
export function Hero() {
|
||||||
|
const { t } = useTranslation();
|
||||||
|
|
||||||
|
const { text } = useTypingEffect({
|
||||||
|
words: t.hero.rotatingWords,
|
||||||
|
typingSpeed: 80,
|
||||||
|
deletingSpeed: 40,
|
||||||
|
pauseDuration: 2500,
|
||||||
|
});
|
||||||
|
|
||||||
|
return (
|
||||||
|
<section className={styles.hero}>
|
||||||
|
<Scene3D />
|
||||||
|
|
||||||
|
<div className={`${styles.content} container`}>
|
||||||
|
<motion.div
|
||||||
|
className={styles.text}
|
||||||
|
initial={{ opacity: 0, y: 30 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ duration: 0.6, ease: 'easeOut' }}
|
||||||
|
>
|
||||||
|
<motion.p
|
||||||
|
className={styles.greeting}
|
||||||
|
initial={{ opacity: 0 }}
|
||||||
|
animate={{ opacity: 1 }}
|
||||||
|
transition={{ delay: 0.2 }}
|
||||||
|
>
|
||||||
|
{t.hero.greeting}
|
||||||
|
</motion.p>
|
||||||
|
|
||||||
|
<motion.h1
|
||||||
|
className={styles.title}
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ delay: 0.3, duration: 0.5 }}
|
||||||
|
>
|
||||||
|
{t.hero.company}
|
||||||
|
</motion.h1>
|
||||||
|
|
||||||
|
<motion.div
|
||||||
|
className={styles.tagline}
|
||||||
|
initial={{ opacity: 0 }}
|
||||||
|
animate={{ opacity: 1 }}
|
||||||
|
transition={{ delay: 0.5 }}
|
||||||
|
>
|
||||||
|
<span>{t.hero.tagline}</span>
|
||||||
|
<span className={styles.typed}>
|
||||||
|
{text}
|
||||||
|
<span className={styles.cursor}>|</span>
|
||||||
|
</span>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
<motion.div
|
||||||
|
className={styles.cta}
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ delay: 0.7, duration: 0.5 }}
|
||||||
|
>
|
||||||
|
<Link to="/contact">
|
||||||
|
<Button variant="primary" size="lg">
|
||||||
|
{t.hero.cta}
|
||||||
|
</Button>
|
||||||
|
</Link>
|
||||||
|
<Link to="/about">
|
||||||
|
<Button variant="outline" size="lg">
|
||||||
|
{t.hero.ctaSecondary}
|
||||||
|
</Button>
|
||||||
|
</Link>
|
||||||
|
</motion.div>
|
||||||
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className={styles.scrollIndicator}>
|
||||||
|
<motion.div
|
||||||
|
className={styles.scrollMouse}
|
||||||
|
animate={{ y: [0, 8, 0] }}
|
||||||
|
transition={{ repeat: Infinity, duration: 1.5, ease: 'easeInOut' }}
|
||||||
|
>
|
||||||
|
<span className={styles.scrollWheel} />
|
||||||
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
36
src/components/sections/Services.module.css
Normal file
36
src/components/sections/Services.module.css
Normal file
@@ -0,0 +1,36 @@
|
|||||||
|
.services {
|
||||||
|
padding: var(--space-3xl) 0;
|
||||||
|
background-color: var(--md-sys-color-surface-container-lowest);
|
||||||
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: var(--space-3xl);
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: clamp(2rem, 4vw, 3rem);
|
||||||
|
font-weight: 700;
|
||||||
|
margin-bottom: var(--space-md);
|
||||||
|
color: var(--md-sys-color-on-surface);
|
||||||
|
}
|
||||||
|
|
||||||
|
.subtitle {
|
||||||
|
font-size: 1.125rem;
|
||||||
|
color: var(--md-sys-color-on-surface);
|
||||||
|
opacity: 0.75;
|
||||||
|
max-width: 600px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||||||
|
gap: var(--space-xl);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1024px) {
|
||||||
|
.grid {
|
||||||
|
grid-template-columns: repeat(4, 1fr);
|
||||||
|
}
|
||||||
|
}
|
||||||
95
src/components/sections/Services.tsx
Normal file
95
src/components/sections/Services.tsx
Normal file
@@ -0,0 +1,95 @@
|
|||||||
|
import { motion, type Variants } from 'motion/react';
|
||||||
|
import { useTranslation } from '../../i18n';
|
||||||
|
import { Card } from '../ui';
|
||||||
|
import styles from './Services.module.css';
|
||||||
|
|
||||||
|
const icons = {
|
||||||
|
code: (
|
||||||
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||||||
|
<polyline points="16 18 22 12 16 6" />
|
||||||
|
<polyline points="8 6 2 12 8 18" />
|
||||||
|
</svg>
|
||||||
|
),
|
||||||
|
support: (
|
||||||
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||||||
|
<path d="M21 12a9 9 0 0 1-9 9m9-9a9 9 0 0 0-9-9m9 9H3m9 9a9 9 0 0 1-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 0 1 9-9" />
|
||||||
|
</svg>
|
||||||
|
),
|
||||||
|
consulting: (
|
||||||
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||||||
|
<path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z" />
|
||||||
|
<path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z" />
|
||||||
|
</svg>
|
||||||
|
),
|
||||||
|
hosting: (
|
||||||
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||||||
|
<rect x="2" y="2" width="20" height="8" rx="2" ry="2" />
|
||||||
|
<rect x="2" y="14" width="20" height="8" rx="2" ry="2" />
|
||||||
|
<line x1="6" y1="6" x2="6.01" y2="6" />
|
||||||
|
<line x1="6" y1="18" x2="6.01" y2="18" />
|
||||||
|
</svg>
|
||||||
|
),
|
||||||
|
};
|
||||||
|
|
||||||
|
const containerVariants: Variants = {
|
||||||
|
hidden: { opacity: 0 },
|
||||||
|
visible: {
|
||||||
|
opacity: 1,
|
||||||
|
transition: {
|
||||||
|
staggerChildren: 0.15,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
const itemVariants: Variants = {
|
||||||
|
hidden: { opacity: 0, y: 30 },
|
||||||
|
visible: {
|
||||||
|
opacity: 1,
|
||||||
|
y: 0,
|
||||||
|
transition: {
|
||||||
|
duration: 0.5,
|
||||||
|
ease: [0.4, 0, 0.2, 1],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
export function Services() {
|
||||||
|
const { t } = useTranslation();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<section className={styles.services}>
|
||||||
|
<div className="container">
|
||||||
|
<motion.div
|
||||||
|
className={styles.header}
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
|
viewport={{ once: true, margin: '-100px' }}
|
||||||
|
transition={{ duration: 0.5 }}
|
||||||
|
>
|
||||||
|
<h2 className={styles.title}>{t.services.title}</h2>
|
||||||
|
<p className={styles.subtitle}>{t.services.subtitle}</p>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
<motion.div
|
||||||
|
className={styles.grid}
|
||||||
|
variants={containerVariants}
|
||||||
|
initial="hidden"
|
||||||
|
whileInView="visible"
|
||||||
|
viewport={{ once: true, margin: '-50px' }}
|
||||||
|
>
|
||||||
|
{t.services.items.map((service, index) => (
|
||||||
|
<motion.div key={index} variants={itemVariants}>
|
||||||
|
<Card>
|
||||||
|
<Card.Icon>
|
||||||
|
{icons[service.icon as keyof typeof icons]}
|
||||||
|
</Card.Icon>
|
||||||
|
<Card.Title>{service.title}</Card.Title>
|
||||||
|
<Card.Description>{service.description}</Card.Description>
|
||||||
|
</Card>
|
||||||
|
</motion.div>
|
||||||
|
))}
|
||||||
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
2
src/components/sections/index.ts
Normal file
2
src/components/sections/index.ts
Normal file
@@ -0,0 +1,2 @@
|
|||||||
|
export { Hero } from './Hero';
|
||||||
|
export { Services } from './Services';
|
||||||
82
src/components/ui/Button.module.css
Normal file
82
src/components/ui/Button.module.css
Normal file
@@ -0,0 +1,82 @@
|
|||||||
|
.button {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: var(--space-sm);
|
||||||
|
font-family: var(--md-sys-typescale-body-font);
|
||||||
|
font-weight: 600;
|
||||||
|
border: none;
|
||||||
|
border-radius: var(--radius-full);
|
||||||
|
cursor: pointer;
|
||||||
|
transition:
|
||||||
|
background-color var(--transition-fast),
|
||||||
|
color var(--transition-fast),
|
||||||
|
box-shadow var(--transition-fast);
|
||||||
|
}
|
||||||
|
|
||||||
|
.button:disabled {
|
||||||
|
opacity: 0.6;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Sizes */
|
||||||
|
.sm {
|
||||||
|
padding: var(--space-sm) var(--space-md);
|
||||||
|
font-size: 0.875rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.md {
|
||||||
|
padding: var(--space-md) var(--space-xl);
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lg {
|
||||||
|
padding: var(--space-lg) var(--space-2xl);
|
||||||
|
font-size: 1.125rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Variants */
|
||||||
|
.primary {
|
||||||
|
background-color: var(--md-sys-color-primary);
|
||||||
|
color: var(--md-sys-color-on-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.primary:hover:not(:disabled) {
|
||||||
|
background-color: var(--md-sys-color-on-primary-container);
|
||||||
|
box-shadow: 0 4px 20px rgba(127, 217, 152, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.secondary {
|
||||||
|
background-color: var(--md-sys-color-surface-container-high);
|
||||||
|
color: var(--md-sys-color-on-surface);
|
||||||
|
}
|
||||||
|
|
||||||
|
.secondary:hover:not(:disabled) {
|
||||||
|
background-color: var(--md-sys-color-surface-container-highest);
|
||||||
|
}
|
||||||
|
|
||||||
|
.outline {
|
||||||
|
background-color: transparent;
|
||||||
|
color: var(--md-sys-color-primary);
|
||||||
|
border: 2px solid var(--md-sys-color-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.outline:hover:not(:disabled) {
|
||||||
|
background-color: rgba(127, 217, 152, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Loader */
|
||||||
|
.loader {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
border: 2px solid transparent;
|
||||||
|
border-top-color: currentColor;
|
||||||
|
border-radius: 50%;
|
||||||
|
animation: spin 0.8s linear infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes spin {
|
||||||
|
to {
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
42
src/components/ui/Button.tsx
Normal file
42
src/components/ui/Button.tsx
Normal file
@@ -0,0 +1,42 @@
|
|||||||
|
import { type ReactNode } from 'react';
|
||||||
|
import { motion } from 'motion/react';
|
||||||
|
import styles from './Button.module.css';
|
||||||
|
|
||||||
|
interface ButtonProps {
|
||||||
|
variant?: 'primary' | 'secondary' | 'outline';
|
||||||
|
size?: 'sm' | 'md' | 'lg';
|
||||||
|
children: ReactNode;
|
||||||
|
isLoading?: boolean;
|
||||||
|
disabled?: boolean;
|
||||||
|
className?: string;
|
||||||
|
type?: 'button' | 'submit' | 'reset';
|
||||||
|
onClick?: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function Button({
|
||||||
|
variant = 'primary',
|
||||||
|
size = 'md',
|
||||||
|
children,
|
||||||
|
isLoading,
|
||||||
|
disabled,
|
||||||
|
className,
|
||||||
|
type = 'button',
|
||||||
|
onClick,
|
||||||
|
}: ButtonProps) {
|
||||||
|
return (
|
||||||
|
<motion.button
|
||||||
|
type={type}
|
||||||
|
className={`${styles.button} ${styles[variant]} ${styles[size]} ${className || ''}`}
|
||||||
|
disabled={disabled || isLoading}
|
||||||
|
whileHover={{ scale: 1.02 }}
|
||||||
|
whileTap={{ scale: 0.98 }}
|
||||||
|
onClick={onClick}
|
||||||
|
>
|
||||||
|
{isLoading ? (
|
||||||
|
<span className={styles.loader} />
|
||||||
|
) : (
|
||||||
|
children
|
||||||
|
)}
|
||||||
|
</motion.button>
|
||||||
|
);
|
||||||
|
}
|
||||||
51
src/components/ui/Card.module.css
Normal file
51
src/components/ui/Card.module.css
Normal file
@@ -0,0 +1,51 @@
|
|||||||
|
.card {
|
||||||
|
position: relative;
|
||||||
|
padding: var(--space-xl);
|
||||||
|
background-color: var(--md-sys-color-surface-container);
|
||||||
|
border: 1px solid var(--md-sys-color-outline-variant);
|
||||||
|
border-radius: var(--radius-lg);
|
||||||
|
transition:
|
||||||
|
border-color var(--transition-fast),
|
||||||
|
box-shadow var(--transition-fast),
|
||||||
|
background-color var(--transition-fast);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card.hoverable:hover {
|
||||||
|
border-color: var(--md-sys-color-primary);
|
||||||
|
background-color: var(--md-sys-color-surface-container-high);
|
||||||
|
box-shadow:
|
||||||
|
0 8px 32px rgba(0, 0, 0, 0.3),
|
||||||
|
0 0 0 1px rgba(127, 217, 152, 0.1),
|
||||||
|
inset 0 1px 0 rgba(127, 217, 152, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 56px;
|
||||||
|
height: 56px;
|
||||||
|
margin-bottom: var(--space-lg);
|
||||||
|
background-color: var(--md-sys-color-primary-container);
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
color: var(--md-sys-color-on-primary-container);
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon svg {
|
||||||
|
width: 28px;
|
||||||
|
height: 28px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
margin-bottom: var(--space-sm);
|
||||||
|
font-size: 1.25rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--md-sys-color-on-surface);
|
||||||
|
}
|
||||||
|
|
||||||
|
.description {
|
||||||
|
font-size: 0.95rem;
|
||||||
|
line-height: 1.6;
|
||||||
|
color: var(--md-sys-color-on-surface);
|
||||||
|
opacity: 0.75;
|
||||||
|
}
|
||||||
49
src/components/ui/Card.tsx
Normal file
49
src/components/ui/Card.tsx
Normal file
@@ -0,0 +1,49 @@
|
|||||||
|
import { type ReactNode } from 'react';
|
||||||
|
import { motion } from 'motion/react';
|
||||||
|
import styles from './Card.module.css';
|
||||||
|
|
||||||
|
interface CardProps {
|
||||||
|
children: ReactNode;
|
||||||
|
className?: string;
|
||||||
|
hover?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function Card({ children, className, hover = true }: CardProps) {
|
||||||
|
return (
|
||||||
|
<motion.div
|
||||||
|
className={`${styles.card} ${hover ? styles.hoverable : ''} ${className || ''}`}
|
||||||
|
whileHover={hover ? { y: -4 } : undefined}
|
||||||
|
transition={{ duration: 0.2 }}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</motion.div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
interface CardIconProps {
|
||||||
|
children: ReactNode;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function CardIcon({ children }: CardIconProps) {
|
||||||
|
return <div className={styles.icon}>{children}</div>;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface CardTitleProps {
|
||||||
|
children: ReactNode;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function CardTitle({ children }: CardTitleProps) {
|
||||||
|
return <h3 className={styles.title}>{children}</h3>;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface CardDescriptionProps {
|
||||||
|
children: ReactNode;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function CardDescription({ children }: CardDescriptionProps) {
|
||||||
|
return <p className={styles.description}>{children}</p>;
|
||||||
|
}
|
||||||
|
|
||||||
|
Card.Icon = CardIcon;
|
||||||
|
Card.Title = CardTitle;
|
||||||
|
Card.Description = CardDescription;
|
||||||
58
src/components/ui/Input.module.css
Normal file
58
src/components/ui/Input.module.css
Normal file
@@ -0,0 +1,58 @@
|
|||||||
|
.field {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: var(--space-sm);
|
||||||
|
}
|
||||||
|
|
||||||
|
.label {
|
||||||
|
font-size: 0.875rem;
|
||||||
|
font-weight: 500;
|
||||||
|
color: var(--md-sys-color-on-surface);
|
||||||
|
}
|
||||||
|
|
||||||
|
.input {
|
||||||
|
padding: var(--space-md);
|
||||||
|
font-family: var(--md-sys-typescale-body-font);
|
||||||
|
font-size: 1rem;
|
||||||
|
color: var(--md-sys-color-on-surface);
|
||||||
|
background-color: var(--md-sys-color-surface-container);
|
||||||
|
border: 1px solid var(--md-sys-color-outline-variant);
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
transition:
|
||||||
|
border-color var(--transition-fast),
|
||||||
|
box-shadow var(--transition-fast),
|
||||||
|
background-color var(--transition-fast);
|
||||||
|
}
|
||||||
|
|
||||||
|
.input::placeholder {
|
||||||
|
color: var(--md-sys-color-outline);
|
||||||
|
}
|
||||||
|
|
||||||
|
.input:hover {
|
||||||
|
border-color: var(--md-sys-color-outline);
|
||||||
|
background-color: var(--md-sys-color-surface-container-high);
|
||||||
|
}
|
||||||
|
|
||||||
|
.input:focus {
|
||||||
|
outline: none;
|
||||||
|
border-color: var(--md-sys-color-primary);
|
||||||
|
box-shadow: 0 0 0 3px rgba(127, 217, 152, 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
.textarea {
|
||||||
|
min-height: 150px;
|
||||||
|
resize: vertical;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hasError .input {
|
||||||
|
border-color: var(--md-sys-color-error);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hasError .input:focus {
|
||||||
|
box-shadow: 0 0 0 3px rgba(255, 180, 171, 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
.error {
|
||||||
|
font-size: 0.8125rem;
|
||||||
|
color: var(--md-sys-color-error);
|
||||||
|
}
|
||||||
58
src/components/ui/Input.tsx
Normal file
58
src/components/ui/Input.tsx
Normal file
@@ -0,0 +1,58 @@
|
|||||||
|
import { type InputHTMLAttributes, type TextareaHTMLAttributes, forwardRef } from 'react';
|
||||||
|
import styles from './Input.module.css';
|
||||||
|
|
||||||
|
interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
|
||||||
|
label: string;
|
||||||
|
error?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const Input = forwardRef<HTMLInputElement, InputProps>(
|
||||||
|
({ label, error, id, className, ...props }, ref) => {
|
||||||
|
const inputId = id || label.toLowerCase().replace(/\s+/g, '-');
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={`${styles.field} ${error ? styles.hasError : ''} ${className || ''}`}>
|
||||||
|
<label htmlFor={inputId} className={styles.label}>
|
||||||
|
{label}
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
ref={ref}
|
||||||
|
id={inputId}
|
||||||
|
className={styles.input}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
{error && <span className={styles.error}>{error}</span>}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
Input.displayName = 'Input';
|
||||||
|
|
||||||
|
interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
|
||||||
|
label: string;
|
||||||
|
error?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
|
||||||
|
({ label, error, id, className, ...props }, ref) => {
|
||||||
|
const inputId = id || label.toLowerCase().replace(/\s+/g, '-');
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={`${styles.field} ${error ? styles.hasError : ''} ${className || ''}`}>
|
||||||
|
<label htmlFor={inputId} className={styles.label}>
|
||||||
|
{label}
|
||||||
|
</label>
|
||||||
|
<textarea
|
||||||
|
ref={ref}
|
||||||
|
id={inputId}
|
||||||
|
className={`${styles.input} ${styles.textarea}`}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
{error && <span className={styles.error}>{error}</span>}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
Textarea.displayName = 'Textarea';
|
||||||
3
src/components/ui/index.ts
Normal file
3
src/components/ui/index.ts
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
export { Button } from './Button';
|
||||||
|
export { Card } from './Card';
|
||||||
|
export { Input, Textarea } from './Input';
|
||||||
1
src/hooks/index.ts
Normal file
1
src/hooks/index.ts
Normal file
@@ -0,0 +1 @@
|
|||||||
|
export { useTypingEffect } from './useTypingEffect';
|
||||||
60
src/hooks/useTypingEffect.ts
Normal file
60
src/hooks/useTypingEffect.ts
Normal file
@@ -0,0 +1,60 @@
|
|||||||
|
import { useState, useEffect, useCallback } from 'react';
|
||||||
|
|
||||||
|
interface UseTypingEffectOptions {
|
||||||
|
words: string[];
|
||||||
|
typingSpeed?: number;
|
||||||
|
deletingSpeed?: number;
|
||||||
|
pauseDuration?: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function useTypingEffect({
|
||||||
|
words,
|
||||||
|
typingSpeed = 100,
|
||||||
|
deletingSpeed = 50,
|
||||||
|
pauseDuration = 2000,
|
||||||
|
}: UseTypingEffectOptions) {
|
||||||
|
const [currentWordIndex, setCurrentWordIndex] = useState(0);
|
||||||
|
const [currentText, setCurrentText] = useState('');
|
||||||
|
const [isDeleting, setIsDeleting] = useState(false);
|
||||||
|
const [isPaused, setIsPaused] = useState(false);
|
||||||
|
|
||||||
|
const tick = useCallback(() => {
|
||||||
|
const currentWord = words[currentWordIndex];
|
||||||
|
|
||||||
|
if (isPaused) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (isDeleting) {
|
||||||
|
setCurrentText(currentWord.substring(0, currentText.length - 1));
|
||||||
|
|
||||||
|
if (currentText.length === 0) {
|
||||||
|
setIsDeleting(false);
|
||||||
|
setCurrentWordIndex((prev) => (prev + 1) % words.length);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
setCurrentText(currentWord.substring(0, currentText.length + 1));
|
||||||
|
|
||||||
|
if (currentText === currentWord) {
|
||||||
|
setIsPaused(true);
|
||||||
|
setTimeout(() => {
|
||||||
|
setIsPaused(false);
|
||||||
|
setIsDeleting(true);
|
||||||
|
}, pauseDuration);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, [currentText, currentWordIndex, isDeleting, isPaused, words, pauseDuration]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const speed = isDeleting ? deletingSpeed : typingSpeed;
|
||||||
|
const timer = setTimeout(tick, speed);
|
||||||
|
return () => clearTimeout(timer);
|
||||||
|
}, [tick, isDeleting, typingSpeed, deletingSpeed]);
|
||||||
|
|
||||||
|
return {
|
||||||
|
text: currentText,
|
||||||
|
isTyping: !isDeleting && !isPaused,
|
||||||
|
isDeleting,
|
||||||
|
currentWordIndex,
|
||||||
|
};
|
||||||
|
}
|
||||||
115
src/i18n/de.ts
Normal file
115
src/i18n/de.ts
Normal file
@@ -0,0 +1,115 @@
|
|||||||
|
export const de = {
|
||||||
|
// Navigation
|
||||||
|
nav: {
|
||||||
|
home: 'Startseite',
|
||||||
|
about: 'Über uns',
|
||||||
|
contact: 'Kontakt',
|
||||||
|
},
|
||||||
|
|
||||||
|
// Hero Section
|
||||||
|
hero: {
|
||||||
|
greeting: 'Willkommen bei',
|
||||||
|
company: 'Ragusa IT-Consulting',
|
||||||
|
tagline: 'Ihr Partner für',
|
||||||
|
rotatingWords: ['Webentwicklung', 'IT-Support', 'Digitale Lösungen', 'Tech-Beratung'],
|
||||||
|
cta: 'Projekt starten',
|
||||||
|
ctaSecondary: 'Mehr erfahren',
|
||||||
|
},
|
||||||
|
|
||||||
|
// Services
|
||||||
|
services: {
|
||||||
|
title: 'Unsere Leistungen',
|
||||||
|
subtitle: 'Professionelle IT-Lösungen für Ihr Unternehmen',
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
title: 'Webentwicklung',
|
||||||
|
description: 'Moderne, responsive Websites und Web-Applikationen mit React, TypeScript und aktuellen Technologien.',
|
||||||
|
icon: 'code',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Tech-Support',
|
||||||
|
description: 'Schnelle und zuverlässige technische Unterstützung für Hardware und Software vor Ort.',
|
||||||
|
icon: 'support',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'IT-Beratung',
|
||||||
|
description: 'Strategische Beratung für Ihre IT-Infrastruktur und digitale Transformation.',
|
||||||
|
icon: 'consulting',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Hosting & Wartung',
|
||||||
|
description: 'Zuverlässiges Webhosting, regelmäßige Updates und proaktive Wartung Ihrer Systeme.',
|
||||||
|
icon: 'hosting',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
|
||||||
|
// About
|
||||||
|
about: {
|
||||||
|
title: 'Über uns',
|
||||||
|
subtitle: 'Ihr lokaler IT-Partner',
|
||||||
|
intro: 'Ragusa IT-Consulting bietet professionelle IT-Dienstleistungen mit persönlichem Service. Wir kombinieren technische Expertise mit einem tiefen Verständnis für die Bedürfnisse unserer Kunden.',
|
||||||
|
experience: 'Mit jahrelanger Erfahrung in der Webentwicklung und IT-Beratung unterstützen wir Unternehmen und Privatpersonen dabei, ihre technischen Herausforderungen zu meistern.',
|
||||||
|
skills: {
|
||||||
|
title: 'Technologien',
|
||||||
|
subtitle: 'Moderne Tools für moderne Lösungen',
|
||||||
|
},
|
||||||
|
values: {
|
||||||
|
title: 'Warum Ragusa IT?',
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
title: 'Persönlicher Service',
|
||||||
|
description: 'Direkter Ansprechpartner für alle Ihre IT-Anliegen.',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Lokale Präsenz',
|
||||||
|
description: 'Vor-Ort-Support und persönliche Beratungsgespräche.',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Faire Preise',
|
||||||
|
description: 'Transparente Preisgestaltung ohne versteckte Kosten.',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Schnelle Reaktion',
|
||||||
|
description: 'Kurze Reaktionszeiten bei Anfragen und Problemen.',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
// Contact
|
||||||
|
contact: {
|
||||||
|
title: 'Kontakt',
|
||||||
|
subtitle: 'Lassen Sie uns zusammenarbeiten',
|
||||||
|
intro: 'Haben Sie ein Projekt im Sinn oder benötigen Sie technische Unterstützung? Ich freue mich auf Ihre Nachricht!',
|
||||||
|
form: {
|
||||||
|
name: 'Name',
|
||||||
|
namePlaceholder: 'Ihr Name',
|
||||||
|
email: 'E-Mail',
|
||||||
|
emailPlaceholder: 'ihre@email.de',
|
||||||
|
subject: 'Betreff',
|
||||||
|
subjectPlaceholder: 'Worum geht es?',
|
||||||
|
message: 'Nachricht',
|
||||||
|
messagePlaceholder: 'Ihre Nachricht...',
|
||||||
|
submit: 'Nachricht senden',
|
||||||
|
sending: 'Wird gesendet...',
|
||||||
|
success: 'Nachricht erfolgreich gesendet! Ich melde mich bald bei Ihnen.',
|
||||||
|
error: 'Fehler beim Senden. Bitte versuchen Sie es erneut oder kontaktieren Sie mich direkt.',
|
||||||
|
},
|
||||||
|
info: {
|
||||||
|
title: 'Kontaktdaten',
|
||||||
|
email: 'E-Mail',
|
||||||
|
location: 'Standort',
|
||||||
|
github: 'GitHub',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
// Footer
|
||||||
|
footer: {
|
||||||
|
copyright: '© {year} Ragusa IT-Consulting. Alle Rechte vorbehalten.',
|
||||||
|
madeWith: 'Entwickelt mit',
|
||||||
|
and: 'und',
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
export type Translations = typeof de;
|
||||||
115
src/i18n/en.ts
Normal file
115
src/i18n/en.ts
Normal file
@@ -0,0 +1,115 @@
|
|||||||
|
import type { Translations } from './de';
|
||||||
|
|
||||||
|
export const en: Translations = {
|
||||||
|
// Navigation
|
||||||
|
nav: {
|
||||||
|
home: 'Home',
|
||||||
|
about: 'About',
|
||||||
|
contact: 'Contact',
|
||||||
|
},
|
||||||
|
|
||||||
|
// Hero Section
|
||||||
|
hero: {
|
||||||
|
greeting: 'Welcome to',
|
||||||
|
company: 'Ragusa IT-Consulting',
|
||||||
|
tagline: 'Your partner for',
|
||||||
|
rotatingWords: ['Web Development', 'IT Support', 'Digital Solutions', 'Tech Consulting'],
|
||||||
|
cta: 'Start Project',
|
||||||
|
ctaSecondary: 'Learn More',
|
||||||
|
},
|
||||||
|
|
||||||
|
// Services
|
||||||
|
services: {
|
||||||
|
title: 'Our Services',
|
||||||
|
subtitle: 'Professional IT solutions for your business',
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
title: 'Web Development',
|
||||||
|
description: 'Modern, responsive websites and web applications built with React, TypeScript, and cutting-edge technologies.',
|
||||||
|
icon: 'code',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Tech Support',
|
||||||
|
description: 'Fast and reliable technical support for hardware and software, available on-site.',
|
||||||
|
icon: 'support',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'IT Consulting',
|
||||||
|
description: 'Strategic consulting for your IT infrastructure and digital transformation.',
|
||||||
|
icon: 'consulting',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Hosting & Maintenance',
|
||||||
|
description: 'Reliable web hosting, regular updates, and proactive maintenance of your systems.',
|
||||||
|
icon: 'hosting',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
|
||||||
|
// About
|
||||||
|
about: {
|
||||||
|
title: 'About Us',
|
||||||
|
subtitle: 'Your local IT partner',
|
||||||
|
intro: 'Ragusa IT-Consulting provides professional IT services with a personal touch. We combine technical expertise with a deep understanding of our clients\' needs.',
|
||||||
|
experience: 'With years of experience in web development and IT consulting, we help businesses and individuals overcome their technical challenges.',
|
||||||
|
skills: {
|
||||||
|
title: 'Technologies',
|
||||||
|
subtitle: 'Modern tools for modern solutions',
|
||||||
|
},
|
||||||
|
values: {
|
||||||
|
title: 'Why Ragusa IT?',
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
title: 'Personal Service',
|
||||||
|
description: 'Direct point of contact for all your IT needs.',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Local Presence',
|
||||||
|
description: 'On-site support and in-person consultations.',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Fair Pricing',
|
||||||
|
description: 'Transparent pricing with no hidden costs.',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Quick Response',
|
||||||
|
description: 'Short response times for inquiries and issues.',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
// Contact
|
||||||
|
contact: {
|
||||||
|
title: 'Contact',
|
||||||
|
subtitle: 'Let\'s work together',
|
||||||
|
intro: 'Have a project in mind or need technical support? I look forward to hearing from you!',
|
||||||
|
form: {
|
||||||
|
name: 'Name',
|
||||||
|
namePlaceholder: 'Your name',
|
||||||
|
email: 'Email',
|
||||||
|
emailPlaceholder: 'your@email.com',
|
||||||
|
subject: 'Subject',
|
||||||
|
subjectPlaceholder: 'What is it about?',
|
||||||
|
message: 'Message',
|
||||||
|
messagePlaceholder: 'Your message...',
|
||||||
|
submit: 'Send Message',
|
||||||
|
sending: 'Sending...',
|
||||||
|
success: 'Message sent successfully! I\'ll get back to you soon.',
|
||||||
|
error: 'Error sending message. Please try again or contact me directly.',
|
||||||
|
},
|
||||||
|
info: {
|
||||||
|
title: 'Contact Info',
|
||||||
|
email: 'Email',
|
||||||
|
location: 'Location',
|
||||||
|
github: 'GitHub',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
// Footer
|
||||||
|
footer: {
|
||||||
|
copyright: '© {year} Ragusa IT-Consulting. All rights reserved.',
|
||||||
|
madeWith: 'Built with',
|
||||||
|
and: 'and',
|
||||||
|
},
|
||||||
|
};
|
||||||
71
src/i18n/index.tsx
Normal file
71
src/i18n/index.tsx
Normal file
@@ -0,0 +1,71 @@
|
|||||||
|
import { createContext, useContext, useState, useEffect, type ReactNode } from 'react';
|
||||||
|
import { de, type Translations } from './de';
|
||||||
|
import { en } from './en';
|
||||||
|
|
||||||
|
type Language = 'de' | 'en';
|
||||||
|
|
||||||
|
interface LanguageContextType {
|
||||||
|
language: Language;
|
||||||
|
setLanguage: (lang: Language) => void;
|
||||||
|
t: Translations;
|
||||||
|
}
|
||||||
|
|
||||||
|
const translations: Record<Language, Translations> = { de, en };
|
||||||
|
|
||||||
|
const LanguageContext = createContext<LanguageContextType | undefined>(undefined);
|
||||||
|
|
||||||
|
const STORAGE_KEY = 'ragusa-it-lang';
|
||||||
|
|
||||||
|
function getInitialLanguage(): Language {
|
||||||
|
if (typeof window === 'undefined') return 'de';
|
||||||
|
|
||||||
|
const stored = localStorage.getItem(STORAGE_KEY);
|
||||||
|
if (stored === 'de' || stored === 'en') return stored;
|
||||||
|
|
||||||
|
const browserLang = navigator.language.split('-')[0];
|
||||||
|
return browserLang === 'en' ? 'en' : 'de';
|
||||||
|
}
|
||||||
|
|
||||||
|
export function LanguageProvider({ children }: { children: ReactNode }) {
|
||||||
|
const [language, setLanguageState] = useState<Language>('de');
|
||||||
|
const [isInitialized, setIsInitialized] = useState(false);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
setLanguageState(getInitialLanguage());
|
||||||
|
setIsInitialized(true);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const setLanguage = (lang: Language) => {
|
||||||
|
setLanguageState(lang);
|
||||||
|
localStorage.setItem(STORAGE_KEY, lang);
|
||||||
|
document.documentElement.lang = lang;
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (isInitialized) {
|
||||||
|
document.documentElement.lang = language;
|
||||||
|
}
|
||||||
|
}, [language, isInitialized]);
|
||||||
|
|
||||||
|
const value: LanguageContextType = {
|
||||||
|
language,
|
||||||
|
setLanguage,
|
||||||
|
t: translations[language],
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<LanguageContext.Provider value={value}>
|
||||||
|
{children}
|
||||||
|
</LanguageContext.Provider>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function useTranslation() {
|
||||||
|
const context = useContext(LanguageContext);
|
||||||
|
if (!context) {
|
||||||
|
throw new Error('useTranslation must be used within a LanguageProvider');
|
||||||
|
}
|
||||||
|
return context;
|
||||||
|
}
|
||||||
|
|
||||||
|
export type { Language, Translations };
|
||||||
9
src/main.tsx
Normal file
9
src/main.tsx
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
import { StrictMode } from 'react';
|
||||||
|
import { createRoot } from 'react-dom/client';
|
||||||
|
import { App } from './App';
|
||||||
|
|
||||||
|
createRoot(document.getElementById('root')!).render(
|
||||||
|
<StrictMode>
|
||||||
|
<App />
|
||||||
|
</StrictMode>
|
||||||
|
);
|
||||||
144
src/pages/About.module.css
Normal file
144
src/pages/About.module.css
Normal file
@@ -0,0 +1,144 @@
|
|||||||
|
.about {
|
||||||
|
padding-top: 80px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Hero */
|
||||||
|
.hero {
|
||||||
|
padding: var(--space-3xl) 0;
|
||||||
|
text-align: center;
|
||||||
|
background: linear-gradient(
|
||||||
|
180deg,
|
||||||
|
var(--md-sys-color-surface-container-lowest) 0%,
|
||||||
|
var(--md-sys-color-background) 100%
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: clamp(2.5rem, 5vw, 4rem);
|
||||||
|
font-weight: 700;
|
||||||
|
margin-bottom: var(--space-md);
|
||||||
|
}
|
||||||
|
|
||||||
|
.subtitle {
|
||||||
|
font-size: 1.25rem;
|
||||||
|
color: var(--md-sys-color-primary);
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Intro */
|
||||||
|
.intro {
|
||||||
|
padding: var(--space-3xl) 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.introContent {
|
||||||
|
max-width: 800px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.introText {
|
||||||
|
font-size: 1.125rem;
|
||||||
|
line-height: 1.8;
|
||||||
|
margin-bottom: var(--space-lg);
|
||||||
|
color: var(--md-sys-color-on-surface);
|
||||||
|
opacity: 0.9;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Section Header */
|
||||||
|
.sectionHeader {
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: var(--space-2xl);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sectionHeader h2 {
|
||||||
|
font-size: clamp(1.75rem, 3vw, 2.5rem);
|
||||||
|
margin-bottom: var(--space-sm);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sectionHeader p {
|
||||||
|
font-size: 1rem;
|
||||||
|
opacity: 0.75;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Skills */
|
||||||
|
.skills {
|
||||||
|
padding: var(--space-3xl) 0;
|
||||||
|
background-color: var(--md-sys-color-surface-container-lowest);
|
||||||
|
}
|
||||||
|
|
||||||
|
.techGrid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
|
||||||
|
gap: var(--space-md);
|
||||||
|
max-width: 800px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.techCard {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--space-sm);
|
||||||
|
padding: var(--space-lg);
|
||||||
|
background-color: var(--md-sys-color-surface-container);
|
||||||
|
border: 1px solid var(--md-sys-color-outline-variant);
|
||||||
|
border-radius: var(--radius-lg);
|
||||||
|
transition: border-color var(--transition-fast), background-color var(--transition-fast);
|
||||||
|
}
|
||||||
|
|
||||||
|
.techCard:hover {
|
||||||
|
border-color: var(--md-sys-color-primary);
|
||||||
|
background-color: var(--md-sys-color-surface-container-high);
|
||||||
|
}
|
||||||
|
|
||||||
|
.techIcon {
|
||||||
|
font-size: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.techName {
|
||||||
|
font-size: 0.875rem;
|
||||||
|
font-weight: 500;
|
||||||
|
color: var(--md-sys-color-on-surface);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Values */
|
||||||
|
.values {
|
||||||
|
padding: var(--space-3xl) 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.valuesGrid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||||
|
gap: var(--space-xl);
|
||||||
|
}
|
||||||
|
|
||||||
|
.valueCard {
|
||||||
|
padding: var(--space-xl);
|
||||||
|
background-color: var(--md-sys-color-surface-container);
|
||||||
|
border: 1px solid var(--md-sys-color-outline-variant);
|
||||||
|
border-radius: var(--radius-lg);
|
||||||
|
transition: border-color var(--transition-fast);
|
||||||
|
}
|
||||||
|
|
||||||
|
.valueCard:hover {
|
||||||
|
border-color: var(--md-sys-color-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.valueNumber {
|
||||||
|
font-size: 2rem;
|
||||||
|
font-weight: 700;
|
||||||
|
color: var(--md-sys-color-primary);
|
||||||
|
opacity: 0.5;
|
||||||
|
margin-bottom: var(--space-sm);
|
||||||
|
}
|
||||||
|
|
||||||
|
.valueTitle {
|
||||||
|
font-size: 1.25rem;
|
||||||
|
font-weight: 600;
|
||||||
|
margin-bottom: var(--space-sm);
|
||||||
|
}
|
||||||
|
|
||||||
|
.valueDescription {
|
||||||
|
font-size: 0.95rem;
|
||||||
|
opacity: 0.75;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
140
src/pages/About.tsx
Normal file
140
src/pages/About.tsx
Normal file
@@ -0,0 +1,140 @@
|
|||||||
|
import { motion } from 'motion/react';
|
||||||
|
import { useTranslation } from '../i18n';
|
||||||
|
import styles from './About.module.css';
|
||||||
|
|
||||||
|
const techStack = [
|
||||||
|
{ name: 'React', icon: '⚛️' },
|
||||||
|
{ name: 'TypeScript', icon: '📘' },
|
||||||
|
{ name: 'Node.js', icon: '🟢' },
|
||||||
|
{ name: 'Python', icon: '🐍' },
|
||||||
|
{ name: 'Firebase', icon: '🔥' },
|
||||||
|
{ name: 'PostgreSQL', icon: '🐘' },
|
||||||
|
{ name: 'Docker', icon: '🐳' },
|
||||||
|
{ name: 'Git', icon: '📦' },
|
||||||
|
];
|
||||||
|
|
||||||
|
const containerVariants = {
|
||||||
|
hidden: { opacity: 0 },
|
||||||
|
visible: {
|
||||||
|
opacity: 1,
|
||||||
|
transition: { staggerChildren: 0.1 },
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
const itemVariants = {
|
||||||
|
hidden: { opacity: 0, y: 20 },
|
||||||
|
visible: {
|
||||||
|
opacity: 1,
|
||||||
|
y: 0,
|
||||||
|
transition: { duration: 0.4 },
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
export function About() {
|
||||||
|
const { t } = useTranslation();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<main className={styles.about}>
|
||||||
|
{/* Hero Section */}
|
||||||
|
<section className={styles.hero}>
|
||||||
|
<div className="container">
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, y: 30 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ duration: 0.6 }}
|
||||||
|
>
|
||||||
|
<h1 className={styles.title}>{t.about.title}</h1>
|
||||||
|
<p className={styles.subtitle}>{t.about.subtitle}</p>
|
||||||
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Intro Section */}
|
||||||
|
<section className={styles.intro}>
|
||||||
|
<div className="container">
|
||||||
|
<motion.div
|
||||||
|
className={styles.introContent}
|
||||||
|
initial={{ opacity: 0, y: 30 }}
|
||||||
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
transition={{ duration: 0.5 }}
|
||||||
|
>
|
||||||
|
<p className={styles.introText}>{t.about.intro}</p>
|
||||||
|
<p className={styles.introText}>{t.about.experience}</p>
|
||||||
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Skills Section */}
|
||||||
|
<section className={styles.skills}>
|
||||||
|
<div className="container">
|
||||||
|
<motion.div
|
||||||
|
className={styles.sectionHeader}
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
transition={{ duration: 0.5 }}
|
||||||
|
>
|
||||||
|
<h2>{t.about.skills.title}</h2>
|
||||||
|
<p>{t.about.skills.subtitle}</p>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
<motion.div
|
||||||
|
className={styles.techGrid}
|
||||||
|
variants={containerVariants}
|
||||||
|
initial="hidden"
|
||||||
|
whileInView="visible"
|
||||||
|
viewport={{ once: true }}
|
||||||
|
>
|
||||||
|
{techStack.map((tech) => (
|
||||||
|
<motion.div
|
||||||
|
key={tech.name}
|
||||||
|
className={styles.techCard}
|
||||||
|
variants={itemVariants}
|
||||||
|
whileHover={{ scale: 1.05, y: -4 }}
|
||||||
|
>
|
||||||
|
<span className={styles.techIcon}>{tech.icon}</span>
|
||||||
|
<span className={styles.techName}>{tech.name}</span>
|
||||||
|
</motion.div>
|
||||||
|
))}
|
||||||
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Values Section */}
|
||||||
|
<section className={styles.values}>
|
||||||
|
<div className="container">
|
||||||
|
<motion.div
|
||||||
|
className={styles.sectionHeader}
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
transition={{ duration: 0.5 }}
|
||||||
|
>
|
||||||
|
<h2>{t.about.values.title}</h2>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
<motion.div
|
||||||
|
className={styles.valuesGrid}
|
||||||
|
variants={containerVariants}
|
||||||
|
initial="hidden"
|
||||||
|
whileInView="visible"
|
||||||
|
viewport={{ once: true }}
|
||||||
|
>
|
||||||
|
{t.about.values.items.map((value, index) => (
|
||||||
|
<motion.div
|
||||||
|
key={index}
|
||||||
|
className={styles.valueCard}
|
||||||
|
variants={itemVariants}
|
||||||
|
>
|
||||||
|
<div className={styles.valueNumber}>0{index + 1}</div>
|
||||||
|
<h3 className={styles.valueTitle}>{value.title}</h3>
|
||||||
|
<p className={styles.valueDescription}>{value.description}</p>
|
||||||
|
</motion.div>
|
||||||
|
))}
|
||||||
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
);
|
||||||
|
}
|
||||||
141
src/pages/Contact.module.css
Normal file
141
src/pages/Contact.module.css
Normal file
@@ -0,0 +1,141 @@
|
|||||||
|
.contact {
|
||||||
|
padding-top: 80px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Hero */
|
||||||
|
.hero {
|
||||||
|
padding: var(--space-3xl) 0;
|
||||||
|
text-align: center;
|
||||||
|
background: linear-gradient(
|
||||||
|
180deg,
|
||||||
|
var(--md-sys-color-surface-container-lowest) 0%,
|
||||||
|
var(--md-sys-color-background) 100%
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: clamp(2.5rem, 5vw, 4rem);
|
||||||
|
font-weight: 700;
|
||||||
|
margin-bottom: var(--space-md);
|
||||||
|
}
|
||||||
|
|
||||||
|
.subtitle {
|
||||||
|
font-size: 1.25rem;
|
||||||
|
color: var(--md-sys-color-primary);
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Content */
|
||||||
|
.content {
|
||||||
|
padding: var(--space-3xl) 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
gap: var(--space-3xl);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.grid {
|
||||||
|
grid-template-columns: 1.5fr 1fr;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Form Section */
|
||||||
|
.formSection {
|
||||||
|
max-width: 600px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.intro {
|
||||||
|
font-size: 1.125rem;
|
||||||
|
line-height: 1.7;
|
||||||
|
margin-bottom: var(--space-2xl);
|
||||||
|
opacity: 0.9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: var(--space-lg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.success {
|
||||||
|
padding: var(--space-md);
|
||||||
|
background-color: rgba(127, 217, 152, 0.1);
|
||||||
|
border: 1px solid var(--md-sys-color-primary);
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
color: var(--md-sys-color-primary);
|
||||||
|
font-size: 0.95rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error {
|
||||||
|
padding: var(--space-md);
|
||||||
|
background-color: rgba(255, 180, 171, 0.1);
|
||||||
|
border: 1px solid var(--md-sys-color-error);
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
color: var(--md-sys-color-error);
|
||||||
|
font-size: 0.95rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Info Section */
|
||||||
|
.infoSection {
|
||||||
|
padding: var(--space-xl);
|
||||||
|
background-color: var(--md-sys-color-surface-container);
|
||||||
|
border: 1px solid var(--md-sys-color-outline-variant);
|
||||||
|
border-radius: var(--radius-lg);
|
||||||
|
height: fit-content;
|
||||||
|
}
|
||||||
|
|
||||||
|
.infoTitle {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
font-weight: 600;
|
||||||
|
margin-bottom: var(--space-xl);
|
||||||
|
}
|
||||||
|
|
||||||
|
.infoList {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: var(--space-xl);
|
||||||
|
}
|
||||||
|
|
||||||
|
.infoItem {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
gap: var(--space-md);
|
||||||
|
}
|
||||||
|
|
||||||
|
.infoIcon {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 44px;
|
||||||
|
height: 44px;
|
||||||
|
background-color: var(--md-sys-color-primary-container);
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
color: var(--md-sys-color-on-primary-container);
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.infoIcon svg {
|
||||||
|
width: 22px;
|
||||||
|
height: 22px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.infoItem h3 {
|
||||||
|
font-size: 0.875rem;
|
||||||
|
font-weight: 500;
|
||||||
|
color: var(--md-sys-color-on-surface);
|
||||||
|
opacity: 0.7;
|
||||||
|
margin-bottom: var(--space-xs);
|
||||||
|
}
|
||||||
|
|
||||||
|
.infoItem a {
|
||||||
|
font-size: 1rem;
|
||||||
|
color: var(--md-sys-color-primary);
|
||||||
|
word-break: break-all;
|
||||||
|
}
|
||||||
|
|
||||||
|
.infoItem a:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
244
src/pages/Contact.tsx
Normal file
244
src/pages/Contact.tsx
Normal file
@@ -0,0 +1,244 @@
|
|||||||
|
import { useState, type FormEvent } from 'react';
|
||||||
|
import { motion } from 'motion/react';
|
||||||
|
import emailjs from '@emailjs/browser';
|
||||||
|
import { useTranslation } from '../i18n';
|
||||||
|
import { Button, Input, Textarea } from '../components/ui';
|
||||||
|
import styles from './Contact.module.css';
|
||||||
|
|
||||||
|
// EmailJS configuration - replace these with your actual IDs
|
||||||
|
const EMAILJS_SERVICE_ID = 'YOUR_SERVICE_ID';
|
||||||
|
const EMAILJS_TEMPLATE_ID = 'YOUR_TEMPLATE_ID';
|
||||||
|
const EMAILJS_PUBLIC_KEY = 'YOUR_PUBLIC_KEY';
|
||||||
|
|
||||||
|
interface FormData {
|
||||||
|
name: string;
|
||||||
|
email: string;
|
||||||
|
subject: string;
|
||||||
|
message: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface FormErrors {
|
||||||
|
name?: string;
|
||||||
|
email?: string;
|
||||||
|
subject?: string;
|
||||||
|
message?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function Contact() {
|
||||||
|
const { t } = useTranslation();
|
||||||
|
const [formData, setFormData] = useState<FormData>({
|
||||||
|
name: '',
|
||||||
|
email: '',
|
||||||
|
subject: '',
|
||||||
|
message: '',
|
||||||
|
});
|
||||||
|
const [errors, setErrors] = useState<FormErrors>({});
|
||||||
|
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||||
|
const [submitStatus, setSubmitStatus] = useState<'idle' | 'success' | 'error'>('idle');
|
||||||
|
|
||||||
|
const validateForm = (): boolean => {
|
||||||
|
const newErrors: FormErrors = {};
|
||||||
|
|
||||||
|
if (!formData.name.trim()) {
|
||||||
|
newErrors.name = 'Required';
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!formData.email.trim()) {
|
||||||
|
newErrors.email = 'Required';
|
||||||
|
} else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email)) {
|
||||||
|
newErrors.email = 'Invalid email';
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!formData.subject.trim()) {
|
||||||
|
newErrors.subject = 'Required';
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!formData.message.trim()) {
|
||||||
|
newErrors.message = 'Required';
|
||||||
|
}
|
||||||
|
|
||||||
|
setErrors(newErrors);
|
||||||
|
return Object.keys(newErrors).length === 0;
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSubmit = async (e: FormEvent) => {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
if (!validateForm()) return;
|
||||||
|
|
||||||
|
setIsSubmitting(true);
|
||||||
|
setSubmitStatus('idle');
|
||||||
|
|
||||||
|
try {
|
||||||
|
await emailjs.send(
|
||||||
|
EMAILJS_SERVICE_ID,
|
||||||
|
EMAILJS_TEMPLATE_ID,
|
||||||
|
{
|
||||||
|
from_name: formData.name,
|
||||||
|
from_email: formData.email,
|
||||||
|
subject: formData.subject,
|
||||||
|
message: formData.message,
|
||||||
|
},
|
||||||
|
EMAILJS_PUBLIC_KEY
|
||||||
|
);
|
||||||
|
|
||||||
|
setSubmitStatus('success');
|
||||||
|
setFormData({ name: '', email: '', subject: '', message: '' });
|
||||||
|
} catch {
|
||||||
|
setSubmitStatus('error');
|
||||||
|
} finally {
|
||||||
|
setIsSubmitting(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleChange = (field: keyof FormData, value: string) => {
|
||||||
|
setFormData((prev) => ({ ...prev, [field]: value }));
|
||||||
|
if (errors[field]) {
|
||||||
|
setErrors((prev) => ({ ...prev, [field]: undefined }));
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<main className={styles.contact}>
|
||||||
|
{/* Hero */}
|
||||||
|
<section className={styles.hero}>
|
||||||
|
<div className="container">
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, y: 30 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ duration: 0.6 }}
|
||||||
|
>
|
||||||
|
<h1 className={styles.title}>{t.contact.title}</h1>
|
||||||
|
<p className={styles.subtitle}>{t.contact.subtitle}</p>
|
||||||
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Content */}
|
||||||
|
<section className={styles.content}>
|
||||||
|
<div className="container">
|
||||||
|
<div className={styles.grid}>
|
||||||
|
{/* Form */}
|
||||||
|
<motion.div
|
||||||
|
className={styles.formSection}
|
||||||
|
initial={{ opacity: 0, x: -30 }}
|
||||||
|
animate={{ opacity: 1, x: 0 }}
|
||||||
|
transition={{ duration: 0.5, delay: 0.2 }}
|
||||||
|
>
|
||||||
|
<p className={styles.intro}>{t.contact.intro}</p>
|
||||||
|
|
||||||
|
<form onSubmit={handleSubmit} className={styles.form}>
|
||||||
|
<Input
|
||||||
|
label={t.contact.form.name}
|
||||||
|
placeholder={t.contact.form.namePlaceholder}
|
||||||
|
value={formData.name}
|
||||||
|
onChange={(e) => handleChange('name', e.target.value)}
|
||||||
|
error={errors.name}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<Input
|
||||||
|
label={t.contact.form.email}
|
||||||
|
type="email"
|
||||||
|
placeholder={t.contact.form.emailPlaceholder}
|
||||||
|
value={formData.email}
|
||||||
|
onChange={(e) => handleChange('email', e.target.value)}
|
||||||
|
error={errors.email}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<Input
|
||||||
|
label={t.contact.form.subject}
|
||||||
|
placeholder={t.contact.form.subjectPlaceholder}
|
||||||
|
value={formData.subject}
|
||||||
|
onChange={(e) => handleChange('subject', e.target.value)}
|
||||||
|
error={errors.subject}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<Textarea
|
||||||
|
label={t.contact.form.message}
|
||||||
|
placeholder={t.contact.form.messagePlaceholder}
|
||||||
|
value={formData.message}
|
||||||
|
onChange={(e) => handleChange('message', e.target.value)}
|
||||||
|
error={errors.message}
|
||||||
|
rows={6}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<Button
|
||||||
|
type="submit"
|
||||||
|
variant="primary"
|
||||||
|
size="lg"
|
||||||
|
isLoading={isSubmitting}
|
||||||
|
disabled={isSubmitting}
|
||||||
|
>
|
||||||
|
{isSubmitting ? t.contact.form.sending : t.contact.form.submit}
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
{submitStatus === 'success' && (
|
||||||
|
<motion.p
|
||||||
|
className={styles.success}
|
||||||
|
initial={{ opacity: 0, y: 10 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
>
|
||||||
|
{t.contact.form.success}
|
||||||
|
</motion.p>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{submitStatus === 'error' && (
|
||||||
|
<motion.p
|
||||||
|
className={styles.error}
|
||||||
|
initial={{ opacity: 0, y: 10 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
>
|
||||||
|
{t.contact.form.error}
|
||||||
|
</motion.p>
|
||||||
|
)}
|
||||||
|
</form>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
{/* Info */}
|
||||||
|
<motion.div
|
||||||
|
className={styles.infoSection}
|
||||||
|
initial={{ opacity: 0, x: 30 }}
|
||||||
|
animate={{ opacity: 1, x: 0 }}
|
||||||
|
transition={{ duration: 0.5, delay: 0.3 }}
|
||||||
|
>
|
||||||
|
<h2 className={styles.infoTitle}>{t.contact.info.title}</h2>
|
||||||
|
|
||||||
|
<div className={styles.infoList}>
|
||||||
|
<div className={styles.infoItem}>
|
||||||
|
<div className={styles.infoIcon}>
|
||||||
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||||
|
<path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z" />
|
||||||
|
<polyline points="22,6 12,13 2,6" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3>{t.contact.info.email}</h3>
|
||||||
|
<a href="mailto:info@ragusa-it.dev">info@ragusa-it.dev</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className={styles.infoItem}>
|
||||||
|
<div className={styles.infoIcon}>
|
||||||
|
<svg viewBox="0 0 24 24" fill="currentColor">
|
||||||
|
<path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3>{t.contact.info.github}</h3>
|
||||||
|
<a
|
||||||
|
href="https://github.com/ragusa-it"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
>
|
||||||
|
github.com/ragusa-it
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
);
|
||||||
|
}
|
||||||
10
src/pages/Home.tsx
Normal file
10
src/pages/Home.tsx
Normal file
@@ -0,0 +1,10 @@
|
|||||||
|
import { Hero, Services } from '../components/sections';
|
||||||
|
|
||||||
|
export function Home() {
|
||||||
|
return (
|
||||||
|
<main>
|
||||||
|
<Hero />
|
||||||
|
<Services />
|
||||||
|
</main>
|
||||||
|
);
|
||||||
|
}
|
||||||
3
src/pages/index.ts
Normal file
3
src/pages/index.ts
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
export { Home } from './Home';
|
||||||
|
export { About } from './About';
|
||||||
|
export { Contact } from './Contact';
|
||||||
140
src/styles/global.css
Normal file
140
src/styles/global.css
Normal file
@@ -0,0 +1,140 @@
|
|||||||
|
@import './theme.css';
|
||||||
|
|
||||||
|
*, *::before, *::after {
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
scroll-behavior: smooth;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: var(--md-sys-typescale-body-font);
|
||||||
|
background-color: var(--md-sys-color-background);
|
||||||
|
color: var(--md-sys-color-on-background);
|
||||||
|
line-height: 1.6;
|
||||||
|
min-height: 100vh;
|
||||||
|
overflow-x: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
#root {
|
||||||
|
min-height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Typography */
|
||||||
|
h1, h2, h3, h4, h5, h6 {
|
||||||
|
font-family: var(--md-sys-typescale-display-font);
|
||||||
|
font-weight: 600;
|
||||||
|
line-height: 1.2;
|
||||||
|
color: var(--md-sys-color-on-surface);
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 { font-size: clamp(2.5rem, 5vw, 4rem); }
|
||||||
|
h2 { font-size: clamp(2rem, 4vw, 3rem); }
|
||||||
|
h3 { font-size: clamp(1.5rem, 3vw, 2rem); }
|
||||||
|
h4 { font-size: clamp(1.25rem, 2vw, 1.5rem); }
|
||||||
|
|
||||||
|
p {
|
||||||
|
color: var(--md-sys-color-on-surface);
|
||||||
|
opacity: 0.87;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: var(--md-sys-color-primary);
|
||||||
|
text-decoration: none;
|
||||||
|
transition: color var(--transition-fast);
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover {
|
||||||
|
color: var(--md-sys-color-on-primary-container);
|
||||||
|
}
|
||||||
|
|
||||||
|
code {
|
||||||
|
font-family: var(--md-sys-typescale-code-font);
|
||||||
|
background: var(--md-sys-color-surface-container);
|
||||||
|
padding: 0.2em 0.4em;
|
||||||
|
border-radius: var(--radius-sm);
|
||||||
|
font-size: 0.9em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Focus styles */
|
||||||
|
:focus-visible {
|
||||||
|
outline: 2px solid var(--md-sys-color-primary);
|
||||||
|
outline-offset: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Selection */
|
||||||
|
::selection {
|
||||||
|
background: var(--md-sys-color-primary);
|
||||||
|
color: var(--md-sys-color-on-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Scrollbar */
|
||||||
|
::-webkit-scrollbar {
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-track {
|
||||||
|
background: var(--md-sys-color-surface-container);
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-thumb {
|
||||||
|
background: var(--md-sys-color-outline);
|
||||||
|
border-radius: var(--radius-full);
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-thumb:hover {
|
||||||
|
background: var(--md-sys-color-outline-variant);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Container utility */
|
||||||
|
.container {
|
||||||
|
width: 100%;
|
||||||
|
max-width: var(--container-xl);
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 0 var(--space-lg);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Section spacing */
|
||||||
|
section {
|
||||||
|
padding: var(--space-3xl) 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Smooth page transitions */
|
||||||
|
.page-enter {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(20px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-enter-active {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
transition: opacity 300ms ease-out, transform 300ms ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Hide custom cursor on touch devices */
|
||||||
|
@media (hover: none) and (pointer: coarse) {
|
||||||
|
.custom-cursor {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Reduced motion */
|
||||||
|
@media (prefers-reduced-motion: reduce) {
|
||||||
|
*, *::before, *::after {
|
||||||
|
animation-duration: 0.01ms !important;
|
||||||
|
animation-iteration-count: 1 !important;
|
||||||
|
transition-duration: 0.01ms !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
scroll-behavior: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
86
src/styles/theme.css
Normal file
86
src/styles/theme.css
Normal file
@@ -0,0 +1,86 @@
|
|||||||
|
/* Material 3 Expressive Dark Theme - Green Tonal Palette */
|
||||||
|
:root {
|
||||||
|
/* Primary Green Tonal */
|
||||||
|
--md-sys-color-primary: #7FD998;
|
||||||
|
--md-sys-color-on-primary: #003919;
|
||||||
|
--md-sys-color-primary-container: #005227;
|
||||||
|
--md-sys-color-on-primary-container: #9AF6B2;
|
||||||
|
|
||||||
|
/* Secondary - Muted Green */
|
||||||
|
--md-sys-color-secondary: #B4CCB9;
|
||||||
|
--md-sys-color-on-secondary: #202D24;
|
||||||
|
--md-sys-color-secondary-container: #364339;
|
||||||
|
--md-sys-color-on-secondary-container: #D0E8D4;
|
||||||
|
|
||||||
|
/* Tertiary - Accent (subtle red from logo) */
|
||||||
|
--md-sys-color-tertiary: #F2B8B5;
|
||||||
|
--md-sys-color-on-tertiary: #4C2524;
|
||||||
|
--md-sys-color-tertiary-container: #6B3A39;
|
||||||
|
--md-sys-color-on-tertiary-container: #FFDAD7;
|
||||||
|
|
||||||
|
/* Error */
|
||||||
|
--md-sys-color-error: #FFB4AB;
|
||||||
|
--md-sys-color-on-error: #690005;
|
||||||
|
--md-sys-color-error-container: #93000A;
|
||||||
|
--md-sys-color-on-error-container: #FFDAD6;
|
||||||
|
|
||||||
|
/* Background & Surface - Dark with green undertone */
|
||||||
|
--md-sys-color-background: #0F1410;
|
||||||
|
--md-sys-color-on-background: #E1E3DF;
|
||||||
|
--md-sys-color-surface: #0F1410;
|
||||||
|
--md-sys-color-on-surface: #E1E3DF;
|
||||||
|
|
||||||
|
/* Surface Variants */
|
||||||
|
--md-sys-color-surface-dim: #0F1410;
|
||||||
|
--md-sys-color-surface-bright: #353A36;
|
||||||
|
--md-sys-color-surface-container-lowest: #0A0F0B;
|
||||||
|
--md-sys-color-surface-container-low: #171D18;
|
||||||
|
--md-sys-color-surface-container: #1B211C;
|
||||||
|
--md-sys-color-surface-container-high: #252B26;
|
||||||
|
--md-sys-color-surface-container-highest: #303631;
|
||||||
|
|
||||||
|
/* Outline */
|
||||||
|
--md-sys-color-outline: #8B9389;
|
||||||
|
--md-sys-color-outline-variant: #414942;
|
||||||
|
|
||||||
|
/* Inverse */
|
||||||
|
--md-sys-color-inverse-surface: #E1E3DF;
|
||||||
|
--md-sys-color-inverse-on-surface: #2E332F;
|
||||||
|
--md-sys-color-inverse-primary: #006D36;
|
||||||
|
|
||||||
|
/* Shadows & Elevation */
|
||||||
|
--md-sys-color-shadow: #000000;
|
||||||
|
--md-sys-color-scrim: #000000;
|
||||||
|
|
||||||
|
/* Typography */
|
||||||
|
--md-sys-typescale-display-font: 'Inter', sans-serif;
|
||||||
|
--md-sys-typescale-body-font: 'Inter', sans-serif;
|
||||||
|
--md-sys-typescale-code-font: 'JetBrains Mono', monospace;
|
||||||
|
|
||||||
|
/* Spacing */
|
||||||
|
--space-xs: 0.25rem;
|
||||||
|
--space-sm: 0.5rem;
|
||||||
|
--space-md: 1rem;
|
||||||
|
--space-lg: 1.5rem;
|
||||||
|
--space-xl: 2rem;
|
||||||
|
--space-2xl: 3rem;
|
||||||
|
--space-3xl: 4rem;
|
||||||
|
|
||||||
|
/* Border Radius - M3 Expressive uses larger radii */
|
||||||
|
--radius-sm: 8px;
|
||||||
|
--radius-md: 12px;
|
||||||
|
--radius-lg: 16px;
|
||||||
|
--radius-xl: 24px;
|
||||||
|
--radius-full: 9999px;
|
||||||
|
|
||||||
|
/* Transitions */
|
||||||
|
--transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
--transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
--transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
|
||||||
|
/* Container widths */
|
||||||
|
--container-sm: 640px;
|
||||||
|
--container-md: 768px;
|
||||||
|
--container-lg: 1024px;
|
||||||
|
--container-xl: 1280px;
|
||||||
|
}
|
||||||
6
src/vite-env.d.ts
vendored
Normal file
6
src/vite-env.d.ts
vendored
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
/// <reference types="vite/client" />
|
||||||
|
|
||||||
|
declare module '*.module.css' {
|
||||||
|
const classes: { [key: string]: string };
|
||||||
|
export default classes;
|
||||||
|
}
|
||||||
23
tsconfig.json
Normal file
23
tsconfig.json
Normal file
@@ -0,0 +1,23 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"target": "ES2020",
|
||||||
|
"useDefineForClassFields": true,
|
||||||
|
"lib": ["ES2020", "DOM", "DOM.Iterable"],
|
||||||
|
"module": "ESNext",
|
||||||
|
"skipLibCheck": true,
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
"allowImportingTsExtensions": true,
|
||||||
|
"resolveJsonModule": true,
|
||||||
|
"isolatedModules": true,
|
||||||
|
"noEmit": true,
|
||||||
|
"jsx": "react-jsx",
|
||||||
|
"strict": true,
|
||||||
|
"noUnusedLocals": true,
|
||||||
|
"noUnusedParameters": true,
|
||||||
|
"noFallthroughCasesInSwitch": true,
|
||||||
|
"allowSyntheticDefaultImports": true,
|
||||||
|
"esModuleInterop": true
|
||||||
|
},
|
||||||
|
"include": ["src"],
|
||||||
|
"references": [{ "path": "./tsconfig.node.json" }]
|
||||||
|
}
|
||||||
11
tsconfig.node.json
Normal file
11
tsconfig.node.json
Normal file
@@ -0,0 +1,11 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"composite": true,
|
||||||
|
"skipLibCheck": true,
|
||||||
|
"module": "ESNext",
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
"allowSyntheticDefaultImports": true,
|
||||||
|
"strict": true
|
||||||
|
},
|
||||||
|
"include": ["vite.config.ts"]
|
||||||
|
}
|
||||||
22
vite.config.ts
Normal file
22
vite.config.ts
Normal file
@@ -0,0 +1,22 @@
|
|||||||
|
import { defineConfig } from 'vite'
|
||||||
|
import react from '@vitejs/plugin-react'
|
||||||
|
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [react()],
|
||||||
|
build: {
|
||||||
|
outDir: 'build',
|
||||||
|
emptyOutDir: true,
|
||||||
|
rollupOptions: {
|
||||||
|
output: {
|
||||||
|
manualChunks: {
|
||||||
|
'three': ['three', '@react-three/fiber', '@react-three/drei'],
|
||||||
|
'motion': ['motion'],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
server: {
|
||||||
|
port: 3000,
|
||||||
|
open: true
|
||||||
|
}
|
||||||
|
})
|
||||||
Reference in New Issue
Block a user