🎨 Agata Rybka Portfolio

A beautiful, animated portfolio website showcasing work in administration, graphics, and marketing.

Live Site: https://agatarybka.pl/ 🌐

🚀 About

This is a modern, Polish-language portfolio website built for Agata Rybka, featuring her professional work in administration, graphic design, and marketing. The site includes interactive project galleries, experience timeline, and smooth GSAP animations.

✨ Features

• 🎯 Modern Tech Stack - Built with Nuxt 4 and Vue 3 Composition API
• 🎨 Beautiful Animations - Powered by GSAP with custom plugins
• 📱 Fully Responsive - Optimized for all devices with TailwindCSS 4
• 🖼️ Interactive Galleries - Project showcases with lightbox functionality
• 📝 Content Management - Structured content with Nuxt Content v3 collections
• ⚡ Performance Optimized - Image optimization and font loading
• 🌍 SEO Ready - Complete OpenGraph and Twitter Card meta tags

🛠️ Tech Stack

Core Framework

• Nuxt 4 - Full-stack Vue framework
• Vue 3 - Progressive JavaScript framework with Composition API
• TypeScript - Type-safe JavaScript

Styling & UI

• TailwindCSS 4 - Utility-first CSS framework
• Nuxt Fonts - Custom font management
• Nuxt Icon - Icon system
• Nuxt Image - Image optimization

Content & Media

• Nuxt Content v3 - File-based CMS with collections
• Nuxt Easy Lightbox - Image gallery functionality

Animations

• GSAP with premium plugins:
  • ScrollTrigger, ScrollSmoother
  • MorphSVG, DrawSVG, SplitText
  • MotionPath, CustomBounce, CustomWiggle
  • Observer, Flip animations

Development Tools

• Nuxt ESLint - Code linting
• Nuxt DevTools - Development experience
• Nuxt Scripts - Script management

🎨 Custom Fonts

This project uses licensed, self-hosted fonts. Ensure these files exist in public/fonts/:

• TT-Ricordi-Trial-Nobili.woff2 (weight 600) - Elegant serif headings
• Agrandir-Regular.woff2 (weight 400) - Modern sans-serif body
• Agrandir-Light.woff2 (weight 300) - Light weight variant

Fonts are automatically served by Nuxt with optimal loading strategies.

📦 Setup

Install dependencies:

npm install

🚀 Development

Start the development server:

npm run dev

The site will be available at http://localhost:3000

Other Commands

npm run build      # Build for production
npm run preview    # Preview production build
npm run generate   # Generate static site
npx eslint .       # Run code linting

📁 Project Structure

├── app/                    # Nuxt 4 application code
│   ├── components/         # Vue components
│   ├── pages/             # Page routes
│   ├── layouts/           # Layout components
│   └── assets/css/        # Global styles
├── content/               # Content management
│   ├── pages/             # Static pages (markdown)
│   ├── projekty/          # Portfolio projects
│   └── site/              # Site configuration
├── public/                # Static assets
│   ├── fonts/             # Custom font files
│   └── favicon/           # Favicon assets
├── composables/           # Vue composables
└── types/                 # TypeScript definitions

📝 Content Management

The project uses Nuxt Content v3 with strictly defined collections:

• pages - Static pages (/content/pages/*.md)
• projekty - Portfolio projects (/content/projekty/*.md)
• site - Configuration data (/content/site/*.yml)

⚠️ Important: Content Fetching

Always use queryCollection() instead of queryContent() when working with defined collections:

// ✅ Correct
const { data: projects } = await useAsyncData('projects', () =>
  queryCollection('projekty').all()
)

// ❌ Incorrect - won't work with collections
const projects = await queryContent('projekty').find()

🎨 Styling Guide

• TailwindCSS 4 for all styling
• Custom breakpoints and design tokens
• SCSS integration for complex components
• Responsive-first approach

🎬 Animation Features

Extensive GSAP integration with premium plugins:

• Smooth scrolling with ScrollSmoother
• Advanced SVG animations (MorphSVG, DrawSVG)
• Text animations with SplitText
• Timeline-based interactions
• Performance-optimized scroll triggers

🌍 SEO & Meta

• Polish language (lang="pl")
• Complete OpenGraph and Twitter Card tags
• Optimized meta descriptions and titles
• Proper structured data
• Performance-focused loading strategies

🚀 Deployment

The site is configured for Netlify deployment:

npm run generate  # Generate static files

Production URL: https://agatarybka.pl/

📄 License

This project contains licensed fonts and custom design elements. Please respect intellectual property rights.

---

Built with ❤️ using modern web technologies for an exceptional user experience.