Home
Alif Bima Pradana
Neo-Brutalist Portfolio

Neo-Brutalist Portfolio

This tailwind example is contributed by Alif Bima Pradana, on 09-Mar-2026. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode. similar terms for this example is Front page

Landing Page

Author Alif Bima Pradana

Fork Fullscreen

<!DOCTYPE html>
<html lang="id" class="scroll-smooth">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PORTFOLIO // NEO-BRUTALISM</title>
    
    
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Archivo+Black&family=Space+Grotesk:wght@400;500;700&display=swap" rel="stylesheet">
    
    
    <script src="https://cdn.tailwindcss.com"></script>
    
    
    <script src="https://unpkg.com/lucide@latest"></script>

<script>
        tailwind.config = {
            darkMode: 'class',
            theme: {
                extend: {
                    colors: {
                        primary: '#00d982', // Neon Green
                        dark: '#121212',
                        light: '#ffffff',
                    },
                    fontFamily: {
                        sans: ['Space Grotesk', 'sans-serif'],
                        display: ['Archivo Black', 'sans-serif'],
                    },
                    boxShadow: {
                        'brutal': '6px 6px 0px 0px rgba(0,0,0,1)',
                        'brutal-hover': '0px 0px 0px 0px rgba(0,0,0,1)',
                        'brutal-dark': '6px 6px 0px 0px #00d982',
                        'brutal-white': '6px 6px 0px 0px #ffffff',
                    },
                    animation: {
                        'marquee': 'marquee 25s linear infinite',
                    },
                    keyframes: {
                        marquee: {
                            '0%': { transform: 'translateX(0%)' },
                            '100%': { transform: 'translateX(-100%)' },
                        }
                    }
                }
            }
        }
    </script>

/* Dot Grid Pattern */
        .bg-grid-pattern {
            background-image: radial-gradient(#000000 2px, transparent 2px);
            background-size: 30px 30px;
        }
        
        .dark .bg-grid-pattern {
            background-image: radial-gradient(#00d982 2px, transparent 2px);
            background-size: 30px 30px;
        }

/* Brutalist Scrollbar */
        ::-webkit-scrollbar {
            width: 16px;
        }
        ::-webkit-scrollbar-track {
            background: #ffffff;
            border-left: 4px solid #000;
        }
        ::-webkit-scrollbar-thumb {
            background: #00d982;
            border: 4px solid #000;
        }
        .dark ::-webkit-scrollbar-track {
            background: #121212;
            border-left: 4px solid #00d982;
        }
        .dark ::-webkit-scrollbar-thumb {
            background: #ffffff;
            border: 4px solid #00d982;
        }

/* Selection Color */
        ::selection {
            background-color: #000;
            color: #00d982;
        }
        .dark ::selection {
            background-color: #00d982;
            color: #000;
        }

/* Hard clip for jagged shapes */
        .clip-jagged {
            clip-path: polygon(
                0% 0%, 100% 0%, 100% 85%, 
                95% 85%, 95% 90%, 90% 90%, 90% 95%, 
                85% 95%, 85% 100%, 0% 100%
            );
        }

/* Utility classes for border consistency in dark mode */
        .border-hard {
            @apply border-4 border-black dark:border-white;
        }
    </style>
</head>
<body class="transition-colors duration-300 dark:bg-dark dark:text-white">

<nav class="fixed top-0 w-full z-50 bg-white dark:bg-dark border-b-4 border-black dark:border-primary">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between items-center h-20">
                
                <div class="flex-shrink-0 flex items-center gap-2 group cursor-pointer">
                    <div class="w-10 h-10 bg-black dark:bg-primary flex items-center justify-center border-2 border-transparent group-hover:rotate-12 transition-transform">
                        <span class="text-primary dark:text-black font-display text-2xl">P</span>
                    </div>
                    <span class="font-display text-2xl tracking-tighter uppercase dark:text-white">PORTFOLIO.</span>
                </div>

<div class="hidden md:flex items-center space-x-8">
                    <a href="#about" class="font-bold text-lg hover:bg-primary hover:text-black px-2 py-1 transition-colors border-2 border-transparent hover:border-black dark:hover:border-white">ABOUT</a>
                    <a href="#skills" class="font-bold text-lg hover:bg-primary hover:text-black px-2 py-1 transition-colors border-2 border-transparent hover:border-black dark:hover:border-white">SKILLS</a>
                    <a href="#projects" class="font-bold text-lg hover:bg-primary hover:text-black px-2 py-1 transition-colors border-2 border-transparent hover:border-black dark:hover:border-white">WORKS</a>
                    
                    
                    <button id="theme-toggle" class="p-2 border-4 border-black dark:border-white shadow-brutal hover:shadow-brutal-hover hover:translate-x-[6px] hover:translate-y-[6px] transition-all bg-white dark:bg-dark text-black dark:text-white">
                        <i data-lucide="sun" class="hidden dark:block"></i>
                        <i data-lucide="moon" class="block dark:hidden"></i>
                    </button>

<a href="#contact" class="px-6 py-2 bg-black text-primary font-display border-4 border-transparent hover:bg-white hover:text-black hover:border-black transition-all shadow-[4px_4px_0px_#00d982] hover:shadow-none dark:bg-primary dark:text-black dark:hover:bg-white">
                        LET'S TALK
                    </a>
                </div>

<div class="md:hidden flex items-center gap-4">
                     <button id="theme-toggle-mobile" class="p-2 border-4 border-black dark:border-primary bg-white dark:bg-dark">
                        <i data-lucide="sun" class="hidden dark:block w-5 h-5"></i>
                        <i data-lucide="moon" class="block dark:hidden w-5 h-5"></i>
                    </button>
                    <button id="mobile-menu-btn" class="p-2 border-4 border-black dark:border-white bg-primary text-black">
                        <i data-lucide="menu" class="w-8 h-8"></i>
                    </button>
                </div>
            </div>
        </div>

<div id="mobile-menu" class="hidden md:hidden absolute w-full bg-white dark:bg-dark border-b-4 border-black dark:border-primary">
            <div class="px-4 pt-4 pb-8 space-y-4 flex flex-col">
                <a href="#about" class="block px-4 py-4 text-2xl font-bold border-4 border-black dark:border-white hover:bg-primary hover:text-black text-center uppercase">About</a>
                <a href="#skills" class="block px-4 py-4 text-2xl font-bold border-4 border-black dark:border-white hover:bg-primary hover:text-black text-center uppercase">Skills</a>
                <a href="#projects" class="block px-4 py-4 text-2xl font-bold border-4 border-black dark:border-white hover:bg-primary hover:text-black text-center uppercase">Projects</a>
                <a href="#contact" class="block px-4 py-4 text-2xl font-bold bg-black text-primary dark:bg-primary dark:text-black border-4 border-transparent text-center uppercase">Contact Me</a>
            </div>
        </div>
    </nav>

<section class="min-h-screen pt-20 flex flex-col md:flex-row relative overflow-hidden">
        
        <div class="absolute inset-0 bg-grid-pattern opacity-10 pointer-events-none z-0"></div>
        
        
        <div class="w-full md:w-3/5 p-8 md:p-20 flex flex-col justify-center z-10 border-b-4 md:border-b-0 md:border-r-4 border-black dark:border-primary bg-white/90 dark:bg-dark/90 backdrop-blur-sm">
            <div class="inline-block px-4 py-2 border-4 border-black dark:border-white bg-primary font-bold mb-6 w-max transform -rotate-2">
                FULL STACK DEVELOPER
            </div>
            
            <h1 class="font-display text-6xl md:text-8xl leading-none mb-6 uppercase">
                Building <br>
                <span class="text-transparent bg-clip-text bg-gradient-to-r from-primary to-green-600 dark:to-white stroke-black" style="-webkit-text-stroke: 3px black;">Digital</span> <br>
                Chaos.
            </h1>
            
            <p class="text-xl md:text-2xl font-sans font-medium mb-10 max-w-lg border-l-8 border-primary pl-6">
                Saya menciptakan pengalaman web yang berani, fungsional, dan tidak membosankan. Melanggar aturan dengan gaya.
            </p>

<div class="flex flex-col sm:flex-row gap-6">
                <a href="#projects" class="group relative px-8 py-4 bg-black text-white font-bold text-xl border-4 border-black dark:border-white hover:bg-primary hover:text-black transition-all shadow-brutal hover:shadow-brutal-hover hover:translate-x-[6px] hover:translate-y-[6px]">
                    LIHAT KARYA
                    <i data-lucide="arrow-right" class="inline ml-2 group-hover:translate-x-2 transition-transform"></i>
                </a>
                <a href="#contact" class="px-8 py-4 bg-white dark:bg-transparent text-black dark:text-white font-bold text-xl border-4 border-black dark:border-white hover:bg-gray-100 dark:hover:bg-white/10 transition-all shadow-brutal dark:shadow-brutal-dark hover:shadow-brutal-hover hover:translate-x-[6px] hover:translate-y-[6px]">
                    HUBUNGI SAYA
                </a>
            </div>
        </div>

<div class="w-full md:w-2/5 bg-primary relative flex items-center justify-center border-b-4 border-black dark:border-white min-h-[400px]">
            
            <div class="absolute w-40 h-40 bg-white border-4 border-black top-10 right-10 z-10 shadow-[8px_8px_0px_black]"></div>
            <div class="absolute w-32 h-32 bg-black border-4 border-white bottom-20 left-10 z-10 rounded-full flex items-center justify-center">
                <i data-lucide="code" class="text-primary w-16 h-16"></i>
            </div>
            
            
            <div class="relative w-64 h-80 bg-white border-4 border-black z-20 rotate-3 hover:rotate-0 transition-transform duration-300 shadow-[12px_12px_0px_black]">
                <img src="https://images.unsplash.com/photo-1507238691740-187a5b1d37b8?auto=format&fit=crop&q=80&w=600" alt="Profile" class="w-full h-full object-cover grayscale hover:grayscale-0 transition-all">
                
                
                <div class="absolute -bottom-6 -right-6 bg-black text-white p-3 border-4 border-white font-display text-xl transform rotate-6">
                    DEV & DESIGN
                </div>
            </div>
        </div>
    </section>

<div class="bg-black dark:bg-white text-white dark:text-black py-4 border-y-4 border-black dark:border-primary overflow-hidden whitespace-nowrap">
        <div class="animate-marquee inline-block">
            <span class="text-4xl font-display mx-8">HTML5</span> •
            <span class="text-4xl font-display mx-8">CSS3</span> •
            <span class="text-4xl font-display mx-8">JAVASCRIPT</span> •
            <span class="text-4xl font-display mx-8">REACT</span> •
            <span class="text-4xl font-display mx-8">TAILWIND</span> •
            <span class="text-4xl font-display mx-8">NODE.JS</span> •
            <span class="text-4xl font-display mx-8">UI/UX</span> •
            <span class="text-4xl font-display mx-8">FIGMA</span> •
             <span class="text-4xl font-display mx-8">HTML5</span> •
            <span class="text-4xl font-display mx-8">CSS3</span> •
            <span class="text-4xl font-display mx-8">JAVASCRIPT</span> •
        </div>
    </div>

<section id="about" class="py-20 px-4 md:px-0 max-w-7xl mx-auto">
        <div class="grid grid-cols-1 md:grid-cols-12 gap-8">
            
            <div class="md:col-span-4 bg-white dark:bg-dark border-4 border-black dark:border-white p-8 shadow-brutal dark:shadow-brutal-dark h-fit sticky top-24">
                <h2 class="font-display text-5xl md:text-6xl mb-4">WHO <br> AM I?</h2>
                <div class="w-full h-4 bg-primary border-2 border-black mb-6"></div>
                <p class="font-bold text-xl mb-4">Creative Developer based in Indonesia.</p>
                <div class="flex gap-4">
                    <a href="#" class="p-3 border-4 border-black dark:border-white hover:bg-primary hover:text-black transition-colors"><i data-lucide="github"></i></a>
                    <a href="#" class="p-3 border-4 border-black dark:border-white hover:bg-primary hover:text-black transition-colors"><i data-lucide="linkedin"></i></a>
                    <a href="#" class="p-3 border-4 border-black dark:border-white hover:bg-primary hover:text-black transition-colors"><i data-lucide="twitter"></i></a>
                </div>
            </div>

<div class="md:col-span-8 space-y-8">
                <div class="bg-primary p-8 border-4 border-black shadow-brutal">
                    <h3 class="text-3xl font-display mb-4 uppercase">Background Story</h3>
                    <p class="text-lg font-medium leading-relaxed">
                        Saya tidak hanya menulis kode, saya memecahkan masalah dengan gaya. Dengan pengalaman lebih dari 5 tahun di industri teknologi, saya menggabungkan logika pemrograman yang kuat dengan sensibilitas desain yang "out of the box". 
                        <br><br>
                        Fokus saya adalah menciptakan antarmuka web yang intuitif namun tetap memiliki karakter visual yang kuat. Minimalis itu membosankan, mari buat sesuatu yang memorable.
                    </p>
                </div>

<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div class="bg-white dark:bg-dark p-6 border-4 border-black dark:border-white">
                        <i data-lucide="terminal" class="w-12 h-12 mb-4 text-primary"></i>
                        <h4 class="text-2xl font-bold mb-2">Code Clean</h4>
                        <p>Struktur kode yang rapi, scalable, dan mudah dipelihara adalah prioritas utama.</p>
                    </div>
                    <div class="bg-black text-white p-6 border-4 border-primary dark:border-white">
                        <i data-lucide="zap" class="w-12 h-12 mb-4 text-primary"></i>
                        <h4 class="text-2xl font-bold mb-2">Performance</h4>
                        <p>Website yang cepat adalah keharusan. Optimasi aset dan best practice selalu diterapkan.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section id="skills" class="py-20 bg-gray-50 dark:bg-[#1a1a1a] border-y-4 border-black dark:border-primary">
        <div class="max-w-7xl mx-auto px-4">
            <h2 class="font-display text-5xl text-center mb-16 uppercase">
                <span class="bg-black text-white px-4 py-1 dark:bg-primary dark:text-black">Arsenal</span> & Tools
            </h2>

<div class="grid grid-cols-2 md:grid-cols-4 gap-6">
                
                <div class="group bg-white dark:bg-dark border-4 border-black dark:border-white p-6 shadow-brutal hover:shadow-none hover:translate-x-[6px] hover:translate-y-[6px] transition-all cursor-crosshair">
                    <i data-lucide="layout" class="w-10 h-10 mb-4 text-primary group-hover:scale-110 transition-transform"></i>
                    <h3 class="font-display text-xl">Frontend</h3>
                    <p class="text-sm font-bold mt-2">React, Vue, Tailwind</p>
                </div>

<div class="group bg-primary border-4 border-black dark:border-white p-6 shadow-brutal hover:shadow-none hover:translate-x-[6px] hover:translate-y-[6px] transition-all cursor-crosshair">
                    <i data-lucide="server" class="w-10 h-10 mb-4 text-black group-hover:scale-110 transition-transform"></i>
                    <h3 class="font-display text-xl">Backend</h3>
                    <p class="text-sm font-bold mt-2">Node.js, Express, Go</p>
                </div>

<div class="group bg-white dark:bg-dark border-4 border-black dark:border-white p-6 shadow-brutal hover:shadow-none hover:translate-x-[6px] hover:translate-y-[6px] transition-all cursor-crosshair">
                    <i data-lucide="database" class="w-10 h-10 mb-4 text-primary group-hover:scale-110 transition-transform"></i>
                    <h3 class="font-display text-xl">Database</h3>
                    <p class="text-sm font-bold mt-2">PostgreSQL, Mongo, Firebase</p>
                </div>

<div class="group bg-black text-white border-4 border-black dark:border-white p-6 shadow-[6px_6px_0px_#00d982] hover:shadow-none hover:translate-x-[6px] hover:translate-y-[6px] transition-all cursor-crosshair">
                    <i data-lucide="pen-tool" class="w-10 h-10 mb-4 text-primary group-hover:scale-110 transition-transform"></i>
                    <h3 class="font-display text-xl">Design</h3>
                    <p class="text-sm font-bold mt-2">Figma, Adobe XD</p>
                </div>
                
                 
            </div>
        </div>
    </section>

<section id="projects" class="py-20 max-w-7xl mx-auto px-4">
        <div class="flex flex-col md:flex-row justify-between items-end mb-12">
            <h2 class="font-display text-5xl md:text-7xl uppercase dark:text-white">Selected <br> Works</h2>
            <div class="hidden md:block w-32 h-4 bg-primary border-4 border-black"></div>
        </div>

<div class="space-y-20">
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-8 group">
                <div class="relative border-4 border-black dark:border-white bg-gray-200 aspect-video overflow-hidden">
                    <div class="absolute inset-0 bg-primary mix-blend-multiply opacity-0 group-hover:opacity-100 transition-opacity z-10"></div>
                    <img src="https://images.unsplash.com/photo-1460925895917-afdab827c52f?auto=format&fit=crop&q=80&w=800" class="w-full h-full object-cover grayscale group-hover:grayscale-0 transition-all duration-500" alt="Project 1">
                    
                    <div class="absolute -bottom-4 -right-4 w-full h-full border-4 border-black dark:border-primary -z-10 group-hover:bottom-0 group-hover:right-0 transition-all"></div>
                </div>
                <div class="flex flex-col justify-center">
                    <div class="flex gap-2 mb-4">
                        <span class="px-3 py-1 bg-black text-white font-bold text-sm">ECOMMERCE</span>
                        <span class="px-3 py-1 bg-primary text-black border-2 border-black font-bold text-sm">2024</span>
                    </div>
                    <h3 class="text-4xl font-display mb-4 uppercase">Neon Market UI</h3>
                    <p class="text-lg mb-6 border-l-4 border-primary pl-4 dark:text-gray-300">
                        Redesign platform marketplace dengan pendekatan visual yang lebih agresif. Fokus pada konversi tinggi dengan hierarki visual yang tegas.
                    </p>
                    <a href="#" class="w-max px-6 py-3 border-4 border-black dark:border-white font-bold hover:bg-black hover:text-primary dark:hover:bg-white dark:hover:text-black transition-colors shadow-brutal dark:shadow-brutal-white hover:shadow-none hover:translate-x-[4px] hover:translate-y-[4px]">
                        VIEW CASE STUDY
                    </a>
                </div>
            </div>

<div class="grid grid-cols-1 md:grid-cols-2 gap-8 group">
                <div class="flex flex-col justify-center order-2 md:order-1 items-end text-right">
                     <div class="flex gap-2 mb-4">
                        <span class="px-3 py-1 bg-primary text-black border-2 border-black font-bold text-sm">2023</span>
                        <span class="px-3 py-1 bg-black text-white font-bold text-sm">SAAS DASHBOARD</span>
                    </div>
                    <h3 class="text-4xl font-display mb-4 uppercase">FinTech Analytics</h3>
                    <p class="text-lg mb-6 border-r-4 border-primary pr-4 dark:text-gray-300">
                        Dashboard analitik keuangan real-time. Menangani data kompleks dan menyajikannya dalam format yang mudah dicerna namun tetap stylish.
                    </p>
                    <a href="#" class="w-max px-6 py-3 border-4 border-black dark:border-white font-bold hover:bg-black hover:text-primary dark:hover:bg-white dark:hover:text-black transition-colors shadow-brutal dark:shadow-brutal-white hover:shadow-none hover:translate-x-[4px] hover:translate-y-[4px]">
                        VIEW CASE STUDY
                    </a>
                </div>
                <div class="relative border-4 border-black dark:border-white bg-gray-200 aspect-video overflow-hidden order-1 md:order-2">
                     <div class="absolute inset-0 bg-black mix-blend-multiply opacity-0 group-hover:opacity-40 transition-opacity z-10"></div>
                    <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?auto=format&fit=crop&q=80&w=800" class="w-full h-full object-cover grayscale group-hover:grayscale-0 transition-all duration-500" alt="Project 2">
                    <div class="absolute -bottom-4 -left-4 w-full h-full border-4 border-black dark:border-primary -z-10 group-hover:bottom-0 group-hover:left-0 transition-all"></div>
                </div>
            </div>
        </div>
    </section>

<section class="py-20 bg-primary border-y-4 border-black">
        <div class="max-w-4xl mx-auto px-4">
            <h2 class="font-display text-5xl mb-12 text-center text-black bg-white border-4 border-black inline-block p-4 mx-auto block transform -rotate-1">
                JOURNEY LOG
            </h2>

<div class="relative flex flex-col md:flex-row gap-8 items-center">
                    <div class="w-full md:w-1/2 md:text-right md:pr-12 pl-12 md:pl-0">
                        <div class="bg-white border-4 border-black p-4 shadow-brutal">
                            <h3 class="font-bold text-xl">Senior Frontend Dev</h3>
                            <p class="text-sm font-bold text-gray-500">2022 - PRESENT</p>
                            <p class="mt-2">Memimpin tim frontend di Startup Unicorn.</p>
                        </div>
                    </div>
                    
                    <div class="absolute left-4 md:left-1/2 w-8 h-8 bg-black border-4 border-white -ml-4 z-10 flex items-center justify-center">
                        <div class="w-2 h-2 bg-white"></div>
                    </div>
                    <div class="w-full md:w-1/2 md:pl-12 pl-12"></div>
                </div>

<div class="relative flex flex-col md:flex-row gap-8 items-center">
                    <div class="w-full md:w-1/2 md:pr-12 hidden md:block"></div>
                     
                    <div class="absolute left-4 md:left-1/2 w-8 h-8 bg-white border-4 border-black -ml-4 z-10 flex items-center justify-center">
                         <div class="w-2 h-2 bg-black"></div>
                    </div>
                    <div class="w-full md:w-1/2 md:pl-12 pl-12 md:pl-0">
                        <div class="bg-black text-white border-4 border-white p-4 shadow-[6px_6px_0px_white]">
                            <h3 class="font-bold text-xl">UI/UX Designer</h3>
                            <p class="text-sm font-bold text-primary">2020 - 2022</p>
                            <p class="mt-2">Creative Agency di Jakarta Selatan.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="py-20 max-w-7xl mx-auto px-4">
        <h2 class="font-display text-5xl mb-12 uppercase dark:text-white">Kata Mereka</h2>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
            
            <div class="bg-white dark:bg-dark border-4 border-black dark:border-white p-6 shadow-brutal dark:shadow-brutal-dark hover:-translate-y-2 transition-transform">
                <div class="w-16 h-16 bg-gray-300 border-4 border-black dark:border-white mb-4">
                     <img src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?auto=format&fit=crop&q=80&w=100" class="w-full h-full object-cover">
                </div>
                <p class="text-lg italic mb-6">"Gila sih desainnya. Beda banget dari yang lain. Conversion rate kami naik 200% setelah redesign."</p>
                <h4 class="font-bold uppercase">Budi Santoso</h4>
                <p class="text-sm text-gray-500 font-bold">CEO, TechStart</p>
            </div>

<div class="bg-primary border-4 border-black dark:border-white p-6 shadow-brutal hover:-translate-y-2 transition-transform">
                <div class="w-16 h-16 bg-black border-4 border-white mb-4">
                    <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&fit=crop&q=80&w=100" class="w-full h-full object-cover">
                </div>
                <p class="text-lg italic mb-6">"Kerjanya cepet, sat set, hasil memuaskan. Sangat komunikatif dan paham teknis."</p>
                <h4 class="font-bold uppercase">Siti Aminah</h4>
                <p class="text-sm text-black font-bold">Product Owner</p>
            </div>

<div class="bg-black text-white border-4 border-black dark:border-white p-6 shadow-brutal dark:shadow-brutal-white hover:-translate-y-2 transition-transform">
                <div class="w-16 h-16 bg-primary border-4 border-white mb-4">
                    <img src="https://images.unsplash.com/photo-1599566150163-29194dcaad36?auto=format&fit=crop&q=80&w=100" class="w-full h-full object-cover grayscale">
                </div>
                <p class="text-lg italic mb-6">"Estetika brutalism yang dibawakan sangat on-point dengan brand identity kami."</p>
                <h4 class="font-bold uppercase text-primary">Joko Anwar</h4>
                <p class="text-sm text-gray-400 font-bold">Art Director</p>
            </div>
        </div>
    </section>

<section id="contact" class="py-20 bg-gray-100 dark:bg-[#0a0a0a] border-t-4 border-black dark:border-primary relative overflow-hidden">
        
        <div class="absolute -right-20 top-20 w-64 h-64 bg-primary rounded-full border-4 border-black blur-none opacity-20 dark:opacity-10 z-0"></div>

<div class="max-w-3xl mx-auto px-4 relative z-10">
            <div class="bg-white dark:bg-dark border-4 border-black dark:border-white p-8 md:p-12 shadow-[12px_12px_0px_0px_#000] dark:shadow-[12px_12px_0px_0px_#00d982]">
                <h2 class="font-display text-4xl md:text-5xl mb-2 uppercase">Let's Work Together</h2>
                <p class="mb-8 font-bold text-gray-500">Punya proyek gila? Drop me a line.</p>
                
                <form class="space-y-6">
                    <div>
                        <label class="block font-bold text-xl mb-2 uppercase">Nama</label>
                        <input type="text" class="w-full bg-gray-50 dark:bg-black border-4 border-black dark:border-white p-4 font-bold text-lg focus:outline-none focus:shadow-[4px_4px_0px_#00d982] dark:focus:shadow-[4px_4px_0px_#00d982] transition-shadow placeholder-gray-400" placeholder="SIAPA NAMA ANDA?">
                    </div>
                    <div>
                        <label class="block font-bold text-xl mb-2 uppercase">Email</label>
                        <input type="email" class="w-full bg-gray-50 dark:bg-black border-4 border-black dark:border-white p-4 font-bold text-lg focus:outline-none focus:shadow-[4px_4px_0px_#00d982] dark:focus:shadow-[4px_4px_0px_#00d982] transition-shadow placeholder-gray-400" placeholder="EMAIL@ADDRESS.COM">
                    </div>
                    <div>
                        <label class="block font-bold text-xl mb-2 uppercase">Pesan</label>
                        <textarea rows="4" class="w-full bg-gray-50 dark:bg-black border-4 border-black dark:border-white p-4 font-bold text-lg focus:outline-none focus:shadow-[4px_4px_0px_#00d982] dark:focus:shadow-[4px_4px_0px_#00d982] transition-shadow placeholder-gray-400" placeholder="CERITAKAN IDE ANDA..."></textarea>
                    </div>
                    
                    <button type="button" class="w-full bg-black text-white dark:bg-primary dark:text-black font-display text-2xl py-4 border-4 border-transparent hover:bg-primary hover:text-black hover:border-black dark:hover:bg-white transition-all shadow-brutal dark:shadow-brutal-white hover:shadow-none hover:translate-x-[6px] hover:translate-y-[6px]">
                        KIRIM PESAN
                    </button>
                </form>
            </div>
        </div>
    </section>

<footer class="bg-black text-white pt-20 pb-10 border-t-8 border-primary">
        <div class="max-w-7xl mx-auto px-4 grid grid-cols-1 md:grid-cols-4 gap-12">
            <div class="col-span-1 md:col-span-2">
                <h2 class="font-display text-4xl mb-6">PORTFOLIO.</h2>
                <p class="text-xl font-medium max-w-sm mb-6 text-gray-400">
                    Didesain dengan berani, dikode dengan cinta dan kopi hitam.
                </p>
                <div class="flex gap-4">
                    <div class="w-12 h-12 bg-white text-black flex items-center justify-center border-2 border-primary hover:bg-primary transition-colors cursor-pointer">
                        <i data-lucide="instagram"></i>
                    </div>
                    <div class="w-12 h-12 bg-white text-black flex items-center justify-center border-2 border-primary hover:bg-primary transition-colors cursor-pointer">
                        <i data-lucide="dribbble"></i>
                    </div>
                </div>
            </div>
            
            <div>
                <h3 class="font-display text-2xl mb-6 text-primary">SITEMAP</h3>
                <ul class="space-y-4 font-bold text-lg">
                    <li><a href="#about" class="hover:text-primary hover:underline decoration-4 decoration-primary underline-offset-4">Tentang</a></li>
                    <li><a href="#projects" class="hover:text-primary hover:underline decoration-4 decoration-primary underline-offset-4">Proyek</a></li>
                    <li><a href="#skills" class="hover:text-primary hover:underline decoration-4 decoration-primary underline-offset-4">Skills</a></li>
                </ul>
            </div>
            
            <div>
                <h3 class="font-display text-2xl mb-6 text-primary">CONTACT</h3>
                <ul class="space-y-4 font-bold text-lg">
                    <li>hello@brutalist.dev</li>
                    <li>Jakarta, Indonesia</li>
                    <li>+62 812 3456 7890</li>
                </ul>
            </div>
        </div>
        
        <div class="max-w-7xl mx-auto px-4 mt-20 pt-8 border-t-4 border-white/20 flex flex-col md:flex-row justify-between items-center">
            <p class="font-bold text-gray-500">© 2025 BRUTALIST PORTFOLIO. ALL RIGHTS RESERVED.</p>
            <p class="font-display text-4xl opacity-20 select-none">NO RULES.</p>
        </div>
    </footer>

<script>
        // Initialize Lucide Icons
        lucide.createIcons();

// Dark Mode Logic
        const themeToggleBtn = document.getElementById('theme-toggle');
        const themeToggleMobile = document.getElementById('theme-toggle-mobile');
        
        function toggleTheme() {
            if (document.documentElement.classList.contains('dark')) {
                document.documentElement.classList.remove('dark');
                localStorage.setItem('theme', 'light');
            } else {
                document.documentElement.classList.add('dark');
                localStorage.setItem('theme', 'dark');
            }
        }

themeToggleBtn.addEventListener('click', toggleTheme);
        themeToggleMobile.addEventListener('click', toggleTheme);

// Check local storage on load
        if (localStorage.getItem('theme') === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
            document.documentElement.classList.add('dark');
        } else {
            document.documentElement.classList.remove('dark');
        }

// Mobile Menu Logic
        const mobileMenuBtn = document.getElementById('mobile-menu-btn');
        const mobileMenu = document.getElementById('mobile-menu');

mobileMenuBtn.addEventListener('click', () => {
            mobileMenu.classList.toggle('hidden');
            const icon = mobileMenu.classList.contains('hidden') ? 'menu' : 'x';
            // Re-render icon (simplified for this context)
            mobileMenuBtn.innerHTML = `<i data-lucide="${icon}" class="w-8 h-8"></i>`;
            lucide.createIcons();
        });

// Close mobile menu on link click
        document.querySelectorAll('#mobile-menu a').forEach(link => {
            link.addEventListener('click', () => {
                mobileMenu.classList.add('hidden');
                mobileMenuBtn.innerHTML = `<i data-lucide="menu" class="w-8 h-8"></i>`;
                lucide.createIcons();
            });
        });
    </script>
</body>
</html>

Related Examples

Call to Action
CTA with Dark and Shadow colors

Author:
KULDEEP

8 months ago

1.2k
landing page

Author:
Akram Khan

8 months ago

748
Single Page Portfolio

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

1 year ago

2.5k
Login Form
Login Form With google icon

Author:
Md. Tofayel islam

1 year ago

1.9k
Instagram clone
clone a site that kind off instagram

Author:
Tofayel Islam

2 months ago

480
Animated Coming Soon Page 1
animated coming soon landing page

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

1 year ago

4.1k
ServerHub Interface

Author:
МОЙДОЫР

4 months ago

778
hero template

Author:
Raul antonio de la cruz hernandez

2 months ago

197
Our Services Section – Animated & Responsive
A modern and dynamic “Services” section built with Tailwind CSS and Alpine.js, designed to showcase your company’s main offerings with clean visuals and engaging animations. This component uses smooth fade and slide animations to reveal each service card as it comes into view. Each card highlights a core business area — Web Development, Mobile Apps, and Cloud Solutions — with beautiful hover effects, icons, and descriptive lists. Perfect for SaaS websites, agencies, and startups looking to present their services in a visually appealing, professional, and responsive layout. Key Features Smooth scroll-triggered animations with Alpine.js Responsive grid layout (mobile → desktop ready) Built with Tailwind CSS for fast customization Dark mode support included Interactive hover effects for each service card Ideal for corporate, SaaS, or portfolio websites 💡 Services Included 🌐 Web Development (Responsive, SEO-friendly, Optimized) 📱 Mobile Apps (Cross-platform, iOS & Android) ☁️ Cloud Solutions (AWS, Azure, Auto-scaling, Security)

Author:
wavy kits

4 months ago

738
Mfuranziza Hamza
Mfuranziza Hamza full development

Author:
Code Master(Mfuranziza Dusabe Hamza)

6 months ago

882
Landing page

Author:
Freja Jensen

3 years ago

13.4k
Simple landing page

Author:
Lîmåã M

2 years ago

19.6k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components