Initial architecture with i18n
This commit is contained in:
commit
6fbf2538e8
|
|
@ -0,0 +1,66 @@
|
||||||
|
/* Custom Styles for serdartorun.dev */
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--navy: #0a192f;
|
||||||
|
--light-navy: #112240;
|
||||||
|
--lightest-navy: #233554;
|
||||||
|
--cyber-green: #64ffda;
|
||||||
|
--slate: #8892b0;
|
||||||
|
--white: #e6f1ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
background-color: var(--navy);
|
||||||
|
scroll-behavior: smooth;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Custom Scrollbar */
|
||||||
|
::-webkit-scrollbar {
|
||||||
|
width: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-track {
|
||||||
|
background: var(--navy);
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-thumb {
|
||||||
|
background: var(--lightest-navy);
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-thumb:hover {
|
||||||
|
background: var(--cyber-green);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Glassmorphism Cards */
|
||||||
|
.glass-card {
|
||||||
|
background: rgba(17, 34, 64, 0.7);
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
border: 1px solid rgba(100, 255, 218, 0.1);
|
||||||
|
transition: transform 0.3s ease, border 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.glass-card:hover {
|
||||||
|
transform: translateY(-5px);
|
||||||
|
border-color: var(--cyber-green);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Typewriter Effect for Hero */
|
||||||
|
.mono {
|
||||||
|
font-family: 'Space Mono', 'Roboto Mono', monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Lang Switcher Active State */
|
||||||
|
button.active-lang {
|
||||||
|
color: var(--cyber-green);
|
||||||
|
border-color: var(--cyber-green);
|
||||||
|
background: rgba(100, 255, 218, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Background Grid Effect (Defense System Vibe) */
|
||||||
|
.bg-grid {
|
||||||
|
background-image: radial-gradient(var(--lightest-navy) 1px, transparent 1px);
|
||||||
|
background-size: 40px 40px;
|
||||||
|
opacity: 0.3;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,17 @@
|
||||||
|
async function updateContent(lang) {
|
||||||
|
const response = await fetch('./assets/js/lang.json');
|
||||||
|
const translations = await response.json();
|
||||||
|
|
||||||
|
document.querySelectorAll('[data-i18n]').forEach(element => {
|
||||||
|
const key = element.getAttribute('data-i18n');
|
||||||
|
element.textContent = translations[lang][key];
|
||||||
|
});
|
||||||
|
|
||||||
|
localStorage.setItem('preferredLang', lang);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Sayfa yüklendiğinde varsayılan dili kontrol et
|
||||||
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
const savedLang = localStorage.getItem('preferredLang') || 'tr';
|
||||||
|
updateContent(savedLang);
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,20 @@
|
||||||
|
{
|
||||||
|
"tr": {
|
||||||
|
"nav_pillars": "Uzmanlık Alanları",
|
||||||
|
"nav_projects": "Projeler",
|
||||||
|
"hero_title": "Organizasyonel Kalite Mimarı",
|
||||||
|
"hero_subtitle": "Savunma & Trading için AI Destekli V&V",
|
||||||
|
"hero_desc": "Formal test süreçlerini AI orkestrasyonu ile birleştirerek, kritik sistemlerde doğrulanabilir kalite standartları inşa ediyorum.",
|
||||||
|
"cta_projects": "Projeleri İncele",
|
||||||
|
"evidence_btn": "Kanıt Paketini İndir"
|
||||||
|
},
|
||||||
|
"en": {
|
||||||
|
"nav_pillars": "Expertise Pillars",
|
||||||
|
"nav_projects": "Projects",
|
||||||
|
"hero_title": "Organizational Quality Architect",
|
||||||
|
"hero_subtitle": "AI-Driven V&V for Defense & Trading",
|
||||||
|
"hero_desc": "Bridging formal testing processes with AI orchestration to build verifiable quality standards in mission-critical systems.",
|
||||||
|
"cta_projects": "Explore Projects",
|
||||||
|
"evidence_btn": "Download Evidence Pack"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,34 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="tr">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Serdar Torun | Quality Architect</title>
|
||||||
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
<link rel="stylesheet" href="./assets/css/style.css">
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body class="bg-[#0a192f] text-[#ccd6f6]">
|
||||||
|
<nav class="p-6 flex justify-between bg-[#020c1b]">
|
||||||
|
<div class="text-[#64ffda] font-bold">serdartorun.dev</div>
|
||||||
|
<div class="flex gap-4 items-center">
|
||||||
|
<a href="#" data-i18n="nav_pillars" class="hover:text-[#64ffda]"></a>
|
||||||
|
<button onclick="updateContent('tr')" class="text-xs border px-1">TR</button>
|
||||||
|
<button onclick="updateContent('en')" class="text-xs border px-1">EN</button>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<header class="h-[70vh] flex flex-col justify-center px-20">
|
||||||
|
<h1 data-i18n="hero_title" class="text-5xl font-bold text-white"></h1>
|
||||||
|
<h2 data-i18n="hero_subtitle" class="text-3xl text-[#8892b0] mt-2"></h2>
|
||||||
|
<p data-i18n="hero_desc" class="mt-6 max-w-2xl text-[#8892b0]"></p>
|
||||||
|
<div class="mt-10 flex gap-4">
|
||||||
|
<button data-i18n="cta_projects" class="border border-[#64ffda] text-[#64ffda] px-6 py-3 rounded"></button>
|
||||||
|
<button data-i18n="evidence_btn" class="bg-[#64ffda] text-[#0a192f] px-6 py-3 rounded font-bold"></button>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<script src="./assets/js/i18n.js"></script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
Loading…
Reference in New Issue