What?
Morning! (Not an ad, or a course) Looking to code up your own portfolio website with zero experience? Well, I’ve done it before, and I’ll tell you all about it to make your process simpler than mine was. If you ever need help with anything, just contact me. My website is nelsonbermeo.com. I used Next.js, React, and TypeScript. This post is for people who want a stunning portfolio website built in a day. Take my advice lightly since I'm not a web developer, but I was able to create a personal site.
The Scene
It’s the Summer between my freshman and sophomore years, and all I know about computer science is math and data structures. So, looking at JavaScript, HTML, CSS, and other components was a bit daunting. But I took up the challenge because I wanted a cool website to express myself.
The Process
Your most important tools are going to be YouTube tutorials, ChatGPT, and GitHub. I followed this tutorial on YouTube by JavaScript Mastery: How to Build a Portfolio Website. Then, I added my own spin on it by borrowing code from other GitHub pages and using ChatGPT a lot.
So, yeah, I followed the tutorial exactly. This 2-hour video took me like 7 hours because I had to pause every second and copy the code down. After a while, I realized I could just copy the repo from GitHub and install the libraries needed, but if I did that, I wouldn’t have learned how to edit the website myself.
After following the tutorial to the tea (is that the phrase?), I started to add components that weren’t directly from the tutorial. Without a guide, a lot of errors fell on my head. But that’s okay! Just ask ChatGPT—they’ll point you in the right direction.
I looked on the YouTuber’s discord server, and luckily, this guy named Rohit Rai posted his own twist on the site with cool additions that I added to my project. I copy-pasted some code, and then I understood how to add effects by copying Aceternity’s source code for an effect, creating a component, and making it my own. Just know that if you follow the tutorial, adding your own Aceternity component will be so easy. Copying components from other repos will be easy to understand after you finish the tutorial.
PS: Ignore the Sentry thing the YouTuber was talking about if you want—I didn’t use it, and my site worked fine.
The final task was hosting the website on the real internet. I don’t know if there is a free way to do this on GitHub Pages, but I was able to host the site on Hostinger for $40 a year. I followed this tutorial: How to Host Your Website. PS: The confetti did not work for me.
Takeaway
Projects are so fun. I was glued to my screen for 4 days doing this and actually learned a great deal about web development. I found my way to learn, and it could be yours too. I always prepared to do instead of actually doing something. I took HTML courses and CSS courses and took notes the whole time, which made me finish the course very slowly. Even during CS246 Data Structures, I noted the algorithms but never implemented them by heart. Only when I actively learned and found patterns in projects did I learn effectively. Referring to notes did not work for me—learning from experience did, and I hope the same will follow when I learn NumPy, Pandas, etc. I could write down every NumPy function, or I can repeatedly do projects that use NumPy and realize the workflow and pattern.
Oh, and if you’re pursuing a topic in class, don’t just ChatGPT it. Ask the professor, a teaching assistant, or a classmate. It helps you actually learn the topic, and it’s pretty fun to talk. Plus you can’t spell cheating without the heat that’d you’d get yourself into.
Contact
If you have any questions or need any help, you can email me at nbermeo@stevens.edu or nelsonberm.2005@gmail.com. Or you can visit me at my office hours at [tbd]. But, if there are students there that need help with work for the class I’m teaching assisting, then I’ll have to ignore you until I’m done helping them. Or!!! Come to CS CLUB Wednesdays at Gateway South [tbd] 9:15!!
!
Top comments (0)