I tried to design and code an awwwards-inspired portfolio website. Here's the process

Поделиться
HTML-код
  • Опубликовано: 14 янв 2025

Комментарии • 401

  • @nkaptured6997
    @nkaptured6997 Год назад +177

    Bro Pin me now, cozz this channel is going to blow up soon 🔥

    • @by_huy
      @by_huy  Год назад +7

      Haha FOR SURE! I appreciate it

    • @aryaanshetty8959
      @aryaanshetty8959 Год назад

      @@by_huy hey there, so i am student and now a day i am trying to learning web design on wordpress elementor. Now i was just scrolling on youtube and saw this video. So can you please please tell me which website or software you are using for designing your website because i am using wordpress elementor so can you tell me your's Thank you.

    • @aryaanshetty8959
      @aryaanshetty8959 Год назад

      @@by_huy and one more thing. Does this requres coding because mine is just drag and drop

    • @Purplefoxdl
      @Purplefoxdl Год назад

      He seems hand codint without a builder like elementor !

    • @mvpomkar8075
      @mvpomkar8075 Год назад

      Hey Huy can I know , how did you came with your logo design @@by_huy

  • @Vishank
    @Vishank Год назад +84

    At first when i saw the website design in the thumbnail i instantly thought yours might be a famous channel but i am shocked its not. The website design is so good, the effort put in the whole process is laudable

    • @by_huy
      @by_huy  Год назад +2

      Thank you so much Vis, I am super glad that you've enjoyed it 💯🙏

  • @amys.9175
    @amys.9175 Год назад +30

    Huy, thank you so much for your content, it really helped me to escape my procrastinating and stuck phase on an aspiring frontend developer journey. My code learning started in October 2022, and currently I am also working on my personal website, but thanks to your video I've noticed that I made a couple mistakes during the design process which made the development stage harder. So now I can return to that stage and make some changes.
    Your channel overall has helped me a lot both in organizing my processes and being more productive in general, I wish you the online recognition you deserve and hope to see more new videos from you soon. Thanks again, and have a nice day!

    • @by_huy
      @by_huy  Год назад +2

      I'm really happy to hear that my videos have helped you in some sort of way, it really means a lot! I also started in October 2022, we just need to keep learning and building . Thank you Daria, and make sure to share your portfolio once it's completed, I'd love to see it.

  • @MrAbbo11
    @MrAbbo11 Год назад +8

    Nice project dude. You're leaps and bounds beyond what I'm capable of currently doing.

    • @by_huy
      @by_huy  Год назад +2

      Thanks man! I wouldn't say that I am leaps and bounds beyond anyone but everyone is capable of creating these kind of websites. Just constant building, building and building. Good luck on your journey!

  • @alexanderpetranov
    @alexanderpetranov 9 месяцев назад

    Crazy design man! And the animations are sooo SILKY smooth! You're an inspiration

  • @SrikantShubham
    @SrikantShubham Год назад +2

    Really appreciate the way you included the whole process. When I first started I only focused on the development part not on the design so it really becomes essential for a developer to focus on both aspects . Great job !

    • @by_huy
      @by_huy  Год назад

      For sure! Doing both aspects of design and development are also super rewarding as well!

  • @AayushChaudharyGames
    @AayushChaudharyGames Год назад +7

    great video! I really liked that you gave time to both code and design! I rarely find people who take effort to design themselves. But they should. Even though I am not a designer (not a pro) but I like good design and basic rules apply everywhere.
    You've made a great website, thanks again for making the video. I was trying to update my portfolio and this video came on the right timing!

  • @giulia6930
    @giulia6930 Год назад +8

    I had never thought about choosing my colours from the clothes I use to wear, I find this tip interesting and I'll try it, cause I didn't know where to begin. Also you referenced to colour psychology in another video on building a portfolio, I'm going to study it properly, cause this was not the first time I came across the concept, but I never took the chance of studying it properly. I'll do💪📚
    You give precious advice, thanks, people do it rarely on RUclips !❤

  • @agustinbustos3799
    @agustinbustos3799 Год назад +1

    This is awesome, I've been learning web development for the past year and a half and even though I try to plan my projects thorougly, I end up leaving many decisions for last minute. Nice to see how someone else approaches this.

  • @Redyf
    @Redyf 6 месяцев назад

    That's AMAZING, what an awesome portfolio. Great job man!

  • @RezonGames
    @RezonGames Год назад +8

    Hope, you’ll be noticed by more Polish viewers🗿

  • @mohitashliya8750
    @mohitashliya8750 11 месяцев назад +3

    Thanka Huy for showing the process.
    I got a lot of knowledge from your perception

    • @by_huy
      @by_huy  11 месяцев назад

      Great to hear it man, thanks a lot!

  • @Marthabelieveg
    @Marthabelieveg Год назад +2

    Дуже гарно! Дуже якісна і комфортна подача інформації, риємна картинка, бажаю успіхів у розвитку каналу :)

    • @by_huy
      @by_huy  Год назад

      Thank you! It really means a lot, super happy that you've enjoyed the video

  • @brinda6018
    @brinda6018 5 месяцев назад

    Had to create an e-portfolio and stumbled onto this video but i really love it. the website looks great too.

  • @DarkWhispers_TV
    @DarkWhispers_TV Год назад +2

    Bro this was amazing youre gonaa blow up soon

    • @by_huy
      @by_huy  Год назад

      Thank you so much, happy to hear that you enjoyed it

  • @rizviromman72
    @rizviromman72 7 месяцев назад +1

    I am also making my portfolio i am so inspired from u thanks huy your every video inspire and teach me a lot

  • @graciarocha
    @graciarocha 10 месяцев назад

    That’s an amazing portfolio! And the video was very inspiring! Thanks for your tutorials , there are great

    • @by_huy
      @by_huy  9 месяцев назад

      Glad you like them!

  • @ashwinvenkat1862
    @ashwinvenkat1862 Год назад

    Glad this blew up! I appreciate you giving viewers the small tools that help design decisions, like the typography tool.

  • @kumarutkarsh5905
    @kumarutkarsh5905 Год назад +2

    Ahh this is soo good!! All the best for the future.

    • @by_huy
      @by_huy  Год назад +1

      Thanks so much

  • @michaelbayron
    @michaelbayron Год назад

    This is incredible work bro 👏 got me inspired to make my own site even better 😅

  • @divyanshuchauhan4527
    @divyanshuchauhan4527 10 месяцев назад +1

    Bro I'm from india and just now yt algo showed me your video and when I opened the playlist section it was insane you got a subscriber from India love your content keep growing and make such videos♥️

    • @by_huy
      @by_huy  10 месяцев назад +1

      Really appreciate it man!

  • @yunusdurdygulyyew9270
    @yunusdurdygulyyew9270 Год назад +1

    You are going places, my man. Great content

  • @ajzanfa
    @ajzanfa Год назад +1

    damn bro really cool video, really cool website, loved learning more about the process. Please keep on doing content like this

    • @by_huy
      @by_huy  Год назад +1

      Glad to hear it man, more coming soon! Stay tuned 😉

  • @samarthvaidya7769
    @samarthvaidya7769 Год назад +1

    I am a new developer. This video gives a great idea of how to make your own website in steps and even create something unique of your own from various inspirations. Great work bro 💯

    • @by_huy
      @by_huy  Год назад

      Super great to hear man! Thank you and good luck with your developer journey 🔥

  • @gachungafrank3233
    @gachungafrank3233 Год назад

    Great content! As someone learning to code, this video helps me to know the possibilities I can achieve in time through more work and dedication. And good luck with the youtube channel, you're going far

  • @cutocato830
    @cutocato830 Год назад +1

    Such an amazing content bro, im planing to make my own web design after wacthing your video : )

  • @eriksomnas
    @eriksomnas Год назад +1

    Awesome portfolio, and well done on execution from start to finish!

  • @arfeloreed
    @arfeloreed Год назад

    Mate, that's so cool. It's like it was created by someone who has been in the industry for a long time.

  • @zlsKeksia
    @zlsKeksia 10 месяцев назад

    probably the best portfolio i've ever seen

    • @by_huy
      @by_huy  10 месяцев назад +1

      Really appreciate it 😁

  • @aechh_
    @aechh_ 11 месяцев назад

    Bro thank you so much for this sick video. You have inspired me so much from just 1 video lol. I'm so motivated right now, so imma go and use your methods and resources that you have shared(very helpful btw) and will try to make some cool projects. Thank you so much!!. Waiting for more awesome content like this!!!

    • @by_huy
      @by_huy  11 месяцев назад

      LET'S GO!! Content like this is coming soon your way : )

  • @rachelchew4702
    @rachelchew4702 Год назад +1

    really enjoyed the video, quite a fun watch :)

    • @by_huy
      @by_huy  Год назад

      Glad you enjoyed it!

  • @currenluna
    @currenluna 9 месяцев назад

    The end result is beautiful!

  • @Daker11Gamer
    @Daker11Gamer 4 месяца назад

    What the hell I just dive into some of your work and is just amazing! You are really inspiring!

  • @beemkhan
    @beemkhan Год назад +1

    Really nicely put! Great work!

  • @kidyoshi007
    @kidyoshi007 Год назад

    BROOO, i love your web development content, Subscribed!!!

  • @ashutosh_tiwari
    @ashutosh_tiwari Год назад +1

    Awesome bro keep creating cool stuff 🔥❤️

    • @by_huy
      @by_huy  Год назад

      Thanks so much Ashutosh

  • @editavatar6423
    @editavatar6423 Год назад +1

    Great video mate, amazing visuals, a unique suggestion on how to choose a colour palette for your portfolio. You just earned an other subscriber. Keep up the great work!

    • @by_huy
      @by_huy  Год назад

      Big thanks Vedant, I am glad that you've enjoyed the video

  • @agustc3509
    @agustc3509 Год назад +1

    great video, and great channel too. I'm also starting to learn creative coding and I needed a reference point and your channel is perfect. THANKS

    • @by_huy
      @by_huy  Год назад

      Glad to hear that man! Best of luck in your creative coding journey, see you around

  • @rangariraiianmakokota9323
    @rangariraiianmakokota9323 Год назад +1

    Keep up the good work my man

  • @wweuncut171
    @wweuncut171 2 месяца назад +1

    Hi Huy, fantastic video! I’m also diving into GSAP and 3D websites-could you please share the source code?
    It would be incredibly helpful for my learning journey. Thanks a lot in advance!

  • @adnanbennasare9291
    @adnanbennasare9291 11 месяцев назад +1

    Great job huy I just want to ask you how did you present you website that way like it easing in 🎉

  • @DomskiPlays
    @DomskiPlays Год назад

    beautiful site and great video bro! I just bought a 3 letter domain I want to use for my portfolio so this def gave me inspiration to finally go start designing it!

  • @shivudesign9210
    @shivudesign9210 Год назад +135

    Its my suggestion please take this only website project and teach us from designing website to development..no one on this internet is teaching us.

    • @by_huy
      @by_huy  Год назад +33

      Hey! Sorry for the late reply! I am planning to make small tutorial videos on some of the interactions that I have done on my portfolio. Stay tuned for that and thanks for the suggestion!

    • @arshnabi4312
      @arshnabi4312 Год назад +1

      Can you tell me how you learned using gsap with react cause every time I am finding myself with those html, css and js

    • @Ayush-Baranwal-
      @Ayush-Baranwal- Год назад

      @@arshnabi4312 use framer motion with react it’s modern and powerful for animations

    • @dmzt
      @dmzt Год назад +3

      You guys can check shreyians coding school channel in youtube, it's great for learning coding in hindi, if you are from india, and he taught a lot in frontend so check him out

    • @lordesca4364
      @lordesca4364 Год назад

      ​@@dmztmeh

  • @TheMaymu
    @TheMaymu Год назад +1

    This channel will be big !! Nice job 🎉

    • @by_huy
      @by_huy  Год назад

      Thank you Maymu 🙌🙌

  • @SanskritiGuptaInTech
    @SanskritiGuptaInTech Год назад

    This is awesome! immediately subscribed!

  • @felipezanardi
    @felipezanardi Год назад

    great video, loved the website
    thats the type of design i like, well done keep it up

  • @nohandleid
    @nohandleid Год назад

    This is genuinely amazing

  • @Koracs
    @Koracs 10 месяцев назад +1

    Great video, i liked your process of explaining these different steps.
    Do you have any plans on releasing a video on your new portfolio? I would really enjoy some insights on the technologies you used. Your new site is just soo smooth 🥰

    • @by_huy
      @by_huy  10 месяцев назад

      Definitely in the pipeline 😁

  • @tanixxmusic
    @tanixxmusic Год назад +1

    That gave me a lot of inspiration fir today, thankyou Huy.

    • @by_huy
      @by_huy  Год назад

      Happy to hear it, no worries!

  • @IkraamDev
    @IkraamDev Год назад

    Respect for doing this all on a tiny screen!

  • @binhvu9156
    @binhvu9156 Год назад

    wait this is actually so cool huy

  • @yamix.brands
    @yamix.brands 11 месяцев назад +2

    Bro destroyed logo designers career in 20 seconds 3:00 😂😂

    • @by_huy
      @by_huy  11 месяцев назад

      😂😂😂

  • @websohail
    @websohail Год назад +1

    Awesome man! I really like your process and follow you Instagram and RUclips

    • @by_huy
      @by_huy  Год назад

      Awesome! Thanks a lot 😊

  • @DoxaThompson
    @DoxaThompson 11 месяцев назад

    Such a good piece love it !

    • @by_huy
      @by_huy  11 месяцев назад

      Thank you! Cheers!

  • @muhammadtariq_
    @muhammadtariq_ 10 месяцев назад

    Your whole aura is minimalist

    • @by_huy
      @by_huy  10 месяцев назад

      Haha you got that right

  • @sadglass
    @sadglass 11 месяцев назад +6

    Хуй, отличная работа, анимации просто супер

  • @Diego_Cabrera
    @Diego_Cabrera Год назад +1

    This was such a good video. i recreate awwward website animations so this was such an interesting video to watch.

    • @by_huy
      @by_huy  Год назад

      Hey Diego, I appreciate it man !

  • @ZioSenkai
    @ZioSenkai 11 месяцев назад

    Đỉnh quá a ơi :D Lướt thấy video của anh thấy tên giống mà hóa ra là đồng bào thiệt :3 +1 sub ạ

  • @beastnighttv
    @beastnighttv 11 месяцев назад +2

    Amazing stuff man, I am thinking of designing my portfolio in Figma but couldn't get myself to design a good looking UI (that I like). Any tips on where to start?

    • @by_huy
      @by_huy  10 месяцев назад

      Definitely look around RUclips on tips and collect inspiration from sites like awwwards or any other form of inspiration

    • @beastnighttv
      @beastnighttv 9 месяцев назад +1

      @@by_huy alright bro, thanks for the suggestion... the issue I am having is that I can't think of a good unique UI.... you may ask what I was doing this past 1-2 months? I was having my finals.... anyway sorry for my late reply ;-;

  • @prashlovessamosa
    @prashlovessamosa Год назад +1

    This looks awesome man.

  • @thomashuynh9205
    @thomashuynh9205 5 месяцев назад

    Best developer portfolio I’ve seen hands down. Would love to know how you made the screen mock-ups for the projects section. Did you design them yourself? They look sick!

    • @by_huy
      @by_huy  5 месяцев назад

      Yes I did, I just put a video on top of the image. Make sure each image and video has the same aspect ratio

  • @AleksPopovic
    @AleksPopovic Год назад +1

    That's a nice portfolio website! I'm currently redesigning my own, so you gave me some cool ideas. I'm definitely stealing the svg icons Figma file. 😂

    • @by_huy
      @by_huy  Год назад

      Haha the svg icons definitely come in handy!

  • @by_huy
    @by_huy  Год назад +3

    Hope you guys enjoyed this video, if you have any questions please feel free to leave a comment down below!

    • @FumeCreates
      @FumeCreates Год назад

      Been watching your video keep up the good work. Loved the website.

  • @Saleh_exe
    @Saleh_exe Год назад

    The website design is awesome🔥

  • @saishankar01
    @saishankar01 Год назад +3

    Hey, the video is awesome! The effort put into it this time was even greater. I loved it! I also wanted to point out an advancement in your portfolio. It would be great if you could add the attribute 'target=_blank' to your anchor tags, for eg in projects section the links don't have this. This will open your projects and links in a new tab, making it easier for people to come back to your website. Great work!

    • @by_huy
      @by_huy  Год назад +1

      1000% definitely a great improvement for ux, I didn't know this existed before haha. I'll be making the change right now as I see this comment. Thanks so much Sai and I'm glad you've enjoyed the video

    • @avvay0
      @avvay0 Год назад +2

      @@by_huy wait - You've managed to code such an amazing website, and didn't know that target="_blank" exists? That's even more awesome that You've done it. Nice work mate!

  • @AbyssRPM
    @AbyssRPM Год назад

    I’m on my way to becoming a software engineer and this is phenomenal!!! Dude teach me!

  • @mohamedyamani8502
    @mohamedyamani8502 10 месяцев назад

    Love your videos!
    In the inspiration step, did you just screenshot the websites you liked and uploaded the images into Figma?

  • @jackiee_hoo
    @jackiee_hoo Год назад +2

    Bro this is SICK 😫

    • @by_huy
      @by_huy  Год назад +1

      Yo Longgg, thanks a lot man. I really appreciated it 🤙

  • @remo6550
    @remo6550 Год назад +2

    Stunning! How did you create the mockups? They are looking beautiful!

    • @by_huy
      @by_huy  Год назад

      Figma : )

    • @remo6550
      @remo6550 Год назад

      @@by_huy can u recommend any template in figma for these? 😁

  • @mr_x0s1
    @mr_x0s1 Год назад

    Absolutely a great video.

  • @brionyfrater4279
    @brionyfrater4279 6 месяцев назад

    Hey great video👋 How does he translate the grid to a real website, does he measure the everything in figma?

  • @luisfelipelino
    @luisfelipelino 3 месяца назад

    Nice work bro! Very nice.

    • @by_huy
      @by_huy  3 месяца назад

      Appreciate it!

  • @Fido1hn
    @Fido1hn 10 месяцев назад

    Bro you portfolio deserved the awwwwward. super dope

  • @madhankumar8606
    @madhankumar8606 10 месяцев назад

    Man!!!, Your cursor follow animation is looks sick. Could you please tell us how do you made it?

  • @michaeleissenberg637
    @michaeleissenberg637 Год назад

    insane channel with insane content.

  • @mohd.tabishkhan4868
    @mohd.tabishkhan4868 Год назад

    loveed the process💖💖💖💖

  • @MoreCreativeGFX
    @MoreCreativeGFX Год назад

    This is incredible work bro 👏

  • @sandwicheems
    @sandwicheems Год назад +1

    Beautiful bro!

    • @by_huy
      @by_huy  Год назад

      Appreciate it Tio!

  • @MoreCreativeGFX
    @MoreCreativeGFX Год назад

    Amazing. Thank you so much for your content

  • @ivonavarelova
    @ivonavarelova Год назад

    THIS IS DOPE!!! subbed

  • @carsonwyndham9693
    @carsonwyndham9693 Год назад +1

    Great job, I really like your site

    • @by_huy
      @by_huy  Год назад

      Happy to hear that Carson! Thanks a lot!

  • @uruta09
    @uruta09 Год назад

    Can you do a tutorial about that custom cursor on hover pleaseee.

  • @filetmignon9978
    @filetmignon9978 Год назад +1

    Nice website! I'd recommend setting a max width for your container though. Content is really spread out too much when you get to screen sizes like 35 inch monitors or larger.

    • @by_huy
      @by_huy  Год назад +1

      This is an excellent suggestion, thanks so much. I will definitely be making this change 😁

  • @chriscarton4728
    @chriscarton4728 8 месяцев назад

    really great master class

  • @iamDyeus
    @iamDyeus 11 месяцев назад

    Bruh that thing is so Clean 🙇🏻‍♂️ am definitely stealing it 🥸

  • @Kv-kk2nj
    @Kv-kk2nj Год назад

    Inspired dude. Grate design ? BTW, how do you edit the videos, like what tools you use?

    • @by_huy
      @by_huy  11 месяцев назад

      Thanks man! I use Premiere pro : )

  • @tharushi-c7x
    @tharushi-c7x 6 месяцев назад

    Your designs are very minimalist, modern, and simple which I like. Can you do a video on how you approach designing a website, like how you get inspiration for web design by extracting different elements, reusing them, and creating unique layouts and hero sections? I always collect references from other sites but when I go into actual design I don't know how to approach the design, I have no idea how to customize them without feeling like I'm stealing?

    • @by_huy
      @by_huy  6 месяцев назад

      Noted!

    • @tharushi-c7x
      @tharushi-c7x 6 месяцев назад

      @@by_huy thank you

  • @xGalasko
    @xGalasko 10 месяцев назад +1

    what camera did you use to record? id like to also start recording my development process as i think explaining your process is one of the best way to actually learn ty!

    • @by_huy
      @by_huy  10 месяцев назад +1

      For this video I used the Pixel 6 Pro and now I am currently using the ZVE-10. As long as you have a phone to film it's never too early to start 😁

  • @GetPsyched6
    @GetPsyched6 10 месяцев назад

    this is fucking gorgeous. incredible work

    • @by_huy
      @by_huy  10 месяцев назад

      Really appreciate it man ✌️

  • @AlgoriusSama
    @AlgoriusSama Год назад

    Hey Huy, Great work good job👏Is it copywrited? Can I use your websites or modify it?

  • @AlexLazzarotto
    @AlexLazzarotto Год назад

    that logo break killed me :D
    p.s. at 3:27 what program did you use? looks cool for planning things

    • @by_huy
      @by_huy  Год назад +1

      I use Figma!

  • @alexr.7535
    @alexr.7535 Год назад +1

    which keyboard are you using ? it looks so good
    ]

    • @by_huy
      @by_huy  Год назад +1

      Haha I am using a KBD67 Lite R4!

  • @Acusis
    @Acusis Год назад +1

    Thank you for this amazing video. I was wondering how long did it take you to finish the website design and development process? Thank you!

    • @by_huy
      @by_huy  Год назад +1

      Thank you 😁😁! To be honest it was quite a rushed work, it took me around 2-3 weeks total for both design and development!

  • @nearlynormaljimmy
    @nearlynormaljimmy 10 месяцев назад

    Love your new website. In what way did you create the noise background? Is this svg?

    • @by_huy
      @by_huy  9 месяцев назад

      It's an svg indeed : ) take a look at feTurbelence in the mdn docs

  • @yannmarctenanteu4441
    @yannmarctenanteu4441 Год назад +1

    Can you explain the process you used to create the screencast of your work near the conclusion of the video? Thanks

    • @by_huy
      @by_huy  Год назад +1

      Hey man I just use the Mac screen recording (quicktime player) and then round the borders in Adobe premiere. You probably can use some other screen recording software to make it work as well!

    • @yannmarctenanteu4441
      @yannmarctenanteu4441 Год назад

      @@by_huy definitely will try your approach as I got a Mac as well. Thanks for the update.

  • @lewzipo
    @lewzipo Год назад +1

    Excellent content!

    • @by_huy
      @by_huy  Год назад

      Much appreciated!

  • @learncode5110
    @learncode5110 Год назад +1

    Hey Bro awesome video..please start teaching us this process of making website design and development this is so intresting.. I was searching for such youtuber and teach us such creative and interactive website design and develpment. Please its an request bring playlist on all this coding techs

    • @by_huy
      @by_huy  Год назад

      Definitely a good suggestion! Not necessarily tutorials but stay tuned for something similar

    • @learncode5110
      @learncode5110 Год назад

      @@by_huy Awesome looking for it bro

  • @anupamsingh9301
    @anupamsingh9301 Год назад +1

    Great looking website👍

    • @by_huy
      @by_huy  Год назад

      Glad you like it 🙌🙌

  • @claudeburbank180
    @claudeburbank180 11 месяцев назад

    Hey great video. Btw what keyboard you using?

    • @by_huy
      @by_huy  11 месяцев назад

      Thanks! I use the KBD67 R4 Lite : )

  • @elenamikhaylova5086
    @elenamikhaylova5086 10 месяцев назад

    amazing video, thank youu!

    • @by_huy
      @by_huy  10 месяцев назад

      Glad you liked it!