Web Portofolio
This is a Next.js, Tailwind CSS, and Typescript project bootstrapped using ts-nextjs-tailwind-starter created by Theodorus Clarence.
To use this template you can use one of the three ways:
create-next-app
npx create-next-app -e https://github.com/theodorusclarence/ts-nextjs-tailwind-starter project-name
Then, run the development server:
npm run dev
# or
yarn dev
Open http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying src/pages/index.tsx
. The page auto-updates as you edit the file.
className
strings conditionally.Used as a component for Next.js Link. Will render out Next/Link if the href started with /
or #
, else will render an a
tag with target='_blank'
. Also add a cursor style for outside links
All Components Demo:
Check it out yourself on the deployment.
You can import without using relative path
import Nav from '../../../components/Nav';
simplified to
import Nav from '@/components/Nav';
Configure the default in src/components/Seo.tsx
. If you want to use the default, just add <Seo />
on top of your page.
You can also customize it per page by overriding the title, description as props
<Seo title='Next.js Tailwind Starter' description='your description' />
or if you want to still keep the title like %s | Next.js Tailwind Starter
, you can use templateTitle
props.
Snippets such as React import, useState, useEffect, React Component. View more
3 Husky hooks including:
next lint
and format the code using prettieryarn
every git pull
or after merge to ensure all new packages are installed and ready to goUse Favicon Generator and then overwrite the files in /public/favicon
There are default styles for responsive heading sizes, and .layout
to support a max-width for larger screen size. Find more about it on my blog post
Inter fonts is a variable fonts that is self hosted and preloaded.