Skip to content
UX/UI Engineer Roadmap

Workshop: Portfolio v2 with Animations

Project Brief

Section titled “Project Brief”

Portfolio v2 with Animations

สร้าง Portfolio เวอร์ชัน 2 ที่มี animation สวยงาม — Dark mode, hover effect, scroll animation, page transition และ responsive 100%
  • Dark mode design
  • Hover animations บนปุ่มและ card
  • Scroll animations สำหรับแต่ละ section
  • Page transitions ด้วย AnimatePresence
  • 100% Responsive ทุกขนาดหน้าจอ
  • Deploy ขึ้น Vercel หรือ Netlify
Deploy to: Vercel or Netlify
What you'll build Preview
About Projects Contact
Hello, I'm Alex Designer UX/UI Engineer
View My Work
Projects
Todo App
React Tailwind
Dashboard
Tailwind shadcn
Blog
Motion MDX
Get in Touch
your@email.com
Send

Project Structure

Section titled “Project Structure”
  • Directoryportfolio-v2/
    • Directorysrc/
      • App.jsx Main app component
      • Directorycomponents/
        • Navbar.jsx Navigation bar พร้อม scroll effect
        • Hero.jsx Hero section พร้อม entrance animation
        • About.jsx About section พร้อม scroll animation
        • Projects.jsx Projects grid พร้อม stagger + hover
        • Contact.jsx Contact section พร้อม animation
      • Directoryanimations/
        • variants.js Shared animation variants
    • package.json Dependencies รวม motion

Step-by-Step Instructions

Section titled “Step-by-Step Instructions”

  1. สร้างโปรเจกต์ React + Tailwind

    ใช้ Vite สร้างโปรเจกต์ใหม่ แล้วติดตั้ง dependencies:

    Terminal window
    npm create vite@latest portfolio-v2 -- --template react
    cd portfolio-v2
    npm install
    npm install motion
    npm install -D tailwindcss @tailwindcss/vite

    จากนั้นเพิ่ม Tailwind CSS ใน CSS file หลัก:

    src/index.css
    @import "tailwindcss";

  2. สร้างไฟล์ variants.js

    สร้างโฟลเดอร์ src/animations/ แล้วสร้างไฟล์ variants.js รวม animation variants ที่จะใช้ซ้ำ:

    • fadeInUp — fade in พร้อมเลื่อนขึ้น
    • fadeIn — fade in อย่างเดียว
    • staggerContainer — container ที่ stagger children
    • scaleOnHover — ขยายเมื่อ hover
    • slideInLeft / slideInRight — เลื่อนเข้าจากซ้าย/ขวา

  3. สร้าง Navbar.jsx

    สร้าง navigation bar ที่มีฟีเจอร์:

    • เปลี่ยน background เมื่อ scroll ลงมา (ใช้ useState + useEffect ฟัง scroll event)
    • Smooth scroll ไปยังแต่ละ section
    • Entrance animation ด้วย motion.nav
    • Mobile responsive menu

  4. สร้าง Hero.jsx

    สร้าง Hero section พร้อม animation:

    • Delay chaining — subtitle, title, description, button เข้ามาตามลำดับ
    • Button มี whileHover + whileTap
    • Full screen height (min-h-screen)
    • Dark theme background

  5. สร้าง About.jsx

    สร้าง About section:

    • ใช้ whileInView ให้ animate เมื่อ scroll มาถึง
    • viewport={{ once: true }} ให้ animate ครั้งเดียว
    • แสดง skill list ด้วย stagger animation
    • Layout 2 คอลัมน์บน desktop

  6. สร้าง Projects.jsx

    สร้าง Projects section:

    • Grid layout แสดง project cards
    • Card มี whileHover effect (ยกขึ้น + เงา)
    • Stagger animation เมื่อ scroll มาถึง
    • แต่ละ card มี title, description, tech tags, link

  7. สร้าง Contact.jsx

    สร้าง Contact section:

    • Contact form หรือ contact info
    • Scroll animation ด้วย whileInView
    • Social links พร้อม hover animation
    • Footer area

  8. รวมทุกอย่างใน App.jsx แล้ว Deploy

    • Import ทุก component มารวมใน App.jsx
    • เพิ่ม ScrollProgress bar (optional)
    • ทดสอบ responsive ทุกขนาดหน้าจอ
    • Deploy ขึ้น Vercel หรือ Netlify:
    Terminal window
    # Vercel
    npm install -g vercel
    vercel
    

    # หรือ Netlify
    npm run build
    # ลาก dist/ folder ไปที่ netlify.com/drop

เมื่อทำเสร็จแล้ว ไปดูเฉลยได้ที่ Solution เพื่อเทียบกับงานของคุณ