Create a Portfolio Website with AI
That Actually Feels Premium

Create a premium dark-mode portfolio website for a full-stack developer. The design must feel like it belongs on Awwwards.

HERO SECTION:
- Large monospace typography for the name "[YOUR NAME]"
- Animated typing effect for the role "[YOUR ROLE]"
- Terminal/code window aesthetic with syntax-highlighted code snippet
- GitHub contribution graph-style visual element
- CTA buttons: "View Projects" and "Download Resume"

ABOUT SECTION:
- Split layout: photo on one side, story on the other
- Tech stack icons displayed as an animated infinite marquee
- Years of experience counter with scroll-triggered animation

PROJECTS SECTION:
- Bento grid layout with hover-expand cards
- Each card shows: project thumbnail, tech stack tags, live demo & repo links
- Filter buttons by category: Frontend, Backend, Mobile, AI

EXPERIENCE SECTION:
- Vertical timeline with company logos, roles, and achievements
- Color-coded by employment type: Full-time, Freelance, Open Source

CONTACT SECTION:
- Minimal form: Name, Email, Message
- Direct email link with copy-to-clipboard button
- Social links: GitHub, LinkedIn, Twitter, Dev.to

TECHNICAL REQUIREMENTS:
- Pure HTML5, CSS3, Vanilla JS. No frameworks.
- Dark theme: #0a0a0a background, #00d084 accent
- Smooth scroll with Lenis-style smoothness
- Intersection Observer for scroll animations
- LocalStorage to save theme preference
- 100% Lighthouse Accessibility score

Generate the complete, production-ready, single-file HTML with embedded CSS and JS.

Create a visually stunning frontend developer portfolio with heavy emphasis on animations and micro-interactions.

DESIGN SYSTEM:
- Color: Deep navy #0f172a with electric blue #3b82f6 accent
- Typography: Inter for body, JetBrains Mono for code
- Spacing: 8px base grid system

HERO:
- Particle network canvas animation in background
- Name with character-by-character reveal animation
- Floating skill badges that orbit slowly
- Mouse-follow spotlight effect

SKILLS SECTION:
- Circular progress rings animated on scroll
- 3D tilt cards for each technology
- Hover reveals detailed proficiency descriptions

PROJECTS:
- Horizontal scroll gallery with drag interaction
- Each project: before/after slider for redesigns
- Live code preview iframe for code demos
- GitHub stars and fork counts fetched via API

BLOG PREVIEW:
- 3 latest articles with reading time estimates
- Tag cloud with animated hover states

FOOTER:
- Animated gradient text for the CTA
- Back-to-top button with rocket animation

All animations must be GPU-accelerated (transform, opacity only). Include reduced-motion media query support.

Create a premium UI/UX designer portfolio website concept. The design must feel editorial and gallery-like.

LAYOUT:
- Asymmetric grid with intentional white space
- Large typography: 120px display font for the name
- Custom cursor that changes based on hover context
- Smooth page transitions with barba.js-style wipes

HERO:
- Full-bleed project showcase that auto-rotates
- Minimal text overlay: name + "Digital Product Designer"
- Scroll indicator with animated line

WORK SECTION:
- Masonry grid of case studies
- Each case study: cover image, client name, project type, year
- Hover: image zoom + title slide-up + "View Case Study" reveal
- Filter by: Mobile App, Web Design, Branding, Design System

CASE STUDY TEMPLATE:
- Problem / Solution / Process / Results structure
- Before/after comparison sliders
- Embedded Figma prototypes
- User testing quotes and metrics

ABOUT:
- Studio-style team photo or personal portrait
- Design philosophy statement
- Awards and recognition badges
- Client logo marquee

CONTACT:
- Large "Let's Work Together" text with email link
- Project inquiry form with budget selector
- Availability calendar embed

Color: Off-white #fafafa background, black #111 text, coral #ff6b6b accent. Typography: Playfair Display + Inter.

Create a high-converting freelancer portfolio website optimized for lead generation and client acquisition.

STRATEGY:
- Every section must guide the visitor toward booking a call or sending an inquiry
- Social proof must appear above the fold and after every 2 sections
- Clear pricing transparency or starting-at rates

HERO:
- Headline: "I help [TARGET CLIENTS] achieve [DESIRED OUTCOME]"
- Subheadline with specific value proposition
- Video introduction (replaceable with photo)
- Two CTAs: "Book a Free Call" (primary) and "View My Work" (secondary)
- Trust badges: "50+ Projects Delivered", "Featured in [PUBLICATION]"

SERVICES SECTION:
- 3-4 service cards with clear deliverables and timelines
- Each card: icon, title, description, starting price, "Learn More" link
- Hover: card lifts with shadow, price highlights

PROCESS SECTION:
- 4-step visual timeline: Discovery → Design → Develop → Deliver
- Each step with estimated duration and deliverables list
- Progress bar showing current availability

TESTIMONIALS:
- Video testimonials prioritized over text
- Client photo, name, company, role, and star rating
- Specific ROI metrics: "3x increase in conversions", "$50K saved"

PRICING:
- 3-tier pricing table: Starter / Professional / Enterprise
- Feature comparison with checkmarks
- "Most Popular" badge on middle tier
- FAQ accordion below pricing

FOOTER CTA:
- Sticky banner: "Ready to start your project? Book a call →"
- Calendar scheduling embed (Calendly style)

Design: Clean, trustworthy, professional. Blue #2563eb and white theme.

Create a modern personal portfolio website using Canva's Website Builder.

REQUIREMENTS:
- Single-page scrolling layout
- Sections: Hero (name + photo + tagline), About (2-column with bio), Services (3 cards), Portfolio (image grid), Contact (form + social links)
- Color scheme: [YOUR COLOR] and white with dark text
- Typography: Clean sans-serif, large headings
- Mobile-responsive design
- Include a downloadable resume button
- SEO page title: "[YOUR NAME] — [YOUR PROFESSION] Portfolio"
- Add Google Analytics tracking ID placeholder

Generate the complete Canva website design with all text content, image placeholders, and button links ready to customize.

Create a premium portfolio website in Webflow or Framer with the following specifications:

NAVIGATION:
- Fixed navbar with blur backdrop
- Logo left, links center, CTA button right
- Mobile: hamburger menu with full-screen overlay

HERO:
- Full viewport height
- Background: subtle animated gradient mesh
- Centered: Large name + animated subtitle
- Scroll-down indicator with bounce animation

PROJECTS CMS:
- CMS collection for dynamic project pages
- Each project: hero image, title, client, year, description, image gallery, live link
- Related projects at bottom

INTERACTIONS:
- Page load: staggered fade-in from bottom
- Scroll: parallax on images, text reveals
- Hover: image scale, button magnetic effect
- Mouse: custom cursor dot

CMS BLOG:
- Category filtering
- Featured post highlight
- Reading time estimate
- Author bio card

TECHNICAL:
- Responsive: 1440px, 1024px, 768px, 375px breakpoints
- Optimize images to WebP
- Lazy loading on all images
- Minify CSS and JS
- Connect custom domain
- Set up 301 redirects
- XML sitemap generation

Export as a complete Webflow/Framer project structure with class naming convention.

Abstract 3D render of floating geometric shapes, glass morphism cubes and spheres, dark navy blue background #0f172a, glowing neon green #00d084 accent lines, soft volumetric lighting, depth of field, octane render, 8k, ultra-detailed, minimal composition with generous negative space on the left side for text overlay, futuristic tech aesthetic, portfolio website hero background --ar 16:9 --style raw --v 6

A minimalist creative workspace flat lay photograph for a designer portfolio website hero section. Clean white desk with a MacBook Pro showing a Figma interface, color swatches, a sketchbook with wireframe drawings, a potted succulent, and a ceramic coffee cup. Soft natural window light from the left, subtle shadows, muted earth tones with a pop of coral #ff6b6b. Shot from above at 45 degrees. High-end editorial photography style, 4k, sharp focus, shallow depth of field. Leave 40% of the top area as clean white space for website text overlay.