{ "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:
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.