Artistic Portfolio Haven tailwind.config = { theme: { extend: { fontFamily: { 'serif': ['Playfair Display', 'serif'], 'sans': ['Inter', 'sans-serif'], }, colors: { background: { 900: '#0f0f23', // Deep dark slate 800: '#1a1a2e', }, accent: '#f59e0b', // Amber primary: '#4f46e5', // Indigo secondary: '#8b5cf6', // Violet text: '#f1f5f9', // Gray light border: '#334155', // Subtle border }, backdropBlur: { xs: '2px', } } }, darkMode: 'class', } body { background-color: #0f0f23; color: #f1f5f9; } #noise { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: -1; opacity: 0.05; background-image: radial-gradient(2px 2px at 20px 30px, #00000015, transparent 50%), radial-gradient(2px 2px at 40px 70px, transparent, #00000015 50%), radial-gradient(1px 1px at 90px 40px, #00000015, transparent 50%), radial-gradient(1px 1px at 130px 80px, transparent, #00000015 50%), radial-gradient(2px 2px at 160px 30px, #00000015, transparent 50%); background-size: 200px 100px; animation: grain 0.2s steps(3) infinite; } @keyframes grain { 0%, 100% { transform: translate(0, 0); } 10% { transform: translate(-5%, -5%); } 20% { transform: translate(-10%, 5%); } 30% { transform: translate(5%, -10%); } 40% { transform: translate(-5%, 15%); } 50% { transform: translate(-10%, 5%); } 60% { transform: translate(15%, 0%); } 70% { transform: translate(0%, 10%); } 80% { transform: translate(-15%, 0%); } 90% { transform: translate(10%, 5%); } } .glass { background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.1); }

Artistic
Portfolio
Haven

Discover a world of creativity and immerse yourself in the artist's unique vision.

Artist

About the Artist

With a passion ignited in the quiet corners of urban landscapes, the artist draws from nature's raw beauty and architecture's stark lines to craft pieces that blur the boundaries between reality and dream.

Inspired by the interplay of light and shadow, each creation is a meditation on transience and eternity, inviting viewers to pause and reflect.

This portfolio is more than a showcase—it's an invitation to collaborate, connect, and co-create in the ever-evolving world of art.

Contact & Inquiries

gsap.registerPlugin(ScrollTrigger); // Hero parallax gsap.to(".hero-bg", { yPercent: -50, ease: "none", scrollTrigger: { trigger: ".hero-section", start: "top top", end: "bottom top", scrub: true } }); // Gallery images unmask gsap.utils.toArray(".group img").forEach((img, i) => { gsap.fromTo(img, { clipPath: "inset(100% 0 0 0)" }, { clipPath: "inset(0% 0 0 0)", duration: 1, ease: "power2.out", scrollTrigger: { trigger: img.parentElement, start: "top 80%", toggleActions: "play none none reverse" } } ); }); // About text reveal line by line gsap.utils.toArray("#about p").forEach((p, i) => { gsap.fromTo(p, { y: 50, opacity: 0 }, { y: 0, opacity: 1, duration: 1, stagger: 0.2, ease: "power2.out", scrollTrigger: { trigger: p, start: "top 85%", toggleActions: "play none none reverse" } } ); }); // Sticky nav ScrollTrigger.create({ trigger: "body", start: "top top", onUpdate: self => { if (self.progress > 0) { document.querySelector("nav").classList.add("backdrop-blur-md"); } else { document.querySelector("nav").classList.remove("backdrop-blur-md"); } } }); // Parallax for sections gsap.utils.toArray("section").forEach(section => { gsap.to(section, { yPercent: -20, ease: "none", scrollTrigger: { trigger: section, start: "top bottom", end: "bottom top", scrub: true } }); });