├── .prettierrc ├── .prettierignore ├── public ├── code-review-bro.png ├── favicon │ ├── favicon.ico │ ├── favicon-16x16.png │ ├── favicon-32x32.png │ ├── apple-touch-icon.png │ ├── android-chrome-192x192.png │ ├── android-chrome-512x512.png │ └── site.webmanifest ├── robots.txt ├── vercel.svg ├── sitemap.xml └── bighead.svg ├── next-sitemap.js ├── src ├── theme │ ├── colorMode.jsx │ └── index.jsx ├── components │ ├── UI │ │ ├── logo.jsx │ │ ├── hamburgerMenu.jsx │ │ ├── tag.jsx │ │ ├── colorModeToggle.jsx │ │ └── tagColor.jsx │ ├── MDXComponents │ │ ├── styles │ │ │ └── codeBlock.module.css │ │ ├── headings.jsx │ │ ├── index.jsx │ │ ├── common.jsx │ │ └── codeBlock.jsx │ ├── header │ │ ├── index.jsx │ │ └── navbar.jsx │ ├── blogPost.jsx │ └── footer.jsx ├── data │ └── blog │ │ ├── portfolio-boilerplate-nextjs-introducing.mdx │ │ ├── pre-rendering.mdx │ │ ├── ssg-ssr.mdx │ │ ├── markdown-examples.mdx │ │ └── lorem-ipsum.mdx ├── layouts │ └── global.jsx ├── pages │ ├── _app.jsx │ ├── _document.jsx │ ├── blog.jsx │ ├── index.jsx │ └── blog │ │ └── [slug].jsx ├── styles │ └── index.css └── lib │ └── posts.js ├── next-seo.config.js ├── next.config.js ├── jsconfig.json ├── .github └── dependabot.yml ├── .gitignore ├── config.js ├── package.json └── README.md /.prettierrc: -------------------------------------------------------------------------------- 1 | {} 2 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | .next 2 | -------------------------------------------------------------------------------- /public/code-review-bro.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imadatyatalah/nextjs-chakra-ui-portfolio-template/HEAD/public/code-review-bro.png -------------------------------------------------------------------------------- /public/favicon/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imadatyatalah/nextjs-chakra-ui-portfolio-template/HEAD/public/favicon/favicon.ico -------------------------------------------------------------------------------- /next-sitemap.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | siteUrl: "https://portfolio-boilerplate-nextjs.vercel.app", 3 | generateRobotsTxt: true, 4 | }; 5 | -------------------------------------------------------------------------------- /public/favicon/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imadatyatalah/nextjs-chakra-ui-portfolio-template/HEAD/public/favicon/favicon-16x16.png -------------------------------------------------------------------------------- /public/favicon/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imadatyatalah/nextjs-chakra-ui-portfolio-template/HEAD/public/favicon/favicon-32x32.png -------------------------------------------------------------------------------- /public/favicon/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imadatyatalah/nextjs-chakra-ui-portfolio-template/HEAD/public/favicon/apple-touch-icon.png -------------------------------------------------------------------------------- /public/favicon/android-chrome-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imadatyatalah/nextjs-chakra-ui-portfolio-template/HEAD/public/favicon/android-chrome-192x192.png -------------------------------------------------------------------------------- /public/favicon/android-chrome-512x512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imadatyatalah/nextjs-chakra-ui-portfolio-template/HEAD/public/favicon/android-chrome-512x512.png -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # * 2 | User-agent: * 3 | Allow: / 4 | 5 | # Host 6 | Host: https://portfolio-boilerplate-nextjs.vercel.app 7 | 8 | # Sitemaps 9 | Sitemap: https://portfolio-boilerplate-nextjs.vercel.app/sitemap.xml 10 | -------------------------------------------------------------------------------- /src/theme/colorMode.jsx: -------------------------------------------------------------------------------- 1 | import { extendTheme } from "@chakra-ui/react"; 2 | 3 | const config = { 4 | initialColorMode: "light", 5 | useSystemColorMode: false, 6 | }; 7 | 8 | const colorMode = extendTheme({ config }); 9 | 10 | export default colorMode; 11 | -------------------------------------------------------------------------------- /next-seo.config.js: -------------------------------------------------------------------------------- 1 | import { seo } from "config"; 2 | 3 | export default { 4 | titleTemplate: `%s | ${seo.title}`, 5 | openGraph: { 6 | type: "website", 7 | locale: "en_US", 8 | url: seo.canonical, 9 | site_name: seo.title, 10 | }, 11 | }; 12 | -------------------------------------------------------------------------------- /next.config.js: -------------------------------------------------------------------------------- 1 | const withMDX = require("@next/mdx")({ 2 | extension: /\.mdx?$/, 3 | }); 4 | 5 | /** @type {import('next').NextConfig} */ 6 | const nextConfig = { 7 | pageExtensions: ["js", "jsx", "mdx"], 8 | reactStrictMode: true, 9 | swcMinify: true, 10 | }; 11 | 12 | module.exports = withMDX(nextConfig); 13 | -------------------------------------------------------------------------------- /jsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "baseUrl": ".", 4 | "paths": { 5 | "@/components/*": ["src/components/*"], 6 | "@/layouts/*": ["src/layouts/*"], 7 | "@/theme/*": ["src/theme/*"], 8 | "@/lib/*": ["src/lib/*"], 9 | "@/styles/*": ["src/styles/*"] 10 | } 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /src/components/UI/logo.jsx: -------------------------------------------------------------------------------- 1 | import { chakra } from "@chakra-ui/react"; 2 | import NextLink from "next/link"; 3 | 4 | const Logo = () => { 5 | return ( 6 | 7 | 8 | LOGO 9 | 10 | 11 | ); 12 | }; 13 | 14 | export default Logo; 15 | -------------------------------------------------------------------------------- /src/components/MDXComponents/styles/codeBlock.module.css: -------------------------------------------------------------------------------- 1 | .wrapper { 2 | font-size: 14px; 3 | border: 1px solid gray; 4 | overflow: auto; 5 | padding: 0.5em; 6 | } 7 | 8 | .lineNo { 9 | display: table-cell; 10 | text-align: right; 11 | padding-right: 1em; 12 | user-select: none; 13 | opacity: 0.5; 14 | } 15 | 16 | .lineContent { 17 | display: table-cell; 18 | } 19 | -------------------------------------------------------------------------------- /src/theme/index.jsx: -------------------------------------------------------------------------------- 1 | import { extendTheme } from "@chakra-ui/react"; 2 | 3 | const styles = { 4 | global: { 5 | "html, body": { 6 | fontSize: "18px", 7 | }, 8 | }, 9 | }; 10 | 11 | const fonts = { 12 | heading: "Poppins, -apple-system", 13 | body: "Poppins, -apple-system", 14 | }; 15 | 16 | const theme = extendTheme({ 17 | styles, 18 | fonts, 19 | }); 20 | 21 | export default theme; 22 | -------------------------------------------------------------------------------- /src/data/blog/portfolio-boilerplate-nextjs-introducing.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Introducing Next.js Portfolio Templeta Next.js" 3 | publishedAt: "2021-04-26" 4 | modifiedAt: "2021-04-26" 5 | author: "Imad Atyat-Alah" 6 | summary: "Looking for a performant beautiful portfolio template? Checkout the Next.js portfolio template. Created with Next.js and styled with Chakra-UI." 7 | tags: ["nextjs", "javascript"] 8 | --- 9 | 10 | To Be Done Soon. 11 | -------------------------------------------------------------------------------- /.github/dependabot.yml: -------------------------------------------------------------------------------- 1 | version: 2 2 | updates: 3 | # Fetch and update latest `npm` packages 4 | - package-ecosystem: npm 5 | directory: "/" 6 | schedule: 7 | interval: monthly 8 | time: "00:00" 9 | open-pull-requests-limit: 10 10 | reviewers: 11 | - imadatyatalah 12 | assignees: 13 | - imadatyatalah 14 | commit-message: 15 | prefix: fix 16 | prefix-development: chore 17 | include: scope 18 | -------------------------------------------------------------------------------- /src/layouts/global.jsx: -------------------------------------------------------------------------------- 1 | import { Box } from "@chakra-ui/react"; 2 | 3 | import { MAX_WIDTH } from "config"; 4 | import Header from "@/components/header"; 5 | import Footer from "@/components/footer"; 6 | 7 | const Layout = ({ children }) => ( 8 | <> 9 |
10 | 11 | {children} 12 | 13 |