Creating My Personal Portfolio Website With React - Part One
This is the first part of an ongoing series I plan on making as I document my process towards making my portfolio website
I am in my third year of computer science at the University of Alberta
Software Engineer Intern @Okta
I am interested in learning about deep learning as well as backend development, working with databases and building out APIs
Intro
Hello everyone! This is my first time writing a blog article in my life so any feedback would be much appreciated.
I plan to make a mini blog series where I take you through creating my personal portfolio website using React.js
It is almost a must for aspiring software developers to have a personal website to display various projects and experiences. I believe that a personal website should take a resume to a whole new level where one can truly demonstrate their skills
Starting The Website
A personal website could be taken in many different directions however, I knew from the start that I wanted to have
- A clean and minimal design
- Simple and smooth animations
- Intuitive navigation
However, before starting to build the website I needed a good place to host it and since this is going to be a simple static website, I decided to host the website using Github Pages. As well the only frontend web framework that I currently know is React, so that was a no-brainer decision for me when it comes time to actually build out the app.
Create React App
A lot of you must know this command, but this was the entry point to starting to make my website and start building momentum by taking action! After going through the setup process I thought to myself "how can I learn something new?" and since I do not have much experience with DevOps I thought I could find a way to incorporate that into this project and I stumbled upon a really good article about automatically deploying changes to the master branch to GitHub pages so I thought might as well try it out.
Currently, the website is deployed here, however at the time of this writing it is just an empty website
Planning
My project planning software of choice is non-other than Trello. and its use of kanban boards. The next step I needed to take for this website is to start planning out all the things I want my website to contain. This list includes
- Navbar with links and redirects throughout the website
- As you go through the website you will be scrolling down
- Combination of light and dark theme with a purple accent
After getting my ideas down, I decided to start to look for some inspiration from other developers and started looking at a lot of software development portfolios. At this point, I was ready to hop into Figma and consolidating my ideas into a design
Designing
After getting a bunch of ideas together it was time to form the landing page! I really like how this first version has turned out with the combination of dark and light. This is as far as I have made it so far but the next steps I plan on taking is to continue designing the website on Figma and once I am happy enough with it, I will start to code it out!
Conclusion
I really hope you have enjoyed this article and plan on sticking with me on this journey as I continue to build out this website and become a better writer!
