Build your Developer Portfolio and Blog from Scratch with Svelte and

GraphCMS – A Complete Guide

A developer portfolio is a great way to showcase your current skill level to potential employers.

This guide will go from hello world to a fully-featured portfolio project to show your current
projects with images and links to source code. You'll also build an accompanying blog where
you can detail what you have learned along the way.

Hi 👋, my name is Scott, and I have been blogging about my journey through web development
since July 2016.

I'm a freeCodeCamp alumnus – I started my freeCodeCamp journey back in 2016 – and have
been a professional developer since March, 2018.

I have written about how to build a Gatsby blog from scratch in the past and want to take you
through doing the same again, this time with Svelte!

This quite an extensive guide (33 sections!) so I've added a table of content's to help you
navigate around the post:

 What we're going to build

 Who's this guide for?
 The stack (what technology we'll be using)
 What is Svelte?
 What is SvelteKit?
 What is Vite?
 What is GraphQL?
 What is GraphCMS?
 How to Set Up GraphCMS
 How to Query Content
 How to Create Your Svelte Project
 How to Show GraphQL Data on the Index Page
 How to Add Markup for the Index Page
 How to Build the First Svelte Component
 How to Style in Svelte
 How to Style with Tailwind and DaisyUI
 How to Style the Projects Component
 How to Use the SvelteKit __layout File
 How to Build the Landing Page with Projects Listed
 How to Use SvelteKit Routing
 How to Build the Blog
 How to Build the Navbar and Footer Components
 How to Add a Theme Switch
 How to Add the About Page
 How to Make a Sitemap
 Robots.txt
 RSS Feed Generation
 Email Signup with Revue
 Continuous Deployment with Vercel
 Google Search Console
 Resources
 What we have accomplished