I started my career as a developer working with HTML, CSS, Java, Unix and SQL. I am comfortable with HTML5 and CSS3 but, JavaScript always felt alien to me.

As I transitioned to design, I focused on learning design and lost touch with my developer skills. My knowledge of HTML and CSS and my background as a developer has helped me effectively communicate with programmers to ensure the product design and vision are implemented without any hiccups.

I came across Webflow and, playing around with the app helped me refresh the HTML and CSS concepts.

Any designer wanting to learn code, please go through the Webflow university courses. They are a brilliant place to start. Quality content!

How it started

I started with JavaScript fundamentals and then progressed into React. I chose the Next.js framework as a base for my portfolio site as it was easy to understand and, hosting it on Vercel was seamless.

Using Next.js, GhostCMS and TailwindCSS, I developed and successfully launched my portfolio in June 2021. However, I was not comfortable with certain React/JS concepts and, it led to the site having few fundamental issues.

So, I wanted to redesign the site and set up a solid foundation to build on. I came up with the following requirements for the new site:

1. Find a self-hosted CMS for the backend as most of the issues I faced were due to DB configurations on Heroku hosting. (I'm pretty sure I did something wrong here but couldn't figure it out).
2. Very little static content. All relevant information should be dynamic and fetched from the CMS system.
3. Make use of GraphQL framework for data fetching.
4. Make the site open-source.

Tech Stack

I started searching for a self-hosted CMS to operate as the backend for my personal. I narrowed it down on Sanity.io and GraphCMS. Both the apps are easy to use, but I used GraphCMS as I felt it was easy to integrate with the GraphQL framework.

I decided to go again with the Next.js framework for the site as I wanted to get comfortable with certain alien concepts in React and JS.

In short, Next.JS for the front end, GraphCMS for backend, TailwindCSS for styling and hosting on Vercel.

Building the website

I build all the static content and the foundations of the website using basic HTML and Tailwind CSS.

I configured GraphCMS with all the relevant content required for the site.

Learning to use GraphCMS is pretty intuitive and, their byte-sized tutorials are pretty helpful. I highly recommend spending a few minutes going through the same.

Using GraphQL

Post finalising the content, we need to fetch the data from the CMS into our website.

• I set up the API endpoint URL and Permanent Auth Token(PAT) in the environment variables of the site.
• You can access the endpoint URL and create PAT from the settings panel in GraphCMS. You also need to add the same to Vercel during deployment.
• Using the API playground feature in GraphCMS, I created the necessary GraphQL queries that can fetch the data.
• I then initialised a database connection using a lightweight GraphQL client. Post which, I created separate query components for each of the pages to avoid code clutters.

import { GraphQLClient } from 'graphql-request'

const endpoint: string = process.env.GRAPH_API_ENDPOINT!
const token = process.env.GRAPH_AUTH_TOKEN

export const graphQLClient = new GraphQLClient(endpoint, {
  headers: {
    authorization: `Bearer ${token}`,
  },
})

• Create all the necessary components, call them in the respective pages and fetch data using the GetStaticProps function of Next.JS.

export async function getStaticProps() {
  const home = await GetHome()

  return {
    props: {
      revalidate: 60 * 60,
      home
    },
  };
}

• Store the fetched data in an array and map them to a variable and use it on the page as required. The syntax might vary depending on the framework you use but, the underlying concepts remain the same.

These are pretty basic concepts and, there are multiple in-depth tutorials available on this. I recommend this series.

Creating Dynamic Pages

Using the GetStaticProps function, we fetch all the case studies and blog data and render them onto the website as a list on the respective pages.

We need to create a function that generates dynamic pages once the user clicks the case study title.

I used the GetStaticProps and GetStaticPaths functions in Next.js to dynamically render pages using the 'slug' parameter created on the CMS schema.

export async function getStaticPaths() {
  const data = await GetPostSlug()
  const slugs = data.blogPosts

  return {
    paths: slugs.map((slug) => ({
      params: { slug: slug.slug }
    })),
    fallback: false,
  }
}

export async function getStaticProps({ params }) {
  const post = await GetPost(params.slug)

  return {
    revalidate: 60 * 60,
    props: {
      blog: post.blogPosts[0],
      content: await serialize(post.blogPosts[0].body.markdown)
    },
  }
}

Don't forget to add a revalidate time in all your dynamic pages. Revalidate function helps control how often the website can query the DB to update the data on the page.

Final Steps

Post the data rendering I, worked on styling the website as per the designs I've created.

The initial design that I created for the website is available in the Figma Community. You can view them here.

I had to deviate from the initial design and modify few layouts as I felt the screens were not working with dark mode.

Feel free to download and modify the designs as per your requirements. Do hit me up for any queries or suggestions.

I used the TailwindCSS framework to style the website. The framework was easy to learn and incorporate into the site. I would, however, recommend new coders learn the fundamentals of CSS before using frameworks like Tailwind/Bootstrap. Frameworks may come and go but, the fundamentals remain the same. (more or less 😄)

I also ensured that the website is responsive and gets rendered on all devices without any issues.

I compiled the application, fixed multiple bugs(of course using the help of google) and hosted the application on Vercel.

In the pipeline

I still have a few things I need to update on the site. It's in the works and, hopefully, I'll get to publishing the changes soon.

• Make the site more accessible. The current accessibility is pretty bare. I'm planning to do some experiments in this space.
• Create a table of contents for all the case studies. Those are usually long and, having a ToC helps.
• Create a dark mode toggle. As of now, the site picks up on the system setting and changes accordingly. I want to add a toggle that gives the user an option to switch between the colour themes.

The site is entirely open source and, you can find the repository on my Github. Do have a look and let me know what you all think.

1. Are there any vulnerabilities that I missed?
2. How can I improve the site?

Feel free to drop a message to my email / Twitter / LinkedIn. Happy to connect 😊