Retro Profile

# Retro Profile Page

Create a vaporwave/synthwave profile page with neon gradients, 80s typography, grid lines, and nostalgic retro-futuristic vibes.

## Design Specifications

**Style**: Vaporwave / Synthwave / Retro-futurism
**Typography**: Bold, sometimes outlined, with glow effects
**Layout**: Centered profile layout with decorative backgrounds
**Colors**: Neon pink, cyan, purple on dark backgrounds

## Prompt for AI Code Generation

```
Build a retro synthwave profile page with these characteristics:

LAYOUT:
- Centered content, max-width 600px
- Decorative background fills entire viewport
- Profile sections stacked vertically
- Grid lines in background

TYPOGRAPHY:
- Username: 40-56px, extra bold, uppercase
- Labels: 14px, uppercase, tracking wide
- Body: 16px, lighter weight
- Gradient text effects
- Text-shadow for glow

COLORS:
- Background: #0a0a0f (deep black-purple)
- Neon pink: #ff00ff (magenta)
- Neon cyan: #00ffff
- Purple: #8b5cf6
- Text glow: colored shadows matching text

SYNTHWAVE ELEMENTS:
- Grid lines (perspective or flat)
- Sun/circle gradient in background
- Horizontal glow lines
- Gradient borders on elements
- Neon glow on key elements

GLOW EFFECTS:
- Text: text-shadow: 0 0 20px rgba(255,0,255,0.5)
- Boxes: box-shadow: 0 0 30px rgba(0,255,255,0.3)
- Multiple shadow layers for intensity

INTERACTIONS:
- Hover glow intensity increase
- Subtle scale on interactive elements
- Shimmer/gradient animation on name

SECTIONS TO INCLUDE:
1. Background with grid and sun decoration
2. Profile avatar with gradient border and glow
3. Username with animated gradient effect
4. Stats row (followers, following, projects)
5. Bio section with neon header
6. Skills/tags with neon borders
7. Social links in grid
8. Footer with retro branding

TECHNICAL:
- CSS gradients for neon effects
- Multiple box-shadows for glow layers
- CSS animation for shimmer effect
- Background-size animation for moving gradients
```

## Example React Component Structure

```tsx
export default function RetroProfile() {
  return (
    <div className="min-h-screen w-full overflow-auto bg-[#0a0a0f] text-white">
      {/* Background */}
      <div className="pointer-events-none fixed inset-0">
        {/* Gradient overlay */}
        <div className="absolute inset-0 bg-gradient-to-b from-[#1a0a2e] via-transparent to-[#0a1a1a]" />

        {/* Grid */}
        <div
          className="absolute inset-0 opacity-20"
          style={{
            backgroundImage: `linear-gradient(#ff00ff 1px, transparent 1px), linear-gradient(90deg, #00ffff 1px, transparent 1px)`,
            backgroundSize: '60px 60px',
          }}
        />

        {/* Sun */}
        <div
          className="absolute top-20 left-1/2 h-96 w-96 -translate-x-1/2 rounded-full opacity-30"
          style={{
            background: 'linear-gradient(180deg, #ff00ff 0%, #8b5cf6 50%, transparent 100%)',
            filter: 'blur(60px)',
          }}
        />
      </div>

      {/* Content */}
      <div className="relative z-10 mx-auto max-w-2xl px-6 py-16">
        {/* Avatar */}
        <div className="mb-8 text-center">
          <div
            className="mx-auto h-32 w-32 rounded-full bg-gradient-to-br from-[#ff00ff] via-[#8b5cf6] to-[#00ffff] p-1"
            style={{ boxShadow: '0 0 40px rgba(255,0,255,0.5)' }}
          >
            <div className="flex h-full w-full items-center justify-center rounded-full bg-[#1a1a2e]">
              <span className="bg-gradient-to-r from-[#ff00ff] to-[#00ffff] bg-clip-text text-4xl font-bold text-transparent">
                NX
              </span>
            </div>
          </div>
        </div>

        {/* Name */}
        <h1
          className="mb-2 text-center text-5xl font-black tracking-wider uppercase"
          style={{
            background: 'linear-gradient(90deg, #ff00ff, #00ffff, #ff00ff)',
            backgroundSize: '200% auto',
            WebkitBackgroundClip: 'text',
            WebkitTextFillColor: 'transparent',
            animation: 'shimmer 3s linear infinite',
          }}
        >
          NeonX_404
        </h1>

        {/* Stats */}
        <div
          className="my-8 grid grid-cols-3 gap-4 rounded-lg border border-[#ff00ff]/30 bg-black/50 p-6"
          style={{ boxShadow: '0 0 20px rgba(255,0,255,0.2)' }}
        >
          <div className="text-center">
            <div
              className="text-3xl font-black text-[#ff00ff]"
              style={{ textShadow: '0 0 20px #ff00ff' }}
            >
              42.8K
            </div>
            <div className="text-xs text-gray-400 uppercase">Followers</div>
          </div>
        </div>
      </div>
    </div>
  );
}
```

## CSS Variables

```css
:root {
  --color-bg: #0a0a0f;
  --color-pink: #ff00ff;
  --color-cyan: #00ffff;
  --color-purple: #8b5cf6;
  --glow-pink: 0 0 20px rgba(255, 0, 255, 0.5);
  --glow-cyan: 0 0 20px rgba(0, 255, 255, 0.5);
}

@keyframes shimmer {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 200% 50%;
  }
}

.neon-text {
  text-shadow: var(--glow-pink);
}

.neon-box {
  box-shadow:
    var(--glow-cyan),
    inset 0 0 20px rgba(0, 255, 255, 0.1);
}
```

## Key Principles

1. **Neon everything**: Glowing text and borders are essential
2. **Dark backgrounds**: Deep blacks make neons pop
3. **Grid aesthetic**: Perspective grids reference 80s graphics
4. **Gradient play**: Pink-to-cyan gradients everywhere
5. **Nostalgic future**: Technology imagined from the past