Side Projects
This Website
The main aim of this website is to help me understand how react works and how I can use it in production. On this page you will see the story of how I did this. From learning react, to deploying the website join me on my journy.
The Stack
| Front end |
| |||
| Back End |
|
React
Tailwinds
Next Js
The journy
My aim with this website was to learn and launch a working reliable web page. As with any good project, I started by planning how to build the website.
Defining Requirements
My first question was: What do I want from this website? After thinking this through, I came up with three thoughts.
- Improve my skills in React development
- Show off my skill sets
- Document some of the more interesting aspects of my maritime career
In order to do this, I first took the React course on codecademy.com. I did this to give me a clear foundational knowledge of the framework before I opened my code editor.
Design Mockups
Something I had not learned in my university course is how to design a website from scratch. I had heard of Figma but never used it or an equivalent product before. I needed a free product, so I chose Penpot, a free Figma alternative. I chose this open-source product because it converted my creations into code. Once I had designed a very low-fidelity front page, I started coding.
Building the front page
Most of the intresing elements I wanted to have in the home page of the website, these were the cards for projects, and the carocell for jobs I have worked. To build these I asked chat GPT to give me the sceleton for both. I then debugged the code given (chat is not the be all and end all) and put them on the web page.
Building other elements
Once I had built the front page I started to build out the rest of the website. Learning how index routes work to build out the website. The other element of note at this stage was learning how to build charts using Mermaid Chart. I used this plugin to build the diagram on the right hand side of this page.
Deployment and future plans
After finishing up the boned of the website I deployed it using vercel. Now the website is deployed my plan is to populate it. By filling in information about my work histry and writing about other projects as I do them.