Diego Cabrera
Diego Cabrera
  • 16
  • 108 840
Organize your 2024 Semester with Google Calendar | Comp Sci Student
My productive calendar layout for my 2024 spring semester.
As a Computer Science student, I know the importance of staying organized, and in this video, I'll guide you through my system for a stress-free semester. From assignment deadlines to exam dates, learn how to maximize Google Calendar to supercharge your productivity. I also share how you can color coordinate your google calendar to fit your aesthetic.
My UA-cam Camera Gear:
cabrera-site-2.vercel.app/gear/all
Screen Recording Software [affiliate] :
screenstudio.lemonsqueezy.com?aff=pym1Y
Instagram
diego__cb
Twitter
diego_anthony_
LinkedIn
www.linkedin.com/in/diego-anthony-cabrera/
Github
github.com/thony-cb
Who am I:
I’m Diego, a computer science student who loves creating and designing unique websites for brands. I have a strong passion for technology, fitness, and web development.
Personal Website
cabrera-site.vercel.app/
Studio Website
sapphire-studio.vercel.app/
Переглядів: 497

Відео

Rebuild an Awwwards Bento Box Navigation GSAP Animation in Webflow
Переглядів 2 тис.Рік тому
I wanted to walk through how I re-created this Bento Box navigation animation using GSAP and Webflow. However, if you’re using react you can still use the same code. Just make sure to wrap it in inside of useGSAP hook (provided by GSAP) and it should work just fine. Webflow Cleanable webflow.com/made-in-webflow/website/diegos-exceptional-site-2f5105 GSAP Code github.com/thony-cb/bento-box-navba...
This website sold me on their $89 product. | Marketing Design Breakdown
Переглядів 389Рік тому
In this video I break down how a SAAS Marketing Website sold me on their $89 product. I talk about the 3 Key Features that sold me and also what works in web design for conversions. Whether you're a developer, marketer, or just curious, this video is your guide to effective web strategies. Screen Studio [affiliate]: screenstudio.lemonsqueezy.com?aff=pym1Y My UA-cam Camera Gear: cabrera-site-2.v...
Why I switched from React to Webflow: Pros, Cons, and My Self-Taught Developer Journey
Переглядів 4,8 тис.Рік тому
I wanted to share my coding journey as a self-taught developer and talk the reasons behind my switch from React to Webflow. I discuss the pros and cons of both platforms, sharing insights that led to this transition. Whether you're a developer contemplating Webflow or a no-code dev considering learning a framework like React, I hope this video helps you in making an informed decision. My UA-cam...
Swipe & Drag Image Aesthetic Animation | Framer Motion | React | In my personal website
Переглядів 3 тис.Рік тому
I wanted to share how I recreated this image gallery that can be traversed thorough a drag/grab from the cursor or a swipe gesture from a user. I used framer motion to create this animation and is currently being showcased in my personal website to display some images of myself. The tutorial was built with React in NextJS. I hope you found the tutorial helpful and learning a thing or two. Feel ...
Iphone 15 Pro Max | White Titanium | Unboxing | First Look | 512 GB
Переглядів 413Рік тому
Unboxing the iPhone 15 Pro Max (White titanium)! Here are my first impressions. Full review coming soon. My website: cabrera-site-2.vercel.app Follow me on: Twitter/X: diego_anthony_ Instagram: diego cb/ Github: github.com/thony-cb
Scroll + Loading Animation | GSAP + Next.Js
Переглядів 3,8 тис.Рік тому
I wanted to share how I recreated this staggered and scroll triggered animation. Using Next Js, React, and GSAP. I hope you found the tutorial helpful! Source Code: github.com/thony-cb/sticker-animation Screen Recoding Software [Affiliate]: screenstudio.lemonsqueezy.com?aff=pym1Y Animation Inspiration/Credits: ua-cam.com/video/p9Kfy12j3Xg/v-deo.html ua-cam.com/video/_SPR7Dhhnp8/v-deo.html My we...
Figma Style Guide to Tailwind CSS | Build websites faster
Переглядів 11 тис.Рік тому
In this video, we'll dive into the process of seamlessly transferring a Figma style guide to Tailwind CSS, a popular utility-first CSS framework. I this particular video I used Next.Js 13 to build the website but anyother framerwork with tailwind should work the same. Whether you're a web designer, developer, or someone looking to improve their design workflow, this tutorial will provide valuab...
Awwwards Cloned Animation - On Scroll Navigation (Framer-motion, nextjs, tailwind, react)
Переглядів 17 тис.Рік тому
In this video I go over how to animate a navigation bar on scroll using framer motion, next js, and tailwind css. I also provide the UI for the cloned/rebuild of the Diagram website so you can feel free to explore how I built it. Let me know if you like animation videos like these or would like to see other kinds of videos. My website: cabrera-site.vercel.app/ My blog: cabrera-site.vercel.app/b...
Jotai - Best React State Management Library (React Tutorial)
Переглядів 4,9 тис.Рік тому
In this tutorial, I guide you on how to get started with the Jotai State Management library within a React environment using Next.js. I'll walk you through the fundamental and frequently used approach for incorporating this library into your projects. My website: cabrera-site-2.vercel.app/ Screen Recoding Software [Affiliate]: screenstudio.lemonsqueezy.com?aff=pym1Y My blog: cabrera-site.vercel...
How to Create a Staggered Drop-Down Menu Animation in React | Framer Motion
Переглядів 28 тис.Рік тому
I wanted to share how I recreated this simple animation staggered drop-down menu animation in React. Using Next Js, React, and Framer Motion. My website: cabrera-site-2.vercel.app/ Screen Recoding Software [Affiliate]: screenstudio.lemonsqueezy.com?aff=pym1Y My blog: cabrera-site.vercel.app/blog Follow me on: Twitter: diego_anthony_ Instagram: diego cb/ Github: github....
Custom Link Animations with Framer Motion in React | Tutorial
Переглядів 8 тис.Рік тому
In this tutorial, we'll learn how to create custom link animations using React and Framer Motion. By following step-by-step instructions, you'll be able to recreate captivating link animations that engage users on your website. We'll cover concepts such as animating each letter individually, transition animations, and handling hover effects. Whether you're a beginner or an experienced React dev...
Responsive Navbar | Framer Motion | React & Next.js
Переглядів 6 тис.Рік тому
Learn how to create a dynamic and responsive navbar in React and Next.js using Framer Motion. This comprehensive tutorial guides you through the step-by-step process of implementing an interactive navbar with smooth animations. Enhance your website's user experience and make it visually appealing on any device. My website: cabrera-site-2.vercel.app/ Screen Recoding Software [Affiliate]: screens...
Icons in React & Next Js | Simplified
Переглядів 19 тис.Рік тому
Learn how to effortlessly incorporate icons into your React and Next.js projects with this concise tutorial. Discover popular icon libraries, installation methods, customization options, and accessibility considerations. My website: cabrera-site-2.vercel.app/ Screen Recoding Software [Affiliate]: screenstudio.lemonsqueezy.com?aff=pym1Y Icon libraries mentioned in this video: Hero Icons: heroico...
Master Do-While Loops in Java | Java Programming Tutorial
Переглядів 54Рік тому
Welcome to my coding tutorial series! In this video, specifically designed for beginners, I'll walk you through the fundamentals of using a do-while loop in Java. As a passionate college student and tutorial creator, I'm excited to share my knowledge and help you understand this essential concept in Java programming. What You'll Learn: In this beginner-friendly tutorial, you'll: Gain a solid un...
Next JS Routing (app folder) 13.4.4
Переглядів 456Рік тому
Next JS Routing (app folder) 13.4.4

КОМЕНТАРІ

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

    is this reponive too?

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

    Tips: use 1.5x speed

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

    love that smoothness, thanks boss your channel has so much to learn.

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

    Thannnnnk youuu!

  • @MrSeredan
    @MrSeredan 3 місяці тому

    Thx

  • @roufhasan
    @roufhasan 4 місяці тому

    Loved it, man! Very precious. No bullshit talk just to the point❣

  • @Alex-jv3mi
    @Alex-jv3mi 6 місяців тому

    I was expecting something more like, dynamic icons, like Lucide but working without bugs

  • @shadowB33
    @shadowB33 6 місяців тому

    great video man, do you have a video on iconify icons?

  • @Kyle-wi9er
    @Kyle-wi9er 6 місяців тому

    good job, short and sweet! keep up with the videos!! thank you!

  • @everything8095
    @everything8095 6 місяців тому

    can we use npm packages in webflow?

  • @augustine_edeh
    @augustine_edeh 7 місяців тому

    Super duper helfulful. Thanks, Anthony!

  • @goswamianshuman
    @goswamianshuman 7 місяців тому

    nice tutorial used in my application in production. ❤❤

  • @attilalakatos7029
    @attilalakatos7029 8 місяців тому

    Still a very good tutorial in 2024! IMHO better than the official doc example

  • @mirabuly6490
    @mirabuly6490 8 місяців тому

    Hello ! Your videos are amazing ! Did you post the video explaining how you made the solar system ? I don’t found it. Thank you for everything!

  • @rhh1090
    @rhh1090 9 місяців тому

    Very useful video dude, thank you!

  • @ab1nash10
    @ab1nash10 9 місяців тому

    hey out of topic but what vs code theme is this one?

  • @Fopfidk
    @Fopfidk 9 місяців тому

    great video !

  • @NoCodeProCode
    @NoCodeProCode 9 місяців тому

    Amazing 👍- Wait till you discover Wized 😁

    • @ibuxrs594
      @ibuxrs594 5 місяців тому

      Surely you mean Toddle 😂

    • @NoCodeProCode
      @NoCodeProCode 5 місяців тому

      @@ibuxrs594 I was someone different back then 😅

  • @Kasparov6
    @Kasparov6 10 місяців тому

    Ryan Garcia Making Tutorials .... What a World???

  • @pavanchalla3787
    @pavanchalla3787 10 місяців тому

    Created one more cool animation, thanks brother

  • @sagart00100
    @sagart00100 10 місяців тому

    and what about responsiveness dude ? what if we want it in mobile

  • @qasim8306
    @qasim8306 10 місяців тому

    I like what you do , keep going man

  • @feastofsteven1214
    @feastofsteven1214 11 місяців тому

    Not sure if I'm missing something, seems maybe I need to be using Next.js with this? I'm building my first project in React and just using React/Tailwind, but I've rebuilt everything to the 4:00 mark and all I get is errors. First, it's confusing where you create the 'Link' component, because it seems you already have that in your 'Next' folder or something? So I was getting an error on that, so I just created a 'Link.jsx' file in my components folder and imported it, but what should that file read? Next, there's some issue with the 'open &&' command, maybe if I continue that will resolve, but hard to follow along when I can't see the menu at all and unsure if I follow it to the end if I'll get anything. I dunno, appreciate the tutorial and any help you can give -- but it's really hard to follow with your image in the way of your code and you move to fast, don't explain the WHY of things or how you're getting there. Just some constructive feedback :) thanks!

    • @szymon_JD
      @szymon_JD 5 місяців тому

      Link is built in Next js component that you use for navigation

  • @srinivasnahak3473
    @srinivasnahak3473 11 місяців тому

    It was a really helpful tutorial!! Thanks for putting so much effort into creating this :)

  • @developermsmahadi
    @developermsmahadi 11 місяців тому

    Wow Nice animation 💛💛 I sent you connection on linkedin

  • @იოსებივარდოშვილი

    this video helped me thanks <3

  • @gauravmali6250
    @gauravmali6250 11 місяців тому

    make videos on awward clone things using tailwind or using next.

  • @preetpalsingh1819
    @preetpalsingh1819 11 місяців тому

    nice one man

  • @madhankumar8606
    @madhankumar8606 11 місяців тому

    Vs Code Theme?

  • @TUFF-FPS
    @TUFF-FPS 11 місяців тому

    Hey yo My little bro I went from learning code to web flow to Framer Nice to meet you

    • @nicomartina
      @nicomartina 10 місяців тому

      Hey I'm in a rutt. Webflow or framer? let me know!

  • @treyrader
    @treyrader 11 місяців тому

    So if you've never used redux/rtk, context, zustand, etc... then why caption this video as the "Best React State Management Library"? Genuine question. Extra points for an answer

  • @m_jdm357
    @m_jdm357 11 місяців тому

    You can also create the menuVars like so: const menuVars = { initial: { height: 0 }, animate: { height: 347 }, exit: { height: 0 } } This will make the content of the dropdown to not shrink. Like usign height and not transform scaleY.

  • @whalefridaydigital
    @whalefridaydigital 11 місяців тому

    Fire content Diego, I'm a huge fan of your video 🙋‍♂ Out of curiosity, is there any chance to collaborate with you as a video editors / Thumbnail designer to build up your personal brand?

  • @JuanCarlosSanchezLopez-h9h

    Crazy tutorial, it looks amazing and its super clear and direct. Love this❤

  • @fiflope
    @fiflope Рік тому

    Are you filming with your iphone 15? that's sick!

  • @redwansikder3847
    @redwansikder3847 Рік тому

    nice details.

  • @FloNocode
    @FloNocode Рік тому

    Hi diego, how are you ? I hope fine. Thanks for you video. Actually i love bento box trends and in search content about this a,nd how make amazing interaction on it. So thanks for your video. I think i need more and i would like find more tutorial. Maybe you know where i can found content on bento box animation interaction and how build that in webflow. Can you share link or channel focus on bento box on webflow and mix with GSAP or nativ interaction. Thanks your video is greaat

  • @0xBenjamin
    @0xBenjamin Рік тому

    Great video! Keep up the good work, brother 🤝

  • @gr4ce-n3s
    @gr4ce-n3s Рік тому

    It is really nice brother, just love it. Is there any way i can connect with you for some doubts like on discord or anything.

  • @Google
    @Google Рік тому

    This semester's going to be a breeze being this organized ✨

  • @abhisheknandann
    @abhisheknandann Рік тому

    Hey man great content! Just a feedback as a viewer not hating, you sound monotonous, try adding some energy to it. Keep up the good work.💯

    • @taunado
      @taunado Рік тому

      I disagree, fake hype is overdone and an be distracting. I experienced no challenge with the delivery.

    • @abhisheknandann
      @abhisheknandann Рік тому

      @@taunado Good for you man.

    • @Diego_Cabrera
      @Diego_Cabrera Рік тому

      I really appreciate this type of feedback. I’m trying to get more comfortable with talking to the camera. I should get better with time. Thanks for watching!

  • @ajibolagenius
    @ajibolagenius Рік тому

    this is superb 🔥 🔥 🔥

  • @TimmaayTime
    @TimmaayTime Рік тому

    Keep up the good work bro! I'm a React /NextJS developer and that's how I stumbled across your tutorials. Super interesting to see your transition to Webflow and the power of it

    • @Diego_Cabrera
      @Diego_Cabrera Рік тому

      I still enjoy working with React/Next JS for more complex web sites/apps. For instance my personal website is built using Next and I plan to add auth to it once I create my GSAP paid tutorials. Webflow is simply a tool that allows me to build minimalist sites that a non-technical personal can understand.

  • @Sabs1313
    @Sabs1313 Рік тому

    hi, may i know how do you know the names of each icon to import from heroicons?

    • @Diego_Cabrera
      @Diego_Cabrera Рік тому

      There is a website for hero icons, and you can view all of the names there.

  • @ladaonmymind
    @ladaonmymind Рік тому

    Awesome content!!!

  • @dagmawinebeyu7777
    @dagmawinebeyu7777 Рік тому

    Thank you for this great tutorial. But the exit animation doesn't seem to be triggered. How can I fix that?

  • @0210Miller
    @0210Miller Рік тому

    You are the best, man!

  • @harshdeep7015
    @harshdeep7015 Рік тому

    Your perspective on react native vs flutter??

    • @Diego_Cabrera
      @Diego_Cabrera Рік тому

      I was looking into them a while back and personally, between the two, I would chose react native simply because i'm already familiar with react. However, now if I were to learn mobile development I would learn swift because I am heavy in the apple ecosystem.

  • @SamFromaway
    @SamFromaway Рік тому

    I just found your channel, amazing work you put in. It's obvious you have a bright future ahead of you 😁. My two cents about this topic is: If your goal is to create websites for clients as a freelancer, then Webflow is surely a better alternative than React. But probably Wix or Squarespace might be even better. But the question here is more, if creating websites for clients should be the goal. If your skill and passion is web development, it will lead most likely away from websites and towards web-apps. Because this is where skill is required. Millions of people can create a website (just look at fiver/upwork). But being a good App (web or even mobile) dev is way harder. So if you are good at what you are doing, you might want to go down the React-Dev route to land a good (interesting and well paying) job.

  • @Rajatcode
    @Rajatcode Рік тому

    informative try to make highly edited videos i wish you best Love from India and by the way what's your age

    • @Diego_Cabrera
      @Diego_Cabrera Рік тому

      Thanks, I’m glad you found it helpful. Editing is something that I am really struggling with, I’ll make sure to do my best! I’m 19.