My story

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: IMPORTANT: All website content, text, labels, navigation, headings, and descriptions MUST be written in English. Theme: figma Pages: My Story Texts: --- My Story Page --- Write a complete personal portfolio website content that tells a cohesive story about me as a frontend developer. Context: - I am a frontend developer with experience in React, Next.js, TypeScript, and mobile development - I care about performance, clean architecture, and user experience - I started from curiosity, learning by experimenting and building small projects - Over time, I’ve grown into building full-scale applications and improving code quality and problem-solving - I enjoy riding, exploring technology, and continuously learning Requirements: Generate the content structured into the following sections: 1. Hero Section - Strong, short headline - 1–2 sentence tagline - Include 2 call-to-action texts (e.g., View Work, Contact Me) 2. Opening Story (My “Why”) - 2–3 short paragraphs - Emotional, relatable, non-technical 3. Journey / Growth - Show progression (past → present) - Highlight learning and improvement - 3–5 paragraphs 4. Skills & Strengths - No bullet points - Explain impact and thinking, not just tools 5. Featured Project (1 example) - Structure: Problem → Solution → Result - Realistic and impactful 6. Philosophy / Mindset - 2–3 paragraphs - Include one memorable quote-style sentence 7. Personal Side - 1–2 paragraphs - Light, human, relatable 8. Call-To-Action - Short, strong closing that invites collaboration 9. Footer - Name - Short tagline - Placeholder for social links (GitHub, LinkedIn, Email) Tone & Style: - Modern, confident, and professional - Human and natural (not robotic or overly formal) - Concise, clean, and easy to read - Make all sections feel connected like one continuous story Output format: - Clearly separate each section with headings - Do not include explanations, only final content No images provided.

Now let me update the globals, layout, and build all the components:

Now let me build all the section components and the main page:

Now let me assemble everything into the main page:

Your "My Story" portfolio page is fully built. Here is what was created:

9 sections across 9 focused components — Navbar, Hero, Opening Story (My Why), Journey timeline, Skills & Strengths grid, Featured Project (Problem → Solution → Result), Philosophy with a memorable quote, Personal Side, and a CTA with social links, plus a Footer.

Design follows a Figma-inspired dark theme — deep navy background (oklch(0.13)), Inter typography, a purple/violet accent color, grid-dot hero backgrounds, and a consistent section label system using numbered monospace headings (01 / My Why, 02 / Journey, etc.) that mirrors professional developer portfolios.

Interactive details include a blinking cursor in the hero headline, a sticky navbar that goes glass on scroll, a hover-animated journey timeline, skill cards that accent on hover, a mock UI task board visual in the project section, and smooth scroll navigation throughout.

đổi theme màu sáng hơn

Now let me read all the component files to understand what hardcoded dark classes need updating too:

Good — all components use semantic tokens (bg-background, bg-surface, text-foreground, text-muted-foreground, border-border, etc.) with no hardcoded dark colors. The only hardcoded oklch values are in inline style props in hero-section.tsx, philosophy-section.tsx, and cta-section.tsx. I only need to update globals.css to a clean light theme, and fix those three inline style values.

Now update the three inline oklch hardcoded color values in the components:

The theme has been switched to a clean light mode. The background is now a near-white oklch(0.99), surfaces use a soft cool-grey, the primary accent is a vivid but slightly deeper violet-blue that reads clearly on light backgrounds, and all borders/muted text have been recalibrated for proper contrast. The three hardcoded inline oklch values in the hero, philosophy, and CTA components were also updated to match the new palette.