Personal Portfolio

My portfolio website. A responsive website built with Next.js and the Sanity v3 CMS embedded Studio.

https://szymondudka.xyz

Main technologies

Stack

• Sanity - the platform for structured content that powers remarkable digital experiences
• Framer Motion - production-ready motion library for React
• Figma - a collaborative web application for interface design
• Next.js Progressbar (NProgress) - a simple Next.js progressbar component using NProgress

Details

• created with the React.js and Next.js frameworks using TypeScript
• server-side rendering and better SEO
• CMS with Sanity v3 CMS embedded Studio
• animations created with Framer Motion
• Semantic HTML tags
• responsive website design without using a CSS framework
• styling with CSS modules
• design created with Figma software

Tutorial and project structure

Inside the project you'll see the following folders and files:

PROJECT_ROOT
├── public              # static assets
├── sanity              # Sanity studio
└── src
    ├── assets          # images and files
    ├── components      # React components
    ├── interfaces      # TypeScript interfaces
    ├── lib             # Sanity Studio files
    ├── pages           # page files
    └── styles          # global and page styles

Download the repository to your local machine and run to download all missing dependencies:

npm install

After that, you can run this project using.

npm run dev

To build your application use:

npm run build

To manage the content of the site, you need to create a new sanity project. See the official documentation: https://www.sanity.io/docs/getting-started

After you have created your Sanity project, create the .env.local file in the main folder and enter the following data:

NEXT_PUBLIC_SANITY_PROJECT_ID = YOUR_SANITY_PROJECT_ID
NEXT_PUBLIC_SANITY_DATASET = YOUR_SANITY_DATASET
NEXT_PUBLIC_SANITY_API_VERSION = YOUR_SANITY_API_VERSION