Brutalism_Portfolio_Columns_Component
Un composant de portfolio multi-colonnes d’inspiration brutaliste avec des couleurs sourdes, avec une grande typographie, des bordures à contraste élevé et des mises en page asymétriques. Inclut la prise en charge du mode sombre et présente des projets avec des titres, des descriptions et des images.
HTML Code
<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>Composants associés
Composante des colonnes brutalistes
Un composant complexe de colonnes au design brutaliste, avec une palette de couleurs monochromatiques, adapté à la consommation de blogs ou de contenu. Le design présente un contraste élevé, des mises en page inhabituelles et prend en charge le mode sombre.
Retro_Industrial_Columns_Component
Un composant de colonnes complexe, vibrant, de style rétro/vintage pour les entreprises manufacturières/industrielles, présentant une esthétique des années 80/90 avec prise en charge du mode sombre et une réactivité totale.
Composant Colonnes
Un composant de colonnes réactives conçu pour la présentation de portfolios avec prise en charge du mode sombre, à l’aide d’un jeu de couleurs en niveaux de gris et de Tailwind CSS.