Build and Deploy a Custom React Portfolio - Vite.js & Tailwind CSS

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

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

  • @Redstarcrew
    @Redstarcrew Год назад +22

    Bro! have to say that this is my absolute favorite coding channels on youtube! one year ago I started following your tutorials, and now i jave landed a job as a react developer meanwhile studying at uni, so thank you!

    • @Shrimant-ub4ul
      @Shrimant-ub4ul Год назад +5

      thats nice bruh , can u suggest me some steps to become the same :)

  • @cannabisanomaly
    @cannabisanomaly 9 месяцев назад +2

    Just wanted to say thank-you for such an incredible tutorial. You have a real knack for explaining things in a way most other creators in tech don't. And I love that you don't edit out mistakes, which is a very natural thing to happen in this space

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

      Thanks for that man! I def edit out a few mistakes here and there :)

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

    Very professional and informative tutorial! Helped me a lot with getting use to tailwind again and understanding how to setup my projects in Hostinger. Thank you a ton!

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

    Love the pacing of your tutorials! Not too slow, not too fast; just right.

  • @chandanpandey8831
    @chandanpandey8831 Год назад +4

    I was not working on the responsiveness of the websites earlier. Thank you for opening the responsive world for me, now I get how important it is.
    Your Netflix clone build is awesome too, on my hit list next.

  • @__jake.m
    @__jake.m Год назад +1

    The rafce shortcut was so useful. Thank you so much! I learnt something very useful today!

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

    Another video from Clint. Can hardly wait to get started!

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

    Finally i found the npm installation of the text typing animation for VITE

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

    Excellent tutorial, thank you very much for this help. Greetings from Venezuela.

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

    21:40 desktop sidenav
    39:18 work experience
    52:00 project
    1:03:55 contact

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

      09:00 Clean and Sweet
      09:30 mobile nav
      10:20 useState(false)
      10:25 satnav(!nav);
      10:30 handleNav
      11:57 console.log('state changed')
      12:00 ternary operator
      19:29 progress break, AiOutlineHome
      21:03 save point after icons
      for the Mobile Nav.
      -----------------------------------------------------
      27:48 save point Menus Done
      27:53 BG image component
      30:10 image flip scale-x-[-1]
      31:44 React-type-an

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

    never expected Macklemore to be teaching web development but I could not be more happy for that.

  • @MrTomro
    @MrTomro Год назад +6

    For those that Tailwind doesn't work, i've found the fix. I've been missing tailwindcss in the vite.config.js file.
    So to fix it, your vite.config.js file should look like this:
    import { defineConfig } from 'vite'
    import react from '@vitejs/plugin-react'
    import tailwindcss from 'tailwindcss';
    export default defineConfig({
    plugins: [react(),tailwindcss()],
    })

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

    This is one of the best minimal dev portfolio

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

    36:47 My h1 and h2 not displaying at the center. Kindly help

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

    14:24 h-sceen should be h-screen

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

    why do i get 6 vulnerabilities when i install the typing animation package???

  • @Alexandre.rocha-10
    @Alexandre.rocha-10 Год назад

    Really nice, help a lot to understand how to use tailwind!! I made mine with maps for the menuItens, a little cleaner

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

    Great content, really loving tailwind and learnt a lot through your projects, feels intuitive.
    At the 1:07:24 mark, there is is mention of enctype='multipart/form-data', I never seen that before with forms, although I am new to coding, had to research on good old StackOverflow to find the answers, I didn't realise, when you make a POST request, you have to encode the data that forms the body of the request in some way.
    I guess it is great although not mentioned, one still follows along and has to do further research when it bugs them :)
    Although I don't have a work history in the tech sector as a programmer or any big enough projects to add into a projects worth mentioning yet, I will hide those components for now and also add additional features into the base tutorial, such as dark/light mode.
    Looking forward to more great content to come, keep up the great work.

  • @avtourist-surgut
    @avtourist-surgut Год назад +2

    The map method does not output an array of data . Please help me ...

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

    just amazing keep up the great work!

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

    The way you have explained I love it. Awesome 👌👌👌👌

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

    This tutorial is awesome! I was able to follow up and understand at least 80% of everything. This was so helpful I am new to react and tailwind and this makes such a difference. could you share some of the plug ins you use in VS code like the auto format and the auto population when you write in the className?

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

      I believe that would be the "Prettier" extension in vscode :)

    • @sul-dev
      @sul-dev Год назад +1

      "ES7+ React/Redux/React Native snippets" creates that 'rafce' auto format and auto population for class names.

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

    Loving this build so clean and easy to follow not finished yet. Hoping to use once complete to gain a job at the end thanks

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

      So awesome! 🤘

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

      @@codecommerce Hey I have pretty much built out my portfolio now in Projectitem.jsx how do you ref each project to link where the project resides thanks Neill

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

    Thank you so much, created my new portfolio following your tutorial using vitejs 🎉. I am learning react app including map, such as Geofencing. Very glad to see if you have the similar map project in future.

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

    Great tutorial. Learned a lot.

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

    Amazing as always, thanks for this.

  • @LiyanaMaisarah-d5p
    @LiyanaMaisarah-d5p 10 месяцев назад

    may i know what extension you use to code in the visual studio code ?

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

    Hey there! Love this tutorial and was working on a project of mine, trying to implement the code I have onto a hostinger website and everytime I run "npm run build" in my server folder, I get errors. I added the "build": "tsc && vite build" to my package.json script and I am still not getting the components built. Any advice would be amazing! Thanks for what you do and keep it up!

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

    Hello sir I am getting an error at 12:43 sec of the video error is (Type annotations can only be used in TypeScript files ts(8010))
    Can you please help I am new to react

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

    Hey guys, do we need some extra setup if the React App is using routes (react-router-dom)?

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

    Thanks for the content! An advice: could you please use hooks (contexts, custom hooks, etc.) in your next projects?

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

    What plugin to install to create automatic template in react components? Thank you

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

    Amazing Video!! Quick question, how do I go about updating the website? For some reason, it only shows the initially uploaded version i.e adding the dist folder into public.html. I have made a few changes to the website since then, but it doesn't reflect them. Please let me know how I can fix this. Thanks!

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

    react icons are not working for me who had the same problem

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

    @codecommerce Hi! I need some help plz and Ty. For some reason when I am transferring my index.html and assets folder over to my public_html folder the assets folder will not transfer over. It says "An error occurred. Your account may be over its quota or you attempted to upload a folder." But the file only has a few pictures, not sure the issues. I would appreciate the help.

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

    Interesting implementation, but how about solving the problem that arises when you press the mobile menu button while on a smaller window and then maximize the window? The mobile menu overrides takes the width of the whole page, the buttons become gigantic, and the on and off button disappears since the window no longer below medium size.

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

    Hi Clint! I did not find the github repo on the latest projects.
    Was there a change about it ?
    thanks a lot

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

    52:35 are those lightsaber chopsticks??

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

      They are most definitely light saber chopsticks. Not super practical because they are kinda big but they are cool 🤣

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

    Added into the bucket list✌️

  • @gmartins-dev
    @gmartins-dev Год назад

    hey just for curiosity what vscode theme you are using? i like that colors

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

    Hello! Will you make a video of an e-commerce with react, tailwind and strapi or firebase? I like how you explain! greetings from Argentina!

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

    i need help guys once i apply the image the sideNav component disappear completely I cant access it at all I can still access the right side one unless I am full screen

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

    Are any of you using webstorm and no hint from tailwind in Vite?

  • @Shrimant-ub4ul
    @Shrimant-ub4ul Год назад +2

    Tailwind classes are not working even after configuring them , please help

  • @Prakash-lq3zh
    @Prakash-lq3zh Год назад

    can anyone share the link of the background image of Main.jsx component.

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

    Please i need help with deploying with Firebase authentication when i used react vite and tailwind it doesnt seem to work on google firebase auth

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

    is anyone else getting an issue with the map method? it doesn't seem to output the array of data

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

    Hey Clint! I am loving your tutorials, kudos to you. I started playing with Tailwind and Vite. So far so good. Someone already asked; but what vs code theme are you using? mind sharing?

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

    How can I use .env on Hostinger?

  • @sul-dev
    @sul-dev Год назад

    27:29 Woah how have you done that lol?!

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

    Uff complete ✅

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

    Sir there are many types of websites except portfolio but every time portfolio is no good

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

    I dont think you went over the links to github, linkedIn and the resume buttons, they do not work

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

    Hello Clint! I want ask you one question as a Mac user. Is it worth to get MacBook Air 2020 with M1 chip for web development? Greetings from Bulgaria! Have a nice day.

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

      Hey dude! For web development I don’t think it is necessary. It’s what I like to use just because I’m use to macs now. But it’s certainly overkill. It doesn’t take much computing power for local environments. :)

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

      Thanks for the answer! I appreciate that opinion. Keep going with these coding videos. I’m learning a lot of new things from you 😅

    • @gmartins-dev
      @gmartins-dev Год назад

      @@codecommerce hey just for curiosity what vscode theme you are using? i like that colors

  • @aymenbachiri-yh2hd
    @aymenbachiri-yh2hd Год назад

    thank you

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

    Thanks man, amazing vid, mind sharing the git repo?

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

    amazing ❤️🔥🔥

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

    Smashing

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

    Tailwind doesn't work for some reason

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

    can i get the source code please

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

    thank you very much 👑🌹♥️, you are awesome ♥️♥️

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

    Tnx a lot

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

    Awesome

  • @H.A.S.A
    @H.A.S.A Год назад

    Please make a tutorial for this year 2023 from 0 to 100. This way your channel will be more attractive.

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

    very good tutorial, except that deploy on Hostinger is easy BUT not that fast. It took about an hour

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

      It really should be pretty quick.. You can known it out in about 10-15 minutes if you are familiar with the process.

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

      @@codecommerce Hi, it is kind of up and down. Sometime the process is quick. But sometime took very long.
      The tutorial is awesome though. I really like how you explain. Easy to understand, truely

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

    12:12

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

    sir plz make Ecommerce Project with Redux toolkit and Tailwind css .plz its recommended
    There is no Ecommerce Project in your channel so plz sir

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

    video is unclear, my eyes are aching

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

    🤩🤩

  • @BabaYaga4554
    @BabaYaga4554 3 месяца назад +1

    BRUH ALL ABOUT HOSTINGER WTF

    • @codecommerce
      @codecommerce  12 дней назад

      sponsored video :) but Hostinger is a great service - easy to use so I like it. I'm all about efficiency!

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

    keep it a buck its pointless uploading this unless you got a repo youre not even using word wrap so we can see all of your code like what is happening lmaooo

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

      Can you explain what you mean I’m new to front end