KVS Studio

# Dark UI Portfolio Layout with Vibrant Orange Glow Effect

Create a dark-themed portfolio layout featuring a dramatic orange glow effect around a central content display. The design showcases an artistic symmetrical graphic with elegant typography overlay on a sophisticated black background.

## Layout Structure

Build a full-screen layout with a centered content area that appears to be displayed on a screen or device with an intense orange/red glow effect radiating from the edges. The main content area should be completely black with subtle text elements positioned in the corners and a large central artistic element.

## Key Components

**Glowing Container**: Create the signature orange glow effect using CSS gradients and blur filters. The glow should fade from intense orange at the edges to transparent, creating depth against the black outer background.

**Header Navigation**: Position minimal text elements in the top corners - left side showing a stylized logo/brand mark, right side containing navigation items including location text "(BUDAPEST/HUNGARY)", sound toggle "ON/OFF", and a "CONTACT" link in orange.

**Central Artwork**: Display a large symmetrical graphic (appears to be an abstract organic/tribal design) in white/silver against the black background. This should be the focal point of the composition.

**Footer Elements**: Include descriptive text in the bottom left corner and coordinate/link information in the bottom right, maintaining the minimal aesthetic.

## Visual Styling

Use a sophisticated monochromatic color scheme with strategic orange accents. Typography should be clean and modern, likely a sans-serif font with varying weights. The overall composition emphasizes negative space and dramatic contrast.

## Responsive Behavior

Ensure the glow effect scales appropriately across different screen sizes while maintaining the dramatic visual impact. The central content should remain proportionally sized and centered.

**Design specification**
<design-specification>
```jsonc
{
  "project": {
    "name": "Dark Portfolio with Orange Glow",
    "description": "Dramatic dark portfolio layout featuring a central content display with intense orange glow border effect"
  },
  "tokens": {
    "colors": {
      "primary-500": { "light": "#FF4500", "dark": "#FF4500" },
      "primary-600": { "light": "#FF3300", "dark": "#FF3300" },
      "neutral-900": { "light": "#000000", "dark": "#000000" },
      "neutral-800": { "light": "#111111", "dark": "#111111" },
      "neutral-100": { "light": "#FFFFFF", "dark": "#FFFFFF" },
      "neutral-300": { "light": "#CCCCCC", "dark": "#CCCCCC" },
      "accent-glow": { "light": "#FF4500", "dark": "#FF4500" }
    },
    "typography": {
      "families": { "sans": "Inter, system-ui, sans-serif" },
      "sizes": { "xs": "10px", "sm": "12px", "base": "14px", "lg": "16px", "xl": "18px", "2xl": "24px" },
      "weights": { "normal": "400", "medium": "500", "semibold": "600", "bold": "700" },
      "lineHeights": { "tight": "1.2", "normal": "1.4", "relaxed": "1.6" },
      "letterSpacing": { "tight": "-0.025em", "normal": "0em", "wide": "0.1em" }
    },
    "spacing": {
      "xs": "4px",
      "sm": "8px", 
      "md": "16px",
      "lg": "24px",
      "xl": "32px",
      "2xl": "48px",
      "3xl": "64px",
      "rationale": "Minimal spacing scale emphasizing dramatic negative space and clean positioning"
    },
    "radii": {
      "sm": "4px",
      "md": "8px", 
      "lg": "16px",
      "xl": "24px",
      "full": "9999px"
    },
    "shadows": {
      "glow-intense": { "light": "0 0 100px rgba(255,69,0,0.8), 0 0 200px rgba(255,69,0,0.6)", "dark": "0 0 100px rgba(255,69,0,0.8), 0 0 200px rgba(255,69,0,0.6)" },
      "glow-soft": { "light": "0 0 50px rgba(255,69,0,0.4)", "dark": "0 0 50px rgba(255,69,0,0.4)" }
    }
  },
  "screens": [
    {
      "name": "PortfolioDisplay",
      "route": "/",
      "layout": "Full-screen container with centered glowing content area",
      "components": [
        {
          "name": "GlowContainer",
          "type": "div",
          "properties": {
            "background": "tokens.colors.neutral-900",
            "padding": "tokens.spacing.3xl",
            "borderRadius": "tokens.radii.xl",
            "boxShadow": "tokens.shadows.glow-intense",
            "position": "relative"
          }
        },
        {
          "name": "ContentFrame",
          "type": "div", 
          "properties": {
            "background": "tokens.colors.neutral-900",
            "width": "80vw",
            "height": "60vh",
            "position": "relative"
          }
        },
        {
          "name": "TopNavigation",
          "type": "header",
          "properties": {
            "position": "absolute",
            "top": "tokens.spacing.lg",
            "left": "tokens.spacing.lg",
            "right": "tokens.spacing.lg",
            "display": "flex",
            "justifyContent": "space-between",
            "color": "tokens.colors.neutral-100",
            "fontSize": "tokens.typography.sizes.sm",
            "fontWeight": "tokens.typography.weights.normal"
          }
        },
        {
          "name": "CentralArtwork",
          "type": "div",
          "properties": {
            "position": "absolute",
            "top": "50%",
            "left": "50%", 
            "transform": "translate(-50%, -50%)",
            "width": "400px",
            "height": "300px",
            "backgroundImage": "url(artwork.svg)",
            "backgroundSize": "contain",
            "backgroundRepeat": "no-repeat",
            "backgroundPosition": "center"
          }
        },
        {
          "name": "BottomText",
          "type": "footer",
          "properties": {
            "position": "absolute",
            "bottom": "tokens.spacing.lg",
            "left": "tokens.spacing.lg",
            "right": "tokens.spacing.lg",
            "display": "flex",
            "justifyContent": "space-between",
            "color": "tokens.colors.neutral-300",
            "fontSize": "tokens.typography.sizes.xs",
            "fontWeight": "tokens.typography.weights.normal"
          }
        },
        {
          "name": "ContactLink",
          "type": "a",
          "properties": {
            "color": "tokens.colors.primary-500",
            "textDecoration": "none",
            "fontWeight": "tokens.typography.weights.medium"
          },
          "states": {
            "hover": {
              "color": "tokens.colors.primary-600"
            }
          }
        }
      ]
    }
  ]
}
```
</design-specification>

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