The world of tech and Computer Science is vast. So vast, in fact, that even as a computer science student, I had only scratched the surface of what was there to learn. Luckily for us, the internet exists 😁.
I’ve been learning React (a front-end framework created by Meta and used by developers to build websites) for the past few weeks, and creating a personal website was a great way to hone my skills. The project was a fun-filled journey of design, development, and learning.
Why Build a Portfolio Site?
I’ve been actively job hunting over the past few months as the job offer I received during college was put on an indefinite hold. It’s been a tough market, especially for new grads, and while applying for jobs, I noticed many companies ask for a “personal website” on their applications. Building a portfolio site could be that extra step to make my application stand out. Plus, it was the perfect way to test my recently acquired React skills!
Step 1: Design First
Rather than diving straight into coding, I started my process with design. My first task was gathering inspiration — I studied over 100 portfolio sites (with some help from this GitHub repo). Finally armed with ten pages of scrappy sketches, I turned to Figma to create wireframes and basic prototypes.
Using Figma was relatively new to me, but a few things helped. In my first year of college, I took a graphic design course where I got a quick rundown of Figma’s features, and later, I joined BITS’ consulting club. During my two years in the club, first as part of the marketing team and eventually as the marketing director, I developed a decent understanding of layouts, color choices, and visual structure. Though I hadn’t thought of these experiences as “development-related” at the time, they were invaluable in helping me bring my ideas to life in Figma!
I took a learn-as-I-go approach, watching tutorials whenever I felt stuck. As I got more familiar with Auto-Layout and Components in Figma, I realized how useful these features were for responsive design. Using Auto-Layout in Figma was similar to using CSS Flexbox, which made translating design to code much smoother later down the line. After about five days of experimenting, I was ready to jump into coding.
Step 2: Coding the Site
With only a few weeks of React experience, I was excited to start coding my first live site.
I expected to get stuck or overwhelmed at some point, but what helped me avoid this was to break the coding into small, achievable tasks — focusing on one component or section at a time. Each Git commit was like a small accomplishment, giving me the momentum/propelling me to keep going. In every coding session, I ran into some issues, and in every coding session, I felt like I learned something new. By the end, I felt like a CSS and Material UI ninja.
For a personal touch, I even designed my logo in Figma, drawing on what I’d learned in that first-year graphic design course. Seeing that logo on my live site was incredibly rewarding.
Reflecting on the Experience
This project taught me a lot, both technically and personally. I learned the importance of every detail, from padding and colors to creating a consistent visual experience — knowing that this site would represent me as a developer.
More than anything, this experience showed me how different skills can come together in unexpected ways. Designing for fun during college, taking that graphic design course, and working in the consulting club all contributed to this final product in ways I never anticipated.
It’s true: learning new things makes you want to learn even more. Whatever your goals are, take that first step — no experience is ever wasted.
Thanks for following along and do take a peek at my website!
Top comments (0)