Toni Järvinen - Design Tutorials
Toni Järvinen - Design Tutorials
  • 36
  • 250 661
Build a Stunning Design Portfolio in 30 Minutes | No-code + Free Template
Get started with Lume Template: www.framer.com/marketplace/templates/lume/
Get the My Framer templates: www.framer.com/marketplace/creator/toni-jarvinen/
In this tutorial, I’ll guide you step-by-step to create a fully responsive portfolio website using my free Framer template, Lume. Whether you’re a UX/UI designer, a creative professional, or someone building your personal brand, this video is for you!
What You’ll Learn:
How to customize your homepage
Showcase your case studies
Design a professional contact form
Style navigation & footer
Update colors, fonts, and overall styles
Publish your site (in minutes!)
This template is designed to help you stand out as a designer, impress clients and recruiters, and show off your unique work on any device-desktop, mobile, or tablet.
🎨 Who Is This For?
UX/UI Designers | Product Designers | Freelancers | Creative Agencies
Video Chapters:
00:00 Introduction
00:45 Get Started & Edit the Home Page
12:08 Create Your Case Studies
23:05 Update Your Blog
25:18 Set Up Your Contact Form
27:56 Update Navigation & Footer
29:19 Adjust Colors & Fonts with Styles
31:21 Site Settings & Publishing
Like this video? Subscribe for more no-code web design tutorials!
Share your new portfolio in the comments-I’d love to see what you create. Let’s make something amazing together!
#UXUIDesign #Framer #PortfolioWebsite #NoCodeWebsites #FreeTemplate
_________________________________________________________
Find me on other channels:
Twitter/X: tonjrv
Instagram: tonjrv
Threads: www.threads.net/@tonjrv
________________________________________________________
If you have any questions or suggestions, please leave them in the comments section below. Let's dive into the world of interactive design with Framer!
Переглядів: 786

Відео

Create Interactive Card Slideshow in Framer | No-Code Tutorial for Beginners
Переглядів 1,7 тис.Місяць тому
Live demo: cardslideshow.framer.website/ Remix this project: framer.com/projects/new?duplicate=yPcpxXJqkyDUUqE15IuI&via=tonjrv Get the My Framer templates: www.framer.com/marketplace/creator/toni-jarvinen/ In this video, we'll guide you through the process of how to create interactive card slideshow that can make your website stand out from the rest. Whether you're a beginner or an experienced ...
Top 10 Widgets to Embed on Your Website | Framer Tutorial
Переглядів 3,6 тис.4 місяці тому
Get started with Framer: www.framer.com/?via=tonjrv Download my Free Framer Templates: tonjrv.lemonsqueezy.com/ Discover the best widgets to enhance your website's functionality and user experience! In this video, we'll explore the top 10 widgets to embed on your website. From social media feeds to interactive maps, these tools will help you engage your visitors, streamline operations, and boos...
Custom Video Player in Framer (No-code tutorial)
Переглядів 3,1 тис.5 місяців тому
Live demo: videocomponent.framer.website/ Remix this project: framer.com/projects/new?duplicate=nvHuC84wtejvEVGbGUMe&via=tonjrv In this video, we'll guide you through the process of how to create custom video player in Framer. You can use the video player to match with your unique site style. Whether you're a beginner or an experienced designer, this step-by-step tutorial will help you add a to...
Stacked Cards Effect in Framer (No-code tutorial)
Переглядів 4,5 тис.6 місяців тому
Live demo: stackedcards.framer.website/ Remix this project: framer.com/projects/new?duplicate=1uQdnzKCZHFiHwAw4LRP&via=tonjrv Get the Stacky Template for FREE: stacky.framer.website/ In this video, we'll guide you through the process of how to create stacked cards effect in Framer when you are scrolling the page. Whether you're a beginner or an experienced designer, this step-by-step tutorial w...
Show & Hide Navigation bar on Scroll - Framer no-code tutorial
Переглядів 9 тис.7 місяців тому
Create your free Framer account: www.framer.com/?via=tonjrv Get the Appverse template for free: tonjrv.lemonsqueezy.com/ In this video, we'll guide you through the process how you can show and hide navigation bar on scroll. Making your website interactiveengaging. Whether you're a beginner or an experienced designer, this step-by-step tutorial will help you add a touch of interactivity to your ...
Interactive Navigation Menu in Framer (No-code tutorial)
Переглядів 27 тис.7 місяців тому
Live demo: interactivenavigation.framer.website/ Remix this project: framer.com/projects/new?duplicate=osR2BQpWVnOmZAG9Sf3D&via=tonjrv Get the Appverse template for free: tonjrv.lemonsqueezy.com/ In this video, we'll guide you through the process of how to create interactive navigation menu that is interactive and updates based on the scroll sections. Whether you're a beginner or an experienced...
Fixed Side Navigation Bar in Framer | Step-by-Step No-code Tutorial
Переглядів 3,9 тис.8 місяців тому
Live demo: fixednavigation.framer.website/ Remix this for free: framer.com/projects/new?duplicate=jyqT4bShSCnNXZy7DSTP&via=tonjrv In this video, we'll guide you through the process of how to create a fixed side navigation bar in Framer. Whether you're a beginner or an experienced designer, this step-by-step tutorial will help you add a touch of interactivity to your website. Chapters: 00:00 Pre...
Circular Progress Bar Animation | Figma for Beginners (Part 2 - Timer in Figma)
Переглядів 5 тис.8 місяців тому
See the first tutorial on counting timer: ua-cam.com/video/w3Z3rQD2qQk/v-deo.html In this video, you'll learn how to create a circular progress bar animation in Figma. Whether you're a beginner or an experienced designer, this step-by-step tutorial will help you add a touch of interactivity to your prototypes. Chapters: 00:00 Preview 00:38 Circular Animation Basics 01:30 Creating Animation 04:1...
Interactive Pricing Section - Framer No-Code Tutorial
Переглядів 2,4 тис.8 місяців тому
Live demo: interactivepricing.framer.website/ Remix this project: framer.com/projects/new?duplicate=KmkoeKkLsPvyzJ9oQWA1&via=tonjrv In this video, we'll guide you through the process of how to create interactive pricing section using Framer. Whether you're a beginner or an experienced designer, this step-by-step tutorial will help you add a touch of interactivity to your website. Chapters: 00:0...
Text Animation & Scroll Animation - Framer for Beginners | No-code Tutorial
Переглядів 14 тис.9 місяців тому
Live demo: textanimation.framer.website/ Remix this project: framer.com/projects/new?duplicate=GHMfqhxxzPPhcD3zb1Ev&via=tonjrv In this video, we'll guide you through the process of how to create text animations and scroll animations using Framer. Whether you're a beginner or an experienced designer, this step-by-step tutorial will help you add a touch of interactivity to your website. Chapters:...
Best Figma Plugin for Landing Page Animation - Figma & Framer Tutorial (No-code)
Переглядів 6 тис.10 місяців тому
Best Figma Plugin for Landing Page Animation - Figma & Framer Tutorial (No-code)
Card Animation in Framer with Scroll Variants | No-Code Tutorial
Переглядів 4,6 тис.10 місяців тому
Card Animation in Framer with Scroll Variants | No-Code Tutorial
Best Design Tools To Learn in 2024
Переглядів 2,8 тис.10 місяців тому
Best Design Tools To Learn in 2024
Spline x Framer: 3D Websites with real objects using Gaussian Splatting | No-code Tutorial
Переглядів 14 тис.11 місяців тому
Spline x Framer: 3D Websites with real objects using Gaussian Splatting | No-code Tutorial
Animated Rainbow Button Component in Framer | Step-by-Step No-code Tutorial
Переглядів 3,9 тис.11 місяців тому
Animated Rainbow Button Component in Framer | Step-by-Step No-code Tutorial
Interactive Buttons in Framer | Step-by-Step No-code Tutorial
Переглядів 24 тис.Рік тому
Interactive Buttons in Framer | Step-by-Step No-code Tutorial
Responsive Card Section in Framer | Step-by-Step No-code Tutorial
Переглядів 6 тис.Рік тому
Responsive Card Section in Framer | Step-by-Step No-code Tutorial
Animated Hue Cards in Framer | Step-by-Step No-code Tutorial
Переглядів 7 тис.Рік тому
Animated Hue Cards in Framer | Step-by-Step No-code Tutorial
Rolling Text Animation in Figma | Step-by-Step Prototype Tutorial
Переглядів 1,8 тис.Рік тому
Rolling Text Animation in Figma | Step-by-Step Prototype Tutorial
Rolling Text animation in Framer | Step-by-Step No-code Tutorial
Переглядів 42 тис.Рік тому
Rolling Text animation in Framer | Step-by-Step No-code Tutorial
Framer tutorial: Interactive Tooltip in under 2 minutes (No-code)
Переглядів 4 тис.Рік тому
Framer tutorial: Interactive Tooltip in under 2 minutes (No-code)
Learn Figma: Animated Border in Figma for Beginners
Переглядів 5 тис.Рік тому
Learn Figma: Animated Border in Figma for Beginners
Framer tutorial: Animated Border in 2 minutes (No-code)
Переглядів 10 тис.Рік тому
Framer tutorial: Animated Border in 2 minutes (No-code)
Creating an Interactive Menu Button in Framer | Step-by-Step No-code Tutorial
Переглядів 11 тис.Рік тому
Creating an Interactive Menu Button in Framer | Step-by-Step No-code Tutorial
Learn Figma: How to do timer animation in Figma for beginners
Переглядів 31 тис.Рік тому
Learn Figma: How to do timer animation in Figma for beginners

КОМЕНТАРІ

  • @JordanMattKim
    @JordanMattKim День тому

    on mobile view, how do you collapse an expanded navbar when scrolling away? currently it's just hiding when scrolled away, when you scroll back up the expanded navbar appears and you'll have to close the navbar manually

  • @fantazero4618
    @fantazero4618 2 дні тому

    is there a way of making it responsive? i´ve been trying but i havent been lucky, thanks for the content!! i have learned lots from u

  • @aartibandekar9520
    @aartibandekar9520 3 дні тому

    Loved the tutorial! How can I make this component responsive though? The moment I add layout properties the design breaks :(

  • @ChelseyMorphy
    @ChelseyMorphy 4 дні тому

    Great video! Loved setting it up. Any chance this could be done with the option to expand and compress the side bar? If so, how would that work with the padding to enlarge when the side navigation is compressed?

  • @sudeeprao619
    @sudeeprao619 6 днів тому

    Super useful tutorial. Straightforward and to the point! Thanks a lot.

  • @asoume24
    @asoume24 9 днів тому

    Thank you

  • @paweenaha4120
    @paweenaha4120 10 днів тому

    Thank you so much!!

    • @tonjrv
      @tonjrv 9 днів тому

      No worries at all! 🙌

  • @aryan2405
    @aryan2405 10 днів тому

    Hi bro! Can you help me with this issue - *I need the pricing to be a one time payment [Not a monthly subscription plan] for my course. Is there any way to change the pricing section as such?* Please help me bro! Any documentation or even a reply would be very helpful ✨✨

    • @tonjrv
      @tonjrv 10 днів тому

      Hi mate! Would it work if you'd just change the copy to indicate clearly that the pricing would be one time payment? E.g. Pay once: $99 - Access the course forever with one-time payment.

    • @aryan2405
      @aryan2405 10 днів тому

      @tonjrv ohh I'm so dumb... It did work bro! Thanks alot 🙌🏻😭

  • @tahysribau9479
    @tahysribau9479 11 днів тому

    why white rectangles appear on top of my cards after I Aadded the animation ?

    • @tonjrv
      @tonjrv 10 днів тому

      Good question! If you want you can send me a screen recording or link to your site on Twitter/Instagram, and I can try to help you 🙌

  • @vedenskii
    @vedenskii 13 днів тому

    Hey from Finland! thanks for the video! Can you please share a link to the program that you use to make such a cool screen recording? The cursor zoom is very cool looking.

    • @tonjrv
      @tonjrv 10 днів тому

      Moikka! And no worries at all, the screen recording tool is called Screen Studio, you can check it out here: screenstudio.lemonsqueezy.com?aff=zXV1p (I love it)

  • @Charlie-le4sp
    @Charlie-le4sp 13 днів тому

    Thanks Tony, you have helped me a lot. I appreciate the quality of the content you create. You explain things very well, even though I don't speak much English 😂, but you do it in a relaxed and unhurried way...thank you so much 🙏👋👋

    • @tonjrv
      @tonjrv 10 днів тому

      Awesome to hear that mate! 🔥 Let me know if you ever face any issues and I'm happy to help

  • @gorkemorg
    @gorkemorg 14 днів тому

    Thanks a lot

    • @tonjrv
      @tonjrv 10 днів тому

      No worries, happy to help! 🔥

  • @JordanMattKim
    @JordanMattKim 19 днів тому

    what if I wanna make this gradient thing corresponding to page scroll? kinda like serving as a reminder of how long this article is. Thanks!

    • @tonjrv
      @tonjrv 10 днів тому

      Good question, I'm not sure if you can apply this directly to it. But here's at least one resource that could help you out: framer.university/resources/scroll-progress-bar-override

  • @vago9308
    @vago9308 19 днів тому

    Thank you, sir!

    • @tonjrv
      @tonjrv 10 днів тому

      No worries at all mate! 🔥

  • @rdesignerr
    @rdesignerr 20 днів тому

    After a long time bro. Where you were? I missed you a lot :(

    • @tonjrv
      @tonjrv 10 днів тому

      Thanks bro! I've been busy with all the other projects, but I'll try my best to be more active here 🔥

  • @ChiSportsCollective
    @ChiSportsCollective 20 днів тому

    Can you make a tutorial on how to make this responsive for mobile?

    • @tonjrv
      @tonjrv 10 днів тому

      Great idea! i'll put that to my backlog! Easiest way would be perhaps to create separate variants with smaller font and spacing to make it fit mobile.

  • @dudagfx
    @dudagfx 21 день тому

    @hoopercraig I think i've found the fix for this! It's not ideal as the animation is not that smooth but at least it doesn't jump around. What i did is i removed links inside the navbar component so when we click the buttons it doesnt trigger the variant change, but i left the scroll variant option on. So when we click on a button in the navbar it scrolls to our desired section and the scroll variant changes the highlight on the navbar. I hope that helps

    • @tonjrv
      @tonjrv 10 днів тому

      That sounds awesome solution, thanks a lot! 🔥

  • @isabelevalter2992
    @isabelevalter2992 24 дні тому

    funny how you just predicts all the possible doubts that may appear about framer 😪 amazing

    • @tonjrv
      @tonjrv 10 днів тому

      Hahah I'm happy to help! 🔥

  • @dragos9studio
    @dragos9studio 25 днів тому

    Hi. My scroll variant transition is instant, instead of smooth like yours. Does anybody have an idea on how to fix that?

    • @tonjrv
      @tonjrv 10 днів тому

      Hey! Check the animations and whether you have set them to be instant. Playing around with the settings there could help!

  • @MODEST500
    @MODEST500 27 днів тому

    my man i think i have seen your unique template. one of the most awesome looking hero section is none other than Appverse.

  • @Alias-49013
    @Alias-49013 29 днів тому

    Great tutorial, thanks. The only issue with this is, that it behaves awkward when not clicking the next or previous item, but e.g. the last one when on top of the page. Because then, the hover state interferes with the variations that are set when sections appear. Anyway to prevent this?

  • @3mr564
    @3mr564 Місяць тому

    how to connect it with a button ??

    • @tonjrv
      @tonjrv 10 днів тому

      You have to create another artboard that has button, and then with prototpying tools connect the button to screen that has the progress bar start state.

  • @rumorscameras
    @rumorscameras Місяць тому

    is it possible to do it in framer> i saw it on the framer website saying their seo optimisation with this circle animation

    • @tonjrv
      @tonjrv Місяць тому

      Great question! I haven't tried it but it should be possible. I can look into it 🙌

    • @rumorscameras
      @rumorscameras Місяць тому

      @@tonjrv great. I think this method eith the rectanhles and half circle rotatikn is possible. Need to see if the 2 half circles can be sunced one after the other to do the zero to 100 rotatjon otherwise u have to do only partly ankmated circle i gjess

  • @alexking4341
    @alexking4341 Місяць тому

    I still don't get it.

    • @tonjrv
      @tonjrv 10 днів тому

      What part you are facing issues with, I can try to help :)

  • @shroots88
    @shroots88 Місяць тому

    Excellent tutorial! Thank you so much for keeping it straight to the point!

    • @tonjrv
      @tonjrv Місяць тому

      Thanks a lot, I'm glad that you liked it!🔥

  • @gorkemorg
    @gorkemorg Місяць тому

    Thanks a lot

    • @tonjrv
      @tonjrv Місяць тому

      No worries!

  • @Yuveraaj07_bajwa
    @Yuveraaj07_bajwa Місяць тому

    where is part 1?

    • @tonjrv
      @tonjrv Місяць тому

      Great question! You can find it here: Learn Figma: How to do timer animation in Figma for beginners ua-cam.com/video/w3Z3rQD2qQk/v-deo.html

  • @simonasommma
    @simonasommma Місяць тому

    thank you for this tutorial! I've gotten up to creating the hover variant, but when I select the text layer and press 'bring to front', the layers move in the left panel but the text still remains hidden behind the ellipses. Do you know why this is?

  • @Billgra_54
    @Billgra_54 Місяць тому

    Guys... It's Toni.... And he's just awesome 😎

    • @tonjrv
      @tonjrv Місяць тому

      Hahah thanks mate! Let's stay awesome! 🔥

  • @luisoliveira6603
    @luisoliveira6603 Місяць тому

    Looks really nice

    • @tonjrv
      @tonjrv Місяць тому

      Thanks mate! 🙌

  • @QuickDump
    @QuickDump Місяць тому

    yo so it works but anything that i have linked in my navigation bar like a drop down menu or a word linked i can click it even tho its invisible

    • @tonjrv
      @tonjrv Місяць тому

      Hey, send me a message in Twitter or in Instagram, and I can try to help you out!

  • @DineshKumar-ci6hm
    @DineshKumar-ci6hm Місяць тому

    Unable to create the Variable and even can't modify the TabName after converting the text to create plain text variable : 2:48 to 4:40

  • @lokey416
    @lokey416 Місяць тому

    Awesome

    • @tonjrv
      @tonjrv Місяць тому

      Thanks mate! 🙌

  • @Zeiira01
    @Zeiira01 Місяць тому

    amazing video ty ❤

    • @tonjrv
      @tonjrv Місяць тому

      No worries! 🙌

  • @arra6531
    @arra6531 Місяць тому

    thanks for the tutorial! i have a question though, is there a way for it to only start rolling when layer/section comes into view? because im trying to apply it to my 2nd section

  • @terjupi1726
    @terjupi1726 2 місяці тому

    You helped me a lot thank you! this is exactly what I wanted to achieve

    • @tonjrv
      @tonjrv Місяць тому

      Awesome to hear that! 🔥

  • @bakiKaradeniz
    @bakiKaradeniz 2 місяці тому

    Great

  • @КозачукДаниил
    @КозачукДаниил 2 місяці тому

    cool!!

  • @kiarak5879
    @kiarak5879 2 місяці тому

    Hey, had a doubt once, I move the side bar to the main frame , the fixed position is disabled for me. what am i doing wrong?

  • @mrmelomaan5955
    @mrmelomaan5955 2 місяці тому

    Excellent thank you so much!! :)

  • @hoopercraig
    @hoopercraig 2 місяці тому

    This was great. However, I found once I added the scroll variant as the last step, and followed everything you did, clicking the tabs in the menu now causes the bg element to jump around while it scrolls from section to section.

    • @kinoomalta
      @kinoomalta 2 місяці тому

      Having the same issue. Did you find a solution? At what point should we add the sections and set up the scroll variants?

    • @kinoomalta
      @kinoomalta 2 місяці тому

      Actually it's jumping around in his live link as well that is in the description. If you don't go in order and click the 3rd item when on home it behaves erratically which is exactly the problem I'm facing.

    • @hoopercraig
      @hoopercraig 2 місяці тому

      @@kinoomalta I didn't, it jumps all over the place for me.

    • @magatsu3642
      @magatsu3642 Місяць тому

      I change the interaction in the menu and up the delay to 0.5. Fix the problem. 7:05

    • @31RIP
      @31RIP 27 днів тому

      @@magatsu3642 doesnt work either

  • @shroots88
    @shroots88 2 місяці тому

    This was great, thank you!

  • @ceciliabelenmorales7883
    @ceciliabelenmorales7883 2 місяці тому

    likeee!! i want

  • @hackur-g
    @hackur-g 2 місяці тому

    can you make a guide on making this menu responsive on mobile

    • @tonjrv
      @tonjrv Місяць тому

      You can use the same method, but making it smaller! Also it is possible to make it scrollable, but that would require bit more work. But that could be a great idea for a video!

  • @oluwaseyifx
    @oluwaseyifx 2 місяці тому

    Awesome 👌. Very creative

  • @isabelevalter2992
    @isabelevalter2992 2 місяці тому

    i love you man

    • @tonjrv
      @tonjrv 2 місяці тому

      Hahah thanks a lot! 🔥