Webleb - UI Elements - Mete'nin bir kodu

HTML

<!DOCTYPE html>

<head>

<title>Atilla Demir | Yaratıcı Zihin Günlüğü</title>

<style>

/* Custom styles & Tailwind overrides */

:root {

--primary-color: #7B68EE; /* MediumSlateBlue - Canlı mor */

--secondary-color: #5F4B8B; /* Rebeccapurple - Koyu mor */

--dark-bg: #1A1C2E; /* Koyu lacivert */

--light-text: #E0E0E0; /* Açık gri */

--accent-color: #FF7043; /* Canlı Turuncu */

--card-bg: rgba(255, 255, 255, 0.08); /* Hafif şeffaf kart */

--border-color: rgba(255, 255, 255, 0.15); /* Hafif beyaz çerçeve */

--transition-timing: cubic-bezier(0.175, 0.885, 0.32, 1.275);

}

body {

font-family: 'Inter', sans-serif;

background-color: var(--dark-bg);

color: var(--light-text);

line-height: 1.6;

scroll-behavior: smooth;

overflow-x: hidden; /* Prevent horizontal scroll */

}

h1, h2, h3, h4, h5, h6 {

font-family: 'Playfair Display', serif; /* Başlıklar için Playfair Display */

color: var(--light-text);

}

/* Particles.js Background */

#particles-js {

position: fixed;

width: 100%;

height: 100%;

z-index: -1;

top: 0;

left: 0;

background: linear-gradient(135deg, var(--dark-bg) 0%, #3a3f6f 100%);

}

/* Sticky Header */

.main-header.scrolled {

background-color: rgba(26, 28, 46, 0.9);

backdrop-filter: blur(12px);

box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);

padding-top: 0.75rem; /* py-3 */

padding-bottom: 0.75rem; /* py-3 */

}

/* Custom underline for nav links */

.nav-link::after {

content: '';

position: absolute;

bottom: -5px;

left: 0;

width: 0;

height: 2px;

background-color: var(--primary-color);

transition: width 0.3s var(--transition-timing);

}

.nav-link:hover::after, .nav-link.active::after {

width: 100%;

}

/* Hamburger Menu Animation */

.hamburger-menu.active .line:nth-child(1) {

transform: translateY(9.5px) rotate(45deg);

}

.hamburger-menu.active .line:nth-child(2) {

opacity: 0;

}

.hamburger-menu.active .line:nth-child(3) {

transform: translateY(-9.5px) rotate(-45deg);

}

/* Typed.js Cursor */

.typed-cursor {

color: var(--primary-color) !important;

font-size: 1em; /* Adjust relative to parent h1 font size */

opacity: 1;

animation: blink 0.7s infinite;

}

@keyframes blink { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } }

/* Skill Bar Animation */

.skill-progress {

width: 0; /* Initial width for animation */

transition: width 1.5s ease-out;

}

/* Form success message */

.form-message {

opacity: 0;

visibility: hidden;

transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;

}

.form-message.show {

opacity: 1;

visibility: visible;

}

/* Enhanced Button Styles based on "Live Demo" code */

.btn-custom {

display: inline-block;

padding: 0.8rem 2.2rem;

font-size: 1.1rem;

font-weight: 700;

text-transform: uppercase;

border-radius: 50px; /* More rounded as per "Live Demo" buttons */

transition: all 0.3s var(--transition-timing);

box-shadow: 0 5px 15px rgba(0,0,0,0.2); /* Base shadow for pop */

border: 2px solid transparent; /* Added border */

}

.btn-primary-custom {

background-color: var(--primary-color);

color: var(--light-text);

border-color: var(--primary-color); /* Match border to background initially */

}

.btn-primary-custom:hover {

background-color: var(--secondary-color);

transform: translateY(-5px);

box-shadow: 0 15px 30px rgba(123, 104, 238, 0.5); /* Stronger shadow */

border-color: var(--secondary-color);

}

.btn-secondary-custom {

background-color: transparent;

color: var(--light-text);

border-color: var(--light-text); /* White border */

}

.btn-secondary-custom:hover {

background-color: var(--light-text);

color: var(--dark-bg);

transform: translateY(-5px);

box-shadow: 0 15px 30px rgba(224, 224, 224, 0.3); /* Stronger shadow */

border-color: var(--light-text);

}

.btn-accent-custom {

background-color: var(--accent-color);

color: var(--light-text);

border-color: var(--accent-color);

}

.btn-accent-custom:hover {

background-color: #e85c34; /* Slightly darker accent on hover */

transform: translateY(-5px);

box-shadow: 0 15px 30px rgba(255, 112, 67, 0.5); /* Stronger shadow */

border-color: #e85c34;

}

.submit-btn {

background-color: var(--primary-color);

color: var(--light-text);

border: none;

padding: 1rem 2.5rem;

border-radius: 50px;

font-weight: 600;

cursor: pointer;

transition: all 0.3s var(--transition-timing);

display: inline-block;

box-shadow: 0 5px 15px rgba(0,0,0,0.2);

}

.submit-btn:hover {

background-color: var(--secondary-color);

transform: translateY(-5px);

box-shadow: 0 15px 30px rgba(123, 104, 238, 0.5); /* Stronger shadow */

}

/* Podcast platform buttons */

.platform-btn {

box-shadow: 0 3px 10px rgba(0,0,0,0.2);

transition: all 0.3s var(--transition-timing);

}

.platform-btn:hover {

transform: translateY(-3px);

box-shadow: 0 8px 18px rgba(0,0,0,0.3);

}

/* Scroll to top button */

#scroll-top-btn {

box-shadow: 0 5px 15px rgba(0,0,0,0.2);

}

#scroll-top-btn:hover {

transform: translateY(-5px) scale(1.05); /* Added scale on hover */

box-shadow: 0 10px 20px rgba(123, 104, 238, 0.4);

}

</style>

</head>

Yaratıcı<span class="text-[var(--primary-color)]">Zihin</span>

</a>

<a href="#home" class="nav-link text-lg font-medium text-white hover:text-[var(--primary-color)] transition-colors duration-300">Anasayfa</a>

<a href="#about" class="nav-link text-lg font-medium text-white hover:text-[var(--primary-color)] transition-colors duration-300">Hakkımda</a>

<a href="#podcast" class="nav-link text-lg font-medium text-white hover:text-[var(--primary-color)] transition-colors duration-300">Podcast</a>

<a href="#contact" class="nav-link text-lg font-medium text-white hover:text-[var(--primary-color)] transition-colors duration-300">İletişim</a>

</nav>

</button>

</div>

<li><a href="#home" class="nav-link text-2xl font-semibold text-white hover:text-[var(--primary-color)] transition-colors duration-300 py-2 block">Anasayfa</a></li>

<li><a href="#about" class="nav-link text-2xl font-semibold text-white hover:text-[var(--primary-color)] transition-colors duration-300 py-2 block">Hakkımda</a></li>

<li><a href="#podcast" class="nav-link text-2xl font-semibold text-white hover:text-[var(--primary-color)] transition-colors duration-300 py-2 block">Podcast</a></li>

<li><a href="#contact" class="nav-link text-2xl font-semibold text-white hover:text-[var(--primary-color)] transition-colors duration-300 py-2 block">İletişim</a></li>

</ul>

</div>

</header>

<h4 class="text-xl md:text-2xl font-medium text-[var(--primary-color)] mb-4 animate-fadeInUp delay-200">MERHABA, BEN</h4>

Atilla Demir, <br> <span id="typed-text" class="text-[var(--primary-color)]"></span>

</h1>

Dijital dünyanın derinliklerine dalmayı seven bir yaratıcıyım. Burada tasarım, teknoloji, inovasyon ve kişisel gelişim üzerine düşüncelerimi ve keşiflerimi paylaşıyorum.

</p>

Yazılarımı Keşfet

</a>

İletişime Geç

</a>

</div>

</div>

</section>

Hakkımda

</h2>

</div>

</div>

<h3 class="text-3xl md:text-4xl font-bold text-[var(--primary-color)] mb-6">Ben Kimim ve Neler Yaparım?</h3>

Ben Atilla Demir, yazılım geliştirme ve dijital tasarım alanında tutkulu bir yaratıcıyım. Sistem Mühendisliği eğitimimle birlikte, web dünyasının dinamiklerine ve kullanıcı deneyimini zenginleştirmeye odaklanıyorum. HTML, CSS ve JavaScript ile modern, estetik ve işlevsel arayüzler tasarlamayı çok seviyorum.

</p>

Bu blog, dijital sanat, yeni teknolojiler, yaratıcı problem çözme ve kişisel öğrenme yolculuğumu paylaştığım bir platform. Amacım, bilgi birikimimi ve deneyimlerimi aktarırken, aynı zamanda ilham verici içerikler sunarak sizin de yaratıcı potansiyelinizi keşfetmenize yardımcı olmak.

</p>

<span class="font-semibold text-white">Web Geliştirme (HTML, CSS, JS)</span>

</div>

</div>

<span class="font-semibold text-white">UX/UI Tasarım</span>

</div>

</div>

<span class="font-semibold text-white">Mobil Uygulama Geliştirme (Temel)</span>

</div>

</div>

<span class="font-semibold text-white">İçerik Üretimi & Blog Yazarlığı</span>

</div>

</div>

CV'mi İndir

</a>

</div>

</section>

Son Blog Yazılarım

</h2>

</div>

</div>

<h3 class="text-2xl font-bold text-[var(--primary-color)] mb-4">Renk Psikolojisi ve Marka Kimliği</h3>

</div>

Renklerin markaların bilinirliği ve tüketici algısı üzerindeki derin etkilerini keşfedin. Logodan web sitesine, doğru renk seçimi markanızın ruhunu nasıl yansıtır?

</p>

Devamını Oku

</a>

</article>

</div>

<h3 class="text-2xl font-bold text-[var(--primary-color)] mb-4">Web Tasarımında Minimalist Yaklaşım</h3>

</div>

Daha azın daha çok olduğu felsefesiyle, sade ve işlevsel web tasarımlarının kullanıcı deneyimini nasıl iyileştirdiğini inceleyin.

</p>

Devamını Oku

</a>

</article>

</div>

<h3 class="text-2xl font-bold text-[var(--primary-color)] mb-4">Yaratıcı Bloklarla Başa Çıkma Yolları</h3>

</div>

İlhamın tükendiği anlar herkesin başına gelebilir. Bu yazıda, yaratıcı tıkanıklıkları aşmak ve yeniden akışa geçmek için pratik teknikleri keşfedin.

</p>

Devamını Oku

</a>

</article>

</div>

<h3 class="text-2xl font-bold text-[var(--primary-color)] mb-4">2025'ün Gözde Frontend Araçları</h3>

</div>

Frontend geliştirme dünyasındaki en son trendleri ve projelerinizi hızlandıracak popüler kütüphaneleri ve framework'leri yakından tanıyın.

</p>

Devamını Oku

</a>

</article>

</div>

Tüm Yazıları Görüntüle

</a>

</div>

</section>

Yaratıcı Sohbetler Podcast'i

</h2>

</div>

</div>

<h3 class="text-3xl md:text-4xl font-bold text-[var(--primary-color)] mb-6">Fikirlerden İlham Alan Sohbetler</h3>

Farklı sektörlerden başarılı yaratıcılarla, onların ilham kaynakları, kariyer yolculukları ve projeleri hakkında derinlemesine sohbetler. Her bölümde yeni bir bakış açısı ve motivasyon bulacaksınız.

</p>

<h4 class="text-xl font-bold text-white mb-3">Son Bölüm: Episode 24 - Sürdürülebilir Tasarım ve Lisa Chen</h4>

<p class="text-base text-gray-400 mb-4">10 Haziran 2024 • 45 dk.</p>

Tarayıcınız ses öğesini desteklemiyor.

</audio>

</div>

<i class="fab fa-spotify mr-3 text-lg"></i> Spotify

</a>

<i class="fab fa-apple mr-3 text-lg"></i> Apple Podcasts

</a>

<i class="fab fa-google-play mr-3 text-lg"></i> Google Podcasts

</a>

<i class="fas fa-rss mr-3 text-lg"></i> RSS Beslemesi

</a>

</div>

</section>

İletişime Geçin

</h2>

</div>

</div>

<h3 class="text-2xl font-bold text-white mb-2">Konum</h3>

<p class="text-lg text-gray-300">İstanbul, Türkiye</p>

</div>

</div>

<h3 class="text-2xl font-bold text-white mb-2">E-posta</h3>

<p class="text-lg text-gray-300">info@atillademirblog.com</p>

</div>

</div>

<h3 class="text-2xl font-bold text-white mb-2">Telefon</h3>

</div>

</div>

<h3 class="text-2xl font-bold text-white mb-2">Çalışma Saatleri</h3>

</div>

<h3 class="text-3xl font-bold text-white mb-8 text-center">Bana Bir Mesaj Gönderin</h3>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

Mesajı Gönder

</button>

</form>

<i class="fas fa-check-circle mr-2"></i> Mesajınız başarıyla gönderildi! Teşekkür ederiz.

</div>

</section>

Yaratıcı<span class="text-[var(--primary-color)]">Zihin</span>

</a>

<li><a href="#home" class="text-gray-300 hover:text-[var(--primary-color)] transition-colors duration-300">Anasayfa</a></li>

<li><a href="#about" class="text-gray-300 hover:text-[var(--primary-color)] transition-colors duration-300">Hakkımda</a></li>

<li><a href="#podcast" class="text-gray-300 hover:text-[var(--primary-color)] transition-colors duration-300">Podcast</a></li>

<li><a href="#contact" class="text-gray-300 hover:text-[var(--primary-color)] transition-colors duration-300">İletişim</a></li>

</ul>

</div>

</p>

</div>

</footer>

</button>

// Mobile Navigation Toggle

const hamburger = document.getElementById('hamburger-menu');

const mobileNav = document.getElementById('mobile-nav');

const mobileNavLinks = mobileNav.querySelectorAll('.nav-link');

hamburger.addEventListener('click', () => {

mobileNav.classList.toggle('right-[-100%]');

mobileNav.classList.toggle('right-0');

hamburger.classList.toggle('active');

});

mobileNavLinks.forEach(link => {

link.addEventListener('click', () => {

mobileNav.classList.remove('right-0');

mobileNav.classList.add('right-[-100%]');

hamburger.classList.remove('active');

});

// Sticky Header on Scroll

const mainHeader = document.querySelector('.main-header');

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

mainHeader.classList.toggle('scrolled', window.scrollY > 80);

});

// Scroll to Top Button

const scrollTopBtn = document.getElementById('scroll-top-btn');

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

if (window.pageYOffset > 500) {

scrollTopBtn.classList.add('opacity-100', 'visible');

} else {

scrollTopBtn.classList.remove('opacity-100', 'visible');

}

});

scrollTopBtn.addEventListener('click', () => {

window.scrollTo({

top: 0,

behavior: 'smooth'

});

// Typed.js Initialization for Hero Section

// Ensures Typed.js is initialized only after the DOM is ready

document.addEventListener('DOMContentLoaded', () => {

if (document.getElementById('typed-text')) {

new Typed("#typed-text", {

strings: ["Yaratıcı Geliştirici", "Web Tasarımcısı", "İçerik Üreticisi", "Dijital Sanatçı"],

typeSpeed: 60,

backSpeed: 45,

loop: true,

showCursor: true,

cursorChar: '|',

});

}

});

// Skill Bars Animation on Scroll (Intersection Observer)

const skillProgressBars = document.querySelectorAll('.skill-progress');

const aboutSection = document.getElementById('about');

const skillObserver = new IntersectionObserver((entries) => {

entries.forEach(entry => {

if (entry.isIntersecting) {

skillProgressBars.forEach(bar => {

const progress = bar.dataset.progress;

bar.style.width = progress + '%';

});

skillObserver.unobserve(entry.target); // Stop observing once animated

}

});

}, { threshold: 0.3 }); // Trigger when 30% of the section is visible

if (aboutSection) {

skillObserver.observe(aboutSection);

}

// Contact Form Submission (without backend)

const contactForm = document.getElementById('contact-form');

const formSuccessMessage = document.getElementById('form-success-message');

if (contactForm) {

contactForm.addEventListener('submit', (e) => {

e.preventDefault(); // Prevent default form submission

// Display success message

formSuccessMessage.classList.add('show');

// Hide message after 5 seconds

setTimeout(() => {

formSuccessMessage.classList.remove('show');

}, 5000);

contactForm.reset(); // Clear the form fields

});

}

// Smooth Scroll for Navigation Links & Active Link Highlighting

const navLinks = document.querySelectorAll('.nav-link');

const sections = document.querySelectorAll('section[id]');

const mainHeaderElement = document.querySelector('.main-header'); // Reference to the header

function smoothScrollAndHighlight(e) {

if (e.target.matches('a[href^="#"]')) {

e.preventDefault();

const targetId = e.target.getAttribute('href');

const targetElement = document.querySelector(targetId);

if (targetElement) {

const headerHeight = mainHeaderElement.offsetHeight; // Get dynamic header height

const offsetPosition = targetElement.offsetTop - headerHeight - 20; // Extra padding

window.scrollTo({

top: offsetPosition,

behavior: 'smooth'

});

}

function highlightNavLink() {

let currentActiveSection = '';

const headerHeight = mainHeaderElement.offsetHeight; // Get dynamic header height

sections.forEach(section => {

const sectionTop = section.offsetTop - headerHeight - 30; // Adjusted offset

const sectionHeight = section.clientHeight;

if (pageYOffset >= sectionTop && pageYOffset < sectionTop + sectionHeight) {

currentActiveSection = section.getAttribute('id');

}

});

navLinks.forEach(link => {

link.classList.remove('active');

if (link.getAttribute('href') === `#${currentActiveSection}`) {

link.classList.add('active');

} else if (currentActiveSection === '' && link.getAttribute('href') === '#home') {

// Default to 'home' if at the very top or no section is active

link.classList.add('active');

}

});

}

document.addEventListener('DOMContentLoaded', () => {

// Add click listeners to all nav links (desktop and mobile)

document.querySelectorAll('nav a').forEach(link => {

link.addEventListener('click', smoothScrollAndHighlight);

});

highlightNavLink(); // Initial call

});

window.addEventListener('scroll', highlightNavLink);

// Particles.js Configuration

particlesJS("particles-js", {

"particles": {

"number": {

"value": 80,

"density": {

"enable": true,

"value_area": 800

}

},

"color": {

"value": "#7B68EE" /* Primary color for particles */

},

"shape": {

"type": "circle",

"stroke": {

"width": 0,

"color": "#000000"

},

"polygon": {

"nb_sides": 5

}

},

"opacity": {

"value": 0.5,

"random": false,

"anim": {

"enable": false,

"speed": 1,

"opacity_min": 0.1,

"sync": false

}

},

"size": {

"value": 3,

"random": true,

"anim": {

"enable": false,

"speed": 40,

"size_min": 0.1,

"sync": false

}

},

"line_linked": {

"enable": true,

"distance": 150,

"color": "#7B68EE", /* Primary color for lines */

"opacity": 0.4,

"width": 1

},

"move": {

"enable": true,

"speed": 2,

"direction": "none",

"random": false,

"straight": false,

"out_mode": "out",

"bounce": false,

"attract": {

"enable": false,

"rotateX": 600,

"rotateY": 1200

}

},

"interactivity": {

"detect_on": "canvas",

"events": {

"onhover": {

"enable": true,

"mode": "grab"

},

"onclick": {

"enable": true,

"mode": "push"

},

"resize": true

},

"modes": {

"grab": {

"distance": 140,

"line_linked": {

"opacity": 1

}

},

"bubble": {

"distance": 400,

"size": 40,

"duration": 2,

"opacity": 8,

"speed": 3

},

"repulse": {

"distance": 200,

"duration": 0.4

},

"push": {

"particles_nb": 4

},

"remove": {

"particles_nb": 2

}

},

"retina_detect": true

});

</script>

</body>

</html>

CSS

JS

Mete'nin bir kodu

Recommended