Webleb - Snippets de Código

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

Recomendado

Um Código de Metehan

Um Código de Metehan

Um Código de Metehan

HTML

CSS

JS

Recomendado

Um Código de Metehan

Um Código de Metehan

Um Código de Metehan

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS