Making a portfolio website using Jamstack architecture

Shantanu Kaushik — Thu, 28 Sep 2023 12:00:55 +0000

This is the first post in a 3-part series where I show you how to create your own portfolio website using the Jamstack architecture.

In this series, you will learn:

What Jamstack is and why it is a good choice for portfolio websites
How to manage the backend of your portfolio website using Sanity CMS
How to create the frontend of your portfolio website using Gatsby and deploy it to Netlify

By the end of this series, you will have a fully functional portfolio website that is fast, secure, and scalable.

Before we start I would like you to have a look at my portfolio website that I created using Jamstack

shantanukaushik.netlify.app

What is Jamstack??

form https://jamstack.org/

Jamstack is an architectural approach that decouples the web experience layer from data and business logic, improving flexibility, scalability, performance, and maintainability.

There are three components of Jamstack

JavaScript:
- JS is used to handle dynamic functionalities and interactions on the client-side.
APIs:
- APIs serve as a bridge between the frontend and various services or databases to fetch dynamic data and perform server-side operations.
Markup:
- Markup refers to the HTML, CSS, and other structured content that is prebuilt at build time and served as static files.

Why Jamstack??

Improved Performance:
- Jamstack delivers faster load times and a snappier user experience since static files can be served directly from a content delivery network (CDN), reducing server processing time.
Scalability:
- Serving static files through CDNs allows for easy scaling to handle traffic spikes and high volumes of users without worrying about server infrastructure.
Enhanced Security:
- By serving static files and minimizing server-side processing, the attack surface is reduced, enhancing security and protecting against common web vulnerabilities.
Better Developer Experience:
- Developers can use a variety of modern tools, frameworks, and APIs to build and deploy Jamstack sites, resulting in a streamlined and efficient development process.
Cost-Effectiveness:
- Hosting static files on a CDN is typically more cost-effective than managing and scaling traditional server infrastructure.
Flexibility and Maintainability:
- Jamstack allows for easier updates, maintenance, and version control since content is prebuilt and served as static assets, reducing the complexity of the development and deployment process.
SEO Benefits:
- Pre-rendering content at build time helps improve search engine optimization (SEO) by providing search engines with easily crawlable, relevant content.

Jamstack architecture has been widely adopted since 2015 when it was first coined

Source: Google Trends

Creating your own portfolio with Jamstack

To create the website I will use the following:

Frontend: Gatsby
Backend: Sanity CMS
Deployment: Netlify

Stay tuned for the next post, where I will show you how to get started with Sanity CMS and manage the backend of your portfolio website

🚀Unveiling the ChatGPT Advantage: How I Absorbed Core ReactJS Concepts at Lightning Speed in 1 Week

Shantanu Kaushik — Mon, 19 Jun 2023 06:46:56 +0000

ChatGPT has been the talk of the town lately. It took the world by storm raising many questions, will AI take over? Will people lose their jobs? Well, I don't know the answer to all these questions because I cannot predict the future. However, what I can predict is that with the help of AI tools like ChatGPT people can boost their productivity exponentially. Read on to see why I am so sure about this.

🚀 Getting Back to Development After Almost a Year

I used to be pretty confident about my web development skills. But now after almost a year of break from coding, I found myself struggling.

I decided that I need some practice that too in a way which helps me learn as much as possible in as little time as possible. That's when I had the idea of using ChatGPT as my helper in this journey.

🔍 I decided that I will use ChatGPT to learn and revise ReactJS

With this in mind, I decided to learn and revise the core concepts in ReactJS . I wanted a well-guided study plan that would be as per my requirements.

Learn all the important concepts together.
I wanted to take an assignment-based approach to learning.
I wanted to learn new concepts as well.
I wanted to create a mini-project using the concepts I learned.

📚 Unlocking the Power of ChatGPT: Crafting the Perfect Study Plan

With a few prompts, I was able to craft a perfectly well-guided study plan that fit my requirements.

Below you will find the prompts that helped me craft the study plan.

Prompt 1:

I am learning and revising ReactJS, I want you to tell me those 20% things that will teach me 80% of ReactJS

Prompt 2:

Can you prepare me assignment based tasks to learn these things. Also please create these tasks such that it takes one week to do all of them. Make sure the difficulty and complexity increases gradually. Please add things as per your choice but make sure it helps me learn in the best possible way

Prompt 3:

Ok great, now can you map these tasks to a project so that I can make it while learning these concepts

The real juice lies in the responses

Let me tell you the real juice lies in the responses I got. They were concise and to the point. The steps and their sub-steps were thorough and gave me clear directions and goals.

I recommend that you try and use ChatGPT like this and take advantage of this revolutionary tech to grow exponentially.

If you want all the prompts along with the responses you can go through this GitHub Gist.

PS: The repo for the mini-project that I created

Forem: Shantanu Kaushik