Design and Build Landing Page - Next.js 13 Blog and Portfolio Ep.5 | Building in Public 2023

Channel:

Cinderframe Live

Subscribers:

495

Published on March 15, 2023 7:55:20 PM ● Video Link: https://www.youtube.com/watch?v=cWAOS9PsGWQ

Category:

Tutorial

Duration: 1:24:48

769 views

17

In this series, I will be building my blog and portfolio app in livestreams. The tech stack I will use is Next.js + Ghost.org. Site is/will be live on afaruk.dev

Public Repo is available here: https://github.com/afgonullu/afarukdev-nextjs

Tech Stack
Next.js 13
Typescript
Tailwind
Husky
Storybook
Jest
ESLint
Prettier

I will be building using industry best practices and with scalability, sustainability and maintainability in mind.

I will try to utilize these features in my coding practice
Semantic Project Organization
Engine Locking
Linting and Formatting
Commit Linting
Tailwind Theme & Font
Typography Scales
Tailwind Linting
Component Templates
Component Styling

Ghost is served from Digital Ocean and Next.js app will be deployed to Vercel.

0:36 Introduction
1:42 Recap of the previous work
4:37 Explanation and Assessment of Design
8:00 Thoughts on how to build the design
9:45 Hero Component
16:40 Break and talk about a library, tailwind variants
17:46 Decision whether granulizing or building complicated components
20:56 Continue building hero section