https://github.com/alanpjohn/next-notion-portfolio
Portfolio cum Blog built with NextJS
https://github.com/alanpjohn/next-notion-portfolio
blog nextjs portfolio react tailwindcss typescript
Last synced: 6 months ago
JSON representation
Portfolio cum Blog built with NextJS
- Host: GitHub
- URL: https://github.com/alanpjohn/next-notion-portfolio
- Owner: alanpjohn
- License: mit
- Created: 2021-12-20T06:20:26.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2025-09-09T17:31:08.000Z (11 months ago)
- Last Synced: 2025-09-09T20:04:41.020Z (11 months ago)
- Topics: blog, nextjs, portfolio, react, tailwindcss, typescript
- Language: TypeScript
- Homepage: https://www.alanjohn.dev
- Size: 8.87 MB
- Stars: 21
- Watchers: 1
- Forks: 2
- Open Issues: 2
-
Metadata Files:
- Readme: README.MD
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# next-notion-portfolio
This project was build on a template generated with [superplate](https://github.com/pankod/superplate).
Currently hosted on vercel at www.alanjohn.dev
Documented at
- [Setting up my NextJS repository with the help of Superplate](https://www.alanjohn.dev/blog/Building-a-Developer-Portfolio-Setting-up-my-NextJS-repository-with-the-help-of-Superplate)
- [Creating a NextJS blog in typescript using Notion API](https://www.alanjohn.dev/blog/Building-a-Developer-Portfolio-Creating-a-NextJS-blog-in-typescript-using-Notion-API)
- [Understanding SEO and Web Vitals for your NextJS site and how to improve them?](https://www.alanjohn.dev/blog/Building-a-Developer-Portfolio-Understanding-SEO-and-Web-Vitals-for-your-NextJS-site-and-how-to-improve-them)
## Available Scripts
### Running the development server.
```bash
npm run dev
```
### Building for production.
```bash
npm run build:analyze
```
### Running the production server.
```bash
npm run start
```
### Linting the code
```bash
npm run lint
npm run lint:style
```
## Learn More
To learn more about **superplate**, please check out the [Documentation](https://github.com/pankod/superplate).
### **NextJS**
A React framework for production with all the features you need for production: hybrid static & server rendering, TypeScript support, smart bundling, route pre-fetching, and more.
[Go To Documentation](https://nextjs.org/docs)
### **Notion API**
Allows to connect to Notion databases giving you the power to use Notion as a CMS
[Go To Documentation](https://developers.notion.com/docs)
### **TailwindCSS**
A utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup.
[Go To Documentation](https://tailwindcss.com/docs)
### **SASS/SCSS**
Sass is a stylesheet language that’s compiled to CSS. It allows you to use variables, nested rules, mixins, functions, and more, all with a fully CSS-compatible syntax.
[Go To Documentation](https://sass-lang.com/documentation)
### **Environment Variables**
Use environment variables in your next.js project for server side, client or both.
[Go To Documentation](https://github.com/vercel/next.js/tree/canary/examples/environment-variables)
### **Bundle Analyzer**
Use webpack-bundle-analyzer in your Next.js project. Visualize size of webpack output files with an interactive zoomable treemap.
[Go To Documentation](https://github.com/vercel/next.js/tree/canary/packages/next-bundle-analyzer)
### **ESLint**
A pluggable and configurable linter tool for identifying and reporting on patterns in JavaScript. Maintain your code quality with ease.
[Go To Documentation](https://eslint.org/docs/user-guide/getting-started)
### **Prettier**
An opinionated code formatter; Supports many languages; Integrates with most editors.
[Go To Documentation](https://prettier.io/docs/en/index.html)
### **Stylelint**
[Go To Documentation]()
### **Github Actions**
GitHub Actions makes it easy to automate all your software workflows, now with world-class CI/CD. Build, test, and deploy your code right from GitHub.
[Go To Documentation](https://docs.github.com/en/actions)
## License
MIT