Brutalist Artist Website AI Prompt Result

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ARTIST NAME // PORTFOLIO</title>
    <style>
        /*
        ========================================
        GLOBAL RESET & BRUTALIST SETUP
        ========================================
        */
        :root {
            --main-bg: #FFFFFF;
            --main-text: #000000;
            --border-color: #000000;
            --accent-color: #00FF00; /* Neon Green */
            --border-width: 2px;
        }

* {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

html, body {
            background-color: var(--main-bg);
            color: var(--main-text);
            font-family: 'Courier New', Courier, monospace;
            font-synthesis: none; /* Disables browser-faked bold/italics for a rawer feel */
            text-rendering: optimizeLegibility;
        }

/*
        ========================================
        CORE LAYOUT & GRID STRUCTURE
        ========================================
        */
        .portfolio-grid {
            display: grid;
            grid-template-columns: 2fr 1fr; /* Asymmetrical grid */
            width: 100%;
            border: var(--border-width) solid var(--border-color);
            background-color: var(--border-color); /* This color shows through the gaps, creating the grid lines */
            gap: var(--border-width); /* Creates the visible grid lines */
        }

.grid-item {
            background-color: var(--main-bg);
            padding: 1.5rem;
        }

/* Span the header across the full width */
        .header {
            grid-column: 1 / -1;
        }

/*
        ========================================
        TYPOGRAPHY & CONTENT STYLING
        ========================================
        */
        h1 {
            font-size: clamp(2.5rem, 8vw, 5rem);
            font-weight: normal;
            text-transform: uppercase;
            letter-spacing: 2px;
        }

h2 {
            font-size: 1.25rem;
            font-weight: normal;
            text-transform: uppercase;
            padding-bottom: 0.75rem;
            margin-bottom: 1.5rem;
            border-bottom: var(--border-width) solid var(--border-color);
        }

ul {
            list-style: none;
        }

li {
            margin-bottom: 0.75rem;
        }

a {
            color: var(--main-text);
            text-decoration: underline;
            text-underline-offset: 3px;
            transition: none; /* Brutalism avoids smooth transitions */
            outline: var(--border-width) solid transparent;
            outline-offset: 3px;
        }

a:hover, a:focus {
            color: var(--accent-color);
            background-color: var(--main-text);
            text-decoration: none;
            outline-color: var(--accent-color);
        }
        
        /* Raw, unstyled contact info */
        .contact-info {
            font-size: 1.1rem;
            word-wrap: break-word;
        }
        
        /*
        ========================================
        IMAGE STYLING
        ========================================
        */
        figure {
            margin: 0;
        }

.portfolio-image {
            display: block;
            width: 100%;
            max-width: 100%;
            height: auto;
            border: var(--border-width) solid var(--border-color);
        }

figcaption {
            font-size: 0.8rem;
            padding-top: 0.5rem;
            color: var(--main-text);
        }

/*
        ========================================
        RESPONSIVENESS
        ========================================
        */
        @media (max-width: 768px) {
            .portfolio-grid {
                /* Stack everything into a single column on smaller screens */
                grid-template-columns: 1fr;
            }
            
            h1 {
                font-size: 2rem;
            }

h2 {
                font-size: 1.1rem;
            }
        }

</style>
</head>
<body>

<header class="grid-item header">
            <h1>Artist Name</h1>
        </header>

<section id="work" class="grid-item">
            <h2>WORK</h2>
            <ul>
                <li><a href="#">Project Title One (2023)</a></li>
                <li><a href="#">A Study in Concrete and Light (2022)</a></li>
                <li><a href="#">Systemic Decay Series (2022)</a></li>
                <li><a href="#">Untitled (Redaction) (2021)</a></li>
                <li><a href="#">Found Objects Vol. I (2020)</a></li>
                <li><a href="#">Digital Artifacts (2019)</a></li>
            </ul>
        </section>

<aside class="grid-item">
            <figure>
                <img src="https://place-hold.it/800x600/000/fff?text=IMAGE" alt="A black and white placeholder image." class="portfolio-image">
                <figcaption>A Study in Concrete and Light, 2022. Mixed Media.</figcaption>
            </figure>
        </aside>

<section id="exhibitions" class="grid-item">
            <h2>EXHIBITIONS</h2>
            <ul>
                <li><strong>2023</strong> — Group Show, Raw Forms Gallery, Berlin</li>
                <li><strong>2022</strong> — Solo Exhibition, The Void Space, London</li>
                <li><strong>2021</strong> — Digital Showcase, The Glitch Symposium (Online)</li>
                <li><strong>2020</strong> — Structure & Absence, Factory Art Hub, New York</li>
            </ul>
        </section>

<section id="contact" class="grid-item">
            <h2>CONTACT</h2>
            <p class="contact-info">
                For inquiries, please contact: <a href="mailto:email@example.com">email@example.com</a>
            </p>
        </section>

</main>

</body>
</html>