I decided to write a blog post on how I built my portfolio website, going from the inital design, how it is coded, the problems I hit setting the site up and where I am planning to take it in the future.
The Design
When designing websites I always use Adobe XD, which I personally find XD incredible easy to create and try different designs variants to see what looks better and has better usability. When I get started create few artboards with contain mybase branding guidelines with logo varients, brand colours, button types, typography and components with variants of states and styles such as navigation, project links and images.
Then I start usually creating desktop version of the website at the screen size of the laptop I use to get the basic design out, then I move to the mobile version of the website, however when coding I will tend to develop from mobile up for website performance.
The redesign of my website is made up of severally different components from different parts of previous projects and old portfolio website and blog, for example the side fixed navigation came from a previous blog site I created.
Using Adobe XD helped me look at some of the components and decide if they actually work, if they did take up to much space or if they lead to lower user experience.
The Code
After a year of focusing on learning Ruby on Rails for my job, I decided I need to do a few projects using ReactJs and Nextjs for server side rendering that lead to me building my new portfolio website in Nextjs.
Jumping back into React and learning extjs, was strange espically due to the changes that react has had in the last year like hooks was game changing and made writing react so much easier. Looking back I am glad I wrote my portfolio site using nextjs rather than using just HTML that I have previously done for my sites. Even though the site is exported to HTML on deployment via netlify it made it easier to focus on each part as seperate section imported in to the current page and allow me to seperate the logic of the site into section.
The page is wrapped around the layout component this allows me to add the basic layout such as navigation, add my meta data such as page name and seo describtion aswell as add my CSS, compiled from SCSS.
Another main benefit of using react was to use data from a JSON file and using .map() from ES6, so I can build easily build and amend repeating components, this was used for in my Work Experience section.
Going back to React and learning nextjs was definitly rewarding while also being challenging as so much has changed since I had previously touch the framework, and has lead me to build more projects using React which will appear in the future on my blog.
Problems I Hit
When building my portfolio website using react and nextjs, it was a learning curve I had been half way up before, however the curve had got steeper since I last touched react as they introduced react hooks, server side rendering with nextjs and other features. Learning these new features and frameworks took a lot of trial and error however I pushed though it and tried to learn as much from documentation, courses on udemy and youtube.
The Future
In the future, I am planning to add more projects to my website, these included a ecommerce shop built in react and few other projects. I am also planning to integrate my blog posts in to my main website to make my post easier to access from the main website.