Artefakt

## Build Prompt: Cyberpunk Portfolio Website Design

Create a modern cyberpunk-inspired portfolio website with a dark theme and orange accent elements. This design features a dramatic full-screen layout with pixelated graphic overlays and a distinctive grid-based information architecture.

### Overall Layout Structure

The design uses a full-screen viewport layout with absolute positioning for UI elements. The main content area displays a large hero image with text overlays, while navigation and metadata are positioned in the corners and edges using a precise grid system.

### Key Components and Visual Styling

**Header Navigation**: Top-left contains a stylized logo/brand name in white text. Top-center features horizontal navigation links. Top-right displays social media handles and secondary information in small caps typography.

**Hero Section**: Full-screen background image with a dark, moody aesthetic featuring orange/amber lighting. The image appears to show a figure in dramatic lighting with strong contrast.

**Pixelated Overlay**: Animated or static pixelated grid overlay in bright orange (#FF6B00) that creates a digital glitch effect across portions of the image, particularly concentrated in the top-left quadrant.

**Typography System**: All text uses a monospace or technical sans-serif font family. Text hierarchy includes large title text, medium body copy, and small metadata labels. Letter spacing is slightly increased for a futuristic feel.

**Information Grid**: Bottom section contains project metadata laid out in a structured grid pattern with labels and values. Uses dot leaders and precise alignment for a technical specification aesthetic.

**Interactive Elements**: Minimal UI controls including navigation dots/indicators and subtle hover states that maintain the cyberpunk aesthetic.

### Responsive Behavior

The layout adapts by scaling the hero image proportionally while maintaining overlay positions. Text scales appropriately and the grid system adjusts spacing for smaller viewports. The pixelated overlay effect scales or repositions based on screen size.

### Dark Mode Implementation

This design is inherently dark-themed with deep blacks, dark grays, and bright orange accents. Light mode would invert to light backgrounds with dark text while maintaining the orange accent color for consistency.

<design-specification>
```jsonc
{
  "project": {
    "name": "Cyberpunk Portfolio Interface",
    "description": "Dark-themed portfolio layout with pixelated overlays and technical grid information display"
  },
  "tokens": {
    "colors": {
      "primary-500": { "light": "#FF6B00", "dark": "#FF6B00" },
      "primary-400": { "light": "#FF8533", "dark": "#FF8533" },
      "primary-600": { "light": "#CC5500", "dark": "#CC5500" },
      "neutral-900": { "light": "#111111", "dark": "#000000" },
      "neutral-800": { "light": "#1F1F1F", "dark": "#0A0A0A" },
      "neutral-700": { "light": "#2D2D2D", "dark": "#141414" },
      "neutral-100": { "light": "#F5F5F5", "dark": "#FFFFFF" },
      "neutral-200": { "light": "#E5E5E5", "dark": "#F0F0F0" },
      "neutral-400": { "light": "#999999", "dark": "#CCCCCC" },
      "accent-500": { "light": "#FFAA00", "dark": "#FFAA00" },
      "overlay-black": { "light": "rgba(0,0,0,0.7)", "dark": "rgba(0,0,0,0.8)" }
    },
    "typography": {
      "families": { 
        "mono": "JetBrains Mono, Consolas, monospace",
        "sans": "Inter, system-ui, sans-serif" 
      },
      "sizes": { 
        "xs": "10px", 
        "sm": "12px", 
        "base": "14px", 
        "lg": "16px", 
        "xl": "20px", 
        "2xl": "24px", 
        "3xl": "32px",
        "4xl": "48px" 
      },
      "weights": { 
        "normal": "400", 
        "medium": "500", 
        "semibold": "600", 
        "bold": "700" 
      },
      "lineHeights": { 
        "tight": "1.2", 
        "normal": "1.4", 
        "relaxed": "1.6" 
      },
      "letterSpacing": { 
        "tight": "-0.02em", 
        "normal": "0em", 
        "wide": "0.08em",
        "wider": "0.15em" 
      }
    },
    "spacing": {
      "xs": "4px",
      "sm": "8px", 
      "md": "16px", 
      "lg": "24px", 
      "xl": "32px",
      "2xl": "48px",
      "3xl": "64px",
      "rationale": "8px base unit with exponential scaling for technical precision"
    },
    "radii": {
      "none": "0px",
      "sm": "2px", 
      "md": "4px", 
      "lg": "8px"
    },
    "shadows": {
      "sm": { "light": "0 1px 2px rgba(0,0,0,0.1)", "dark": "0 1px 2px rgba(255,107,0,0.1)" },
      "md": { "light": "0 4px 6px rgba(0,0,0,0.1)", "dark": "0 4px 6px rgba(255,107,0,0.2)" },
      "glow": { "light": "0 0 20px rgba(255,107,0,0.3)", "dark": "0 0 30px rgba(255,107,0,0.4)" }
    }
  },
  "screens": [
    {
      "name": "PortfolioHero",
      "route": "/",
      "layout": "Full viewport grid with absolute positioned overlay elements",
      "components": [
        {
          "name": "HeroBackground",
          "type": "div",
          "properties": {
            "background": "large hero image with dark amber lighting",
            "position": "fixed",
            "width": "100vw",
            "height": "100vh",
            "objectFit": "cover"
          },
          "states": {
            "default": {}
          }
        },
        {
          "name": "PixelatedOverlay",
          "type": "div",
          "properties": {
            "background": "tokens.colors.primary-500",
            "position": "absolute",
            "top": "tokens.spacing.xl",
            "left": "tokens.spacing.xl",
            "width": "40%",
            "height": "60%",
            "clipPath": "pixelated pattern",
            "opacity": "0.8"
          },
          "states": {
            "default": {},
            "animated": {
              "animation": "subtle flicker effect"
            }
          }
        },
        {
          "name": "HeaderNav",
          "type": "header",
          "properties": {
            "position": "absolute",
            "top": "tokens.spacing.lg",
            "left": "tokens.spacing.xl",
            "right": "tokens.spacing.xl",
            "display": "flex",
            "justifyContent": "space-between",
            "color": "tokens.colors.neutral-100",
            "fontFamily": "tokens.typography.families.mono",
            "fontSize": "tokens.typography.sizes.sm",
            "letterSpacing": "tokens.typography.letterSpacing.wide"
          },
          "states": {
            "default": {}
          }
        },
        {
          "name": "ProjectTitle",
          "type": "h1",
          "properties": {
            "position": "absolute",
            "bottom": "tokens.spacing.xl",
            "left": "tokens.spacing.xl",
            "color": "tokens.colors.neutral-100",
            "fontFamily": "tokens.typography.families.mono",
            "fontSize": "tokens.typography.sizes.3xl",
            "fontWeight": "tokens.typography.weights.bold",
            "letterSpacing": "tokens.typography.letterSpacing.wide"
          },
          "states": {
            "default": {}
          }
        },
        {
          "name": "MetadataGrid",
          "type": "div",
          "properties": {
            "position": "absolute",
            "bottom": "tokens.spacing.lg",
            "right": "tokens.spacing.xl",
            "display": "grid",
            "gridTemplateColumns": "auto auto",
            "gap": "tokens.spacing.md",
            "color": "tokens.colors.neutral-400",
            "fontFamily": "tokens.typography.families.mono",
            "fontSize": "tokens.typography.sizes.xs",
            "letterSpacing": "tokens.typography.letterSpacing.wider"
          },
          "states": {
            "default": {}
          }
        }
      ]
    }
  ]
}
```
</design-specification>

Copy this prompt and paste it into your AI coding assistant to build this design.