Skip to content

Commit 261e26a

Browse files
kaankarakoc42kaankarakoc42
committed
team page added
1 parent 0a4b761 commit 261e26a

7 files changed

Lines changed: 353 additions & 6 deletions

File tree

‎index.html‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
12
<!DOCTYPE html>
23
<html lang="tr">
34
<head>
@@ -163,9 +164,9 @@
163164
</div>
164165
<div class="desktop-menu hidden md:flex space-x-8">
165166
<a href="#home" class="nav-link text-gray-700 hover:text-blue-900">Ana Sayfa</a>
167+
<a href="team.html" class="nav-link text-gray-700 hover:text-blue-900">Ekibimiz</a>
166168
<a href="#about" class="nav-link text-gray-700 hover:text-blue-900">Hakkımızda</a>
167169
<a href="#features" class="nav-link text-gray-700 hover:text-blue-900">Özellikler</a>
168-
<a href="#stats" class="nav-link text-gray-700 hover:text-blue-900">İstatistikler</a>
169170
<a href="#contact" class="nav-link text-gray-700 hover:text-blue-900">İletişim</a>
170171
</div>
171172
<div class="mobile-menu md:hidden">
@@ -177,11 +178,11 @@
177178
<!-- Mobile Menu -->
178179
<div id="mobile-menu-items" class="hidden md:hidden">
179180
<div class="px-2 pt-2 pb-3 space-y-1">
180-
<a href="#home" class="block px-3 py-2 text-gray-700 hover:text-blue-900">Ana Sayfa</a>
181-
<a href="#about" class="block px-3 py-2 text-gray-700 hover:text-blue-900">Hakkımızda</a>
182-
<a href="#features" class="block px-3 py-2 text-gray-700 hover:text-blue-900">Özellikler</a>
183-
<a href="#stats" class="block px-3 py-2 text-gray-700 hover:text-blue-900">İstatistikler</a>
184-
<a href="#contact" class="block px-3 py-2 text-gray-700 hover:text-blue-900">İletişim</a>
181+
<a href="index.html#home" class="block px-3 py-2 text-gray-700 hover:text-blue-900">Ana Sayfa</a>
182+
<a href="team.html" class="block px-3 py-2 text-gray-700 hover:text-blue-900">Ekibimiz</a>
183+
<a href="index.html#about" class="block px-3 py-2 text-gray-700 hover:text-blue-900">Hakkımızda</a>
184+
<a href="index.html#features" class="block px-3 py-2 text-gray-700 hover:text-blue-900">Özellikler</a>
185+
<a href="index.html#contact" class="block px-3 py-2 text-gray-700 hover:text-blue-900">İletişim</a>
185186
</div>
186187
</div>
187188
</div>

‎js/i18n.js‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
document.addEventListener('DOMContentLoaded', () => {
2+
// Get user's preferred language from localStorage or default to Turkish
3+
const currentLang = localStorage.getItem('language') || 'tr';
4+
5+
// Set initial language
6+
document.documentElement.lang = currentLang;
7+
document.getElementById('language-selector').value = currentLang;
8+
updateContent(currentLang);
9+
10+
// Add event listener for language selection
11+
document.getElementById('language-selector').addEventListener('change', (e) => {
12+
const selectedLang = e.target.value;
13+
localStorage.setItem('language', selectedLang);
14+
document.documentElement.lang = selectedLang;
15+
updateContent(selectedLang);
16+
});
17+
});
18+
19+
function updateContent(lang) {
20+
// Update all elements with data-i18n attribute
21+
document.querySelectorAll('[data-i18n]').forEach(element => {
22+
const key = element.getAttribute('data-i18n');
23+
if (translations[lang] && translations[lang][key]) {
24+
element.textContent = translations[lang][key];
25+
}
26+
});
27+
28+
// Update meta tags
29+
document.title = lang === 'tr' ? 'SECODE - Teknoloji Topluluğu' : 'SECODE - Technology Community';
30+
document.querySelector('meta[name="description"]').content = translations[lang].hero_description;
31+
}

‎js/translations.js‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
const translations = {
2+
en: {
3+
// Navigation
4+
nav_home: "Home",
5+
nav_about: "About",
6+
nav_features: "Features",
7+
nav_stats: "Stats",
8+
nav_contact: "Contact",
9+
10+
// Hero Section
11+
hero_title: "Welcome to SECODE",
12+
hero_description: "A professional community of computer engineering students passionate about cybersecurity, software development, and computer networks.",
13+
hero_join_button: "Join Community",
14+
hero_learn_more: "Learn More",
15+
16+
// Features Section
17+
features_title: "Our Expertise",
18+
cybersecurity_title: "Cybersecurity",
19+
cybersecurity_desc: "Comprehensive training and practical experience in ethical hacking, network security, and cyber defense strategies.",
20+
software_dev_title: "Software Development",
21+
software_dev_desc: "Professional training and project experience in modern programming languages, software architecture, and development practices.",
22+
networks_title: "Computer Networks",
23+
networks_desc: "Theoretical and practical knowledge in network protocols, architecture, and management.",
24+
25+
// Stats Section
26+
stats_title: "Community Statistics",
27+
stats_members: "Active Members",
28+
stats_projects: "Completed Projects",
29+
stats_workshops: "Training & Workshops",
30+
31+
// Contact Section
32+
contact_title: "Get in Touch",
33+
contact_desc: "Would you like to join our community? We'd love to hear from you!",
34+
contact_button: "Contact Us",
35+
join_button: "Join Community"
36+
},
37+
tr: {
38+
// Navigation
39+
nav_home: "Ana Sayfa",
40+
nav_about: "Hakkımızda",
41+
nav_features: "Özellikler",
42+
nav_stats: "İstatistikler",
43+
nav_contact: "İletişim",
44+
45+
// Hero Section
46+
hero_title: "SECODE'a Hoş Geldiniz",
47+
hero_description: "Siber güvenlik, yazılım geliştirme ve bilgisayar ağları konularında tutkulu bilgisayar mühendisliği öğrencilerinden oluşan profesyonel bir topluluk.",
48+
hero_join_button: "Topluluğa Katıl",
49+
hero_learn_more: "Daha Fazla Bilgi",
50+
51+
// Features Section
52+
features_title: "Uzmanlık Alanlarımız",
53+
cybersecurity_title: "Siber Güvenlik",
54+
cybersecurity_desc: "Etik hackerlık, ağ güvenliği ve siber savunma stratejileri konularında kapsamlı eğitim ve pratik deneyim fırsatları.",
55+
software_dev_title: "Yazılım Geliştirme",
56+
software_dev_desc: "Modern programlama dilleri, yazılım mimarisi ve geliştirme pratikleri konularında profesyonel eğitim ve proje deneyimi.",
57+
networks_title: "Bilgisayar Ağları",
58+
networks_desc: "Ağ protokolleri, mimarisi ve yönetimi konularında teorik ve pratik bilgi birikimi kazanma imkanı.",
59+
60+
// Stats Section
61+
stats_title: "Topluluk İstatistikleri",
62+
stats_members: "Aktif Üye",
63+
stats_projects: "Tamamlanan Proje",
64+
stats_workshops: "Eğitim & Workshop",
65+
66+
// Contact Section
67+
contact_title: "İletişime Geçin",
68+
contact_desc: "Topluluğumuza katılmak ister misiniz? Sizden haber almaktan mutluluk duyarız!",
69+
contact_button: "Bize Ulaşın",
70+
join_button: "Topluluğa Katıl"
71+
}
72+
};

‎members/hasan.jpg‎

20.1 KB
Loading

‎members/kaan.jpg‎

17.6 KB
Loading

‎members/muhammet.png‎

28.6 KB
Loading

‎team.html‎

Lines changed: 243 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,243 @@
1+
<!DOCTYPE html>
2+
<html lang="tr">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>SECODE - Ekibimiz</title>
7+
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
8+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
9+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
10+
<style>
11+
body {
12+
font-family: 'Inter', sans-serif;
13+
}
14+
.hero-gradient {
15+
background: linear-gradient(135deg, #1e40af 0%, #2563eb 100%);
16+
position: relative;
17+
overflow: hidden;
18+
}
19+
.hero-gradient::before {
20+
content: '';
21+
position: absolute;
22+
top: 0;
23+
left: 0;
24+
right: 0;
25+
bottom: 0;
26+
background: url('data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><rect width="1" height="1" fill="rgba(255,255,255,0.05)"/></svg>');
27+
opacity: 0.1;
28+
}
29+
.nav-link {
30+
position: relative;
31+
}
32+
.nav-link::after {
33+
content: '';
34+
position: absolute;
35+
width: 0;
36+
height: 2px;
37+
bottom: -2px;
38+
left: 0;
39+
background-color: #1e40af;
40+
transition: width 0.3s ease;
41+
}
42+
.nav-link:hover::after {
43+
width: 100%;
44+
}
45+
.team-card {
46+
transition: all 0.3s ease;
47+
}
48+
.team-card:hover {
49+
transform: translateY(-10px);
50+
}
51+
.social-icon {
52+
transition: all 0.3s ease;
53+
}
54+
.social-icon:hover {
55+
transform: translateY(-3px);
56+
}
57+
.logo {
58+
display: flex;
59+
align-items: center;
60+
gap: 0.5rem;
61+
}
62+
.logo-icon {
63+
width: 40px;
64+
height: 40px;
65+
background: linear-gradient(135deg, #1e40af 0%, #2563eb 100%);
66+
border-radius: 8px;
67+
display: flex;
68+
align-items: center;
69+
justify-content: center;
70+
color: white;
71+
font-size: 1.5rem;
72+
font-weight: bold;
73+
}
74+
.logo-text {
75+
font-size: 1.5rem;
76+
font-weight: 700;
77+
background: linear-gradient(135deg, #1e40af 0%, #2563eb 100%);
78+
-webkit-background-clip: text;
79+
-webkit-text-fill-color: transparent;
80+
}
81+
</style>
82+
</head>
83+
<body class="bg-gray-50">
84+
<body class="bg-gray-50">
85+
<!-- Navigation -->
86+
<nav class="bg-white shadow-lg fixed w-full z-50">
87+
<div class="max-w-7xl mx-auto px-4">
88+
<div class="flex justify-between items-center h-16">
89+
<div class="flex items-center">
90+
<span class="text-2xl font-bold text-blue-900">SECODE</span>
91+
</div>
92+
<div class="desktop-menu hidden md:flex space-x-8">
93+
<a href="index.html#home" class="nav-link text-gray-700 hover:text-blue-900">Ana Sayfa</a>
94+
<a href="team.html" class="nav-link text-gray-700 hover:text-blue-900">Ekibimiz</a>
95+
<a href="index.html#about" class="nav-link text-gray-700 hover:text-blue-900">Hakkımızda</a>
96+
<a href="index.html#features" class="nav-link text-gray-700 hover:text-blue-900">Özellikler</a>
97+
<a href="index.html#contact" class="nav-link text-gray-700 hover:text-blue-900">İletişim</a>
98+
</div>
99+
<div class="mobile-menu md:hidden">
100+
<button id="mobile-menu-button" class="text-gray-700 hover:text-blue-900">
101+
<i class="fas fa-bars text-2xl"></i>
102+
</button>
103+
</div>
104+
</div>
105+
<!-- Mobile Menu -->
106+
<div id="mobile-menu-items" class="hidden md:hidden">
107+
<div class="px-2 pt-2 pb-3 space-y-1">
108+
<a href="index.html#home" class="block px-3 py-2 text-gray-700 hover:text-blue-900">Ana Sayfa</a>
109+
<a href="team.html" class="block px-3 py-2 text-gray-700 hover:text-blue-900">Ekibimiz</a>
110+
<a href="index.html#about" class="block px-3 py-2 text-gray-700 hover:text-blue-900">Hakkımızda</a>
111+
<a href="index.html#features" class="block px-3 py-2 text-gray-700 hover:text-blue-900">Özellikler</a>
112+
<a href="index.html#contact" class="block px-3 py-2 text-gray-700 hover:text-blue-900">İletişim</a>
113+
</div>
114+
</div>
115+
</div>
116+
</nav>
117+
118+
<!-- Team Section -->
119+
<section id="team" class="py-20 bg-gray-50">
120+
<div class="max-w-7xl mx-auto px-4">
121+
<div class="text-center mb-12">
122+
<h2 class="text-3xl font-bold mb-4" data-i18n="team_title">Ekibimiz</h2>
123+
<p class="text-gray-600 max-w-2xl mx-auto" data-i18n="team_description">
124+
Tutkulu ve yetenekli ekibimizle teknoloji dünyasında fark yaratıyoruz.
125+
</p>
126+
</div>
127+
128+
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
129+
<!-- Community Leader -->
130+
<div class="bg-white rounded-lg shadow-lg overflow-hidden transform transition-all hover:-translate-y-2">
131+
<div class="p-6">
132+
<div class="w-32 h-32 mx-auto mb-4 rounded-full overflow-hidden">
133+
<img src="members/kaan.jpg" alt="Community Leader" class="w-full h-full object-cover">
134+
</div>
135+
<h3 class="text-xl font-semibold text-center mb-2">Mevlüt Kaan Karakoç</h3>
136+
<p class="text-blue-600 text-center mb-4" data-i18n="role_leader">Topluluk Lideri</p>
137+
<p class="text-gray-600 text-center mb-4">@2024</p>
138+
<div class="flex justify-center space-x-4">
139+
<a href="https://www.linkedin.com/in/mevlutkaankarakoc" target="_blank" class="text-gray-600 hover:text-blue-600">
140+
<i class="fab fa-linkedin text-xl"></i>
141+
</a>
142+
<a href="https://github.com/kaankarakoc42" target="_blank" class="text-gray-600 hover:text-blue-600">
143+
<i class="fab fa-github text-xl"></i>
144+
</a>
145+
</div>
146+
</div>
147+
</div>
148+
149+
<!-- Vice President -->
150+
<div class="bg-white rounded-lg shadow-lg overflow-hidden transform transition-all hover:-translate-y-2">
151+
<div class="p-6">
152+
<div class="w-32 h-32 mx-auto mb-4 rounded-full overflow-hidden">
153+
<img src="members/muhammet.png" alt="Vice President" class="w-full h-full object-cover">
154+
</div>
155+
<h3 class="text-xl font-semibold text-center mb-2">Muhammet Kaya</h3>
156+
<p class="text-blue-600 text-center mb-4" data-i18n="role_vice_president">Başkan Yardımcısı</p>
157+
<p class="text-gray-600 text-center mb-4">@2024</p>
158+
<div class="flex justify-center space-x-4">
159+
<a href="https://www.linkedin.com/in/muhammed-kaya-76a8a1282?miniProfileUrn=urn%3Ali%3Afs_miniProfile%3AACoAAETUtQIBjxRAHjbuqe5B5HrAcnqXTmWaIJA&lipi=urn%3Ali%3Apage%3Ad_flagship3_profile_view_base%3BNPntNK2mS3mD0CGN1E%2FxuQ%3D%3D" target="_blank" class="text-gray-600 hover:text-blue-600">
160+
<i class="fab fa-linkedin text-xl"></i>
161+
</a>
162+
<a href="https://github.com/[profile]" target="_blank" class="text-gray-600 hover:text-blue-600">
163+
<i class="fab fa-github text-xl"></i>
164+
</a>
165+
</div>
166+
</div>
167+
</div>
168+
169+
<!-- Secretary -->
170+
<div class="bg-white rounded-lg shadow-lg overflow-hidden transform transition-all hover:-translate-y-2">
171+
<div class="p-6">
172+
<div class="w-32 h-32 mx-auto mb-4 rounded-full overflow-hidden">
173+
<img src="members/hasan.jpg" alt="Secretary" class="w-full h-full object-cover">
174+
</div>
175+
<h3 class="text-xl font-semibold text-center mb-2">Hasan Server Kamber</h3>
176+
<p class="text-blue-600 text-center mb-4" data-i18n="role_secretary">Sekreter</p>
177+
<p class="text-gray-600 text-center mb-4">@2024</p>
178+
<div class="flex justify-center space-x-4">
179+
<a href="https://www.linkedin.com/in/hasan-server-kamber-64ba97296" target="_blank" class="text-gray-600 hover:text-blue-600">
180+
<i class="fab fa-linkedin text-xl"></i>
181+
</a>
182+
<a href="https://github.com/[profile]" target="_blank" class="text-gray-600 hover:text-blue-600">
183+
<i class="fab fa-github text-xl"></i>
184+
</a>
185+
</div>
186+
</div>
187+
</div>
188+
</div>
189+
</div>
190+
</section>
191+
<footer class="bg-gray-900 text-white py-12">
192+
<div class="max-w-7xl mx-auto px-4">
193+
<div class="text-center mb-8">
194+
<h3 class="text-xl font-semibold mb-4">Bizi Sosyal Medyada Takip Edin</h3>
195+
<div class="flex justify-center space-x-6">
196+
<a href="https://instagram.com/secode__" target="_blank" rel="noopener noreferrer" class="social-icon text-2xl hover:text-blue-400">
197+
<i class="fab fa-instagram"></i>
198+
</a>
199+
<a href="https://t.me/+8QWKBexyXxwxZmJk" target="_blank" rel="noopener noreferrer" class="social-icon text-2xl hover:text-blue-400">
200+
<i class="fab fa-telegram"></i>
201+
</a>
202+
<a href="https://github.com/SecodeCommunity" target="_blank" rel="noopener noreferrer" class="social-icon text-2xl hover:text-blue-400">
203+
<i class="fab fa-github"></i>
204+
</a>
205+
<a href="https://www.linkedin.com/company/secode-sakarya-uygulamal%C4%B1-bilimler-%C3%BCniversitesi-siber-g%C3%BCvenlik-%C3%B6%C4%9Frenci-toplulu%C4%9Fu" target="_blank" rel="noopener noreferrer" class="social-icon text-2xl hover:text-blue-400">
206+
<i class="fab fa-linkedin"></i>
207+
</a>
208+
</div>
209+
</div>
210+
<div class="text-center border-t border-gray-800 pt-8">
211+
<p>&copy; 2024 SECODE. Tüm hakları saklıdır.</p>
212+
</div>
213+
</div>
214+
</footer>
215+
216+
<script>
217+
// Smooth scrolling for navigation links
218+
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
219+
anchor.addEventListener('click', function (e) {
220+
e.preventDefault();
221+
document.querySelector(this.getAttribute('href')).scrollIntoView({
222+
behavior: 'smooth'
223+
});
224+
});
225+
});
226+
227+
// Mobile menu toggle
228+
const mobileMenuButton = document.getElementById('mobile-menu-button');
229+
const mobileMenuItems = document.getElementById('mobile-menu-items');
230+
231+
mobileMenuButton.addEventListener('click', () => {
232+
mobileMenuItems.classList.toggle('hidden');
233+
});
234+
235+
// Close mobile menu when clicking outside
236+
document.addEventListener('click', (e) => {
237+
if (!mobileMenuButton.contains(e.target) && !mobileMenuItems.contains(e.target)) {
238+
mobileMenuItems.classList.add('hidden');
239+
}
240+
});
241+
</script>
242+
</body>
243+
</html>

0 commit comments

Comments
 (0)