Skip to main content
CV Staff Web Hero Light

​
Welcome to CV Staff Web

CV Staff Web is a cutting-edge portfolio website that combines modern web technologies with stunning visual effects and AI-powered interactions. Built with Astro for optimal performance, this project showcases how to create an engaging, interactive personal website that stands out.

Quick Start

Get your development environment up and running in minutes

Architecture

Understand the component-based structure and design patterns

AI Chatbot

Learn how the Groq-powered AI assistant works

Animations

Explore GSAP animations and visual effects

​
Key Features

​
AI-Powered Chatbot

Integrated with Groq API using the llama-3.3-70b-versatile model, the chatbot provides intelligent, context-aware responses about your professional background. The AI assistant maintains conversation history and includes built-in rate limiting for optimal API usage. 
const GROQ_URL = 'https://api.groq.com/openai/v1/chat/completions';
const model = 'llama-3.3-70b-versatile';
The chatbot uses a sophisticated system prompt to maintain personality consistency and provide accurate information based on profile data.

​
Stunning Visual Effects

Glassmorphism Cursor - A custom cursor with glassmorphism effects that responds to interactive elements:
  • Backdrop blur with rgba transparency
  • Smooth follow animation with delay
  • Hover states for clickable elements
  • Automatically disabled on mobile and for reduced motion preferences
GSAP Animations - Professional-grade animations throughout:
  • Hero section with staggered entrance animations
  • Scroll-triggered reveals using ScrollTrigger
  • Bouncing text effects for name display
  • Card-based transitions for interactive elements

​
Interactive Photo Slider

Built with Swiper.js using the Cards effect:
  • Support for both images and videos
  • Auto-play video on active slide
  • Sound toggle controls
  • Smooth card-stack transitions
  • Touch-friendly on mobile devices
const swiper = new Swiper('#heroSwiper', {
  modules: [EffectCards, Pagination],
  effect: 'cards',
  grabCursor: true,
  cardsEffect: {
    slideShadows: true,
    perSlideOffset: 8,
    perSlideRotate: 2,
  },
});

​
Component Architecture

Modular, reusable Astro components:
  • Badget.astro - Animated status badge
  • WelcomeCard.astro - Hero welcome section with animated text
  • MarqueeV1.astro - Scrolling text banner
  • SectionCard.astro - Reusable content cards
  • InfoTable.astro - Structured data display

​
Accessibility Features

Skip Links - Jump to main content for keyboard navigation

Reduced Motion - Respects prefers-reduced-motion preference

Focus Indicators - Clear visual focus states for all interactive elements

ARIA Labels - Proper labeling for screen readers

​
Technology Stack

Astro

Modern static site generator with component islands architecture

GSAP

Professional animation library with ScrollTrigger plugin

Swiper.js

Touch-enabled slider with advanced effects

Groq API

Lightning-fast AI inference for chatbot responses

TypeScript

Type-safe development experience

Onest Variable

Modern variable font for optimal typography

​
Design Principles

​
Performance First

  • Astro’s zero-JS by default approach
  • Optimized asset loading
  • Minimal bundle size with selective hydration

​
Mobile Responsive

  • Fluid layouts that adapt to all screen sizes
  • Touch-optimized interactions
  • Progressive enhancement for desktop features

​
User Experience

  • Smooth animations that don’t overwhelm
  • Fast page loads
  • Intuitive navigation
  • Clear visual hierarchy
This documentation will help you understand, customize, and extend the CV Staff Web project to create your own unique portfolio experience.

​
Next Steps

1

Quick Start

Follow the Quick Start Guide to set up your development environment
2

Explore Features

Dive into individual features like the AI chatbot and animation system
3

Customize

Learn how to adapt the design and content for your own portfolio
4

Deploy

Deploy your customized site to production

Build docs developers (and LLMs) love

Get started for freeTalk to us