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