Brutalism_Portfolio_Columns_Component
브루탈리즘에서 영감을 받은 다중 열 포트폴리오 구성 요소로, 차분한 색상이 있으며 큰 타이포그래피, 고대비 테두리 및 비대칭 레이아웃이 특징입니다. 다크 모드 지원이 포함되어 있으며 제목, 설명 및 이미지와 함께 프로젝트를 보여줍니다.
HTML 코드
<section class="p-4 md:p-8 lg:p-12 min-h-screen bg-gray-100 dark:bg-gray-900 font-mono text-gray-900 dark:text-gray-100 transition-colors duration-300">
<div class="max-w-7xl mx-auto border-4 border-gray-900 dark:border-gray-100 p-4 lg:p-8 space-y-8 lg:space-y-0 lg:grid lg:grid-cols-3 lg:gap-8">
<!-- Left Column - Main Title & Intro -->
<div class="lg:col-span-1 border-b-4 lg:border-b-0 lg:border-r-4 border-gray-900 dark:border-gray-100 pb-4 lg:pb-0 lg:pr-4">
<h1 class="text-4xl sm:text-5xl lg:text-6xl uppercase leading-none mb-4 tracking-tighter text-gray-900 dark:text-gray-100">
<span class="block">My</span>
<span class="block text-red-700 dark:text-red-300">Work</span>
<span class="block">Showcase</span>
</h1>
<p class="text-lg md:text-xl leading-snug tracking-tight max-w-sm mb-4">
A raw collection of creations, defying norms and embracing the unexpected.
</p>
<div class="flex space-x-2">
<button class="px-4 py-2 border-2 border-gray-900 dark:border-gray-100 bg-gray-900 text-gray-100 dark:bg-gray-100 dark:text-gray-900 uppercase text-sm font-bold hover:bg-gray-700 dark:hover:bg-gray-300 transition-colors duration-200">
See All
</button>
<button class="px-4 py-2 border-2 text-gray-900 dark:text-gray-100 border-gray-900 dark:border-gray-100 uppercase text-sm font-bold hover:bg-gray-200 dark:hover:bg-gray-800 transition-colors duration-200">
About Me
</button>
</div>
</div>
<!-- Right Columns - Projects -->
<div class="lg:col-span-2 space-y-8">
<!-- Project 1 -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 border-b-4 border-gray-900 dark:border-gray-100 pb-8">
<div class="md:col-span-1">
<img src="https://picsum.photos/seed/brutalim_proj1/600/400" alt="Project 1 Image" class="w-full h-auto object-cover border-4 border-gray-900 dark:border-gray-100 mb-4">
</div>
<div class="md:col-span-1 space-y-2">
<h2 class="text-3xl lg:text-4xl uppercase leading-none tracking-tighter text-blue-700 dark:text-blue-300 mb-2">The Grid Disjunction</h2>
<p class="text-base leading-snug">
An experimental web interface exploring fragmented layouts and stark contrasts. Built with raw HTML and CSS.
</p>
<ul class="flex flex-wrap text-sm gap-2 mt-4">
<li class="px-2 py-1 border border-gray-900 dark:border-gray-100">UI/UX</li>
<li class="px-2 py-1 border border-gray-900 dark:border-gray-100">Web Design</li>
<li class="px-2 py-1 border border-gray-900 dark:border-gray-100">Brutalism</li>
</ul>
<a href="#" class="inline-block mt-4 text-gray-900 dark:text-gray-100 underline text-sm uppercase font-bold hover:text-red-700 dark:hover:text-red-300 transition-colors duration-200">View Project →</a>
</div>
</div>
<!-- Project 2 -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 border-b-4 border-gray-900 dark:border-gray-100 pb-8">
<div class="md:col-span-1 order-2 md:order-1 space-y-2">
<h2 class="text-3xl lg:text-4xl uppercase leading-none tracking-tighter text-blue-700 dark:text-blue-300 mb-2">Echoes of Form</h2>
<p class="text-base leading-snug">
A series of digital art pieces focusing on deconstructed shapes and desaturated palettes.
</p>
<ul class="flex flex-wrap text-sm gap-2 mt-4">
<li class="px-2 py-1 border border-gray-900 dark:border-gray-100">Generative Art</li>
<li class="px-2 py-1 border border-gray-900 dark:border-gray-100">Digital Painting</li>
</ul>
<a href="#" class="inline-block mt-4 text-gray-900 dark:text-gray-100 underline text-sm uppercase font-bold hover:text-red-700 dark:hover:text-red-300 transition-colors duration-200">View Project →</a>
</div>
<div class="md:col-span-1 order-1 md:order-2">
<img src="https://picsum.photos/seed/brutalim_proj2/600/400" alt="Project 2 Image" class="w-full h-auto object-cover border-4 border-gray-900 dark:border-gray-100 mb-4">
</div>
</div>
<!-- Project 3 -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="md:col-span-1">
<img src="https://picsum.photos/seed/brutalim_proj3/600/400" alt="Project 3 Image" class="w-full h-auto object-cover border-4 border-gray-900 dark:border-gray-100 mb-4">
</div>
<div class="md:col-span-1 space-y-2">
<h2 class="text-3xl lg:text-4xl uppercase leading-none tracking-tighter text-blue-700 dark:text-blue-300 mb-2">Concrete Dreams</h2>
<p class="text-base leading-snug">
Architectural visualizations with harsh lighting and exposed structures.
</p>
<ul class="flex flex-wrap text-sm gap-2 mt-4">
<li class="px-2 py-1 border border-gray-900 dark:border-gray-100">3D Modeling</li>
<li class="px-2 py-1 border border-gray-900 dark:border-gray-100">Rendering</li>
<li class="px-2 py-1 border border-gray-900 dark:border-gray-100">Architecture</li>
</ul>
<a href="#" class="inline-block mt-4 text-gray-900 dark:text-gray-100 underline text-sm uppercase font-bold hover:text-red-700 dark:hover:text-red-300 transition-colors duration-200">View Project →</a>
</div>
</div>
</div>
</div>
</section>