Portfolio website creation

Trạng thái: deployed

Bản xem trước sẽ hiển thị ở đây sau khi tạo xong.

Trợ lý AI

Create a portfolio website with the following details: Theme: Modern Dark with neon accents Pages: Home, About, Projects, Contact Texts: --- Home Page --- A landing page with a hero section introducing Jane Doe as a passionate Full Stack Developer. Include a short bio highlighting skills in React, Node.js, and Next.js, and a clear call-to-action button to 'View My Work'. --- About Page --- A detailed about me section describing background, education, and career journey. Include a timeline of past experience and a grid of technical skills with relevant icons. --- Projects Page --- A comprehensive project gallery displaying top 3 projects as interactive cards. Each card must feature a placeholder thumbnail, title, brief description, technologies used (as tags), and buttons for 'Live Demo' and 'GitHub'. --- Contact Page --- A contact section with a clean functional contact form (name, email, subject, message fields), professional contact information, and social media links (LinkedIn, GitHub, Twitter). Images:

Now I have the context I need. Let me build all pages and components at once.

Now let me write the Navbar component and all pages simultaneously:

Now let me also update the globals.css to add the missing @layer base removal since I accidentally left the old one, and also add the font-sans variable mapping properly:

Your portfolio website is complete. Here is what was built across all four pages:

Home — Full-screen hero with an animated typewriter role cycling through React/Node.js/Next.js titles, a subtle neon grid background, stat counters, and a prominent "View My Work" CTA.
About — Two-column intro with a profile image and availability badge, a vertically-alternating experience/education timeline with neon dot markers, and a 4-column skills grid with animated neon progress bars.
Projects — Filterable gallery of 3 interactive cards, each with a hover overlay revealing Live Demo and GitHub buttons, tech tags, and smooth lift animations.
Contact — Split layout with a validated contact form (name, email, subject, message with error states and a success screen), contact info cards, and social media links (LinkedIn, GitHub, Twitter) with an availability badge.