After having a lot of fun with building the website for HEI integration, I decided to rebuild my own site with Frontity. The idea of building an own page, was that I want a place to keep notes of all the stuff I was getting into while trying know a bit more about web development. So mostly it would be just a notebook for me – to not forget all the thing too quickly I was learning.

Get Started

Personally, I think it’s pretty easy to get started with frontity:

  • Create a WordPress Site on my existing hosting (to connect my Frontity-Site later on) – a hosted versions could also be possible if you want to just play around a bit
  • Order a new Logo on fiverr
  • Generate a color palette over at coolors.co
  • Preparing the WordPress-Site (Adding Contact-Form as Plugin, adding a custom post type for the Portfolio page)

That’s it, after that the components were already set up for starting the development the Frontity Theme using VS Code:

In case you wondering: A few click more and the first version of it the first page could already be deployed to Vercel

The Process

TODO In the coming weeks I want to deep in a bit more on all the resources I have used during the build up of the page:

  • Build a mobile-first Full-Screen Menu
  • Use SVG to Build Menu-Icons
  • Box-Shadow
  • Bottom-Border on Links
  • css-transform: rotate
  • Blobs as background
  • Publish an Frontity package using NPM
  • Calculate a Blog's reading time
  • List Custom Post Types
  • Add a Lightbox
  • Add Transformations to Frontity: here

The Result