Seksy Planety Interactive Brand Portfolio

Overview

This project is a minimalist, interactive brand portfolio built with Nuxt.js that focuses on unconventional navigation and high-intent engagement. It serves as a strong reference for developers looking to implement a playful, "spatial UI" where content is scattered across a canvas rather than contained in traditional grids.

Design System

• Color Palette & Visual Hierarchy: The design utilizes a high-contrast, brutalist aesthetic featuring a solid #000000 (black) background. Hierarchy is flattened, giving equal visual weight to each element, which forces discovery through exploration.
• Typography: A bold, sans-serif, all-caps typeface is used for readability at small scales. The HTML reveals a focus on text-heavy "tags" that act as both informative labels and interactive anchors.
• Page Structure: The site begins with a centralized preloader component. Once loaded, the layout transitions to a non-linear arrangement of floating tags (.tag) positioned via absolute coordinates (transform: translate).
• Reusable Components:
  • Interactive Tags: Draggable or floating span elements linked to external socials (Instagram, Twitter).
  • Dynamic Preloader: A simple centered text loader that manages the initial state transition.
  • Floating UI Container: A parent wrapper (.t) that manages the coordinate system for scattered elements.
• Interaction and Motion: The site relies on motion-based discovery. The HTML code shows specific pixel-based transforms (e.g., 1075.43px, 187.466px), suggesting a physics-based or coordinate-randomized engine for positioning.
• Implementation Clues: The project uses Nuxt.js (indicated by #__nuxt and #__layout). Content is managed via scoped components (data-v- attributes) with inline styles handling real-time positioning.

Use Cases

• Who should clone this: Creative agencies, experimental designers, and music producers looking for an "anti-design" portfolio that stands out from standard templates.
• Remix Directions: Replace the social media tags with project thumbnails to create a scatter-plot portfolio. Alternatively, adapt the coordinate-based positioning system for a digital "mood board" or a link-in-bio page with more personality.
• Suggested Clone Scope: Start by cloning the full-page layout and the logic for the floating tags. The preloader logic is also highly reusable for any heavy assets or WebGL-integrated sites. For a faster project, reuse only the floating tag component for a unique "Contact" or "Socials" section at the footer of a traditional website.