inflearn logo

Creating a portfolio using GSAP's ScrollTrigger

Let's create an interactive, responsive web portfolio that reacts to scrolling using GSAP's ScrollTrigger!

(5.0) 41 reviews

360 learners

Level Basic

Course period Unlimited

HTML/CSS
HTML/CSS
scrolltrigger
scrolltrigger
gsap
gsap
Portfolio
Portfolio
Responsive Web
Responsive Web
HTML/CSS
HTML/CSS
scrolltrigger
scrolltrigger
gsap
gsap
Portfolio
Portfolio
Responsive Web
Responsive Web

News

2 articles

  • jyoung님의 프로필 이미지

    Hello 😊
    I am instructor J.Young.

    I am finally greeting you with a new course.


    🚀 [Figma MCP × AI: Complete a Responsive Web Portfolio in Just 4 Hours]

    This lecture is not just a simple "coding course."

    From design planning that AI understands,
    to vibe coding using AI,
    and the full-stack completion process leading to actual deployment
    .


    🎯 Core takeaways from this course

    Systematic design using Figma AutoLayout
    Responsive structure design methods
    Variable registration → Tokenization → Creating design structures that AI understands
    AI Vibe Coding through Figma MCP server integration
    How to implement your design with 1-pixel precision
    Practical process leading all the way to deployment

    It’s not simply about "AI writing the code for you."

    We will train you to identify AI errors on your own, understand structures,
    and even refactor them into optimized responsive webs.


    👩‍💻 Recommended for these people

    • 🎨 Those who want to implement their designs exactly as they are through Vibe Coding

    • 🧠 Those who want to become a full-stack designer capable of everything from design to development and deployment

    • 🔥 Those who want to properly learn even the advanced features of Figma

    • 💻 Frontend beginners who want to learn everything from HTML / CSS / JavaScript / Tailwind to React

    • Those who want to create an interactive and high-quality responsive web portfolio

    • Those who want to increase work productivity by more than 5 times using AI


    📘 Learning Method

    The entire process is systematically organized in Notion.
    From design → implementation → modification → to deployment,
    it is structured so that you can review and practice repeatedly on your own.


    In the AI era,
    it is no longer the "person who codes well," but the
    person who produces results the fastest with AI who is competitive.

    Within 4 hours,
    take your portfolio to the next level.

    I will see you in the lecture.

    Thank you.
    Sincerely, Instructor J.Young

    0
  • jyoung님의 프로필 이미지

    Edited

    Hello, I am instructor J.young .

    Real-life! A lecture on creating a portfolio using ScrollTrigger
    The last 2nd update video was additionally produced as a responsive web , and the 3rd to 7th updates were then produced.
    We proceeded as follows.
    Please check it out and I hope it will be of great help to you in creating your portfolio and in your work.
    Have a happy and bountiful Chuseok~
    thank you

    J.young dream

    Update video results =>
    - 2nd: Additional production of update video responsive gallery
    image
    -3rd: Creating a gallery that scrolls along the Y axis image

    -4th: Create an image that follows the mouse pointer
    image

    -5th: Interactive creation of sub-section scrolling along the Y axis in a fixed section
    image
    - 6th: Creating a gallery that scrolls left and right along the X-axis
    image

    7th: Create a character that greets you when you scroll/ Text that fills in color depending on the mouse/ Wave text
    image

    3

$51.70