portfolio-frontend-design

name	portfolio-frontend-design
description	Frontend design system dla projektu portfolio Pawla Lipowczana (React 19 + Vite 7 + Tailwind CSS 3 + Framer Motion 12). Uzyj przy tworzeniu nowych komponentow, stron, sekcji lub modyfikacji UI w portfolio. Zawiera palete kolorow (green accent
license	Apache-2.0

Portfolio Frontend Design System

Design system i wytyczne dla projektu portfolio Pawla Lipowczana. Zapewnia spojnosc wizualna przy tworzeniu nowych komponentow, stron i sekcji.

Quick Reference

Color Palette

Token	Value	Usage
Primary Accent	#00ff9d	Buttons, CTAs, hover states, highlights
Accent Hover	#00ffa3	Hover variants
Cyan	#00b8ff	Gradient secondary color
Background Dark	#0a0e1a	Main page background
Background Darker	#050810	Deep sections, cards
Text Primary	#ffffff	Headings, important text
Text Secondary	#e5e7eb	Body text, descriptions
Text Muted	#9ca3af	Less important text

Gradient Definitions

/* Primary text gradient */
background: linear-gradient(to right, #00ff9d, #00b8ff, #00ffa3);
-webkit-background-clip: text;
background-clip: text;
color: transparent;

/* Tailwind equivalent */
className="bg-gradient-to-r from-green-400 via-cyan-400 to-green-300 bg-clip-text text-transparent"

Typography

Element	Font	Tailwind Classes
Headings	Inter/Poppins	font-bold
Body	Inter	font-normal
Code	Fira Code	font-mono
Hero Title	Inter	text-6xl md:text-8xl font-bold uppercase

Core Tailwind Class Combinations

// Primary Button
className="px-6 py-3 bg-green-500 hover:bg-green-400 text-black font-semibold rounded-lg transition-all duration-300 hover:scale-105 hover:shadow-[0_0_30px_rgba(0,255,157,0.3)]"

// Secondary/Outline Button
className="px-6 py-3 border border-green-500 text-green-500 hover:bg-green-500/10 rounded-lg transition-all duration-300"

// Glassmorphism Card
className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-xl p-6 hover:border-green-500/30 transition-all duration-300"

// Section Container
className="relative min-h-screen py-20 px-4 md:px-8 lg:px-16"

// Gradient Text
className="bg-gradient-to-r from-green-400 via-cyan-400 to-green-300 bg-clip-text text-transparent"

Component Creation Workflow

1. Determine component type - Section (homepage), Page (route), or UI component
2. Copy appropriate template from assets/templates/
3. Apply design tokens from references/design-tokens.md
4. Add animations following references/animation-patterns.md
5. Verify accessibility using references/accessibility-checklist.md
6. Place in correct directory (see Integration section)

Design Principles

Visual Identity

Portfolio uzywa ciemnego motywu z zielonymi/cyan akcentami, tworzac nowoczesna, techniczna estetykę:

• Dark theme only - Ciemne tla (#0a0e1a, #050810) z jasnym tekstem
• Green/Cyan accents - Wszystkie interaktywne elementy uzywaja zielonego (#00ff9d)
• Gradient effects - Naglowki z gradient text, dekoracyjne elementy
• Glassmorphism - Karty z backdrop-blur i polprzezroczystymi tlami
• Network/Tech aesthetic - Canvas particle background, geometric patterns

Hover & Interaction Effects

Wszystkie interaktywne elementy musza miec efekty hover:

// Standard card hover - lift + glow
whileHover={{ y: -10 }}
className="hover:shadow-[0_0_30px_rgba(0,255,157,0.15)] hover:border-green-500/30"

// Button hover - scale + glow
className="hover:scale-105 hover:shadow-[0_0_30px_rgba(0,255,157,0.3)]"

// Link hover - color change
className="hover:text-green-400 transition-colors"

// Image hover - zoom
className="group-hover:scale-105 transition-transform duration-500"

Animation Timing

Type	Duration	Easing
Hover transitions	300ms	ease
Page transitions	500ms	easeOut
Stagger children	100ms delay	-
Entry animations	600ms	easeOut

Component Patterns

Section Structure

Kazda sekcja strony glownej powinna miec:

<section
  id="section-name"  // dla smooth scroll
  className="relative min-h-screen py-20 px-4 md:px-8 lg:px-16"
>
  {/* Decorative background blurs */}
  <div className="absolute inset-0 overflow-hidden pointer-events-none">
    <div className="absolute top-1/4 -left-20 w-72 h-72 bg-green-500/10 rounded-full blur-3xl" />
  </div>

  <div className="relative max-w-7xl mx-auto">
    {/* Section header */}
    <motion.div className="text-center mb-16">
      <h2 className="text-4xl md:text-5xl font-bold">
        <span className="bg-gradient-to-r from-green-400 via-cyan-400 to-green-300 bg-clip-text text-transparent">
          Section Title
        </span>
      </h2>
      <p className="text-gray-400 text-lg mt-4">Description</p>
    </motion.div>

    {/* Content grid */}
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
      {/* Items */}
    </div>
  </div>
</section>

Card Component

Karty uzywaja glassmorphism z hover effects:

<motion.div
  whileHover={{ y: -10 }}
  className="
    bg-white/5 backdrop-blur-sm
    border border-white/10
    rounded-xl overflow-hidden
    transition-all duration-300
    hover:border-green-500/30
    hover:shadow-[0_0_30px_rgba(0,255,157,0.15)]
  "
>
  <img className="w-full aspect-video object-cover" />
  <div className="p-6">
    <h3 className="text-xl font-semibold text-white group-hover:text-green-400">
      Title
    </h3>
    <p className="text-gray-400 mt-2">Description</p>
    {/* Tags */}
    <div className="flex gap-2 mt-4">
      <span className="px-2 py-1 text-xs bg-green-500/10 text-green-400 rounded-full border border-green-500/20">
        Tag
      </span>
    </div>
  </div>
</motion.div>

Navigation

Sticky header z backdrop blur:

<header className="
  fixed top-0 left-0 right-0 z-50
  bg-[#0a0e1a]/80 backdrop-blur-md
  border-b border-white/5
">
  <nav className="max-w-7xl mx-auto px-4 py-4 flex items-center justify-between">
    {/* Logo */}
    {/* Desktop menu */}
    {/* Mobile hamburger */}
  </nav>
</header>

Buttons

// Primary CTA
<button className="
  px-6 py-3 bg-green-500 hover:bg-green-400
  text-black font-semibold rounded-lg
  transition-all duration-300
  hover:scale-105 hover:shadow-[0_0_30px_rgba(0,255,157,0.3)]
">
  Primary Action
</button>

// Secondary/Outline
<button className="
  px-6 py-3 border border-green-500 text-green-500
  hover:bg-green-500/10 rounded-lg
  transition-all duration-300
">
  Secondary Action
</button>

// Ghost/Link
<a className="text-gray-400 hover:text-green-400 transition-colors">
  Link Text
</a>

Integration with Architecture

Directory Structure

Place components in correct directories:

Type	Directory	Example
Layout	src/components/layout/	Navigation, Footer, Layout
Sections	src/components/sections/	Hero, About, Projects, Skills, Contact
UI	src/components/ui/	CookieBanner, Breadcrumbs, Card
Animations	src/components/animations/	NetworkBackground
SEO	src/components/seo/	SEO, StructuredData
Pages	src/pages/	Home, Blog, BlogPostPage

Required Imports

// Animation
import { motion } from 'framer-motion';

// SEO (for pages)
import { Helmet } from 'react-helmet-async';

// Routing
import { Link, useNavigate } from 'react-router-dom';

// Icons
import { FaGithub, FaLinkedin, FaTwitter } from 'react-icons/fa';

// Constants
import { SITE_CONFIG } from '../utils/constants';

SEO Requirements

Kazda nowa strona musi miec:

<Helmet>
  <title>Page Title - {SITE_CONFIG.name}</title>
  <meta name="description" content="..." />
  <meta property="og:title" content="..." />
  <meta property="og:description" content="..." />
  <meta property="og:image" content={`${SITE_CONFIG.url}/images/og/page.webp`} />
  <link rel="canonical" href={`${SITE_CONFIG.url}/page-slug`} />
</Helmet>

Nowe routes musza byc dodane do:

• src/App.jsx - routing
• scripts/prerender.mjs - prerendering dla SEO
• public/sitemap.xml - sitemap

Resources

References

Szczegolowe specyfikacje znajduja sie w:

• design-tokens.md - Kompletna paleta kolorow, typografia, spacing, shadows
• animation-patterns.md - Framer Motion variants, CSS transitions, scroll effects
• accessibility-checklist.md - WCAG 2.1 AA checklist

Templates

Gotowe szablony do kopiowania:

• section-component.jsx - Szablon sekcji homepage
• page-component.jsx - Szablon nowej strony/route
• card-component.jsx - Szablon karty glassmorphism

Project Documentation

Pelna dokumentacja projektu:

• docs/portfolio/SRS.md - Specyfikacja techniczna
• docs/portfolio/PRD.md - Wymagania produktowe
• docs/portfolio/blog/BLOG_WORKFLOW.md - Workflow dla blogow

Related Skills

• portfolio-code-review - Code review checklist dla portfolio