Modified May 28, 2023 | 2 minute read
Personal Website
Project Overview (Link)
After I accepted my co-op offer at Arctic Wolf, it was originally the plan for me to spend most of my time developing using react. I also had been wanting to create a new website since I had previously made one, but used Bootstrap Studio to create it. I had some time between the end of my second year of school and the start of my co-op, so I spent it creating what you are seeing now!
Process
Before anything, I started the process of creating this website by searching up examples of what other people had done, in order to gather inspiration. You can see some of these websites in my personal website inspiration article!
Once I had some ideas, I started drawing them out as shown below. The first draft for these starting sections might look familiar to you! My vision for the overall theme and homepage was carried out exactly how I originally planned. This step helped me get a rough idea of the website layout and what content I wanted to include.
Then, once I thought the rough draft looked okay, I created the design in Figma as shown below. Figma was a game changer! It's super easy and quick to use, which meant I could tinker with small details and get things to look exactly right before writing any code.
When it came time to writing the code, I made everything look exactly like my Figma design. Not having to worry about the design in this stage saved tons of time and allowed me to focus more on things like animations, responsive design, and learning react. (Sidenote—feel free to check out the github repository to see all of the code!)
Challenges
Since I was relatively new to web development before creating this website, some features were difficult for me to implement and took lots of determination! The loading animation, the sticky navigation bar, and auto-formatting markdown into articles are examples of things that were especially tricky. In the end, I was able to implement everything I envisioned, and am very happy with the result.
Technologies
As mentioned, I created this website using react with typescript. I also used Next.js and Tailwind CSS. The website is deployed using Vercel.