Portfolio Starter Kit

This portfolio is built with Next.js and a library called Nextra. It allows you to write Markdown and focus on the content of your portfolio. This starter includes:

Automatically configured to handle Markdown/MDX
Generates an RSS feed based on your posts
A beautiful theme included out of the box
Easily categorize posts with tags
Fast, optimized web font loading
Initialized with styled components

Setup

Have node, and npm installed
Install yarn: npm i --global yarn
Clone this Repo: git clone https://github.com/DrewBefore/Nextjs-styled-components-starter.git

Install and run the project

From terminal, cd into the project folder, and run yarn
Then run yarn dev
Open browser to http://localhost:3000/
Navigate to http://localhost:3000/about/
Try adding new styled components, modifying existing components, and customizing this page.

Optional configuration

Update your name in theme.config.js or change the footer.
Update your name and site URL for the RSS feed in scripts/gen-rss.js.
Update the meta tags in pages/_document.js.
Update the posts inside pages/posts/*.md with your own content.

About Next.js Pages

In Next.js, a page is a React Component exported from a .js, .jsx, .ts, or .tsx file in the pages directory. Each page is associated with a route based on its file name.

Example: If you create pages/about.js that exports a React component like below, it will be accessible at /about.

function About() {
  return <div>About</div>
}

export default About

Pages with Dynamic Routes

Next.js supports pages with dynamic routes. For example, if you create a file called pages/posts/[id].js, then it will be accessible at posts/1, posts/2, etc.

To learn more about dynamic routing, check the Dynamic Routing documentation.

Styled components

Learn more about styled components

kate-varinda / Nextjs-styled-components-starter