Webleb - UI Elements

HTML

<!DOCTYPE html>

<head>

<title>NEXUS | Yazılım & Sistem Mühendisliği</title>

tailwind.config = {

theme: {

extend: {

colors: {

nexusDark: '#0a192f',

nexusLight: '#112240',

nexusCyan: '#64ffda',

nexusSlate: '#8892b0',

nexusWhite: '#e6f1ff',

},

fontFamily: {

sans: ['Inter', 'sans-serif'],

tech: ['Orbitron', 'sans-serif'], // Başlıklar için fütüristik font

code: ['JetBrains Mono', 'monospace'], // Kod blokları için

}

</script>

<style>

/* --- Temel Ayarlar & Animasyonlar --- */

:root {

--cursor-size: 20px;

}

body {

background-color: #0a192f;

color: #8892b0;

overflow-x: hidden;

scroll-behavior: smooth;

}

/* Özel Scrollbar */

::-webkit-scrollbar {

width: 10px;

}

::-webkit-scrollbar-track {

background: #0a192f;

}

::-webkit-scrollbar-thumb {

background: #64ffda; /* Neon Cyan */

border-radius: 5px;

}

::-webkit-scrollbar-thumb:hover {

background: #4ac7aa;

}

/* Seçim Rengi */

::selection {

background: #64ffda;

color: #0a192f;

}

/* --- Navbar Glassmorphism --- */

.glass-nav {

background: rgba(10, 25, 47, 0.85);

backdrop-filter: blur(12px);

-webkit-backdrop-filter: blur(12px);

border-bottom: 1px solid rgba(100, 255, 218, 0.1);

transition: all 0.3s ease;

}

/* --- Mobil Menü Animasyonları --- */

.mobile-menu-overlay {

background: rgba(10, 25, 47, 0.98);

clip-path: circle(0% at 100% 0);

transition: clip-path 0.6s ease-in-out;

}

.mobile-menu-overlay.active {

clip-path: circle(150% at 100% 0);

}

.mobile-link {

opacity: 0;

transform: translateY(20px);

transition: all 0.4s ease;

}

.mobile-menu-overlay.active .mobile-link {

opacity: 1;

transform: translateY(0);

}

/* Staggered Delay for Menu Items */

.mobile-menu-overlay.active .mobile-link:nth-child(1) { transition-delay: 0.1s; }

.mobile-menu-overlay.active .mobile-link:nth-child(2) { transition-delay: 0.2s; }

.mobile-menu-overlay.active .mobile-link:nth-child(3) { transition-delay: 0.3s; }

.mobile-menu-overlay.active .mobile-link:nth-child(4) { transition-delay: 0.4s; }

.mobile-menu-overlay.active .mobile-link:nth-child(5) { transition-delay: 0.5s; }

/* --- Buton Efektleri --- */

.btn-neon {

border: 1px solid #64ffda;

color: #64ffda;

position: relative;

overflow: hidden;

z-index: 1;

transition: all 0.3s ease;

}

.btn-neon::before {

content: '';

position: absolute;

top: 0;

left: 0;

width: 0%;

height: 100%;

background: rgba(100, 255, 218, 0.1);

z-index: -1;

transition: width 0.3s ease;

}

.btn-neon:hover::before {

width: 100%;

}

.btn-neon:hover {

box-shadow: 0 0 15px rgba(100, 255, 218, 0.3);

transform: translateY(-2px);

}

/* --- Kart Efektleri --- */

.tech-card {

background: #112240;

transition: transform 0.3s ease, box-shadow 0.3s ease;

position: relative;

overflow: hidden;

}

.tech-card:hover {

transform: translateY(-7px);

box-shadow: 0 10px 30px -15px rgba(2, 12, 27, 0.7);

}

.tech-card::after {

content: "";

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 2px;

background: linear-gradient(90deg, transparent, #64ffda, transparent);

transform: scaleX(0);

transition: transform 0.3s ease;

}

.tech-card:hover::after {

transform: scaleX(1);

}

/* --- Preloader --- */

#preloader {

position: fixed;

inset: 0;

background: #020c1b;

z-index: 9999;

display: flex;

justify-content: center;

align-items: center;

transition: opacity 0.5s ease, visibility 0.5s ease;

}

.loader-path {

stroke-dasharray: 1000;

stroke-dashoffset: 1000;

animation: dash 2s linear forwards;

}

@keyframes dash {

to { stroke-dashoffset: 0; }

}

/* --- Hero Görsel Efekti --- */

.hero-overlay {

background: linear-gradient(135deg, rgba(10, 25, 47, 0.95) 0%, rgba(10, 25, 47, 0.8) 100%);

}

/* Glitch Efektli Metin */

.glitch-wrapper {

position: relative;

}

/* Floating Chat Button */

.chat-float {

animation: float 3s ease-in-out infinite;

}

@keyframes float {

0% { transform: translateY(0px); }

50% { transform: translateY(-10px); }

100% { transform: translateY(0px); }

}

</style>

</head>

</svg>

<div class="mt-4 text-nexusCyan font-code text-sm animate-pulse">Sistem Yükleniyor...</div>

</div>

<span>NEXUS</span>

</a>

<a href="#home" class="text-sm font-code text-nexusWhite hover:text-nexusCyan transition-colors"><span class="text-nexusCyan">01.</span> Başlangıç</a>

<a href="#about" class="text-sm font-code text-nexusWhite hover:text-nexusCyan transition-colors"><span class="text-nexusCyan">02.</span> Hakkımızda</a>

<a href="#expertise" class="text-sm font-code text-nexusWhite hover:text-nexusCyan transition-colors"><span class="text-nexusCyan">03.</span> Uzmanlık</a>

<a href="#projects" class="text-sm font-code text-nexusWhite hover:text-nexusCyan transition-colors"><span class="text-nexusCyan">04.</span> Projeler</a>

<a href="#contact" class="btn-neon px-5 py-2 rounded text-sm font-code">İletişim</a>

</div>

</button>

</div>

</nav>

<a href="#home" class="mobile-link text-2xl font-tech text-nexusWhite hover:text-nexusCyan" onclick="toggleMenu()">Başlangıç</a>

<a href="#about" class="mobile-link text-2xl font-tech text-nexusWhite hover:text-nexusCyan" onclick="toggleMenu()">Mühendislik</a>

<a href="#expertise" class="mobile-link text-2xl font-tech text-nexusWhite hover:text-nexusCyan" onclick="toggleMenu()">Hizmetler</a>

<a href="#projects" class="mobile-link text-2xl font-tech text-nexusWhite hover:text-nexusCyan" onclick="toggleMenu()">Sistemler</a>

<a href="#contact" class="mobile-link btn-neon px-8 py-3 rounded text-lg font-code mt-4 inline-block" onclick="toggleMenu()">İletişime Geç</a>

</div>

</div>

</div>

<p class="text-nexusCyan font-code mb-4 animate-fade-in-down">Merhaba, biz</p>

NEXUS <span class="text-nexusSlate opacity-50">ENGINEERING.</span>

</h1>

Sistemleri Gelecek İçin İnşa Ediyoruz.

</h2>

Yazılım mühendisliği ve donanım mimarisini birleştirerek ölçeklenebilir, güvenli ve yüksek performanslı dijital ekosistemler tasarlıyoruz.

</p>

<a href="#projects" class="btn-neon px-8 py-4 rounded font-code font-bold">Projeleri İncele</a>

Bizi Tanıyın <i class="fas fa-arrow-right text-sm"></i>

</a>

</div>

<span class="text-xs text-nexusSlate font-code ml-2">system_core.js</span>

</div>

<code>class NexusSystem {

constructor() {

this.architecture = 'Microservices';

this.uptime = '99.99%';

this.security = 'Quantum-Ready';

}

deploy() {

console.log('Sistem aktif...');

return this.optimize();

}

}</code></pre>

</div>

</div>

</section>

<h2 class="text-3xl font-bold font-tech text-nexusWhite"><span class="text-nexusCyan font-code text-xl mr-2">01.</span> Hakkımızda</h2>

</div>

<p>

Nexus olarak, kod yazmanın ötesinde <span class="text-nexusCyan">mühendislik prensiplerine</span> sadık kalarak karmaşık problemleri çözüyoruz. 2015'ten beri finans, sağlık ve savunma sanayii için kritik sistemler geliştiriyoruz.

</p>

<p>

Yaklaşımımız basit: <span class="text-nexusWhite">Sağlam Temel, Esnek Mimari.</span> Bir yazılımın sadece bugün çalışması yetmez; yarının yükünü de kaldırabilmelidir.

</p>

<p class="font-code text-sm text-nexusWhite mt-4">Kullandığımız Teknolojiler:</p>

<li class="flex items-center gap-2"><i class="fas fa-caret-right text-nexusCyan"></i> Python / Django</li>

<li class="flex items-center gap-2"><i class="fas fa-caret-right text-nexusCyan"></i> React & Next.js</li>

<li class="flex items-center gap-2"><i class="fas fa-caret-right text-nexusCyan"></i> C++ / Embedded</li>

<li class="flex items-center gap-2"><i class="fas fa-caret-right text-nexusCyan"></i> Docker & K8s</li>

<li class="flex items-center gap-2"><i class="fas fa-caret-right text-nexusCyan"></i> Cloud Architecture</li>

<li class="flex items-center gap-2"><i class="fas fa-caret-right text-nexusCyan"></i> Cyber Security</li>

</ul>

</div>

</div>

</section>

<h2 class="text-3xl font-bold font-tech text-nexusWhite"><span class="text-nexusCyan font-code text-xl mr-2">02.</span> Uzmanlık Alanları</h2>

</div>

<h3 class="text-xl font-bold text-nexusWhite mb-4">Backend Mimarisi</h3>

Yüksek trafikli uygulamalar için ölçeklenebilir API'lar, mikroservis mimarileri ve veritabanı optimizasyonu.

</p>

</div>

<h3 class="text-xl font-bold text-nexusWhite mb-4">Sistem Entegrasyonu</h3>

Farklı platformların (IoT, Web, Mobil) birbiriyle güvenli ve senkronize bir şekilde konuşmasını sağlıyoruz.

</p>

</div>

<h3 class="text-xl font-bold text-nexusWhite mb-4">Siber Güvenlik</h3>

Uçtan uca şifreleme, penetrasyon testleri ve güvenli kodlama standartları ile verilerinizi koruyoruz.

</p>

</div>

<h3 class="text-xl font-bold text-nexusWhite mb-4">Mobil & Web</h3>

Kullanıcı deneyimini (UX) merkeze alan, performans odaklı modern arayüzler ve native uygulamalar.

</p>

</div>

<h3 class="text-xl font-bold text-nexusWhite mb-4">Yapay Zeka</h3>

Veri analitiği, makine öğrenimi modelleri ve otomasyon süreçleri ile iş zekası çözümleri.

</p>

</div>

<h3 class="text-xl font-bold text-nexusWhite mb-4">DevOps & Cloud</h3>

CI/CD süreçleri, AWS/Azure altyapı yönetimi ve konteynerizasyon teknolojileri.

</p>

</div>

</section>

<h2 class="text-3xl font-bold font-tech text-nexusWhite"><span class="text-nexusCyan font-code text-xl mr-2">03.</span> Seçkin Projeler</h2>

</div>

</div>

<p class="text-nexusCyan font-code text-sm mb-2">Öne Çıkan Proje</p>

<h3 class="text-2xl font-bold text-nexusWhite mb-4 hover:text-nexusCyan transition-colors">Quantum Finans Platformu</h3>

Küresel borsalar için milisaniye düzeyinde işlem yapabilen, yapay zeka destekli yüksek frekanslı alım-satım (HFT) platformu.

</p>

</div>

<li>Python</li>

<li>WebSocket</li>

<li>Docker</li>

</ul>

</div>

<p class="text-nexusCyan font-code text-sm mb-2">Öne Çıkan Proje</p>

<h3 class="text-2xl font-bold text-nexusWhite mb-4 hover:text-nexusCyan transition-colors">Akıllı Şehir Otomasyonu</h3>

IoT sensörleri kullanarak trafik akışını, enerji tüketimini ve atık yönetimini optimize eden merkezi şehir yönetim sistemi.

</p>

</div>

<li>InfluxDB</li>

<li>React Native</li>

</ul>

</div>

</div>

<a href="#" class="btn-neon px-8 py-4 rounded font-code text-sm">Diğer Projeleri Arşivde Gör</a>

</div>

</section>

<p class="text-nexusCyan font-code mb-4">04. Sırada Ne Var?</p>

<h2 class="text-4xl md:text-5xl font-bold font-tech text-nexusWhite mb-6">İletişime Geçin</h2>

Ekibimiz şu anda yeni projeler ve işbirlikleri için müsait. İster bir sorunuz olsun, ister sadece merhaba demek isteyin, posta kutumuz her zaman açık.

</p>

<div>

</div>

<div>

<label class="block text-nexusCyan text-sm font-code mb-2">Email</label>

</div>

<label class="block text-nexusCyan text-sm font-code mb-2">Mesaj</label>

</div>

<button type="button" onclick="alert('Mesajınız simüle edildi. Teşekkürler!')" class="btn-neon w-full py-3 rounded font-bold">Gönder</button>

</form>

</div>

Bize Mail Atın

</a>

</div>

</section>

</div>

</p>

</div>

</footer>

</button>

</div>

<span class="text-nexusCyan font-code font-bold">Nexus AI</span>

</div>

Merhaba! Ben Nexus asistanı. Mühendislik hizmetlerimiz hakkında ne öğrenmek istersiniz?

</div>

</div>

// --- Preloader Logic ---

window.addEventListener('load', () => {

const preloader = document.getElementById('preloader');

setTimeout(() => {

preloader.style.opacity = '0';

preloader.style.visibility = 'hidden';

}, 1000); // 1 saniye sonra kaybolur

});

// --- Navbar Scroll Effect ---

const navbar = document.getElementById('navbar');

window.addEventListener('scroll', () => {

if (window.scrollY > 50) {

navbar.classList.add('glass-nav');

navbar.classList.add('py-2');

navbar.classList.remove('py-4');

} else {

navbar.classList.remove('glass-nav');

navbar.classList.remove('py-2');

navbar.classList.add('py-4');

}

});

// --- Mobile Menu Toggle ---

const menuBtn = document.getElementById('menu-btn');

const menuIcon = document.getElementById('menu-icon');

const mobileMenu = document.getElementById('mobile-menu');

let isMenuOpen = false;

function toggleMenu() {

isMenuOpen = !isMenuOpen;

if (isMenuOpen) {

mobileMenu.classList.add('active');

menuIcon.classList.remove('fa-bars');

menuIcon.classList.add('fa-times');

document.body.style.overflow = 'hidden'; // Scroll engelle

} else {

mobileMenu.classList.remove('active');

menuIcon.classList.remove('fa-times');

menuIcon.classList.add('fa-bars');

document.body.style.overflow = 'auto'; // Scroll aktif

}

menuBtn.addEventListener('click', toggleMenu);

// --- Chat Bot Logic ---

const chatWindow = document.getElementById('chat-window');

let isChatOpen = false;

function toggleChat() {

isChatOpen = !isChatOpen;

chatWindow.style.transform = isChatOpen ? 'scale(1)' : 'scale(0)';

}

function sendMessage() {

const input = document.getElementById('chat-input');

const messages = document.getElementById('chat-messages');

const text = input.value.trim();

if(text) {

// User Message

const userDiv = document.createElement('div');

userDiv.className = 'bg-nexusCyan/10 p-3 rounded-lg rounded-tr-none text-nexusWhite border border-nexusCyan/20 text-right ml-auto';

userDiv.textContent = text;

messages.appendChild(userDiv);

input.value = '';

messages.scrollTop = messages.scrollHeight;

// Auto Response

setTimeout(() => {

const botDiv = document.createElement('div');

botDiv.className = 'bg-nexusDark p-3 rounded-lg rounded-tl-none text-nexusSlate border border-nexusSlate/10';

botDiv.textContent = "Teşekkürler. Mühendis ekibimiz şu an kod derliyor, size en kısa sürede döneceğiz.";

messages.appendChild(botDiv);

messages.scrollTop = messages.scrollHeight;

}, 1000);

}

// Enter tuşu ile mesaj gönderme

document.getElementById('chat-input').addEventListener('keypress', function (e) {

if (e.key === 'Enter') {

sendMessage();

}

});

// --- Scroll Reveal Animations ---

const sr = ScrollReveal({

origin: 'bottom',

distance: '60px',

duration: 1000,

delay: 200,

easing: 'cubic-bezier(0.645, 0.045, 0.355, 1)'

});

sr.reveal('.reveal-bottom');

sr.reveal('.reveal-left', { origin: 'left' });

sr.reveal('.reveal-right', { origin: 'right' });

// --- Smooth Scroll for Anchor Links ---

document.querySelectorAll('a[href^="#"]').forEach(anchor => {

anchor.addEventListener('click', function (e) {

e.preventDefault();

document.querySelector(this.getAttribute('href')).scrollIntoView({

behavior: 'smooth'

});

</script>

</body>

</html>

Metehan

HTML

CSS

JS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS