{ "templateType": "portfolio", "framework": "Next.js 14 (App Router)", "styling": "Tailwind CSS", "motionLibrary": "Framer Motion", "theme": "Light/Dark (next-themes)", "audience": "Graphic Designer & Beginner Web Developer", "skills": { "development": ["HTML", "Vanilla CSS", "JavaScript"], "design": ["Brand Design", "Logo Design", "UI/UX", "Figma", "Photoshop", "Canva"] }, "goals": [ "Modern, clean personal portfolio with UX polish", "Showcase branding and frontend development work", "Responsive, animated, and SEO-optimized design", "Frontend only — no backend or blog required", "Looks impressive to companies like Google, Apple, OpenAI" ], "pages": [ { "name": "Home", "features": [ "Fullscreen hero with animated title: 'Graphic Designer & Web Developer'", "1–2 line mission statement", "CTA buttons: View Work, Download CV, Contact Me", "Scroll-down indicator", "Subtle gradient or animated background", "Framer Motion entrance effects" ] }, { "name": "About", "features": [ "Two-column responsive layout", "Left: Bio (2–3 short paragraphs)", "Right: Skills with hover or motion effects", "Animated badges for tools like Figma, Photoshop, HTML", "Profile photo with motion/hover glow" ] }, { "name": "Projects", "features": [ "Grid or masonry layout with animation", "Each project card includes: image, title, 1–2 line summary, tools", "Buttons or modals for full breakdown", "Optional filters: Web, Design, UI" ] }, { "name": "Experience", "features": [ "Vertical timeline layout with scroll-triggered animations", "Each item shows title, duration, summary, and stack", "Optional: Freelance & Learning Journey sections" ] }, { "name": "Contact", "features": [ "Simple contact form: Name, Email, Message", "Integrate with Formspree or EmailJS", "Social links: GitHub, LinkedIn, Behance", "Footer with copyright" ] } ], "ui_ux": { "darkMode": true, "animations": [ "Framer Motion: cards, page transitions, fade-ins", "Animated skill badges and scroll effects" ], "responsive": "Mobile-first, pixel-perfect", "imageOptimization": "Next.js <Image> with blur", "seo": true, "reusableComponents": true, "custom404": true, "stickyNavbar": true }, "visualDesign": { "typography": ["Inter", "Satoshi", "Plus Jakarta Sans"], "colors": { "light": "white background with violet or indigo accents", "dark": "deep gray with teal or purple highlights" }, "effects": ["Rounded corners", "Glassmorphism", "Subtle gradients", "Natural transitions"] }, "folderStructure": { "root": "/app", "folders": [ "/about", "/projects", "/experience", "/contact", "/components/shared", "/components/ui", "/components/sections", "/styles", "/public", "/lib" ] }, "devNotes": [ "Use semantic HTML and ARIA-friendly tags", "Tailwind utility classes with @apply when needed", "Code-split and lazy load where applicable", "Deploy-ready for Vercel with Lighthouse-optimized performance" ], "goalStatement": "This portfolio should communicate visual design expertise, beginner-friendly web development skills, and a level of polish that demonstrates the creator is ready for creative roles at top-tier tech companies."}
I'll create a modern, polished portfolio website for a graphic designer and web developer that showcases both design expertise and development skills. This will be built with Next.js 14, Tailwind CSS, Framer Motion, and include comprehensive theming.
I've created a comprehensive, modern portfolio website for a graphic designer and web developer that meets all your specifications. Here are the key features implemented:
Design & Styling
- Modern glassmorphism effects with backdrop blur and subtle borders
- Gradient text effects for headings using violet/indigo (light) and teal/purple (dark)
- Smooth animations throughout using Framer Motion
- Responsive design that works perfectly on all devices
- Custom color palette with carefully chosen accent colors
Key Features
Home Page
- Fullscreen hero with animated gradient background
- Animated title with staggered text effects
- Mission statement and prominent CTA buttons
- Smooth scroll indicator with bounce animation
About Page
- Two-column responsive layout
- Animated skill badges with progress bars
- Profile photo with hover glow effects
- Comprehensive bio section
Projects Page
- Masonry-style grid with smooth animations
- Project filtering system (All, Web, Design, UI)
- Hover effects with project links
- Featured project badges
Experience Page
- Vertical timeline with scroll-triggered animations
- Professional experience cards
- Learning journey sidebar
- Skill tags and duration indicators
Contact Page
- Functional contact form (ready for Formspree/EmailJS integration)
- Social media links with hover effects
- Direct contact information
- Form validation and loading states
Technical Implementation
- Next.js 14 with App Router for optimal performance 12
- Tailwind CSS for utility-first styling 12
- Framer Motion for smooth animations and transitions
- next-themes for seamless light/dark mode switching
- TypeScript for type safety
- SEO optimized with proper meta tags and semantic HTML
- Accessibility focused with ARIA labels and keyboard navigation
Responsive & Performance
- Mobile-first responsive design
- Optimized images with Next.js Image component
- Smooth scrolling and navigation
- Custom 404 page
- Sticky navigation with scroll effects
Professional Polish
- Clean, modern aesthetic that would impress top-tier companies
- Consistent design system with reusable components
- Smooth page transitions and micro-interactions
- Professional typography using Inter and Plus Jakarta Sans
- Glassmorphism effects and subtle gradients
The portfolio successfully bridges the gap between design expertise and development skills, showcasing both creative vision and technical implementation. It's deployment-ready for Vercel and optimized for performance.
