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>

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

Recommended

Modern Portfolio Website Template

Essential portfolio

HTML Developer Portfolio V2

HTML

CSS

JS

Recommended

Modern Portfolio Website Template

Essential portfolio

HTML Developer Portfolio V2

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS