I never wanted to do a code-along tutorial but you made me change my mind because of the tech stack you decided to go with and the project you chose. Forrest, you're such a great teacher, especially the way you go about explaining what each step means!
I like what you said in the end about knowing what the code is doing if you want to add it as your own project, which is why I always tend to switch things up when I watch a tutorial and add something different instead, using a similar idea. I feel that way I understand what each part is doing and I really actually doing something instead just copying code line for line. Thanks for the video, keep it up!
I've been wanting to build a site for the last 2 years. Not a cs student or anything, but have dabbled with just some languages, vscode, wsl, github, and lots of technologies you used outside of the language itself. The way you brought it all together fit perfectly in my head, and taught me a lot on how to tie these random bits of knowledge I have together at long last. This was a great tutorial, appreciate it lots man
This came right on time. My original portfolio site had all the bells and whistles, fancy animations, pretty icons, colors and gradients. It served it purpose at first to show off my Front-End skills, however as I developed more into a Back-End Dev I wanted something less "pazzazy". Looked around for some examples of simple and minimal, not much was out there until Forrest did a teaser about his site a few weeks ago. I couldn't wait for him to post this tutorial. Thank you Forrest, great work brother, I really appreciate it. 💯🤛🏾
@ForrestKnight for those who had an issue with the "Contact" component not working. The button type should read "submit" not "button". Hope this helps someone.
The tutorials help me a ton especially when using technologies and dependencies I haven't used before. I had never heard of Tailwind or Vite and might not have been compelled to touch them until after the tutorial. It really demystifies the whole process of picking up a new technology and the quality of videos and the quality of your teaching ability gives me a ton of confidence to take what I learn and continue building my own projects with these new tools. Great tutorial!
This is the best video I have ever seen on web development. As an intermediate web developer, I found it to be very helpful and informative. The explanation of the concepts was clear and concise, and the examples were easy to follow. I would highly recommend this video to anyone who is interested in learning more about web development. My only suggestion for improvement would be to include a discussion of React Router DOM. and I think it would have been helpful to see how it is used in practice.
Very helpful tip in the portfolio section with rearranging the assets folder for the production build. I have never seen that covered before, thanks man!
wow i was not expecting to learn setting up github actions for auto deployment and generating an ssh key for a private repo. really well made tutorial i really like this style and yes i would love to see more
Hey Forrest, very good video! I like how you separate your data from your components. and used Tailwind for your styles . The explanations shows more reasoning behind your choices so I like this type of tutorials. Maybe you can do one for Node and Typescript and build a back end service and to fetch the portfolio data from there.
For those having issues getting the getform to work. You need to adjust the button action="submit" to get the button to work and then make sure you're getform key is in an environment variable. This will NOT remove it from the frontend. It will just remove it from your public repo. I'm still trying to figure out a way to remove it from the front end.
You can use rafce or rafc instead of copy pasting, when you create a new jsx file, becuase it creates a boilerplate for you, and now you're ready code!
hey man, love your work, about the boilerplate thing there is an extension in vscode called react es7+ snippet , go to the file and type rafce for creating a functional component with the same file name and already exported, good luck❤
Thanks for the tutorial. In terms of hover, you can try something like 'active:scale-[.97] active:duration-75 transition-all hover:scale-[1.02]', you might see the effect. Quick question, can you tell me how do you design your Portfolio website picture with half light mode and half dark mode? Thanks
damn i really gotta update my website. I'm not a web developer, but it really does need to look a bit nicer than it does now. Ugh, might be time for a full rebuild
I tried to build this website it was a fun experience to see it all come together. However, I got stuck on the last part pushing it to hostinger. It failed to push on github saying that it Failed to fetch target branch, probably doesn't exist
@@tylerrex96 I had to manually create the "build" branch. Then I also had to grant read/write permissions to the Workflow Permissions, NOT the Action Permissions. Lastly, I had to update the yaml script: "actions/checkout@v3" instead of "v2".
First of all thank you for the tutorial I really did learn new things... But the Hostinger part didn't work for me a lot of things crashed and some didn't work
Around 13:06 I can't seem to center any of my text. Tailwind and all of the plugins are installed. It displays the website and text, but it's not centered. Entered the "flex" command in the div section into the "intro.jsx" file with padding but zero change. Been scratching my head for hours on this simple fix. Has anyone run into this issue too?
Hello, I want to see if I can use it for my portfolio, I have done this tutorial that is great, but I have that question, thank you very much in advance
I got everythiong going except the github action. It fails at the push stage, "Warning: Failed to fetch target branch, probably doesn't exist ". And it says "fatal: couldn't find remote ref build". I have no idea what went wrong
*I had to change the Folder:dist to Folder:build anmd that worked. Hostinger does not have the correct files in the file manager but the website is functional for now.
@@emelside you change the GitHub workflow to what I mentioned in another comment. Also make sure that you change your workflow permissions to be read/write, not just read.
What is the extension of your VS code that is completing the things that you have already written? And maybe not even that. It automaticaly completed "Inter" for your when you started the project. Best it can be seen at 41:25 in the video, where it is finishing the className for you. Thanks!
How did you add the social icons? I would like to another another one with a picture of a document to link my CV but cannot figure out where to get to get the other info for the image
i love your channel, thank u for sharing your knowledge with, i have a question please respond if you are free, my question is currently i am developing an app for university, i have two option, one, to develop the app for them and sell it directly to them and second to hold the ownership of the app and let the universities pay anually fee, by the way i live in africa they dont have apps for university, but everyone have internet, please give me advice
Hey Forrest Knight! I have problems with importing the functions into my Timeline and Contact files: import TimelineItem from "./TimelineItem"; When I do this, exactly like it was done in the tutorial, I don't get any errors, but my portfolio is completely blank. The same problem occurs throughout the whole project, for example when I try to import import title from "./Title"; in Contact.jsx or Timeline.jsx. I would appreciate if I would get some help. Thank you
When I update changes in visual studio code and push to git it won't update on my website and I notice the (build) branch is behind on commits. Anyway around this?
This is my second time trying tailwind and I am getting the same problem again. Changes on tailwind elements do not update in local host upon saving. The changes only show up after restarting the server. Any one know what's going on?
I haven't needed to. Maybe a delay or limit to prevent rapid clicks of the submit button to send a bunch of emails to me lol also make the text areas required so they can't be blank.
When I try using the map() function in the Portfolio component, it works with no problem, but doing so in the Timeline.jsx file caused my screen to be blank. Is there any fix to this?
Im having so many issues with tailwind, It was working then suddenly it cant find the postcss config and I cant figuire out why. I reinstalled tailwind that didnt work either, thanks for the tutorial anyways. But seriously screw tailwind!
Hey Forrest I ran into a problem when trying to use my own photos to display. I know I am using the correct path in the portfolio.js because when I download your images from github they work, but when I try to resize my own images to the same as yours (via MS Paint) none of my personal images are showing like how yours are. Any ideas on what is causing this issue? Thanks!
That is the problem with all these tutorials. You have to follow these steps, and it works, but you have no clue why and how it all works. Which will make that at some moment it doesn't work anymore (usually when you want to deploy shit) and then you have no clue what to do.
@@J4YV33 I am running into map issues and I amnot sure how to fix it. I have double checked that it is the same as Forrest but that seesm to not be working either.
@@Jacob__Moore please check your code by first asking if the array existed. for example {stack.map(item => ())} this is could be construed as not asking the array if the information does exist, while {stack?.map(item => ())} is a simple form of asking the array if the information exists. adding the "?" to stack will ensure that it will perform a check of the mapped array to ensure that information exists. this was how I fixed my issue anyways lol.
