Webleb - UI Elements - Ateşten İlham: Web Developer Portfolio (Tailwind CSS)

HTML

<!DOCTYPE html>

<head>

<title>Ateşten İlham | Yaratıcı Düşünür</title>

tailwind.config = {

theme: {

extend: {

fontFamily: {

serif: ['"Cormorant Garamond"', 'serif'],

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

},

colors: {

fire: {

900: '#1a0f0f',

800: '#2c1a1a',

700: '#3d2424',

600: '#5a2e2e',

500: '#8B4513',

400: '#D2691E',

300: '#FF8C00',

200: '#FFA500',

100: '#FFDAB9',

},

creative: {

900: '#1A1C2E',

800: '#2A2D4A',

500: '#FF6B35',

400: '#FF8C42',

300: '#E55D2B',

},

accent: '#FFD700',

mist: 'rgba(255, 255, 255, 0.05)',

},

animation: {

'float': 'float 6s ease-in-out infinite',

'breathe': 'breathe 8s ease-in-out infinite',

'fadeIn': 'fadeIn 1s ease-in-out',

'pulse-slow': 'pulse 3s ease-in-out infinite',

'glow': 'glow 2s ease-in-out infinite alternate',

},

keyframes: {

float: {

'0%, 100%': { transform: 'translateY(0)' },

'50%': { transform: 'translateY(-15px)' },

},

breathe: {

'0%, 100%': { opacity: '0.8' },

'50%': { opacity: '1' },

},

fadeIn: {

'0%': { opacity: '0', transform: 'translateY(20px)' },

'100%': { opacity: '1', transform: 'translateY(0)' },

},

glow: {

'0%': { boxShadow: '0 0 5px rgba(255, 107, 53, 0.5)' },

'100%': { boxShadow: '0 0 20px rgba(255, 107, 53, 0.8)' },

}

</script>

<style>

/* Özel stiller */

body {

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

background-color: #1a0f0f;

color: #FFDAB9;

overflow-x: hidden;

}

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

font-family: 'Cormorant Garamond', serif;

}

/* Particles arkaplan */

#particles-js {

position: fixed;

width: 100%;

height: 100%;

top: 0;

left: 0;

z-index: -1;

background: linear-gradient(135deg, #1a0f0f 0%, #2c1a1a 100%);

}

/* Glassmorphism efekti */

.glass-panel {

background: rgba(44, 26, 26, 0.7);

backdrop-filter: blur(12px);

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

border: 1px solid rgba(255, 255, 255, 0.08);

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

}

.glass-nav {

background: rgba(26, 15, 15, 0.85);

backdrop-filter: blur(15px);

border-bottom: 1px solid rgba(255, 107, 53, 0.2);

}

/* Özel scrollbar */

::-webkit-scrollbar {

width: 8px;

}

::-webkit-scrollbar-track {

background: #1a0f0f;

}

::-webkit-scrollbar-thumb {

background: #8B4513;

border-radius: 10px;

}

::-webkit-scrollbar-thumb:hover {

background: #D2691E;

}

/* Skill bar animasyonu */

.skill-progress {

transition: width 1.5s ease-out;

}

/* Blink animasyonu */

.typed-cursor {

color: #FFD700;

animation: blink 1s infinite;

}

@keyframes blink {

0% { opacity: 1; }

50% { opacity: 0; }

100% { opacity: 1; }

}

/* Section ayırıcı */

.section-divider {

height: 1px;

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

margin: 4rem auto;

width: 80%;

}

/* Parlayan efekt */

.glow-effect {

position: relative;

}

.glow-effect::after {

content: '';

position: absolute;

top: 0;

left: 0;

right: 0;

bottom: 0;

border-radius: inherit;

box-shadow: 0 0 20px rgba(255, 107, 53, 0.3);

opacity: 0;

transition: opacity 0.3s ease;

pointer-events: none;

}

.glow-effect:hover::after {

opacity: 1;

}

</style>

</head>

<span class="font-serif text-2xl font-bold tracking-wider text-white">ATEŞTEN<span class="text-accent">İLHAM</span></span>

</div>

<button onclick="scrollToSection('home')" class="nav-link hover:text-accent transition-colors duration-300">Ana Sayfa</button>

<button onclick="scrollToSection('about')" class="nav-link hover:text-accent transition-colors duration-300">Hakkımda</button>

<button onclick="scrollToSection('skills')" class="nav-link hover:text-accent transition-colors duration-300">Yetenekler</button>

<button onclick="scrollToSection('portfolio')" class="nav-link hover:text-accent transition-colors duration-300">Portfolyo</button>

<button onclick="scrollToSection('blog')" class="nav-link hover:text-accent transition-colors duration-300">Düşünceler</button>

<button onclick="scrollToSection('contact')" class="nav-link hover:text-accent transition-colors duration-300">İletişim</button>

</div>

</button>

</div>

<button onclick="scrollToSection('home')" class="py-2 hover:text-accent">Ana Sayfa</button>

<button onclick="scrollToSection('about')" class="py-2 hover:text-accent">Hakkımda</button>

<button onclick="scrollToSection('skills')" class="py-2 hover:text-accent">Yetenekler</button>

<button onclick="scrollToSection('portfolio')" class="py-2 hover:text-accent">Portfolyo</button>

<button onclick="scrollToSection('blog')" class="py-2 hover:text-accent">Düşünceler</button>

<button onclick="scrollToSection('contact')" class="py-2 hover:text-accent">İletişim</button>

</div>

</nav>

<img src="https://images.unsplash.com/photo-1519681393784-d120267933ba?q=80&w=2070&auto=format&fit=crop"

class="w-full h-full object-cover opacity-40" alt="Ateş ve Volkan Manzarası">

</div>

Ateş ve Yaratıcılığın Buluşma Noktası

</span>

Merhaba, Ben <span class="text-accent block mt-4">Ateş Sever</span>

</h1>

</div>

Ateşin dönüştürücü gücünden ilham alarak, dijital dünyada tutkulu ve etkileyici çözümler üretiyorum. Burada keşiflerimi, düşüncelerimi ve projelerimi paylaşıyorum.

</p>

Çalışmalarımı Keşfet

</button>

İletişime Geç

</button>

</div>

</div>

</section>

<h2 class="font-serif text-4xl md:text-5xl text-white mb-4">Ateş İle İç İçe Bir Yolculuk</h2>

<p class="text-fire-100/70 max-w-xl mx-auto">Ateşin dönüştürücü gücünü anlamak, yaratıcı sürecimin temel taşıdır.</p>

</div>

<img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?q=80&w=774&auto=format&fit=crop"

class="w-full h-auto" alt="Profil Fotoğrafı">

</div>

</div>

<h3 class="font-serif text-3xl text-white mb-6">Ateşten Öğrendiklerim</h3>

Ateşin dansını izlerken, her bir kıvılcımın, her bir alevin kendi benzersiz hikayesi olduğunu fark ettim. Tıpkı insanlar gibi.

Bu farkındalık, tasarım ve geliştirme yaklaşımımı şekillendirdi.

</p>

Sistem Mühendisliği geçmişim ve ateşe olan tutkum, teknoloji ile tutkuyu birleştiren projeler

üretmemi sağladı. Amacım, dijital dünyada ateşin enerjisini ve dönüştürücü gücünü yansıtmak.

</p>

<span class="text-sm">İstanbul, Türkiye</span>

</div>

<span class="text-sm">Sistem Mühendisliği</span>

</div>

<span class="text-sm">Ateş & Teknoloji</span>

</div>

</section>

<h2 class="font-serif text-4xl md:text-5xl text-white mb-4">Tutkulu Yetenekler</h2>

<p class="text-fire-100/70 max-w-xl mx-auto">Ateşin çeşitliliği gibi, becerilerim de farklı alanlara yayılıyor.</p>

</div>

</div>

<h3 class="font-serif text-2xl text-white mb-4">Web Geliştirme</h3>

<p class="text-fire-100/70 mb-6">HTML, CSS, JavaScript ve modern framework'ler ile ateş temalı, tutkulu web deneyimleri oluşturuyorum.</p>

</div>

</div>

</div>

<h3 class="font-serif text-2xl text-white mb-4">UI/UX Tasarım</h3>

<p class="text-fire-100/70 mb-6">Ateşin renk paletinden ilham alarak, tutkulu ve etkileyici arayüzler tasarlıyorum.</p>

</div>

</div>

</div>

<h3 class="font-serif text-2xl text-white mb-4">Dinamik Tasarım</h3>

<p class="text-fire-100/70 mb-6">Enerjik ve hareketli, kullanıcıyı etkileyen dijital çözümler geliştiriyorum.</p>

</div>

</div>

</section>

<h2 class="font-serif text-4xl md:text-5xl text-white mb-4">Ateş Temalı Projelerim</h2>

<p class="text-fire-100/70 max-w-xl mx-auto">Ateşten ilham alan ve insan-tutku bağını güçlendiren projeler.</p>

</div>

<img src="https://images.unsplash.com/photo-1519681393784-d120267933ba?q=80&w=2070&auto=format&fit=crop"

class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110" alt="Ateş Temalı Blog Projesi">

</div>

<h3 class="font-serif text-2xl text-white">Ateş Blog Platformu</h3>

</div>

<p class="text-fire-100/70 text-sm mb-4">Tutkulu yaşam ve enerji dolu içerikler üreten bir blog platformu.</p>

<span class="text-xs px-2 py-1 bg-fire-800 rounded">JavaScript</span>

</div>

<img src="https://images.unsplash.com/photo-1518834103328-93d45986dce1?q=80&w=2070&auto=format&fit=crop"

class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110" alt="Enerji Takip Uygulaması">

</div>

<h3 class="font-serif text-2xl text-white">Enerji Takip Uygulaması</h3>

<span class="text-xs px-2 py-1 bg-fire-600 rounded-full">Mobil</span>

</div>

<p class="text-fire-100/70 text-sm mb-4">Kullanıcıların enerji seviyelerini takip edebileceği ve motivasyon kaynaklarını bulabileceği bir mobil uygulama.</p>

<span class="text-xs px-2 py-1 bg-fire-800 rounded">React Native</span>

<span class="text-xs px-2 py-1 bg-fire-800 rounded">Firebase</span>

</div>

<img src="https://images.unsplash.com/photo-1518709268805-4e9042af2176?q=80&w=2068&auto=format&fit=crop"

class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110" alt="Tutkulu Yaşam Rehberi">

</div>

<h3 class="font-serif text-2xl text-white">Tutkulu Yaşam Rehberi</h3>

</div>

<p class="text-fire-100/70 text-sm mb-4">İç motivasyonu artırmak için pratik öneriler sunan interaktif bir web sitesi.</p>

<span class="text-xs px-2 py-1 bg-fire-800 rounded">Tailwind</span>

<span class="text-xs px-2 py-1 bg-fire-800 rounded">MongoDB</span>

</div>

</section>

<h2 class="font-serif text-4xl md:text-5xl text-white mb-4">Ateş ve Teknoloji Düşünceleri</h2>

<p class="text-fire-100/70 max-w-xl mx-auto">Ateşten öğrendiklerimi ve dijital dünyadaki deneyimlerimi paylaşıyorum.</p>

</div>

<img src="https://images.unsplash.com/photo-1519681393784-d120267933ba?q=80&w=2070&auto=format&fit=crop"

class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110" alt="Ateş ve Teknoloji Dengesi">

</div>

<span class="text-xs text-fire-400 font-bold tracking-widest uppercase">Felsefe</span>

<h3 class="font-serif text-2xl text-white mt-2 mb-3 group-hover:text-accent transition-colors">Ateş ve Teknoloji Dengesi</h3>

<p class="text-sm text-gray-300 leading-relaxed mb-4">Modern yaşamda tutku ile teknoloji arasında nasıl bir denge kurabiliriz? Bu yazıda, ikisini harmanlamanın yollarını keşfediyoruz.</p>

<span>5 dk okuma</span>

</div>

</article>

<img src="https://images.unsplash.com/photo-1518834103328-93d45986dce1?q=80&w=2070&auto=format&fit=crop"

class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110" alt="Tutkulu Web Tasarımı">

</div>

<span class="text-xs text-fire-400 font-bold tracking-widest uppercase">Tasarım</span>

<h3 class="font-serif text-2xl text-white mt-2 mb-3 group-hover:text-accent transition-colors">Tutkulu Web Tasarımı</h3>

<p class="text-sm text-gray-300 leading-relaxed mb-4">Web sitelerinin enerjisini nasıl artırabiliriz? Daha canlı, daha dinamik ve tutkulu web deneyimleri oluşturmanın yolları.</p>

<span>7 dk okuma</span>

</div>

</article>

<img src="https://images.unsplash.com/photo-1518709268805-4e9042af2176?q=80&w=2068&auto=format&fit=crop"

class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110" alt="Ateşten Öğrenmek">

</div>

<span class="text-xs text-fire-400 font-bold tracking-widest uppercase">Kişisel Gelişim</span>

<h3 class="font-serif text-2xl text-white mt-2 mb-3 group-hover:text-accent transition-colors">Ateşten Öğrenmek: Tutku ve Azim</h3>

<p class="text-sm text-gray-300 leading-relaxed mb-4">Ateşin enerjisinden, yaratıcı süreçlerimizde nasıl tutkulu ve azimli olmayı öğrenebiliriz?</p>

<span>4 dk okuma</span>

</div>

</article>

</div>

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

</button>

</div>

</section>

<h2 class="font-serif text-4xl md:text-5xl text-white mb-4">İletişime Geçelim</h2>

<p class="text-fire-100/70 max-w-xl mx-auto">Ateş, teknoloji veya tutkulu projeler hakkında konuşmak ister misiniz?</p>

</div>

</div>

<div>

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

<p class="text-fire-100/70">merhaba@atestenilham.com</p>

</div>

</div>

<div>

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

<p class="text-fire-100/70">İstanbul, Türkiye</p>

</div>

</div>

<div>

<h3 class="font-serif text-xl text-white mb-2">İlgi Alanlarım</h3>

<p class="text-fire-100/70">Tutku, enerji dolu teknoloji, web geliştirme, ateş sanatı</p>

</div>

<h3 class="font-serif text-2xl text-white mb-6">Mesaj Gönder</h3>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

Mesaj Gönder

</button>

</form>

</div>

</section>

</main>

<span class="font-serif text-2xl font-bold tracking-wider text-white">ATEŞTEN<span class="text-accent">İLHAM</span></span>

</div>

<p class="text-fire-100/60 text-sm">Ateş ve yaratıcılığın buluşma noktası</p>

</div>

</a>

</a>

</a>

</a>

</div>

<p class="text-fire-100/60 text-sm mt-1">Tutkuyu besleyelim, ilham alalım.</p>

</div>

</footer>

</button>

</div>

<div>

<h4 class="text-white text-sm font-bold">Başarılı</h4>

<p class="text-xs text-gray-300">Mesajınız alındı.</p>

</div>

// İkonları başlat

lucide.createIcons();

// Typed.js başlatma

document.addEventListener('DOMContentLoaded', function() {

new Typed("#typed-text", {

strings: ["Ateş Sever", "Tutkulu Geliştirici", "Enerji Dolu Teknoloji Tutkunu", "Ateş Sanatçısı"],

typeSpeed: 60,

backSpeed: 45,

loop: true,

showCursor: true,

cursorChar: '|',

});

// Particles.js konfigürasyonu

particlesJS("particles-js", {

"particles": {

"number": {

"value": 60,

"density": {

"enable": true,

"value_area": 800

}

},

"color": {

"value": "#D2691E"

},

"shape": {

"type": "circle"

},

"opacity": {

"value": 0.5,

"random": false

},

"size": {

"value": 3,

"random": true

},

"line_linked": {

"enable": true,

"distance": 150,

"color": "#D2691E",

"opacity": 0.4,

"width": 1

},

"move": {

"enable": true,

"speed": 2,

"direction": "none",

"random": false,

"straight": false,

"out_mode": "out",

"bounce": false

}

},

"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

}

},

"push": {

"particles_nb": 4

}

},

"retina_detect": true

});

// Scroll fonksiyonları

function scrollToSection(sectionId) {

const section = document.getElementById(sectionId);

if (section) {

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

const sectionPosition = section.offsetTop - navbarHeight;

window.scrollTo({

top: sectionPosition,

behavior: 'smooth'

});

// Mobil menüyü kapat

document.getElementById('mobile-menu').classList.add('hidden');

}

// Mobil menü toggle

function toggleMobileMenu() {

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

menu.classList.toggle('hidden');

}

// Scroll to top butonu

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

window.addEventListener('scroll', function() {

// Scroll to top butonunu göster/gizle

if (window.pageYOffset > 300) {

scrollTopBtn.classList.remove('opacity-0', 'invisible');

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

} else {

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

scrollTopBtn.classList.add('opacity-0', 'invisible');

}

// Navbar gölgesi

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

if (window.pageYOffset > 50) {

navbar.classList.add('shadow-lg');

} else {

navbar.classList.remove('shadow-lg');

}

});

scrollTopBtn.addEventListener('click', function() {

window.scrollTo({

top: 0,

behavior: 'smooth'

});

// Skill bar animasyonu

function animateSkillBars() {

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

skillBars.forEach(bar => {

const progress = bar.getAttribute('data-progress');

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

});

}

// Beceri bölümüne gelindiğinde animasyonu tetikle

const skillsSection = document.getElementById('skills');

const observerOptions = {

threshold: 0.3

};

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

entries.forEach(entry => {

if (entry.isIntersecting) {

animateSkillBars();

}

});

}, observerOptions);

if (skillsSection) {

observer.observe(skillsSection);

}

// Form gönderimi

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

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

if (contactForm) {

contactForm.addEventListener('submit', function(e) {

e.preventDefault();

// Toast bildirimini göster

toast.classList.remove('translate-x-60', 'opacity-0');

// Formu sıfırla

contactForm.reset();

// Toast bildirimini gizle

setTimeout(() => {

toast.classList.add('translate-x-60', 'opacity-0');

}, 3000);

});

}

// Sayfa yüklendiğinde beceri animasyonunu kontrol et

window.addEventListener('load', function() {

// Sayfa yüklendiğinde beceri bölümü görünüyorsa animasyonu çalıştır

const rect = skillsSection.getBoundingClientRect();

if (rect.top < window.innerHeight && rect.bottom >= 0) {

animateSkillBars();

}

});

// Navigasyon linklerine aktif durumu ekle

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

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

function highlightNavLink() {

let current = '';

const scrollPos = window.scrollY + 100;

sections.forEach(section => {

const sectionTop = section.offsetTop;

const sectionHeight = section.clientHeight;

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

current = section.getAttribute('id');

}

});

navLinks.forEach(link => {

link.classList.remove('text-accent');

if (link.getAttribute('onclick').includes(current)) {

link.classList.add('text-accent');

}

});

}

window.addEventListener('scroll', highlightNavLink);

</script>

</body>

</html>

CSS

JS

Ateşten İlham: Web Developer Portfolio (Tailwind CSS)

Recommended