How I built my Portfolio site
Creating this portfolio I wanted to take on a new challenge and build the site from the ground up using a variety of different technologies. This post gives an overview on how this site was created.
During the initial investigation phase, I had questions that I needed to answer before I could begin to build my portfolio site.
What technologies should I use.
How can I make the content easy to manage, create and update.
What content should I include in my portfolio.
Technologies used
Deciding what to use to build your site can be a complicated process. As a developer I didn't want to go down the route of putting together something like a Wordpress site built from a base theme, I wanted to build my own custom site.
This lead me to choosing React to build out the Frontend of my site. React allows a lot of flexibility and options, it is a great option for creating custom reusable components and allows developers to create complex user interfaces in a clean and manageable way.
However, before I could fully commit to using React I needed to do some investigation into how I was going to handle to backend of my portfolio site.
Previously I have built sites using things like MEAN stack (Mongodb, Express, Angular and Node) However, building a backend using a tech stack similar to this would require a significant time investment.
I decided that Next.js would be the best option. I had never used Next before so this was the perfect opportunity to learn. It's built on React and it has some great features and functionality straight out the box like advanced routing, client and server side rendering and all of the latest features from React. Next.js being by Vercel also provides me with a straightforward, no fuss solution for hosting my portfolio site.
Content Management
For the content management side, I had to make a decision on how I wanted to handle this. I had already decided that I didn't want to spend a large amount of time building out an entirely custom admin panel as this would require a significant time investment.
Looking at the options I had available I came to the decision to use a headless content management system.
After doing some research the headless content management system I decided to use was Contentful. Contentful offers a simple straightforward way to connect your application and most importantly for me, it allows the creation of custom content types which allow the user to create custom data structures.
I was able to use this functionality to create every part of the site that requires user generated content. This allowed me to create everything from the individual pages, like the homepage or the blog posts to the individual components such as the skills section. I was then able to fetch the data based on content types and even specific content IDs which was very useful for specific pages like the home or about page.
What content I should include
When building a site, it's important to know what content should be included. This is true for all sites, for example an ecommerce site requires product pages and a checkout to function.
For a portfolio site, the same decisions need to be made. I wanted my portfolio to be a place where I could showcase my skills, give people a little insight into who I am, showcase my projects and be a platform I could use to share my ideas and hopefully help other developers with my technical knowledge.
During this project I found that I didn't want to place limits on how the content on the site could be configured, with this in mind I utilised features within Contentful that allows users to embed entries and assets into the rich text editor.
Using the embed feature and react components I set up a structure which allows any content type to be embedded into the rich text editor. The homepage and about pages were created using the rich text embed functionality. This functionality is available site wide and give me the freedom to completely change layouts and content on any page directly from the CMS without having to make any code changes.