├── .prettierignore
├── .env.example
├── .eslintrc.json
├── .prettierrc
├── next.config.js
├── postcss.config.js
├── public
    └── images
    │   ├── avatar_4.png
    │   ├── dev-portfolio.png
    │   └── Cosmic_OGImage.png
├── src
    ├── app
    │   ├── favicon
    │   │   ├── icon.ico
    │   │   ├── favicon-16x16.png
    │   │   ├── favicon-32x32.png
    │   │   ├── apple-touch-icon.png
    │   │   ├── mstile-150x150.png
    │   │   ├── android-chrome-192x192.png
    │   │   ├── android-chrome-512x512.png
    │   │   ├── browserconfig.xml
    │   │   ├── site.webmanifest
    │   │   └── safari-pinned-tab.svg
    │   ├── api
    │   │   ├── disable-draft
    │   │   │   └── route.js
    │   │   └── draft
    │   │   │   └── route.js
    │   ├── providers.jsx
    │   ├── not-found.jsx
    │   ├── layout.jsx
    │   ├── posts
    │   │   ├── [slug]
    │   │   │   └── page.jsx
    │   │   └── page.jsx
    │   ├── works
    │   │   ├── page.jsx
    │   │   └── [slug]
    │   │   │   └── page.jsx
    │   ├── page.jsx
    │   └── about
    │   │   └── page.jsx
    ├── helpers
    │   └── getMetadata.js
    ├── components
    │   ├── PageContainer.jsx
    │   ├── Date.jsx
    │   ├── DevIcon.jsx
    │   ├── PostTitle.jsx
    │   ├── Layout.jsx
    │   ├── Logo.jsx
    │   ├── CoverImage.jsx
    │   ├── PostPreview.jsx
    │   ├── MorePosts.jsx
    │   ├── markdown-styles.module.css
    │   ├── Loader.jsx
    │   ├── ProductCard.jsx
    │   ├── AlertPreview.jsx
    │   ├── PostBody.jsx
    │   ├── Footer.jsx
    │   ├── ThemeChanger.jsx
    │   ├── MenuItems.jsx
    │   ├── Header.jsx
    │   ├── Socials.jsx
    │   ├── FilteredPosts.jsx
    │   ├── Navbar.jsx
    │   ├── PostHeader.jsx
    │   └── PostList.jsx
    ├── sections
    │   ├── PostsSection.jsx
    │   ├── WorksSection.jsx
    │   ├── ToolboxSection.jsx
    │   ├── AboutMeSection.jsx
    │   ├── ContactSection.jsx
    │   └── IntroSection.jsx
    ├── configs
    │   ├── dev-icons.js
    │   └── icons.jsx
    ├── lib
    │   └── cosmic.js
    └── styles
    │   └── globals.css
├── next-env.d.js
├── jsconfig.json
├── .gitignore
├── package.json
├── tailwind.config.js
└── README.md


/.prettierignore:
--------------------------------------------------------------------------------
1 | .cache
2 | package.json
3 | package-lock.json
4 | public


--------------------------------------------------------------------------------
/.env.example:
--------------------------------------------------------------------------------
1 | COSMIC_BUCKET_SLUG=
2 | COSMIC_READ_KEY=
3 | COSMIC_PREVIEW_SECRET=


--------------------------------------------------------------------------------
/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": ["next/core-web-vitals", "prettier"]
3 | }
4 | 


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 |   "arrowParens": "avoid",
3 |   "semi": false,
4 |   "singleQuote": true
5 | }
6 | 


--------------------------------------------------------------------------------
/next.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   images: {
3 |     domains: ['imgix.cosmicjs.com'],
4 |   },
5 | }
6 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     tailwindcss: {},
4 |     autoprefixer: {},
5 |   },
6 | }
7 | 


--------------------------------------------------------------------------------
/public/images/avatar_4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cosmicjs/nextjs-developer-portfolio/HEAD/public/images/avatar_4.png


--------------------------------------------------------------------------------
/src/app/favicon/icon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cosmicjs/nextjs-developer-portfolio/HEAD/src/app/favicon/icon.ico


--------------------------------------------------------------------------------
/public/images/dev-portfolio.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cosmicjs/nextjs-developer-portfolio/HEAD/public/images/dev-portfolio.png


--------------------------------------------------------------------------------
/public/images/Cosmic_OGImage.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cosmicjs/nextjs-developer-portfolio/HEAD/public/images/Cosmic_OGImage.png


--------------------------------------------------------------------------------
/src/app/favicon/favicon-16x16.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cosmicjs/nextjs-developer-portfolio/HEAD/src/app/favicon/favicon-16x16.png


--------------------------------------------------------------------------------
/src/app/favicon/favicon-32x32.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cosmicjs/nextjs-developer-portfolio/HEAD/src/app/favicon/favicon-32x32.png


--------------------------------------------------------------------------------
/src/app/favicon/apple-touch-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cosmicjs/nextjs-developer-portfolio/HEAD/src/app/favicon/apple-touch-icon.png


--------------------------------------------------------------------------------
/src/app/favicon/mstile-150x150.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cosmicjs/nextjs-developer-portfolio/HEAD/src/app/favicon/mstile-150x150.png


--------------------------------------------------------------------------------
/src/helpers/getMetadata.js:
--------------------------------------------------------------------------------
1 | const getMetadata = (object, fallback = '') => {
2 |   return object ?? fallback
3 | }
4 | export default getMetadata
5 | 


--------------------------------------------------------------------------------
/src/app/favicon/android-chrome-192x192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cosmicjs/nextjs-developer-portfolio/HEAD/src/app/favicon/android-chrome-192x192.png


--------------------------------------------------------------------------------
/src/app/favicon/android-chrome-512x512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cosmicjs/nextjs-developer-portfolio/HEAD/src/app/favicon/android-chrome-512x512.png


--------------------------------------------------------------------------------
/src/components/PageContainer.jsx:
--------------------------------------------------------------------------------
1 | const PageContainer = ({ children }) => {
2 |   return <main className="container mx-auto px-1 sm:px-5">{children}</main>
3 | }
4 | export default PageContainer
5 | 


--------------------------------------------------------------------------------
/src/app/api/disable-draft/route.js:
--------------------------------------------------------------------------------
1 | import { draftMode } from 'next/headers'
2 | import { redirect } from 'next/navigation'
3 | 
4 | export async function GET(request) {
5 |   draftMode().disable()
6 |   redirect('/')
7 | }
8 | 


--------------------------------------------------------------------------------
/next-env.d.js:
--------------------------------------------------------------------------------
1 | /// <reference types="next" />
2 | /// <reference types="next/image-types/global" />
3 | 
4 | // NOTE: This file should not be edited
5 | // see https://nextjs.org/docs/basic-features/typescript for more information.
6 | 


--------------------------------------------------------------------------------
/src/components/Date.jsx:
--------------------------------------------------------------------------------
1 | import { parseISO, format } from 'date-fns'
2 | 
3 | const Date = ({ dateString, formatStyle }) => {
4 |   const date = parseISO(dateString)
5 |   return <time dateTime={dateString}>{format(date, formatStyle)}</time>
6 | }
7 | export default Date
8 | 


--------------------------------------------------------------------------------
/src/components/DevIcon.jsx:
--------------------------------------------------------------------------------
 1 | const DevIcon = ({ iconName, name }) => {
 2 |   return (
 3 |     <li className="flex items-center" key={name}>
 4 |       <i className={iconName}></i>
 5 |       <span className="ml-2">{name}</span>
 6 |     </li>
 7 |   )
 8 | }
 9 | export default DevIcon
10 | 


--------------------------------------------------------------------------------
/src/components/PostTitle.jsx:
--------------------------------------------------------------------------------
1 | const PostTitle = ({ children }) => {
2 |   return (
3 |     <h1 className="text-fore-primary text-3xl sm:text-4xl md:text-5xl font-bold tracking-normal leading-tight md:leading-none mb-12 mt-4">
4 |       {children}
5 |     </h1>
6 |   )
7 | }
8 | export default PostTitle
9 | 


--------------------------------------------------------------------------------
/src/app/favicon/browserconfig.xml:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="utf-8"?>
 2 | <browserconfig>
 3 |     <msapplication>
 4 |         <tile>
 5 |             <square150x150logo src="/mstile-150x150.png"/>
 6 |             <TileColor>#da532c</TileColor>
 7 |         </tile>
 8 |     </msapplication>
 9 | </browserconfig>
10 | 


--------------------------------------------------------------------------------
/jsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "jsx": "react",
 4 |     "baseUrl": "./src",
 5 |     "paths": {
 6 |       "@/components/*": ["components/*"],
 7 |       "@/lib/*": ["lib/*"],
 8 |       "@/configs/*": ["configs/*"],
 9 |       "@/sections/*": ["sections/*"],
10 |       "@/styles/*": ["styles/*"]
11 |     }
12 |   }
13 | }
14 | 


--------------------------------------------------------------------------------
/src/app/providers.jsx:
--------------------------------------------------------------------------------
 1 | 'use client'
 2 | import { ThemeProvider } from 'next-themes'
 3 | 
 4 | export default function Providers({ children }) {
 5 |   return (
 6 |     <ThemeProvider
 7 |       defaultTheme="system"
 8 |       attribute="class"
 9 |       disableTransitionOnChange
10 |     >
11 |       {children}
12 |     </ThemeProvider>
13 |   )
14 | }
15 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # dependencies
 2 | /node_modules
 3 | /.pnp
 4 | .pnp.js
 5 | 
 6 | # testing
 7 | /coverage
 8 | 
 9 | # next.js
10 | /.next/
11 | /out/
12 | 
13 | # production
14 | /build
15 | 
16 | # misc
17 | .DS_Store
18 | *.pem
19 | 
20 | # debug
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 | 
25 | # local env files
26 | .env
27 | .env.local
28 | .env.development.local
29 | .env.test.local
30 | .env.production.local
31 | 
32 | # vercel
33 | .vercel
34 | 


--------------------------------------------------------------------------------
/src/app/favicon/site.webmanifest:
--------------------------------------------------------------------------------
 1 | {
 2 |     "name": "",
 3 |     "short_name": "",
 4 |     "icons": [
 5 |         {
 6 |             "src": "/android-chrome-192x192.png",
 7 |             "sizes": "192x192",
 8 |             "type": "image/png"
 9 |         },
10 |         {
11 |             "src": "/android-chrome-512x512.png",
12 |             "sizes": "512x512",
13 |             "type": "image/png"
14 |         }
15 |     ],
16 |     "theme_color": "#ffffff",
17 |     "background_color": "#ffffff",
18 |     "display": "standalone"
19 | }
20 | 


--------------------------------------------------------------------------------
/src/components/Layout.jsx:
--------------------------------------------------------------------------------
 1 | import Footer from './Footer'
 2 | import { Meta } from './Meta'
 3 | import Header from './Header'
 4 | import AlertPreview from './AlertPreview'
 5 | 
 6 | const Layout = ({ children, preview }) => {
 7 |   return (
 8 |     <>
 9 |       <Meta />
10 |       <Header />
11 |       {preview && <AlertPreview />}
12 |       <main className="flex flex-col min-h-screen container flex-grow max-w-screen-lg px-5 m-auto mt-16 md:px-12 lg:px-20">
13 |         {children}
14 |       </main>
15 |       <Footer />
16 |     </>
17 |   )
18 | }
19 | export default Layout
20 | 


--------------------------------------------------------------------------------
/src/components/Logo.jsx:
--------------------------------------------------------------------------------
 1 | import Link from 'next/link'
 2 | 
 3 | const Logo = () => {
 4 |   return (
 5 |     (<Link
 6 |       href="/"
 7 |       aria-label="Website logo, go back to homepage."
 8 |       className="flex items-center border-white group focus-visible:outline-accent">
 9 | 
10 |       <div className="overflow-hidden transition ease-in-out rounded-full  hover:opacity-60">
11 |         <span className="text-sm">cosmicjs</span>
12 |         <span className="text-sm text-accent">.com</span>
13 |       </div>
14 | 
15 |     </Link>)
16 |   );
17 | }
18 | export default Logo
19 | 


--------------------------------------------------------------------------------
/src/app/not-found.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import Link from 'next/link'
 3 | import { HomeIcon } from '@/configs/icons'
 4 | 
 5 | export default function NotFound() {
 6 |   return (
 7 |     <>
 8 |       <div className="flex flex-col justify-center items-center pt-24">
 9 |         <h1 className="text-3xl mb-6">Page Not Found </h1>
10 |         <Link href="/" className="flex items-center text-accent">
11 |           <span className="mr-2">
12 |             <HomeIcon />
13 |           </span>
14 |           Return Home
15 |         </Link>
16 |       </div>
17 |     </>
18 |   )
19 | }
20 | 


--------------------------------------------------------------------------------
/src/components/CoverImage.jsx:
--------------------------------------------------------------------------------
 1 | import Image from "next/image";
 2 | 
 3 | const CoverImage = ({ title, url }) => {
 4 |   return (
 5 |     <div className="relative w-full my-4 pb-[55%]">
 6 |       <Image
 7 |         src={url}
 8 |         quality={60}
 9 |         alt={`Cover image for ${title}`}
10 |         placeholder="blur"
11 |         blurDataURL={`${url}?auto=format,compress&q=1&blur=500&w=2`}
12 |         priority
13 |         fill
14 |         sizes="100vw"
15 |         style={{
16 |           objectFit: "cover"
17 |         }} />
18 |     </div>
19 |   );
20 | }
21 | export default CoverImage
22 | 


--------------------------------------------------------------------------------
/src/sections/PostsSection.jsx:
--------------------------------------------------------------------------------
 1 | import PostList from '@/components/PostList'
 2 | import { PencilIcon } from '@/configs/icons'
 3 | 
 4 | const WorksSection = ({ posts }) => {
 5 |   return (
 6 |     <section className="mt-24">
 7 |       <span className="flex items-center mb-8">
 8 |         <div className="bg-back-subtle p-2 mr-4 rounded-full">
 9 |           <PencilIcon />
10 |         </div>
11 |         <h4 className="text-xl text-accent font-semibold">Posts</h4>
12 |       </span>
13 |       <PostList allPosts={posts} postType="posts" home={true} />
14 |     </section>
15 |   )
16 | }
17 | 
18 | export default WorksSection
19 | 


--------------------------------------------------------------------------------
/src/components/PostPreview.jsx:
--------------------------------------------------------------------------------
 1 | import CoverImage from './CoverImage'
 2 | import Link from 'next/link'
 3 | 
 4 | const PostPreview = ({ title, excerpt, slug }) => {
 5 |   return (
 6 |     <div>
 7 |       <div className="mb-5">
 8 |         {/* <CoverImage title={title} url={coverImage.imgix_url} /> */}
 9 |       </div>
10 |       <h3 className="text-3xl mb-3 leading-snug">
11 |         <Link href={`/posts/${slug}`} className="hover:underline">
12 |           {title}
13 |         </Link>
14 |       </h3>
15 |       <p className="text-lg leading-relaxed mb-4">{excerpt}</p>
16 |     </div>
17 |   );
18 | }
19 | export default PostPreview
20 | 


--------------------------------------------------------------------------------
/src/sections/WorksSection.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import PostList from '@/components/PostList'
 3 | import { FlaskIcon } from '@/configs/icons'
 4 | 
 5 | const WorksSection = ({ posts }) => {
 6 |   return (
 7 |     <section className="mt-24">
 8 |       <span className="flex items-center mb-8">
 9 |         <div className="bg-back-subtle p-2 mr-4 rounded-full">
10 |           <FlaskIcon />
11 |         </div>
12 |         <h4 className="text-xl text-accent font-semibold">Works</h4>
13 |       </span>
14 |       <PostList allPosts={posts} postType="works" home={true} />
15 |     </section>
16 |   )
17 | }
18 | 
19 | export default WorksSection
20 | 


--------------------------------------------------------------------------------
/src/components/MorePosts.jsx:
--------------------------------------------------------------------------------
 1 | import PostPreview from './PostPreview'
 2 | 
 3 | const MorePosts = ({ posts }) => {
 4 |   return (
 5 |     <section>
 6 |       <h2 className="mb-8 text-xl font-bold tracking-tighter leading-tight">
 7 |         More Stories
 8 |       </h2>
 9 |       <div className="grid grid-cols-1 md:grid-cols-2 md:gap-x-16 lg:gap-x-32 gap-y-20 md:gap-y-32 mb-32">
10 |         {posts.map(post => (
11 |           // <PostPreview
12 |           //   key={post.slug}
13 |           //   title={post.title}
14 |           //   slug={post.slug}
15 |           //   excerpt={post.metadata.excerpt}
16 |           // />
17 |           <></>
18 |         ))}
19 |       </div>
20 |     </section>
21 |   )
22 | }
23 | export default MorePosts
24 | 


--------------------------------------------------------------------------------
/src/components/markdown-styles.module.css:
--------------------------------------------------------------------------------
 1 | .markdown {
 2 |   @apply text-lg leading-relaxed;
 3 | }
 4 | 
 5 | .markdown p,
 6 | .markdown ul,
 7 | .markdown ol,
 8 | .markdown blockquote {
 9 |   @apply my-6 text-fore-secondary text-[16px] md:text-[18px];
10 | }
11 | 
12 | .markdown h2 {
13 |   @apply text-fore-primary text-2xl font-bold mt-12 mb-4 leading-snug;
14 | }
15 | 
16 | .markdown h3 {
17 |   @apply text-fore-primary text-xl font-bold mt-8 mb-4 leading-snug;
18 | }
19 | 
20 | .markdown p a {
21 |   @apply text-accent underline hover:text-opacity-70;
22 | }
23 | 
24 | .markdown ul li {
25 |   @apply list-disc list-inside mb-2 bg-back-subtle p-2 rounded text-[16px] md:text-[18px] font-semibold;
26 | }
27 | 
28 | .markdown ol li {
29 |   @apply list-decimal list-inside mb-2 bg-back-subtle p-2 rounded text-[16px] md:text-[18px] font-semibold;
30 | }
31 | 


--------------------------------------------------------------------------------
/src/sections/ToolboxSection.jsx:
--------------------------------------------------------------------------------
 1 | import { ToolboxIcon } from '@/configs/icons'
 2 | import React from 'react'
 3 | import DevIcon from '@/components/DevIcon'
 4 | import { devIcons } from '@/configs/dev-icons'
 5 | 
 6 | const TechSection = () => {
 7 |   return (
 8 |     <section className="py-24">
 9 |       <span className="flex items-center mb-8">
10 |         <div className="bg-back-subtle p-2 mr-4 rounded-full">
11 |           <ToolboxIcon />
12 |         </div>
13 |         <h4 className="text-xl text-accent font-semibold">Toolbox</h4>
14 |       </span>
15 |       <ul className="grid grid-cols-2 sm:grid-cols-4 gap-6">
16 |         {devIcons.map(icon => (
17 |           <DevIcon name={icon.name} iconName={icon.iconName} key={icon.name} />
18 |         ))}
19 |       </ul>
20 |     </section>
21 |   )
22 | }
23 | 
24 | export default TechSection
25 | 


--------------------------------------------------------------------------------
/src/components/Loader.jsx:
--------------------------------------------------------------------------------
 1 | const Loader = () => {
 2 |   return (
 3 |     <span className="flex items-center text-base font-bold">
 4 |       <svg
 5 |         className="animate-spin mr-2 h-5 w-5 text-fore-primary"
 6 |         xmlns="http://www.w3.org/2000/svg"
 7 |         fill="none"
 8 |         viewBox="0 0 24 24"
 9 |       >
10 |         <circle
11 |           className="opacity-25"
12 |           cx="12"
13 |           cy="12"
14 |           r="10"
15 |           stroke="currentColor"
16 |           strokeWidth="4"
17 |         ></circle>
18 |         <path
19 |           className="opacity-75"
20 |           fill="currentColor"
21 |           d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
22 |         ></path>
23 |       </svg>
24 |       Loading...
25 |     </span>
26 |   )
27 | }
28 | export default Loader
29 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "private": true,
 3 |   "scripts": {
 4 |     "dev": "next",
 5 |     "preinstall": "npx only-allow pnpm",
 6 |     "build": "next build",
 7 |     "start": "next start",
 8 |     "lint": "next lint"
 9 |   },
10 |   "dependencies": {
11 |     "@cosmicjs/sdk": "^1.0.5",
12 |     "@fontsource/public-sans": "^4.5.8",
13 |     "date-fns": "2.28.0",
14 |     "isomorphic-dompurify": "^1.7.0",
15 |     "next": "^13.4.8",
16 |     "next-themes": "^0.2.1",
17 |     "react": "^18.2.0",
18 |     "react-dom": "^18.2.0",
19 |     "react-markdown": "^8.0.3",
20 |     "sharp": "^0.30.6",
21 |     "swr": "^1.3.0"
22 |   },
23 |   "devDependencies": {
24 |     "@tailwindcss/typography": "^0.5.2",
25 |     "autoprefixer": "10.4.2",
26 |     "eslint": "8.14.0",
27 |     "eslint-config-next": "13.4.4",
28 |     "eslint-config-prettier": "^8.5.0",
29 |     "postcss": "8.4.5",
30 |     "prettier": "2.6.2",
31 |     "tailwindcss": "^3.3.2"
32 |   }
33 | }
34 | 


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | const { fontFamily } = require('tailwindcss/defaultTheme')
 2 | 
 3 | module.exports = {
 4 |   mode: 'jit',
 5 |   content: [
 6 |     './src/pages/**/*.{js,jsx}',
 7 |     './src/components/**/*.{js,jsx}',
 8 |     './src/sections/**/*.{js,jsx}',
 9 |     './src/configs/**/*.{js,jsx}',
10 |   ],
11 |   darkMode: 'class',
12 |   theme: {
13 |     extend: {
14 |       colors: {
15 |         accent: 'var(--color-accent)',
16 |         fore: {
17 |           primary: 'var(--color-fore-primary)',
18 |           secondary: 'var(--color-fore-secondary)',
19 |           subtle: 'var(--color-fore-subtle)',
20 |         },
21 |         back: {
22 |           primary: 'var(--color-back-primary)',
23 |           secondary: 'var(--color-back-secondary)',
24 |           subtle: 'var(--color-back-subtle)',
25 |           accent: 'var(--color-back-accent)',
26 |         },
27 |       },
28 |       fontFamily: {
29 |         sans: ['Public Sans', ...fontFamily.sans],
30 |       },
31 |     },
32 |   },
33 | }
34 | 


--------------------------------------------------------------------------------
/src/sections/AboutMeSection.jsx:
--------------------------------------------------------------------------------
 1 | import Link from 'next/link'
 2 | import { ForwardArrowIcon } from '@/configs/icons'
 3 | import { sanitize } from 'isomorphic-dompurify'
 4 | 
 5 | const AboutMeSection = ({ bodyText }) => {
 6 |   return (
 7 |     <section className="mt-24">
 8 |       <h3 className="text-2xl md:text-3xl mb-8 text-fore-primary border-b border-b-slate-200 dark:border-b-gray-600 w-fit">
 9 |         About Me
10 |       </h3>
11 |       <div
12 |         className="text-fore-primary mb-8 space-y-4"
13 |         dangerouslySetInnerHTML={{
14 |           __html: sanitize(bodyText),
15 |         }}
16 |       />
17 |       <Link
18 |         href="/about"
19 |         className="flex items-center text-accent underline underline-offset-2 cursor-pointer hover:opacity-70 transition hover:translate-x-1 w-fit"
20 |       >
21 |         <span className="mr-1">
22 |           <ForwardArrowIcon />
23 |         </span>
24 |         Learn more
25 |       </Link>
26 |     </section>
27 |   )
28 | }
29 | 
30 | export default AboutMeSection
31 | 


--------------------------------------------------------------------------------
/src/components/ProductCard.jsx:
--------------------------------------------------------------------------------
 1 | import Image from "next/image";
 2 | 
 3 | const ProductCard = ({ productName, imgPath, description, productLink }) => {
 4 |   return (
 5 |     <a
 6 |       href={productLink}
 7 |       className="hover:opacity-70 w-auto transition-opacity"
 8 |     >
 9 |       <div className="w-[230px] h-[270px] border rounded-md">
10 |         <div className="flex justify-center items-center bg-back-secondary h-3/5 rounded-t-md relative">
11 |           <Image
12 |             src={imgPath}
13 |             width={130}
14 |             height={130}
15 |             alt={productName}
16 |             style={{
17 |               maxWidth: "100%",
18 |               height: "auto"
19 |             }} />
20 |         </div>
21 |         <div className="p-5 bg-white dark:bg-slate-900 rounded-b-md h-2/5">
22 |           <h4 className="font-bold text-sm">{productName}</h4>
23 |           <p className="text-sm pt-2">{description}</p>
24 |         </div>
25 |       </div>
26 |     </a>
27 |   );
28 | }
29 | 
30 | export default ProductCard
31 | 


--------------------------------------------------------------------------------
/src/sections/ContactSection.jsx:
--------------------------------------------------------------------------------
 1 | import { LetterIcon } from '@/configs/icons'
 2 | import { sanitize } from 'isomorphic-dompurify'
 3 | 
 4 | const ContactSection = ({ heading, bodyText, email }) => {
 5 |   return (
 6 |     <section className="group h-72 flex flex-col items-center justify-center my-32">
 7 |       <h3 className="text-3xl flex items-center gap-x-2 font-bold">
 8 |         <span className="bg-back-subtle p-1 rounded-full">
 9 |           <LetterIcon />
10 |         </span>
11 |         {heading}
12 |       </h3>
13 |       <div
14 |         className="text-fore-subtle my-3 text-center space-y-4"
15 |         dangerouslySetInnerHTML={{
16 |           __html: sanitize(bodyText),
17 |         }}
18 |       />
19 |       <a
20 |         href={`mailto:${email}`}
21 |         className="text-white px-16 py-3.5 mt-8 text-xl bg-gradient-to-r from-accent to-violet-400 rounded hover:from-pink-500 hover:to-yellow-500"
22 |       >
23 |         Say hello
24 |       </a>
25 |     </section>
26 |   )
27 | }
28 | 
29 | export default ContactSection
30 | 


--------------------------------------------------------------------------------
/src/configs/dev-icons.js:
--------------------------------------------------------------------------------
 1 | export const devIcons = [
 2 |   { iconName: 'devicon-html5-plain', name: 'HTML' },
 3 |   { iconName: 'devicon-css3-plain', name: 'CSS' },
 4 |   { iconName: 'devicon-javascript-plain', name: 'JavaScript' },
 5 |   { iconName: 'devicon-typescript-original', name: 'TypeScript' },
 6 |   { iconName: 'devicon-nodejs-plain', name: 'Node.js' },
 7 |   { iconName: 'devicon-react-original', name: 'React.js' },
 8 |   { iconName: 'devicon-nextjs-original', name: 'Next.js' },
 9 |   { iconName: 'devicon-tailwindcss-plain', name: 'Tailwind CSS' },
10 |   { iconName: 'devicon-npm-original-wordmark', name: 'NPM' },
11 |   { iconName: 'devicon-wordpress-plain', name: 'WordPress' },
12 |   { iconName: 'devicon-webpack-plain', name: 'Webpack' },
13 |   { iconName: 'devicon-babel-original', name: 'Babel' },
14 |   { iconName: 'devicon-git-plain', name: 'Git' },
15 |   { iconName: 'devicon-graphql-plain', name: 'GraphQL' },
16 |   { iconName: 'devicon-firebase-plain', name: 'Firebase' },
17 |   { iconName: 'devicon-figma-plain', name: 'Figma' },
18 | ]
19 | 


--------------------------------------------------------------------------------
/src/components/AlertPreview.jsx:
--------------------------------------------------------------------------------
 1 | 'use client'
 2 | import Link from 'next/link'
 3 | import { useState } from 'react'
 4 | import { useRouter } from 'next/navigation'
 5 | 
 6 | const AlertPreview = ({ enabled }) => {
 7 |   const router = useRouter()
 8 |   const [show, setShow] = useState(enabled)
 9 | 
10 |   const handleExit = () => {
11 |     router.refresh()
12 |     setShow(false)
13 |   }
14 |   return (
15 |     show && (
16 |       <div className="absolute w-full z-20 top-28 md:top-20 left-0 text-fore-subtle bg-back-subtle px-8">
17 |         <div className="py-2 text-center text-sm">
18 |           <div>
19 |             You&apos;re in preview mode.{' '}
20 |             <Link
21 |               onClick={() => handleExit()}
22 |               href="/api/disable-draft"
23 |               className="underline hover:text-accent transition-colors cursor-pointer"
24 |             >
25 |               Click here
26 |             </Link>{' '}
27 |             to exit.
28 |           </div>
29 |         </div>
30 |       </div>
31 |     )
32 |   )
33 | }
34 | export default AlertPreview
35 | 


--------------------------------------------------------------------------------
/src/components/PostBody.jsx:
--------------------------------------------------------------------------------
 1 | import markdownStyles from './markdown-styles.module.css'
 2 | import ReactMarkdown from 'react-markdown'
 3 | import Image from "next/image";
 4 | 
 5 | const components = {
 6 |   a: a => {
 7 |     return (
 8 |       <a href={a.href} rel="noopener noreferrer" target="_blank">
 9 |         {a.children}
10 |       </a>
11 |     )
12 |   },
13 |   img: img => {
14 |     return (
15 |       <Image
16 |         src={img.src}
17 |         alt={img.alt}
18 |         width={400}
19 |         height={300}
20 |         quality={50}
21 |         sizes="100vw"
22 |         style={{
23 |           width: "100%",
24 |           height: "auto",
25 |           objectFit: "contain",
26 |           objectPosition: "center"
27 |         }} />
28 |     );
29 |   },
30 | }
31 | 
32 | const PostBody = ({ content }) => {
33 |   return (
34 |     <div className="max-w-2xl mx-auto">
35 |       <ReactMarkdown
36 |         className={markdownStyles['markdown']}
37 |         components={components}
38 |       >
39 |         {content}
40 |       </ReactMarkdown>
41 |     </div>
42 |   )
43 | }
44 | export default PostBody
45 | 


--------------------------------------------------------------------------------
/src/components/Footer.jsx:
--------------------------------------------------------------------------------
 1 | import { CosmicLogo } from '@/configs/icons'
 2 | import MenuItems from './MenuItems'
 3 | 
 4 | const Footer = () => {
 5 |   return (
 6 |     <footer className="flex flex-col items-center md:items-stretch max-w-screen-lg mx-auto gap-y-6 py-12 px-6 md:px-12 lg:px-20">
 7 |       <div className="flex flex-col items-center md:flex-row md:justify-between gap-y-6 md:gap-y-0">
 8 |         <MenuItems />
 9 |       </div>
10 |       <div className="flex flex-col-reverse md:flex-row items-center md:justify-between gap-y-6 md:gap-y-0">
11 |         <span className="text-sm">
12 |           &copy; {new Date().getFullYear()} Developer Portfolio All Rights
13 |           Reserved.
14 |         </span>
15 |         <span className="flex items-center text-sm">
16 |           Powered by
17 |           <a
18 |             href="https://www.cosmicjs.com/"
19 |             target="_blank"
20 |             rel="noreferrer"
21 |             className="ml-2"
22 |           >
23 |             <CosmicLogo />
24 |           </a>
25 |         </span>
26 |       </div>
27 |     </footer>
28 |   )
29 | }
30 | export default Footer
31 | 


--------------------------------------------------------------------------------
/src/components/ThemeChanger.jsx:
--------------------------------------------------------------------------------
 1 | 'use client'
 2 | import { useEffect, useState } from 'react'
 3 | import { useTheme } from 'next-themes'
 4 | 
 5 | const ThemeChanger = ({ styles }) => {
 6 |   const [mounted, setMounted] = useState(false)
 7 |   const { resolvedTheme, setTheme } = useTheme()
 8 | 
 9 |   useEffect(() => setMounted(true), [])
10 | 
11 |   if (!mounted) return null
12 | 
13 |   return (
14 |     <button
15 |       aria-label={
16 |         resolvedTheme === 'dark' ? 'Activate Light Mode' : 'Activate Dark Mode'
17 |       }
18 |       title={
19 |         resolvedTheme === 'dark' ? 'Activate Light Mode' : 'Activate Dark Mode'
20 |       }
21 |       onClick={() => {
22 |         setTheme(resolvedTheme === 'dark' ? 'light' : 'dark')
23 |       }}
24 |       className={styles}
25 |     >
26 |       {resolvedTheme === 'dark' ? (
27 |         <span className="block w-4 h-4 bg-white rounded-full group-hover:-translate-y-1 transition-transform" />
28 |       ) : (
29 |         <span className="block w-4 h-4 bg-black rounded-full group-hover:-translate-y-1 transition-transform" />
30 |       )}
31 |     </button>
32 |   )
33 | }
34 | 
35 | export default ThemeChanger
36 | 


--------------------------------------------------------------------------------
/src/components/MenuItems.jsx:
--------------------------------------------------------------------------------
 1 | 'use client'
 2 | import Link from 'next/link'
 3 | import { usePathname } from 'next/navigation'
 4 | 
 5 | export const routes = [
 6 |   {
 7 |     path: '/',
 8 |     label: 'Home',
 9 |   },
10 |   {
11 |     path: '/posts',
12 |     label: 'Posts',
13 |   },
14 |   {
15 |     path: '/works',
16 |     label: 'Works',
17 |   },
18 |   {
19 |     path: '/about',
20 |     label: 'About',
21 |   },
22 | ]
23 | 
24 | const MenuItems = () => {
25 |   const removeFocus = e => {
26 |     e.currentTarget.blur()
27 |   }
28 |   const currentRoute = usePathname()
29 |   return (
30 |     <>
31 |       <div className="relative items-center justify-start flex-grow hidden space-x-6 md:flex">
32 |         {routes.map(route => (
33 |           <Link
34 |             key={route.path}
35 |             href={route.path}
36 |             className={
37 |               route.path === currentRoute
38 |                 ? 'text-fore-primary transition-colors font-bold tracking-wide'
39 |                 : 'text-fore-subtle transition-colors tracking-wide nav--item'
40 |             }
41 |             onClick={removeFocus}
42 |           >
43 |             {route.label}
44 |           </Link>
45 |         ))}
46 |       </div>
47 |     </>
48 |   )
49 | }
50 | export default MenuItems
51 | 


--------------------------------------------------------------------------------
/src/sections/IntroSection.jsx:
--------------------------------------------------------------------------------
 1 | import Socials from '@/components/Socials'
 2 | import Image from "next/image"
 3 | 
 4 | const IntroSection = ({ heading, subHeading, avatar, socials }) => {
 5 |   return (
 6 |     <section className="w-full flex flex-col-reverse md:flex-row justify-start">
 7 |       <div className="flex-1 flex flex-col gap-y-4">
 8 |         <h1 className="text-3xl md:text-5xl font-bold max-w-2xl text-fore-primary">
 9 |           {heading || 'Developer Portfolio'}
10 |         </h1>
11 |         <h2 className="mb-4 max-w-lg">
12 |           {subHeading || 'This portfolio template is powered by Cosmic.'}
13 |         </h2>
14 |         <Socials
15 |           resume={socials?.metadata.resume.url}
16 |           email={socials?.metadata.email}
17 |           github={socials?.metadata.github}
18 |           linkedin={socials?.metadata.linkedin}
19 |         />
20 |       </div>
21 |       <div className="w-[80px] sm:w-[186px] relative mb-6 sm:mb-0 rounded-full">
22 |         <Image
23 |           src={avatar}
24 |           alt="Developer Avatar"
25 |           height={186}
26 |           width={186}
27 |           quality={60}
28 |           className="rounded-full"
29 |           style={{
30 |             maxWidth: "100%",
31 |             height: "auto"
32 |           }} />
33 |       </div>
34 |     </section>
35 |   );
36 | }
37 | 
38 | export default IntroSection
39 | 


--------------------------------------------------------------------------------
/src/components/Header.jsx:
--------------------------------------------------------------------------------
 1 | import MenuItems from './MenuItems'
 2 | import ThemeChanger from './ThemeChanger'
 3 | import Logo from './Logo'
 4 | import Navbar from './Navbar'
 5 | 
 6 | const Header = () => {
 7 |   return (
 8 |     <>
 9 |       <div className="mt-12 p-2 md:mt-0 text-center border-b bg-white dark:bg-black text-sm">
10 |         The source code for this portfolio is{' '}
11 |         <a
12 |           href="https://github.com/cosmicjs/nextjs-developer-portfolio"
13 |           target="_parent"
14 |           className="underline hover:text-accent transition-colors"
15 |         >
16 |           available on GitHub
17 |         </a>
18 |         .
19 |       </div>
20 |       <header className="md:pt-4 container max-w-screen-lg m-auto md:px-12 lg:px-20">
21 |         <nav
22 |           className="hidden md:flex justify-start items-center h-full mt-auto space-x-6 text-sm lg:justify-start backdrop-filter backdrop-blur-sm  bg-opacity-30"
23 |           aria-label="Main Navigation"
24 |         >
25 |           <Logo />
26 |           <MenuItems />
27 |           <ThemeChanger
28 |             styles={
29 |               'hidden transition-transform ease-in-out focus:outline-none sm:block hover:text-accent group focus-visible:outline-accent'
30 |             }
31 |           />
32 |         </nav>
33 |         <Navbar />
34 |       </header>
35 |     </>
36 |   )
37 | }
38 | export default Header
39 | 


--------------------------------------------------------------------------------
/src/app/api/draft/route.js:
--------------------------------------------------------------------------------
 1 | // route handler with secret and slug
 2 | import { draftMode } from 'next/headers'
 3 | import { redirect } from 'next/navigation'
 4 | import { getPreviewPostBySlug } from '@/lib/cosmic'
 5 | 
 6 | export async function GET(request) {
 7 |   // Parse query string parameters
 8 |   const { searchParams } = new URL(request.url)
 9 |   const secret = searchParams.get('secret')
10 |   const slug = searchParams.get('slug')
11 |   const path = searchParams.get('path')
12 | 
13 |   // Check the secret and next parameters
14 |   // This secret should only be known to this route handler and the CMS
15 |   if (secret !== process.env.COSMIC_PREVIEW_SECRET || !slug) {
16 |     return new Response('Invalid token', { status: 401 })
17 |   }
18 | 
19 |   // Fetch the headless CMS to check if the provided `slug` exists
20 |   // getPostBySlug would implement the required fetching logic to the headless CMS
21 |   const post = await getPreviewPostBySlug(slug)
22 | 
23 |   // If the slug doesn't exist prevent draft mode from being enabled
24 |   if (!post) {
25 |     return new Response('Invalid slug', { status: 401 })
26 |   }
27 | 
28 |   // Enable Draft Mode by setting the cookie
29 |   draftMode().enable()
30 | 
31 |   // Redirect to the path from the fetched post
32 |   // We don't redirect to searchParams.slug as that might lead to open redirect vulnerabilities
33 |   redirect(`/${path}/${post.slug}`)
34 | }
35 | 


--------------------------------------------------------------------------------
/src/components/Socials.jsx:
--------------------------------------------------------------------------------
 1 | import { EmailIcon, GithubIcon, LinkedinIcon, PaperIcon } from '@/configs/icons'
 2 | 
 3 | const Socials = ({ resume, email, github, linkedin }) => {
 4 |   return (
 5 |     <div className="flex items-center">
 6 |       <a
 7 |         href={resume}
 8 |         target="_blank"
 9 |         rel="noreferrer"
10 |         className="flex items-center mr-4 text-fore-primary border-2 border-accent w-fit px-4 py-1 rounded cursor-pointer hover:text-accent transition-colors"
11 |       >
12 |         <span className="mr-2">
13 |           <PaperIcon />
14 |         </span>
15 |         Resume
16 |       </a>
17 |       <span className="flex gap-x-5 ml-2">
18 |         <a
19 |           href={`mailto:${email}`}
20 |           className="group cursor-pointer"
21 |           aria-label="Email"
22 |           title="Email"
23 |         >
24 |           <EmailIcon />
25 |         </a>
26 |         <a
27 |           href={`https://github.com/${github}`}
28 |           className="group cursor-pointer"
29 |           aria-label="Github"
30 |           title="Github"
31 |         >
32 |           <GithubIcon />
33 |         </a>
34 |         <a
35 |           href={`https://www.linkedin.com/in/${linkedin}`}
36 |           className="group cursor-pointer"
37 |           aria-label="Linkedin"
38 |           title="Linkedin"
39 |         >
40 |           <LinkedinIcon />
41 |         </a>
42 |       </span>
43 |     </div>
44 |   )
45 | }
46 | export default Socials
47 | 


--------------------------------------------------------------------------------
/src/components/FilteredPosts.jsx:
--------------------------------------------------------------------------------
 1 | 'use client'
 2 | import { useState } from 'react'
 3 | import PostList from './PostList'
 4 | 
 5 | const FilteredPosts = ({ posts, categories, postType }) => {
 6 |   const [filterCategory, setFilterCategory] = useState('All')
 7 | 
 8 |   const filteredPosts = posts?.filter(
 9 |     post => post.metadata.category.title === filterCategory
10 |   )
11 |   return (
12 |     <>
13 |       <ul className="flex flex-wrap gap-y-2 sm:gap-y-0 gap-x-4 my-4">
14 |         <li
15 |           className={
16 |             'All' === filterCategory
17 |               ? 'cursor-pointer font-bold filter--active transition'
18 |               : 'cursor-pointer text-fore-subtle transition'
19 |           }
20 |           onClick={() => setFilterCategory('All')}
21 |           key={'All'}
22 |         >
23 |           All
24 |         </li>
25 |         {categories.map(category => (
26 |           <li
27 |             className={
28 |               category.title === filterCategory
29 |                 ? 'cursor-pointer font-bold filter--active transition'
30 |                 : 'cursor-pointer text-fore-subtle transition hover:text-accent'
31 |             }
32 |             onClick={() => setFilterCategory(category.title)}
33 |             key={category.title}
34 |           >
35 |             {category.title}
36 |           </li>
37 |         ))}
38 |       </ul>
39 |       <PostList
40 |         allPosts={filterCategory === 'All' ? posts : filteredPosts}
41 |         postType={postType}
42 |         home={false}
43 |       />
44 |     </>
45 |   )
46 | }
47 | 
48 | export default FilteredPosts
49 | 


--------------------------------------------------------------------------------
/src/app/layout.jsx:
--------------------------------------------------------------------------------
 1 | import '@/styles/globals.css'
 2 | import Providers from './providers'
 3 | import Header from '@/components/Header'
 4 | import AlertPreview from '@/components/AlertPreview'
 5 | import Footer from '@/components/Footer'
 6 | import { draftMode } from 'next/headers'
 7 | import { getSiteSettings } from '@/lib/cosmic'
 8 | import getMetadata from 'helpers/getMetadata'
 9 | 
10 | const siteSettings = await getSiteSettings()
11 | const enableRobots = getMetadata(siteSettings?.metadata?.enable_robots, false)
12 | const siteUrl = getMetadata(siteSettings?.metadata?.site_url)
13 | 
14 | export const metadata = {
15 |   metadataBase: new URL(siteUrl),
16 |   icons: {
17 |     icon: '/favicon/icon.ico',
18 |     shortcut: '/favicon/shortcut-icon.png',
19 |     apple: '/favicon/apple-touch-icon.png',
20 |   },
21 |   viewport: {
22 |     width: 'device-width',
23 |     initialScale: 1,
24 |     maximumScale: 1,
25 |   },
26 |   robots: {
27 |     index: enableRobots,
28 |     follow: enableRobots,
29 |     nocache: enableRobots,
30 |     googleBot: {
31 |       index: enableRobots,
32 |       follow: enableRobots,
33 |       noimageindex: enableRobots,
34 |       'max-video-preview': -1,
35 |       'max-image-preview': 'large',
36 |       'max-snippet': -1,
37 |     },
38 |   },
39 | }
40 | 
41 | export default function RootLayout({ children }) {
42 |   const { isEnabled } = draftMode()
43 | 
44 |   return (
45 |     <html lang="en">
46 |       <head>
47 |         <link
48 |           rel="stylesheet"
49 |           href="https://cdn.jsdelivr.net/gh/devicons/devicon@v2.15.1/devicon.min.css"
50 |         />
51 |       </head>
52 | 
53 |       <body>
54 |         <Providers>
55 |           <Header />
56 |           {isEnabled && <AlertPreview enabled={isEnabled} />}
57 |           <main className="flex flex-col min-h-screen container flex-grow max-w-screen-lg px-5 m-auto mt-16 md:px-12 lg:px-20">
58 |             {children}
59 |           </main>
60 |           <Footer />
61 |         </Providers>
62 |       </body>
63 |     </html>
64 |   )
65 | }
66 | 


--------------------------------------------------------------------------------
/src/components/Navbar.jsx:
--------------------------------------------------------------------------------
 1 | 'use client'
 2 | import { useEffect, useState } from 'react'
 3 | import { CloseIcon, MenuIcon } from '@/configs/icons'
 4 | import ThemeChanger from './ThemeChanger'
 5 | import Logo from './Logo'
 6 | import { routes } from './MenuItems'
 7 | import Link from 'next/link'
 8 | import { usePathname } from 'next/navigation'
 9 | 
10 | const Navbar = () => {
11 |   const [navOpen, setNavOpen] = useState(false)
12 |   const currentPage = usePathname()
13 | 
14 |   useEffect(() => {
15 |     const body = document.body
16 | 
17 |     if (navOpen) {
18 |       body.style.setProperty('touch-action', 'none')
19 |     }
20 | 
21 |     if (!navOpen) {
22 |       body.style.removeProperty('touch-action')
23 |     }
24 |   }, [navOpen])
25 | 
26 |   useEffect(() => {
27 |     if (navOpen) {
28 |       setNavOpen(!navOpen)
29 |     }
30 |   }, [currentPage])
31 | 
32 |   return (
33 |     <nav className="fixed top-0 h-12 w-full md:hidden backdrop-filter backdrop-blur-sm bg-opacity-30 z-50">
34 |       <button
35 |         className="absolute top-3 right-2 z-50"
36 |         aria-label={!navOpen ? 'Open Menu' : 'Close Menu'}
37 |         onClick={() => {
38 |           setNavOpen(!navOpen)
39 |         }}
40 |       >
41 |         {!navOpen ? <MenuIcon /> : <CloseIcon />}
42 |       </button>
43 |       {!navOpen ? (
44 |         <div className="absolute top-3 left-2">
45 |           <Logo />
46 |         </div>
47 |       ) : (
48 |         <div className="flex flex-col z-40 h-screen w-full bg-back-primary overflow-hidden px-4 pt-16 mb-12">
49 |           <ul className="flex flex-col gap-y-12">
50 |             {routes.map(route => (
51 |               <li
52 |                 key={route.path}
53 |                 className="border-b border-b-slate-400 border-opacity-30 pb-2"
54 |               >
55 |                 <Link href={route.path} className="text-fore-secondary">
56 |                   {route.label}
57 |                 </Link>
58 |               </li>
59 |             ))}
60 |           </ul>
61 |           <div className="flex justify-between mt-12">
62 |             <ThemeChanger />
63 |           </div>
64 |         </div>
65 |       )}
66 |     </nav>
67 |   )
68 | }
69 | 
70 | export default Navbar
71 | 


--------------------------------------------------------------------------------
/src/components/PostHeader.jsx:
--------------------------------------------------------------------------------
 1 | import Date from './Date'
 2 | import CoverImage from './CoverImage'
 3 | import PostTitle from './PostTitle'
 4 | import { ExternalLinkIcon } from '@/configs/icons'
 5 | import Image from "next/image";
 6 | import avatar from '../../public/images/avatar_4.png'
 7 | 
 8 | const PostHeader = ({ post }) => {
 9 |   return <>
10 |     <PostTitle>{post.title}</PostTitle>
11 |     <div className="flex items-center mb-8">
12 |       <div className="flex items-center relative">
13 |         <Image
14 |           src={avatar}
15 |           width={42}
16 |           height={42}
17 |           alt="Stefan Kudla"
18 |           className="rounded-full"
19 |           placeholder="blur"
20 |           style={{
21 |             maxWidth: "100%",
22 |             height: "auto"
23 |           }} />
24 |         <span className="ml-2 text-sm">
25 |           Stefan Kudla |{' '}
26 |           <Date dateString={post.created_at} formatStyle="LLLL dd, yyyy" /> |{' '}
27 |           {post.metadata.category.title}
28 |         </span>
29 |       </div>
30 |     </div>
31 |     <CoverImage
32 |       title={post.title}
33 |       url={post.metadata.cover_image.imgix_url}
34 |     />
35 |     <div className="flex flex-row justify-between sm:items-center pb-8 border-b">
36 |       <div className="sm:flex items-center gap-x-2">
37 |         {post.metadata.live_url ? (
38 |           <>
39 |             <a
40 |               href={post.metadata.live_url}
41 |               target="_blank"
42 |               rel="noreferrer"
43 |               className="flex items-center text-accent hover:text-gray-500 text-sm md:ml-4 w-fit"
44 |             >
45 |               Live Site
46 |               <span>
47 |                 <ExternalLinkIcon />
48 |               </span>
49 |             </a>
50 | 
51 |             <a
52 |               href={post.metadata.repo_url}
53 |               target="_blank"
54 |               rel="noreferrer"
55 |               className="flex items-center text-accent hover:text-gray-500 text-sm"
56 |             >
57 |               Github Repo
58 |               <span>
59 |                 <ExternalLinkIcon />
60 |               </span>
61 |             </a>
62 |           </>
63 |         ) : undefined}
64 |       </div>
65 |     </div>
66 |   </>;
67 | }
68 | export default PostHeader
69 | 


--------------------------------------------------------------------------------
/src/app/posts/[slug]/page.jsx:
--------------------------------------------------------------------------------
 1 | import PostBody from '@/components/PostBody'
 2 | import PostHeader from '@/components/PostHeader'
 3 | import { getPostAndMorePosts, getPageBySlug } from '@/lib/cosmic'
 4 | import { notFound } from 'next/navigation'
 5 | import { draftMode } from 'next/headers'
 6 | import getMetadata from 'helpers/getMetadata'
 7 | 
 8 | export async function generateMetadata({ params }) {
 9 |   const [getData, socialData, siteSettings] = await Promise.all([
10 |     getPostAndMorePosts(params.slug),
11 |     getPageBySlug('social-config', 'metadata'),
12 |     getPageBySlug('site-settings', 'metadata'),
13 |   ])
14 | 
15 |   const currentPage = 'posts'
16 | 
17 |   const title = getMetadata(getData?.post?.title)
18 |   const description = getMetadata(getData?.post?.metadata?.excerpt)
19 |   const image = getMetadata(
20 |     getData?.post?.metadata?.cover_image?.imgix_url,
21 |     siteSettings?.metadata?.default_meta_image?.imgix_url ?? ''
22 |   )
23 |   const url = getMetadata(
24 |     `${siteSettings?.metadata.site_url}/${currentPage}/${params.slug}`
25 |   )
26 |   const twitterHandle = getMetadata(socialData?.metadata?.twitter)
27 | 
28 |   return {
29 |     title: title,
30 |     description: description,
31 |     image: image,
32 |     openGraph: {
33 |       title: title,
34 |       description: description,
35 |       url: url,
36 |       images: [
37 |         {
38 |           url: image,
39 |           width: 800,
40 |           height: 600,
41 |         },
42 |         {
43 |           url: image,
44 |           width: 1800,
45 |           height: 1600,
46 |         },
47 |       ],
48 |       locale: 'en_US',
49 |       type: 'website',
50 |     },
51 |     twitter: {
52 |       card: 'summary_large_image',
53 |       title: title,
54 |       description: description,
55 |       creator: twitterHandle,
56 |       images: [image],
57 |     },
58 |   }
59 | }
60 | 
61 | const SinglePost = async ({ params }) => {
62 |   const { isEnabled } = draftMode()
63 |   const getData = await getPostAndMorePosts(params.slug, isEnabled)
64 | 
65 |   if (!getData) {
66 |     return notFound()
67 |   }
68 | 
69 |   const post = getData.post
70 | 
71 |   return (
72 |     <>
73 |       <article className="border-b border-back-subtle py-8 mb-8">
74 |         <PostHeader post={post} />
75 |         <PostBody content={post.metadata.content} />
76 |       </article>
77 |     </>
78 |   )
79 | }
80 | export default SinglePost
81 | 


--------------------------------------------------------------------------------
/src/app/works/page.jsx:
--------------------------------------------------------------------------------
 1 | import { getAllPosts, getAllCategories, getPageBySlug } from '@/lib/cosmic'
 2 | import FilteredPosts from '@/components/FilteredPosts'
 3 | import { draftMode } from 'next/headers'
 4 | import getMetadata from 'helpers/getMetadata'
 5 | 
 6 | async function getData() {
 7 |   const { isEnabled } = draftMode()
 8 |   const [allPosts, allWorkCategories] = await Promise.all([
 9 |     getAllPosts(isEnabled, 'works') || [],
10 |     getAllCategories('work-categories') || [],
11 |   ])
12 |   return {
13 |     allPosts,
14 |     allWorkCategories,
15 |   }
16 | }
17 | 
18 | export async function generateMetadata() {
19 |   const [socialData, siteSettings] = await Promise.all([
20 |     getPageBySlug('social-config', 'metadata'),
21 |     getPageBySlug('site-settings', 'metadata'),
22 |   ])
23 | 
24 |   const title = 'Works | Developer Portfolio'
25 |   const description = 'The projects of this developer'
26 |   const image = getMetadata(
27 |     siteSettings?.metadata?.default_meta_image?.imgix_url
28 |   )
29 |   const url = getMetadata(`${siteSettings?.metadata.site_url}/works`)
30 |   const twitterHandle = getMetadata(socialData?.metadata?.twitter)
31 | 
32 |   return {
33 |     title: title,
34 |     description: description,
35 |     image: image,
36 |     openGraph: {
37 |       title: title,
38 |       description: description,
39 |       url: url,
40 |       images: [
41 |         {
42 |           url: image,
43 |           width: 800,
44 |           height: 600,
45 |         },
46 |         {
47 |           url: image,
48 |           width: 1800,
49 |           height: 1600,
50 |         },
51 |       ],
52 |       locale: 'en_US',
53 |       type: 'website',
54 |     },
55 |     twitter: {
56 |       card: 'summary_large_image',
57 |       title: title,
58 |       description: description,
59 |       creator: twitterHandle,
60 |       images: [image],
61 |     },
62 |   }
63 | }
64 | 
65 | const WorksPage = async () => {
66 |   const data = await getData()
67 |   const allPosts = data.allPosts
68 |   const allWorkCategories = data.allWorkCategories
69 | 
70 |   return (
71 |     <>
72 |       <h1 className="text-2xl md:text-3xl text-fore-primary font-bold">
73 |         Works
74 |       </h1>
75 |       <FilteredPosts
76 |         posts={allPosts}
77 |         categories={allWorkCategories}
78 |         postType={'works'}
79 |       />
80 |     </>
81 |   )
82 | }
83 | 
84 | export const revalidate = 60
85 | export default WorksPage
86 | 


--------------------------------------------------------------------------------
/src/components/PostList.jsx:
--------------------------------------------------------------------------------
 1 | import Date from './Date'
 2 | import Link from 'next/link'
 3 | import { ForwardArrowIcon } from '@/configs/icons'
 4 | 
 5 | const PostList = ({ allPosts, postType, home }) => {
 6 |   return <>
 7 |     <ul
 8 |       className={!home ? 'grid grid-cols-1 md:grid-cols-2 gap-8' : undefined}
 9 |     >
10 |       {allPosts.map(post => (
11 |         <li
12 |           className={
13 |             home
14 |               ? 'py-5'
15 |               : 'flex flex-col bg-white dark:bg-gray-800 rounded shadow-sm hover:shadow-md transition-all relative'
16 |           }
17 |           key={post.title}
18 |         >
19 |           <Link
20 |             href={`/${postType}/${post.slug}`}
21 |             className={
22 |               home
23 |                 ? 'group flex flex-col lg:flex-row lg:items-center lg:justify-between px-8 py-5 -my-5 -mx-7 hover:bg-back-subtle transition-colors border-b-2'
24 |                 : 'group flex flex-col justify-start gap-y-6 p-8 h-full'
25 |             }>
26 | 
27 |             <div className="max-w-lg">
28 |               <h3 className="text-xl font-bold mb-1 group-hover:text-accent transition-colors">
29 |                 {post.title}{' '}
30 |                 {post.status === 'draft' && home && (
31 |                   <span className="text-fore-subtle ml-2">
32 |                     &#40;Draft&#41;
33 |                   </span>
34 |                 )}
35 |               </h3>
36 |               <p className="text-fore-subtle mb-3 lg:mb-0 lg:pr-6">
37 |                 {post.metadata.excerpt}
38 |               </p>
39 |             </div>
40 |             {home ? (
41 |               <Date
42 |                 dateString={post.created_at}
43 |                 formatStyle="LLLL, yyyy"
44 |               ></Date>
45 |             ) : (
46 |               <p className="flex items-center text-fore-subtle text-sm">
47 |                 Read more
48 |                 <span className="group hidden group-hover:block ml-2">
49 |                   <ForwardArrowIcon />
50 |                 </span>
51 |                 {post.status === 'draft' && (
52 |                   <span className="absolute right-1 top-1 bg-back-subtle px-3 py-1 rounded text-accent">
53 |                     Draft
54 |                   </span>
55 |                 )}
56 |               </p>
57 |             )}
58 | 
59 |           </Link>
60 |         </li>
61 |       ))}
62 |     </ul>
63 |   </>;
64 | }
65 | export default PostList
66 | 


--------------------------------------------------------------------------------
/src/app/posts/page.jsx:
--------------------------------------------------------------------------------
 1 | import { getAllPosts, getAllCategories, getPageBySlug } from '@/lib/cosmic'
 2 | import FilteredPosts from '@/components/FilteredPosts'
 3 | import { draftMode } from 'next/headers'
 4 | import getMetadata from 'helpers/getMetadata'
 5 | 
 6 | async function getData() {
 7 |   const { isEnabled } = draftMode()
 8 |   const [allPosts, allPostCategories] = await Promise.all([
 9 |     getAllPosts(isEnabled, 'posts') || [],
10 |     getAllCategories('post-categories') || [],
11 |   ])
12 |   return {
13 |     allPosts,
14 |     allPostCategories,
15 |   }
16 | }
17 | 
18 | export async function generateMetadata() {
19 |   const [socialData, siteSettings] = await Promise.all([
20 |     getPageBySlug('social-config', 'metadata'),
21 |     getPageBySlug('site-settings', 'metadata'),
22 |   ])
23 | 
24 |   const title = 'Posts | Developer Portfolio'
25 |   const description = 'The blog posts of this developer'
26 |   const image = getMetadata(
27 |     siteSettings?.metadata?.default_meta_image?.imgix_url
28 |   )
29 |   const url = getMetadata(`${siteSettings?.metadata.site_url}/posts`)
30 |   const twitterHandle = getMetadata(socialData?.metadata?.twitter)
31 | 
32 |   return {
33 |     title: title,
34 |     description: description,
35 |     image: image,
36 |     openGraph: {
37 |       title: title,
38 |       description: description,
39 |       url: url,
40 |       images: [
41 |         {
42 |           url: image,
43 |           width: 800,
44 |           height: 600,
45 |         },
46 |         {
47 |           url: image,
48 |           width: 1800,
49 |           height: 1600,
50 |         },
51 |       ],
52 |       locale: 'en_US',
53 |       type: 'website',
54 |     },
55 |     twitter: {
56 |       card: 'summary_large_image',
57 |       title: title,
58 |       description: description,
59 |       creator: twitterHandle,
60 |       images: [image],
61 |     },
62 |   }
63 | }
64 | 
65 | const PostsPage = async () => {
66 |   const data = await getData()
67 |   const allPosts = data.allPosts
68 |   const allPostCategories = data.allPostCategories
69 | 
70 |   return (
71 |     <>
72 |       <h1 className="text-2xl md:text-3xl text-fore-primary font-bold">
73 |         Posts
74 |       </h1>
75 |       <FilteredPosts
76 |         posts={allPosts}
77 |         categories={allPostCategories}
78 |         postType={'posts'}
79 |       />
80 |     </>
81 |   )
82 | }
83 | 
84 | export const revalidate = 60
85 | export default PostsPage
86 | 


--------------------------------------------------------------------------------
/src/app/works/[slug]/page.jsx:
--------------------------------------------------------------------------------
 1 | import PostBody from '@/components/PostBody'
 2 | import PostHeader from '@/components/PostHeader'
 3 | import { getPostAndMorePosts, getPageBySlug } from '@/lib/cosmic'
 4 | import AlertPreview from '@/components/AlertPreview'
 5 | import { draftMode } from 'next/headers'
 6 | import { notFound } from 'next/navigation'
 7 | import getMetadata from 'helpers/getMetadata'
 8 | 
 9 | export async function generateMetadata({ params }) {
10 |   const [getData, socialData, siteSettings] = await Promise.all([
11 |     getPostAndMorePosts(params.slug),
12 |     getPageBySlug('social-config', 'metadata'),
13 |     getPageBySlug('site-settings', 'metadata'),
14 |   ])
15 |   const currentPage = 'works'
16 | 
17 |   const title = getMetadata(getData?.post?.title)
18 |   const description = getMetadata(getData?.post?.metadata?.excerpt)
19 |   const image = getMetadata(
20 |     getData?.post?.metadata?.cover_image?.imgix_url,
21 |     siteSettings?.metadata?.default_meta_image?.imgix_url ?? ''
22 |   )
23 |   const url = getMetadata(
24 |     `${siteSettings?.metadata.site_url}/${currentPage}/${params.slug}`
25 |   )
26 |   const twitterHandle = getMetadata(socialData?.metadata?.twitter)
27 | 
28 |   return {
29 |     title: title,
30 |     description: description,
31 |     image: image,
32 |     openGraph: {
33 |       title: title,
34 |       description: description,
35 |       url: url,
36 |       images: [
37 |         {
38 |           url: image,
39 |           width: 800,
40 |           height: 600,
41 |         },
42 |         {
43 |           url: image,
44 |           width: 1800,
45 |           height: 1600,
46 |         },
47 |       ],
48 |       locale: 'en_US',
49 |       type: 'website',
50 |     },
51 |     twitter: {
52 |       card: 'summary_large_image',
53 |       title: title,
54 |       description: description,
55 |       creator: twitterHandle,
56 |       images: [image],
57 |     },
58 |   }
59 | }
60 | 
61 | const SingleWork = async ({ params }) => {
62 |   const { isEnabled } = draftMode()
63 |   const getData = await getPostAndMorePosts(params.slug, isEnabled)
64 | 
65 |   if (!getData) {
66 |     return notFound()
67 |   }
68 | 
69 |   const post = getData.post
70 | 
71 |   return (
72 |     <>
73 |       <article className="border-b border-back-subtle py-8 mb-8">
74 |         {post.status === 'draft' ? <AlertPreview preview={true} /> : undefined}
75 |         <PostHeader post={post} />
76 |         <PostBody content={post.metadata.content} />
77 |       </article>
78 |     </>
79 |   )
80 | }
81 | export default SingleWork
82 | 


--------------------------------------------------------------------------------
/src/app/page.jsx:
--------------------------------------------------------------------------------
  1 | import { getAllPosts, getPageBySlug } from '@/lib/cosmic'
  2 | import IntroSection from '@/sections/IntroSection'
  3 | import AboutMeSection from '@/sections/AboutMeSection'
  4 | import ToolboxSection from '@/sections/ToolboxSection'
  5 | import WorksSection from '@/sections/WorksSection'
  6 | import PostsSection from '@/sections/PostsSection'
  7 | import ContactSection from '@/sections/ContactSection'
  8 | import { draftMode } from 'next/headers'
  9 | import getMetadata from 'helpers/getMetadata'
 10 | 
 11 | async function getData() {
 12 |   const { isEnabled } = draftMode()
 13 |   const [allPosts, allWorks, pageData] = await Promise.all([
 14 |     getAllPosts(isEnabled, 'posts', 3) || [],
 15 |     getAllPosts(isEnabled, 'works', 3) || [],
 16 |     getPageBySlug('home-page', 'metadata'),
 17 |   ])
 18 |   return {
 19 |     allPosts,
 20 |     allWorks,
 21 |     pageData,
 22 |   }
 23 | }
 24 | 
 25 | export async function generateMetadata() {
 26 |   const [pageData, socialData, siteSettings] = await Promise.all([
 27 |     getPageBySlug('home-page', 'metadata'),
 28 |     getPageBySlug('social-config', 'metadata'),
 29 |     getPageBySlug('site-settings', 'metadata'),
 30 |   ])
 31 | 
 32 |   const title = getMetadata(pageData?.metadata?.meta_title)
 33 |   const description = getMetadata(pageData?.metadata?.meta_description)
 34 |   const image = getMetadata(
 35 |     pageData?.metadata?.meta_image?.imgix_url,
 36 |     siteSettings?.metadata?.default_meta_image?.imgix_url ?? ''
 37 |   )
 38 |   const url = getMetadata(siteSettings?.metadata?.site_url)
 39 |   const twitterHandle = getMetadata(socialData?.metadata?.twitter)
 40 | 
 41 |   return {
 42 |     title: title,
 43 |     description: description,
 44 |     image: image,
 45 |     openGraph: {
 46 |       title: title,
 47 |       description: description,
 48 |       url: url,
 49 |       images: [
 50 |         {
 51 |           url: image,
 52 |           width: 800,
 53 |           height: 600,
 54 |         },
 55 |         {
 56 |           url: image,
 57 |           width: 1800,
 58 |           height: 1600,
 59 |         },
 60 |       ],
 61 |       locale: 'en_US',
 62 |       type: 'website',
 63 |     },
 64 |     twitter: {
 65 |       card: 'summary_large_image',
 66 |       title: title,
 67 |       description: description,
 68 |       creator: twitterHandle,
 69 |       images: [image],
 70 |     },
 71 |   }
 72 | }
 73 | 
 74 | const HomePage = async () => {
 75 |   const data = await getData()
 76 |   const allPosts = data.allPosts
 77 |   const allWorks = data.allWorks
 78 |   const pageData = data.pageData
 79 | 
 80 |   return (
 81 |     <>
 82 |       <IntroSection
 83 |         avatar={pageData?.metadata.avatar?.imgix_url}
 84 |         heading={pageData?.metadata.heading}
 85 |         subHeading={pageData?.metadata.sub_heading}
 86 |         socials={pageData?.metadata.socials}
 87 |       />
 88 |       <AboutMeSection bodyText={pageData?.metadata.about} />
 89 |       <ToolboxSection />
 90 |       <WorksSection posts={allWorks} />
 91 |       <PostsSection posts={allPosts} />
 92 |       <ContactSection
 93 |         heading={pageData?.metadata.contact_heading}
 94 |         bodyText={pageData?.metadata.contact_text}
 95 |         email={pageData?.metadata.socials.metadata.email}
 96 |       />
 97 |     </>
 98 |   )
 99 | }
100 | export const revalidate = 60
101 | export default HomePage
102 | 


--------------------------------------------------------------------------------
/src/lib/cosmic.js:
--------------------------------------------------------------------------------
  1 | const { createBucketClient } = require('@cosmicjs/sdk')
  2 | 
  3 | const BUCKET_SLUG = process.env.COSMIC_BUCKET_SLUG
  4 | const READ_KEY = process.env.COSMIC_READ_KEY
  5 | 
  6 | const cosmic = createBucketClient({
  7 |   bucketSlug: BUCKET_SLUG,
  8 |   readKey: READ_KEY,
  9 | })
 10 | 
 11 | const is404 = error => /not found/i.test(error.message)
 12 | 
 13 | export async function getPreviewPostBySlug(slug) {
 14 |   try {
 15 |     const data = await cosmic.objects
 16 |       .findOne({
 17 |         slug: slug,
 18 |       })
 19 |       .props('title,slug,metadata')
 20 |       .status('any')
 21 |     return data.object
 22 |   } catch (error) {
 23 |     if (is404(error)) return
 24 |     throw error
 25 |   }
 26 | }
 27 | 
 28 | export async function getAllPosts(preview, postType, postCount) {
 29 |   try {
 30 |     const data = await cosmic.objects
 31 |       .find({
 32 |         type: postType,
 33 |       })
 34 |       .props(
 35 |         'title,slug,metadata.category,metadata.excerpt,metadata.published_date,created_at,status'
 36 |       )
 37 |       .limit(postCount)
 38 |       .sort('-created_at')
 39 |       .status(preview ? 'any' : 'published')
 40 |       .depth(1)
 41 |     return data.objects
 42 |   } catch (error) {
 43 |     if (is404(error)) return
 44 |     throw error
 45 |   }
 46 | }
 47 | 
 48 | export async function getAllPostsWithSlug() {
 49 |   try {
 50 |     const data = await cosmic.objects.find({
 51 |       type: 'posts',
 52 |       props: 'title,slug,metadata,created_at',
 53 |     })
 54 |     return data.objects
 55 |   } catch (error) {
 56 |     if (is404(error)) return
 57 |     throw error
 58 |   }
 59 | }
 60 | 
 61 | export async function getPostAndMorePosts(slug, preview) {
 62 |   try {
 63 |     const data = await cosmic.objects
 64 |       .findOne({
 65 |         slug: slug,
 66 |       })
 67 |       .props('slug,title,metadata,created_at,status')
 68 |       .status(preview ? 'any' : 'published')
 69 | 
 70 |     const moreObjects = await cosmic.objects
 71 |       .find({
 72 |         type: 'posts',
 73 |       })
 74 |       .props('slug,title,metadata,created_at')
 75 |       .status(preview ? 'any' : 'published')
 76 | 
 77 |     const morePosts = moreObjects.objects
 78 |       ?.filter(({ slug: object_slug }) => object_slug !== slug)
 79 |       .slice(0, 2)
 80 | 
 81 |     return {
 82 |       post: data?.object,
 83 |       morePosts,
 84 |     }
 85 |   } catch (error) {
 86 |     if (is404(error)) throw error
 87 |   }
 88 | }
 89 | 
 90 | export async function getAllCategories(category) {
 91 |   try {
 92 |     const data = await cosmic.objects
 93 |       .find({
 94 |         type: category,
 95 |       })
 96 |       .props('title')
 97 |     return data.objects
 98 |   } catch (error) {
 99 |     if (is404(error)) return
100 |     throw error
101 |   }
102 | }
103 | 
104 | export async function getPageBySlug(slug, props) {
105 |   try {
106 |     const data = await cosmic.objects
107 |       .findOne({
108 |         slug: slug,
109 |       })
110 |       .props(props)
111 |       .depth(1)
112 |     return data.object
113 |   } catch (error) {
114 |     if (is404(error)) return
115 |     throw error
116 |   }
117 | }
118 | 
119 | export async function getSiteSettings() {
120 |   try {
121 |     const data = await cosmic.objects
122 |       .findOne({
123 |         type: 'site-settings',
124 |         slug: 'site-settings',
125 |       })
126 |       .props('metadata')
127 |     return data.object
128 |   } catch (error) {
129 |     if (is404(error)) return
130 |     throw error
131 |   }
132 | }
133 | 


--------------------------------------------------------------------------------
/src/app/about/page.jsx:
--------------------------------------------------------------------------------
  1 | import Image from 'next/image'
  2 | import { getPageBySlug } from '@/lib/cosmic'
  3 | import Socials from '@/components/Socials'
  4 | import { sanitize } from 'isomorphic-dompurify'
  5 | import getMetadata from 'helpers/getMetadata'
  6 | 
  7 | async function getData() {
  8 |   const pageData = (await getPageBySlug('about-page', 'content,metadata')) || []
  9 |   return {
 10 |     pageData,
 11 |   }
 12 | }
 13 | 
 14 | export async function generateMetadata() {
 15 |   const [pageData, socialData, siteSettings] = await Promise.all([
 16 |     getPageBySlug('about-page', 'metadata'),
 17 |     getPageBySlug('social-config', 'metadata'),
 18 |     getPageBySlug('site-settings', 'metadata'),
 19 |   ])
 20 | 
 21 |   const title = getMetadata(pageData?.metadata?.meta_title)
 22 |   const description = getMetadata(pageData?.metadata?.meta_description)
 23 |   const image = getMetadata(
 24 |     pageData?.metadata?.meta_image?.imgix_url,
 25 |     siteSettings?.metadata?.default_meta_image?.imgix_url ?? ''
 26 |   )
 27 |   const url = getMetadata(`${siteSettings?.metadata?.site_url}/about`)
 28 |   const twitterHandle = getMetadata(socialData?.metadata?.twitter)
 29 | 
 30 |   return {
 31 |     title: title,
 32 |     description: description,
 33 |     image: image,
 34 |     openGraph: {
 35 |       title: title,
 36 |       description: description,
 37 |       url: url,
 38 |       images: [
 39 |         {
 40 |           url: image,
 41 |           width: 800,
 42 |           height: 600,
 43 |         },
 44 |         {
 45 |           url: image,
 46 |           width: 1800,
 47 |           height: 1600,
 48 |         },
 49 |       ],
 50 |       locale: 'en_US',
 51 |       type: 'website',
 52 |     },
 53 |     twitter: {
 54 |       card: 'summary_large_image',
 55 |       title: title,
 56 |       description: description,
 57 |       creator: twitterHandle,
 58 |       images: [image],
 59 |     },
 60 |   }
 61 | }
 62 | 
 63 | const AboutPage = async () => {
 64 |   const data = await getData()
 65 |   const pageData = data.pageData
 66 | 
 67 |   return (
 68 |     <>
 69 |       <section>
 70 |         <h1 className="text-2xl md:text-3xl mb-12 font-bold">
 71 |           {pageData?.metadata.heading}
 72 |         </h1>
 73 |         <div className="flex flex-col md:flex-row-reverse justify-between">
 74 |           {pageData.metadata.image && (
 75 |             <div className="relative max-w-[200px] md:max-w-sm mb-12">
 76 |               <Image
 77 |                 src={pageData.metadata.image?.imgix_url}
 78 |                 alt="Developer avatar"
 79 |                 quality={60}
 80 |                 width={270}
 81 |                 height={270}
 82 |                 priority
 83 |                 style={{
 84 |                   maxWidth: '100%',
 85 |                   height: 'auto',
 86 |                 }}
 87 |                 className="w-fit"
 88 |               />
 89 |             </div>
 90 |           )}
 91 |           <div className="flex-1 mt-12 md:mt-0 flex flex-col justify-start gap-y-8 pr-12">
 92 |             <div
 93 |               className="text-fore-primary mb-8 space-y-4"
 94 |               dangerouslySetInnerHTML={{
 95 |                 __html: sanitize(pageData?.content),
 96 |               }}
 97 |             />
 98 |             <Socials
 99 |               resume={pageData?.metadata.socials.metadata.resume.url}
100 |               email={pageData?.metadata.socials.metadata.email}
101 |               github={pageData?.metadata.socials.metadata.github}
102 |               linkedin={pageData?.metadata.socials.metadata.linkedin}
103 |             />
104 |           </div>
105 |         </div>
106 |       </section>
107 |     </>
108 |   )
109 | }
110 | 
111 | export const revalidate = 60
112 | export default AboutPage
113 | 


--------------------------------------------------------------------------------
/src/styles/globals.css:
--------------------------------------------------------------------------------
  1 | /* Import the fonts from the local NPM package 'fontsource'. You can copy the import statements to use whichever font types you need. */
  2 | @import '@fontsource/public-sans/300.css';
  3 | @import '@fontsource/public-sans/400.css';
  4 | @import '@fontsource/public-sans/400-italic.css';
  5 | @import '@fontsource/public-sans/600.css';
  6 | @import '@fontsource/public-sans/700.css';
  7 | @import 'tailwindcss/base';
  8 | @import 'tailwindcss/components';
  9 | @import 'tailwindcss/utilities';
 10 | 
 11 | /* Theme Classes for light and dark mode */
 12 | 
 13 | .light {
 14 |   --color-fore-primary: hsla(240, 6%, 10%);
 15 |   --color-fore-secondary: hsla(240, 4%, 16%);
 16 |   --color-fore-subtle: hsla(218, 17%, 35%);
 17 | 
 18 |   --color-back-primary: hsla(240, 5%, 96%);
 19 |   --color-back-secondary: hsla(240, 6%, 93%);
 20 |   --color-back-subtle: hsla(210, 38%, 92%);
 21 | 
 22 |   --color-accent: hsla(221, 100%, 63%);
 23 |   --color-second-accent: hsla(243, 78%, 68%);
 24 |   --color-back-accent: hsla(217, 100%, 81%);
 25 | }
 26 | 
 27 | .dark {
 28 |   --color-fore-primary: hsla(214, 32%, 91%);
 29 |   --color-fore-secondary: hsla(214, 32%, 91%);
 30 |   --color-fore-subtle: hsla(214, 20%, 69%);
 31 | 
 32 |   --color-back-primary: hsla(228, 10%, 11%);
 33 |   --color-back-secondary: hsla(221, 39%, 8%);
 34 |   --color-back-subtle: hsla(221, 39%, 16%);
 35 | 
 36 |   --color-accent: hsla(201, 100%, 63%);
 37 |   --color-second-accent: hsla(243, 78%, 68%);
 38 |   --color-back-accent: hsla(172, 67%, 70%);
 39 | }
 40 | 
 41 | /* End Theme Classes */
 42 | 
 43 | /* Custom Classes */
 44 | 
 45 | .nav--item {
 46 |   position: relative;
 47 | }
 48 | .nav--item::after,
 49 | .nav--item:focus::after {
 50 |   content: '';
 51 |   position: absolute;
 52 |   height: 2px;
 53 |   background: linear-gradient(
 54 |     200deg,
 55 |     var(--color-accent),
 56 |     var(--color-second-accent)
 57 |   );
 58 |   border-radius: 50px;
 59 |   bottom: -1.5px;
 60 |   left: 0;
 61 |   right: 0;
 62 |   transform: scaleX(0);
 63 |   transform-origin: right;
 64 |   transition: transform 150ms ease-in-out;
 65 | }
 66 | 
 67 | .nav--item:hover:after,
 68 | .nav--item:focus::after {
 69 |   transform: scaleX(1);
 70 |   transform-origin: left;
 71 | }
 72 | 
 73 | .filter--active {
 74 |   position: relative;
 75 |   z-index: -1;
 76 | }
 77 | 
 78 | .filter--active::after,
 79 | .filter--active:focus::after {
 80 |   content: '';
 81 |   position: absolute;
 82 |   height: 2px;
 83 |   background: linear-gradient(
 84 |     200deg,
 85 |     var(--color-accent),
 86 |     var(--color-second-accent)
 87 |   );
 88 |   left: 0;
 89 |   right: 0;
 90 |   bottom: 0;
 91 |   transform: scaleX(1);
 92 |   transform-origin: right;
 93 |   transition: transform 150ms ease-in-out;
 94 | }
 95 | 
 96 | .minimal--border {
 97 |   position: relative;
 98 | }
 99 | .minimal--border::before {
100 |   content: '';
101 |   position: absolute;
102 |   background: var(--color-accent);
103 |   top: 50%;
104 |   left: 0;
105 |   width: 6px;
106 |   height: 2px;
107 |   margin: 0 -0.5rem;
108 |   border-radius: 5px;
109 | }
110 | .minimal--border::after {
111 |   content: '';
112 |   position: absolute;
113 |   background: var(--color-accent);
114 |   top: 50%;
115 |   right: 0;
116 |   width: 6px;
117 |   height: 2px;
118 |   margin: 0 -0.5rem;
119 |   border-radius: 5px;
120 | }
121 | 
122 | /* End Custom Classes */
123 | 
124 | @layer base {
125 |   ::-moz-selection {
126 |     background: var(--color-accent);
127 |     color: var(--color-back-primary);
128 |   }
129 | 
130 |   ::selection {
131 |     background: var(--color-accent);
132 |     color: var(--color-back-primary);
133 |   }
134 | 
135 |   html {
136 |     scroll-behavior: smooth;
137 |   }
138 | 
139 |   body {
140 |     background-color: var(--color-back-primary);
141 |     color: var(--color-fore-primary);
142 |     @apply overflow-x-hidden antialiased;
143 |   }
144 | 
145 |   .full-width-container {
146 |     width: 100vw;
147 |     margin-left: calc(-50vw + 50%);
148 |   }
149 | }
150 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Developer Portfolio built with Next.js and Cosmic
 2 | 
 3 | ![Screenshot of the Cosmic Developer Porfolio application template](/public/images/dev-portfolio.png)
 4 | 
 5 | To build this app, we’re going to use the following technologies:
 6 | 
 7 | - [Next.js](https://nextjs.org/docs) - A React framework for production that makes it easy to spin up a full-stack application.
 8 | - [Cosmic](https://www.cosmicjs.com/) - A Headless CMS enables the independence of the data (content) layer and gives us the ability to quickly manage template content.
 9 | - [Tailwind CSS](https://tailwindcss.com/) - A performant utility-first CSS framework that can be composed directly in your markup.
10 | 
11 | ### Links
12 | 
13 | - [Read how the template was built](https://www.cosmicjs.com/blog/creating-a-developer-portfolio-with-nextjs-and-cosmic)
14 | - [Install the template](https://www.cosmicjs.com/marketplace/templates/developer-portfolio)
15 | - [View the live demo](https://nextjs-developer-portfolio-cms.vercel.app/)
16 | 
17 | ## Getting started
18 | 
19 | ### Environment Variables
20 | 
21 | You'll need to create an .env file in the root of the project. Log in to Cosmic and from Bucket Settings > API Access take the following values:
22 | 
23 | ```
24 | //.env
25 | COSMIC_BUCKET_SLUG=your_cosmic_slug
26 | COSMIC_READ_KEY=your_cosmic_read_key
27 | COSMIC_PREVIEW_SECRET=your_preview_secret
28 | ```
29 | 
30 | Install the dependencies by running one of the following commands:
31 | 
32 | ```
33 | pnpm install
34 | # or
35 | yarn
36 | # or
37 | npm install
38 | ```
39 | 
40 | Then run the development server:
41 | 
42 | ```
43 | pnpm dev
44 | # or
45 | yarn dev
46 | # or
47 | npm run dev
48 | ```
49 | 
50 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
51 | 
52 | You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
53 | 
54 | ## Previewing Unpublished Content
55 | 
56 | This template supports [Next.js Draft Mode](https://nextjs.org/docs/app/building-your-application/configuring/draft-mode), allowing you to preview unpublished blog posts and works pages from the Cosmic dashboard.
57 | 
58 | ### Setup in the codebase
59 | 
60 | To enable preview mode, you'll need to set the `COSMIC_PREVIEW_SECRET` environment variable in your `.env` file. This secret can be any random string, though we recommend creating a secure string for security reasons.
61 | 
62 | ### Setup in Cosmic
63 | 
64 | \*Note that this template currently supports Draft Mode for **Posts** and **Works** Object types.
65 | 
66 | In your Cosmic dashboard, go to your **Content** and select **Posts** or **Works** from the list of Object types. Next, select **Object type settings > Additional settings**.
67 | 
68 | Start by copying and pasting this URL into the **Preview link** field:
69 | 
70 | `https://YOUR_LOCAL_OR_PROD_HOST/api/draft?secret=YOUR_SECRET_PREVIEW_KEY&path=OBJECT_TYPE_PATH&slug=[object_slug]`
71 | 
72 | Replace `YOUR_LOCAL_OR_PROD_HOST` with your local host (e.g. `http://localhost:3000`) or production host (e.g. `https://your-app.vercel.app`), and replace `YOUR_SECRET_PREVIEW_KEY` with the secret you set in your `.env` file. Match the `OBJECT_TYPE_PATH` to the Object type you're editing (e.g. `posts` or `works`).
73 | 
74 | From here, you can now preview unpublished content from the Cosmic dashboard by clicking the **Preview** button in the righthand sidebar when editing an individual Object.
75 | 
76 | ## Deploy on Vercel
77 | 
78 | <p>Use the following button to deploy to <a href="https://vercel.com/" rel="noopener noreferrer" target="_blank">Vercel</a>. You will need to add API accesss keys as environment variables. Find these in <em>Bucket Settings &gt; API Access</em>.</p>
79 | <p>
80 | <a href="https://vercel.com/new/clone?env=COSMIC_BUCKET_SLUG%2CCOSMIC_READ_KEY%2CCOSMIC_PREVIEW_SECRET&repository-url=https%3A%2F%2Fgithub.com%2Fcosmicjs%2Fnextjs-developer-portfolio%2Ftree%2Fapi-v3" rel="noopener noreferrer" target="_blank"><img src="https://cdn.cosmicjs.com/d3f0d5e0-c064-11ea-9a05-6f8a16b0b14c-deploy-to-vercel.svg" style="width: 100px;" class="fr-fic fr-dib fr-fil"></a>
81 | </p>
82 | 
83 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
84 | 
85 | Your feedback and contributions are welcome!
86 | 


--------------------------------------------------------------------------------
/src/app/favicon/safari-pinned-tab.svg:
--------------------------------------------------------------------------------
  1 | <?xml version="1.0" standalone="no"?>
  2 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
  3 |  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
  4 | <svg version="1.0" xmlns="http://www.w3.org/2000/svg"
  5 |  width="1947.000000pt" height="1947.000000pt" viewBox="0 0 1947.000000 1947.000000"
  6 |  preserveAspectRatio="xMidYMid meet">
  7 | <metadata>
  8 | Created by potrace 1.14, written by Peter Selinger 2001-2017
  9 | </metadata>
 10 | <g transform="translate(0.000000,1947.000000) scale(0.100000,-0.100000)"
 11 | fill="#000000" stroke="none">
 12 | <path d="M2378 19105 c-2 -2 -55 -5 -118 -9 -63 -3 -126 -8 -140 -11 -14 -2
 13 | -47 -6 -74 -9 -285 -32 -625 -134 -871 -261 -86 -44 -222 -126 -259 -155 -6
 14 | -5 -40 -33 -76 -61 -67 -53 -237 -221 -278 -274 -119 -156 -167 -233 -242
 15 | -389 -106 -220 -189 -503 -215 -731 -3 -27 -8 -61 -10 -75 -13 -75 -20 -210
 16 | -20 -420 0 -280 12 -446 50 -688 4 -23 8 -52 10 -65 3 -20 18 -111 30 -182 25
 17 | -139 95 -430 151 -629 112 -398 337 -1013 495 -1354 16 -35 29 -65 29 -67 0
 18 | -2 21 -47 46 -102 25 -54 60 -127 76 -163 74 -160 365 -732 388 -765 4 -5 27
 19 | -46 50 -90 24 -44 52 -95 63 -115 11 -19 48 -85 83 -146 34 -61 73 -129 86
 20 | -150 14 -22 36 -59 50 -84 14 -25 67 -114 119 -198 52 -84 101 -165 110 -180
 21 | 54 -91 233 -369 362 -562 144 -216 436 -640 441 -640 1 0 35 42 76 93 41 50
 22 | 77 94 80 97 4 4 88 105 171 205 22 26 96 114 123 145 11 14 97 117 191 230 93
 23 | 113 172 207 175 210 3 3 20 24 39 48 l33 42 -118 213 c-118 211 -330 625 -394
 24 | 767 -18 41 -46 102 -60 135 -15 33 -44 98 -64 145 -21 47 -41 94 -46 105 -59
 25 | 132 -190 493 -257 705 -91 292 -184 708 -208 935 -4 33 -8 70 -10 83 -17 110
 26 | -24 485 -11 588 23 175 29 219 47 303 74 341 250 659 467 841 29 25 58 50 65
 27 | 56 21 18 149 100 208 132 155 85 427 173 609 197 30 4 64 9 75 11 128 25 662
 28 | 25 795 -1 10 -2 46 -6 79 -10 33 -3 70 -8 83 -10 13 -3 39 -7 58 -10 67 -8
 29 | 386 -74 490 -100 533 -134 1148 -363 1730 -642 287 -138 599 -299 745 -383 17
 30 | -10 55 -31 85 -47 69 -38 105 -58 203 -117 43 -25 81 -46 83 -46 3 0 17 -8 32
 31 | -19 15 -10 70 -44 122 -75 52 -32 104 -63 115 -69 217 -132 648 -411 894 -581
 32 | 160 -110 504 -357 556 -399 26 -21 270 -204 296 -222 15 -11 54 -41 86 -66
 33 | l59 -47 28 82 c121 344 363 628 691 810 63 35 62 34 43 49 -9 6 -126 100 -259
 34 | 207 -134 108 -264 211 -289 230 -25 19 -47 37 -50 40 -32 34 -865 652 -1070
 35 | 793 -14 9 -83 58 -155 108 -135 94 -570 386 -710 475 -44 28 -118 76 -165 106
 36 | -392 251 -967 586 -1425 830 -116 62 -721 363 -839 418 -499 230 -1053 450
 37 | -1481 587 -60 19 -130 42 -155 50 -93 31 -472 137 -529 148 -9 2 -43 10 -76
 38 | 19 -33 8 -76 18 -95 21 -19 3 -51 10 -70 15 -19 5 -48 12 -65 15 -31 5 -63 11
 39 | -105 20 -41 8 -312 53 -357 59 -24 4 -60 8 -80 11 -21 2 -56 6 -78 9 -22 3
 40 | -69 8 -105 11 -36 3 -92 8 -125 11 -58 6 -512 13 -517 9z"/>
 41 | <path d="M16868 19085 c-2 -1 -57 -5 -123 -9 -147 -7 -218 -13 -315 -26 -41
 42 | -5 -97 -12 -125 -15 -27 -3 -75 -10 -105 -16 -30 -5 -73 -12 -95 -15 -22 -3
 43 | -116 -21 -210 -40 -93 -19 -181 -37 -195 -40 -14 -3 -41 -9 -60 -14 -19 -5
 44 | -46 -11 -60 -14 -101 -19 -516 -137 -760 -217 -169 -56 -567 -197 -615 -219
 45 | -11 -5 -78 -32 -149 -60 -131 -51 -358 -146 -431 -180 -22 -10 -90 -41 -152
 46 | -68 -61 -28 -149 -67 -195 -88 -102 -47 -719 -356 -843 -422 -49 -27 -130 -70
 47 | -180 -97 -49 -26 -94 -51 -100 -55 -5 -4 -46 -27 -90 -50 -194 -105 -738 -427
 48 | -982 -581 -425 -269 -516 -330 -507 -338 5 -4 59 -43 119 -86 199 -143 529
 49 | -397 852 -657 68 -54 127 -98 131 -98 5 0 46 21 93 46 241 131 651 328 949
 50 | 456 235 101 649 262 730 284 8 2 94 29 190 59 164 52 333 100 390 111 14 3 39
 51 | 9 55 14 37 11 249 58 290 64 17 2 53 9 80 14 28 6 70 13 95 17 25 3 56 8 70
 52 | 10 14 3 50 7 80 10 30 3 62 7 70 10 98 26 700 27 846 1 11 -2 42 -7 69 -10 83
 53 | -12 292 -65 378 -97 481 -177 796 -517 936 -1010 16 -57 33 -124 37 -149 4
 54 | -25 8 -47 9 -50 3 -9 16 -95 20 -130 22 -173 22 -496 -1 -670 -17 -133 -24
 55 | -188 -28 -205 -2 -11 -7 -42 -10 -69 -4 -27 -9 -52 -11 -55 -1 -3 -6 -24 -9
 56 | -46 -27 -171 -178 -719 -235 -850 -5 -11 -24 -60 -41 -110 -68 -187 -150 -387
 57 | -272 -655 -91 -200 -323 -645 -485 -930 -132 -232 -556 -903 -635 -1005 -4 -5
 58 | -78 -109 -164 -230 -189 -266 -467 -635 -637 -845 -94 -116 -250 -306 -319
 59 | -388 -49 -57 -88 -107 -88 -112 0 -5 15 -12 32 -16 108 -23 356 -155 473 -251
 60 | 144 -119 289 -290 372 -441 l40 -72 64 72 c35 40 66 75 69 78 4 3 77 88 164
 61 | 190 87 102 170 199 185 215 14 17 42 50 62 75 20 25 45 55 55 67 25 28 28 32
 62 | 180 218 165 202 402 503 524 665 52 69 97 127 100 130 3 3 17 21 30 40 14 19
 63 | 28 40 32 45 5 6 16 20 26 32 9 12 25 32 34 45 9 13 39 53 67 90 56 75 283 393
 64 | 385 538 135 194 457 682 595 905 79 127 151 241 160 255 8 14 21 34 27 46 24
 65 | 45 128 221 145 246 11 15 19 29 19 32 0 2 23 44 51 93 176 304 444 817 574
 66 | 1098 139 301 272 614 360 845 26 69 51 134 55 145 53 122 247 748 280 900 4
 67 | 22 11 49 13 60 30 123 47 196 51 227 3 21 10 57 15 80 13 55 17 80 36 208 9
 68 | 58 17 116 19 130 4 21 9 70 22 190 22 204 21 693 -1 780 -2 8 -6 40 -10 70
 69 | -16 154 -59 342 -120 525 -69 209 -204 449 -352 627 -73 88 -216 225 -283 271
 70 | -25 17 -67 48 -95 69 -27 21 -54 38 -59 38 -5 0 -17 6 -25 14 -27 25 -251 133
 71 | -351 170 -216 80 -444 132 -705 161 -27 3 -70 8 -95 11 -50 5 -477 14 -482 9z"/>
 72 | <path d="M7794 14484 c-76 -65 -141 -120 -144 -123 -3 -4 -21 -19 -40 -35 -49
 73 | -40 -337 -294 -539 -475 -40 -36 -80 -65 -89 -63 -8 2 -54 16 -102 32 -47 15
 74 | -102 31 -121 35 -280 53 -502 54 -734 4 -564 -124 -1007 -523 -1174 -1059 -44
 75 | -140 -56 -228 -56 -410 0 -190 4 -225 36 -357 137 -563 603 -1004 1199 -1134
 76 | 130 -28 192 -34 355 -34 161 1 216 6 346 35 552 120 992 503 1164 1012 38 116
 77 | 42 130 69 308 7 41 8 246 2 305 -12 116 -50 277 -90 375 l-24 59 161 138 c89
 78 | 76 167 143 172 149 6 5 41 37 80 70 38 32 75 64 81 70 6 5 31 26 54 45 23 18
 79 | 50 41 59 49 9 9 54 47 101 85 47 39 94 77 105 87 57 47 206 166 235 188 82 61
 80 | 86 47 -46 140 -65 46 -146 102 -179 125 -104 73 -734 495 -738 495 -2 0 -66
 81 | -52 -143 -116z"/>
 82 | <path d="M12325 14483 c-34 -4 -188 -30 -224 -37 -73 -16 -239 -74 -326 -115
 83 | -442 -209 -744 -589 -845 -1061 -26 -121 -35 -368 -19 -485 82 -576 499 -1062
 84 | 1072 -1250 56 -18 116 -35 132 -38 17 -3 68 -13 115 -21 231 -42 558 -18 784
 85 | 59 l71 24 79 -82 c240 -249 398 -419 546 -587 120 -138 128 -147 205 -240 38
 86 | -47 84 -102 101 -122 l33 -37 77 102 c43 56 81 104 84 107 8 8 171 227 241
 87 | 325 72 100 207 303 233 350 9 17 28 49 42 73 l25 43 -33 38 c-18 20 -55 63
 88 | -83 96 -27 32 -63 72 -80 90 -16 17 -45 49 -64 70 -30 35 -164 181 -274 299
 89 | -22 22 -88 92 -148 154 -60 62 -109 117 -109 124 0 6 12 41 26 76 25 63 66
 90 | 210 78 282 25 150 23 425 -4 521 -5 18 -12 50 -15 71 -11 70 -55 191 -114 313
 91 | -163 331 -433 584 -786 735 -62 27 -213 77 -252 84 -15 2 -55 10 -88 16 -33 7
 92 | -71 14 -85 16 -34 6 -358 12 -395 7z"/>
 93 | <path d="M4433 11136 c-4 -8 -34 -42 -65 -77 -31 -35 -66 -75 -78 -89 -12 -14
 94 | -36 -41 -53 -60 -39 -42 -198 -226 -247 -285 -19 -23 -115 -138 -214 -256
 95 | -224 -269 -198 -237 -291 -354 -44 -55 -82 -102 -85 -105 -3 -3 -30 -36 -60
 96 | -75 -30 -38 -60 -77 -67 -85 -66 -82 -236 -304 -379 -495 -491 -653 -969
 97 | -1366 -1332 -1985 -46 -80 -93 -157 -103 -172 -11 -15 -19 -29 -19 -31 0 -2
 98 | -34 -64 -75 -136 -71 -125 -105 -188 -232 -426 -73 -137 -237 -471 -316 -640
 99 | -58 -126 -75 -164 -122 -270 -11 -25 -54 -126 -85 -200 -4 -11 -15 -36 -23
100 | -55 -8 -19 -40 -102 -72 -185 -31 -82 -61 -159 -66 -170 -21 -47 -138 -402
101 | -193 -585 -56 -188 -136 -518 -166 -685 -5 -33 -12 -71 -15 -85 -51 -292 -70
102 | -510 -69 -820 0 -203 3 -257 20 -410 5 -43 18 -125 29 -180 3 -14 8 -41 11
103 | -60 24 -136 111 -393 184 -540 107 -216 198 -341 384 -525 227 -224 494 -383
104 | 821 -489 82 -26 184 -54 220 -61 11 -2 65 -12 120 -23 90 -18 135 -25 230 -37
105 | 207 -26 767 -26 915 0 14 3 52 7 85 9 99 8 210 23 305 41 14 2 41 7 60 9 19 3
106 | 49 8 65 11 17 3 75 14 130 25 55 11 152 31 215 45 63 15 126 28 140 31 14 3
107 | 34 8 45 11 11 4 25 8 30 9 25 5 185 47 225 59 25 7 77 22 115 34 789 229 1784
108 | 642 2630 1091 218 115 374 200 428 232 26 15 50 28 52 28 8 0 471 268 645 373
109 | 91 54 179 107 195 117 123 71 625 393 625 400 0 3 -35 30 -78 60 -76 54 -327
110 | 238 -360 265 -9 7 -125 98 -257 202 -132 103 -247 193 -255 200 -155 127 -149
111 | 123 -178 110 -15 -6 -58 -29 -97 -51 -243 -134 -855 -420 -1149 -538 -240 -95
112 | -649 -240 -761 -268 -16 -5 -70 -20 -120 -35 -124 -37 -287 -78 -430 -109
113 | -102 -21 -171 -34 -335 -61 -14 -2 -45 -7 -70 -10 -109 -13 -136 -17 -159 -20
114 | -53 -9 -273 -19 -406 -18 -222 0 -328 10 -545 50 -108 19 -302 80 -397 124
115 | -34 16 -64 29 -67 29 -2 0 -37 19 -78 42 -239 135 -449 355 -568 595 -76 154
116 | -145 365 -163 498 -3 22 -11 74 -18 115 -14 84 -18 511 -7 630 11 102 25 216
117 | 33 265 10 53 25 139 31 170 10 55 45 209 66 290 11 44 21 85 22 90 4 16 36
118 | 123 63 210 88 282 233 663 348 910 18 39 52 113 76 165 53 118 228 463 299
119 | 590 29 52 66 120 83 150 295 540 840 1356 1298 1943 22 29 51 66 64 82 64 83
120 | 229 291 235 295 3 3 30 36 60 75 30 38 66 81 79 95 13 14 35 41 50 60 14 19
121 | 29 37 32 40 3 3 29 33 57 67 l52 62 -68 22 c-89 29 -222 91 -278 128 -25 17
122 | -47 31 -50 31 -15 0 -164 121 -233 190 -108 108 -253 303 -284 383 -8 21 -23
123 | 22 -34 3z"/>
124 | <path d="M5365 8893 c-49 -64 -107 -139 -128 -167 -21 -28 -45 -59 -52 -68
125 | -34 -41 -244 -339 -284 -403 -24 -39 -54 -86 -67 -105 -12 -19 -36 -59 -52
126 | -89 l-30 -54 46 -50 c91 -98 118 -126 212 -228 52 -57 127 -137 165 -179 39
127 | -41 100 -106 135 -144 94 -100 136 -144 193 -203 l50 -52 -31 -83 c-101 -273
128 | -122 -520 -67 -818 25 -137 113 -349 202 -488 120 -189 297 -364 491 -486 86
129 | -54 313 -159 372 -171 8 -2 42 -11 75 -19 33 -9 76 -19 95 -22 19 -3 37 -7 41
130 | -9 28 -18 367 -26 489 -13 166 19 350 74 515 153 307 148 548 378 707 676 30
131 | 56 96 212 102 244 2 6 8 30 15 55 7 25 15 56 17 70 3 14 6 30 9 37 19 54 27
132 | 354 13 458 -29 214 -113 438 -231 617 -75 114 -95 138 -218 259 -233 230 -535
133 | 381 -869 435 -155 25 -410 22 -565 -6 -70 -14 -201 -47 -230 -60 -78 -33 -79
134 | -33 -140 33 -32 34 -108 114 -169 178 -61 64 -149 158 -196 210 -47 51 -110
135 | 121 -140 154 -30 33 -77 87 -105 120 -27 33 -66 77 -85 99 -53 59 -53 58 -90
136 | 106 -19 25 -44 56 -57 70 -12 14 -28 33 -35 42 -12 15 -23 4 -103 -99z"/>
137 | <path d="M16735 8907 c-57 -72 -287 -350 -295 -357 -3 -3 -107 -126 -230 -275
138 | -123 -148 -243 -293 -267 -322 l-44 -52 37 -68 c20 -37 40 -72 44 -78 4 -5 22
139 | -37 40 -70 18 -33 43 -78 55 -100 413 -750 742 -1566 883 -2190 32 -141 59
140 | -281 67 -355 3 -25 10 -72 15 -105 37 -249 33 -648 -11 -870 -5 -27 -11 -60
141 | -14 -73 -34 -182 -132 -417 -243 -587 -108 -165 -288 -338 -452 -433 -30 -18
142 | -62 -37 -70 -42 -104 -61 -361 -153 -490 -175 -19 -3 -42 -8 -50 -10 -36 -10
143 | -109 -21 -200 -30 -36 -4 -78 -9 -95 -11 -33 -6 -377 -6 -465 0 -62 3 -192 16
144 | -230 21 -14 2 -61 9 -105 15 -44 6 -93 13 -110 15 -45 8 -187 34 -210 39 -11
145 | 3 -53 12 -93 20 -216 47 -587 153 -832 240 -161 56 -439 161 -507 191 -21 9
146 | -47 21 -58 25 -539 225 -1236 580 -1755 894 -47 28 -93 56 -102 61 -50 28
147 | -170 103 -221 137 -32 21 -60 38 -63 38 -24 0 -951 627 -1136 769 -26 20 -63
148 | 47 -83 61 -20 14 -51 36 -69 50 -18 14 -46 35 -62 47 -16 12 -70 52 -120 90
149 | -160 121 -154 117 -154 93 0 -51 -127 -325 -182 -395 -5 -5 -30 -39 -57 -75
150 | -118 -157 -314 -325 -478 -410 -24 -12 -43 -26 -43 -30 0 -11 615 -500 840
151 | -668 25 -18 97 -72 161 -120 157 -118 464 -340 644 -467 47 -33 113 -80 148
152 | -104 34 -25 197 -135 362 -246 696 -466 1283 -820 2015 -1215 378 -204 1144
153 | -565 1485 -700 44 -17 94 -38 110 -45 113 -53 663 -248 940 -333 195 -61 511
154 | -146 585 -158 19 -3 38 -8 42 -11 8 -4 25 -8 82 -19 16 -2 32 -6 35 -8 3 -2
155 | 23 -7 44 -10 21 -3 71 -13 110 -21 88 -17 191 -36 232 -41 17 -2 41 -6 55 -9
156 | 14 -3 45 -7 70 -10 25 -3 56 -8 70 -10 14 -2 54 -7 90 -10 35 -3 82 -8 105
157 | -10 256 -27 743 -27 895 -1 14 3 50 7 81 11 31 3 67 8 80 11 13 2 40 7 59 10
158 | 115 18 337 76 440 115 317 119 542 259 745 463 181 182 328 408 426 653 37 94
159 | 97 276 105 318 3 17 11 55 19 85 13 54 29 136 40 215 4 22 8 50 10 63 28 168
160 | 27 700 0 942 -3 19 -7 55 -10 80 -2 25 -7 62 -10 82 -3 21 -8 51 -10 68 -2 17
161 | -6 43 -9 58 -3 15 -7 43 -10 62 -13 87 -70 356 -112 523 -148 592 -398 1270
162 | -709 1922 -78 164 -257 522 -290 580 -12 22 -40 74 -62 115 -114 213 -290 524
163 | -392 692 -9 14 -29 48 -45 75 -86 143 -315 507 -386 613 -6 8 -39 58 -73 110
164 | -147 222 -467 684 -495 712 -4 4 -29 -21 -57 -55z"/>
165 | <path d="M13008 8655 c-2 -1 -34 -5 -73 -8 -365 -32 -747 -214 -1001 -479
166 | -227 -237 -364 -515 -411 -834 -9 -67 -10 -327 0 -389 15 -96 18 -110 33 -165
167 | 8 -30 19 -68 24 -85 4 -16 16 -51 26 -77 10 -26 16 -49 14 -51 -3 -2 -55 -46
168 | -115 -98 -61 -52 -133 -112 -159 -134 -27 -22 -54 -45 -60 -50 -8 -8 -487
169 | -400 -541 -443 -145 -115 -241 -195 -243 -201 -3 -8 12 -19 133 -103 307 -212
170 | 907 -598 930 -598 7 0 190 143 205 159 3 3 28 24 55 46 28 22 61 49 75 61 270
171 | 231 412 355 543 474 21 19 44 38 51 42 7 4 55 -7 107 -23 52 -17 103 -33 114
172 | -35 71 -14 125 -24 155 -30 74 -13 375 -12 465 2 260 39 491 128 695 268 95
173 | 64 125 90 231 196 320 320 471 748 425 1200 -59 568 -480 1077 -1051 1268 -97
174 | 32 -245 66 -336 77 -55 7 -286 15 -291 10z"/>
175 | </g>
176 | </svg>
177 | 


--------------------------------------------------------------------------------
/src/configs/icons.jsx:
--------------------------------------------------------------------------------
  1 | // Aesthetic Icons
  2 | 
  3 | export const PencilIcon = () => {
  4 |   return (
  5 |     <svg
  6 |       stroke="currentColor"
  7 |       fill="currentColor"
  8 |       strokeWidth="0"
  9 |       viewBox="0 0 512 512"
 10 |       height="1em"
 11 |       width="1em"
 12 |       xmlns="http://www.w3.org/2000/svg"
 13 |       className="text-2xl text-accent"
 14 |     >
 15 |       <path d="M429.548 30.836c-.307-.003-.6.005-.875.024-2.212.147-3.34.653-4.576 1.89l-27.58 27.58 55.156 55.154 27.578-27.58c1.238-1.236 1.744-2.363 1.89-4.575.15-2.21-.37-5.433-1.805-9.163-2.87-7.46-9.277-16.667-17.055-24.445-7.778-7.778-16.985-14.185-24.445-17.055-3.264-1.255-6.138-1.81-8.287-1.83zm-45.758 42.22l-9.9 9.9 9.9 9.9 12.727 12.727 9.9 9.9 12.727 12.728 9.9 9.9 9.9-9.9-55.155-55.155zm-22.627 22.626L72.665 384.186l9.898 9.897 288.5-288.5-9.9-9.9zm22.627 22.63L95.29 406.808l9.9 9.902 288.5-288.5-9.9-9.9zm22.63 22.626l-288.502 288.5 9.897 9.9 288.503-288.5-9.9-9.9zM63.223 400.198l-12.12 30.306 30.393 30.394 30.305-12.12-6.61-6.612L92.46 429.44l-9.9-9.9-12.73-12.728-6.61-6.612zm-19.395 48.488l-12.993 32.478 32.478-12.992-19.486-19.485z"></path>
 16 |     </svg>
 17 |   )
 18 | }
 19 | 
 20 | export const ToolboxIcon = () => {
 21 |   return (
 22 |     <svg
 23 |       stroke="currentColor"
 24 |       fill="currentColor"
 25 |       strokeWidth="0"
 26 |       viewBox="0 0 512 512"
 27 |       height="1em"
 28 |       width="1em"
 29 |       xmlns="http://www.w3.org/2000/svg"
 30 |       className="text-2xl text-accent"
 31 |     >
 32 |       <path d="M94.09 57L33 209.7V327h174V217h-87c-23.75 0-41-23-41-49s17.25-49 41-49h50.7l-24.8-62zm272.01 0L305 209.7V489h174V209.7L417.9 57zm25.9 62c23.8 0 41 23 41 49s-17.2 49-41 49-41-23-41-49 17.2-49 41-49zm-272 18c-11.6 0-23 12.8-23 31s11.4 31 23 31h169.9l24.8-62zm272 0c-11.6 0-23 12.8-23 31s11.4 31 23 31 23-12.8 23-31-11.4-31-23-31zM33 345v144h254V345z"></path>
 33 |     </svg>
 34 |   )
 35 | }
 36 | 
 37 | export const FlaskIcon = () => {
 38 |   return (
 39 |     <svg
 40 |       stroke="currentColor"
 41 |       fill="currentColor"
 42 |       strokeWidth="0"
 43 |       viewBox="0 0 512 512"
 44 |       height="1em"
 45 |       width="1em"
 46 |       xmlns="http://www.w3.org/2000/svg"
 47 |       className="text-2xl text-accent"
 48 |     >
 49 |       <path d="M365.47 18.727c-11.353-.18-21.053 7.365-24.786 20.058h-.002c-24.423-7.6-57.52-4.092-68.328 19.856-15.69-20.86-47.866-13.98-55.194 9.85-7.328 23.828 13.462 49.474 44.68 48.55-3.078 33.98 44.304 54.69 81.764 39.132-.473 19.307 8.312 41.853 30.37 44.97-6.395 18.11 3.104 42.047 28.614 42.047 31.47 0 38.024-36.316 21.025-53.145 9.474-10.39 12.832-25.167 11.096-39.13 17.282 12.104 34.59-6.52 33.767-20.08-1.516-24.97-20.366-35.97-33.768-24.3-8.8-27.616-37.243-32.007-52.562-16.353 1.35-7.425.2-13.105-5.255-19.274 22.605-5.702 18.913-37.698 4.68-46.904-5.44-3.517-10.942-5.195-16.102-5.277zm68.37 5.13c-22.7 0-22.882 34.655 0 34.655s22.7-34.655 0-34.655zM177.672 74.842c-22.7 0-22.882 34.654 0 34.654s22.7-34.654 0-34.654zm64.695 59.38c-1.695.06-3.792.895-5.877 2.887-4.765 4.554-8.11 13.804-1.814 24.216 1.365 2.257 2.837 4.486 4.408 6.672l-14.21 26.414-34.43 59.637-153.62 87.682-.008.006c-11.038 6.375-16.508 14.786-17.537 24.037-1.03 9.254 2.46 20.22 13.083 31.508 45.295 48.134 101.19 77.71 164.907 95.106 15.645 4.267 26.47 2.614 33.156-2.1 6.686-4.712 11.047-13.382 11.047-28.413v-.006l.214-177.61 38.008-65.832c-14.036-3.907-26.16-10.638-36.332-18.932l8.967-16.67c13.568 12.152 31.753 20.64 55.14 20.645 11.536-.03 18.363-7.457 20.046-13.542.84-3.044.414-5.247-.604-6.73-1.018-1.48-3.004-3.204-8.754-3.66-31.006-2.452-53.782-15.764-68.293-39.714-2.816-4.65-5-5.413-6.797-5.584-.224-.02-.46-.028-.7-.02zm234.053 39.305c-22.7 0-22.882 34.655 0 34.655s22.7-34.655 0-34.655zm-44.668 86.022c-35.27 0-35.553 53.837 0 53.837s35.27-53.838 0-53.838zm-235.256 8.337l9.367 16.172-136.506 79.06-.005.003c-4 2.31-4.756 3.894-5.043 5.127-.29 1.233-.127 3.423 1.852 7.027.543.988 1.228 2.044 2.024 3.15l-.416-.193c18.068 27.077 54.2 61.967 89.34 80.934-23.56-10.45-50.91-25.15-72.737-40.756C69.11 407.5 56.51 396.524 49.78 384.272c-3.363-6.124-5.332-13.14-3.673-20.262 1.66-7.123 6.93-13.046 13.9-17.07l136.49-79.053zm-88.068 88.87c18.55 6.4 52.894 25.26 80.154 46.013 13.63 10.375 25.305 20.885 32.086 31.998 3.022 4.952 5.264 10.303 5.2 16.203l-20.626-9.488c-9.495-11.61-23.806-22.776-35.75-29.517-24.435-17.28-54.436-33.15-67.16-37.54l6.096-17.667z"></path>
 50 |     </svg>
 51 |   )
 52 | }
 53 | 
 54 | export const LetterIcon = () => {
 55 |   return (
 56 |     <svg
 57 |       stroke="currentColor"
 58 |       fill="currentColor"
 59 |       strokeWidth="0"
 60 |       viewBox="0 0 512 512"
 61 |       height="1em"
 62 |       width="1em"
 63 |       xmlns="http://www.w3.org/2000/svg"
 64 |       className="text-4xl text-accent"
 65 |     >
 66 |       <path d="M287.72 18.813l-65.314 84.25-56.094-59.907-22.437 71.25-68.156-22.25 36.343 77.125-82.688 30.282 74.75 54.907-84.78 85.968 95.436 9.906-39.03 90.312 108.063-35.094 4.156 90.594 68.53-70.406 48.72 58.156 26.967-61.937 84.22 54.124-17.97-89.125 71.938 20.81-36.906-79.5 61.5-9.467-44.75-50.094 41.905-42.658L441.97 213.5 477 131.437l-96.53 27.438 23.655-91.78-95.594 62.468-20.81-110.75zm-119.94 146.5c105.715 3.01 184.245 43.667 252 101.843l-179.842 13.72-72.157-115.563zm-15.593 10.312l44.907 71.875-75.28 36 30.374-107.875zm54.875 87.844l20.032 32.092 3 4.813 5.625-.438 48.593-3.718 31.375 80.624c-47.482-31.943-113.61-65.86-190.313-74.344l81.688-39.03zm212.125 22.436l-82.093 94.5-33.344-85.656 115.438-8.844z"></path>
 67 |     </svg>
 68 |   )
 69 | }
 70 | 
 71 | export const PaperIcon = () => {
 72 |   return (
 73 |     <svg
 74 |       stroke="currentColor"
 75 |       fill="currentColor"
 76 |       strokeWidth="0"
 77 |       viewBox="0 0 512 512"
 78 |       height="1em"
 79 |       width="1em"
 80 |       xmlns="http://www.w3.org/2000/svg"
 81 |     >
 82 |       <path d="M124 80v322c0 7.7-6.3 14-14 14s-14-6.3-14-14V112H80c-17.7 0-32 14.3-32 32v288c0 17.7 14.3 32 32 32h353.1c17 0 30.9-13.8 30.9-30.9V80c0-17.7-14.3-32-32-32l-278 2c-17.7 0-30 12.3-30 30zm66 32h84c7.7 0 14 6.3 14 14s-6.3 14-14 14h-84c-7.7 0-14-6.3-14-14s6.3-14 14-14zm0 160h148c7.7 0 14 6.3 14 14s-6.3 14-14 14H190c-7.7 0-14-6.3-14-14s6.3-14 14-14zm196 108H190c-7.7 0-14-6.3-14-14s6.3-14 14-14h196c7.7 0 14 6.3 14 14s-6.3 14-14 14zm0-160H190c-7.7 0-14-6.3-14-14s6.3-14 14-14h196c7.7 0 14 6.3 14 14s-6.3 14-14 14z"></path>
 83 |     </svg>
 84 |   )
 85 | }
 86 | 
 87 | export const DeskSetupIcon = () => {
 88 |   return (
 89 |     <svg
 90 |       stroke="currentColor"
 91 |       fill="currentColor"
 92 |       strokeWidth="0"
 93 |       viewBox="0 0 512 512"
 94 |       height="1em"
 95 |       width="1em"
 96 |       xmlns="http://www.w3.org/2000/svg"
 97 |       className="text-2xl text-accent"
 98 |     >
 99 |       <path d="M104.998 104.998v110.004h206.004V104.998H104.998zm288 112v46.004h30.004v-46.004h-30.004zm-194.512 16l-8.668 26.004h36.364l-8.668-26.004h-19.028zm-157.488 44v18.004h430.004v-18.004H40.998zm14.004 36V496h17.996V371.729l58.73-58.731h-25.453l-33.277 33.277v-33.277H55.002zm289.996 0v46.004h94.004v-46.004h-94.004zM394.271 320a10.272 8 0 0 1 10.272 8 10.272 8 0 0 1-10.272 8A10.272 8 0 0 1 384 328a10.272 8 0 0 1 10.271-8zm-49.273 56.998v46.004h94.004v-46.004h-94.004zM394.271 384a10.272 8 0 0 1 10.272 8 10.272 8 0 0 1-10.272 8A10.272 8 0 0 1 384 392a10.272 8 0 0 1 10.271-8zm-49.273 56.998v46.004h94.004v-46.004h-94.004zM394.271 448a10.272 8 0 0 1 10.272 8 10.272 8 0 0 1-10.272 8A10.272 8 0 0 1 384 456a10.272 8 0 0 1 10.271-8z"></path>
100 |     </svg>
101 |   )
102 | }
103 | 
104 | export const CoffeePotIcon = () => {
105 |   return (
106 |     <svg
107 |       stroke="currentColor"
108 |       fill="currentColor"
109 |       strokeWidth="0"
110 |       viewBox="0 0 512 512"
111 |       height="1em"
112 |       width="1em"
113 |       xmlns="http://www.w3.org/2000/svg"
114 |       className="text-2xl text-accent"
115 |     >
116 |       <path d="M49.66 45.63L108.1 148.3h217.5V78.25zm27.9 120.67v19.6H334.6c48 0 82.2 29.3 103.2 64.3 19 31.5 28.2 67.7 29.9 95.6h20.1c-2.1-32.8-15.2-76.2-37.2-111.8-24.1-38.9-57.8-67.7-98-67.7zm13.29 37.6c-3.15 4.7-9 15.1-14.87 28.6-7.34 16.9-15.6 38.8-23.3 62.9C37.29 343.7 24.2 400.9 24.2 443.3c0 6 3.27 13.1 8.54 18.5 5.27 5.3 12.2 8.6 17.99 8.6H370.6c5.6 0 12.6-3.3 17.9-8.6 5.3-5.4 8.6-12.5 8.6-18.5 0-42.4-13.1-99.6-28.6-147.9-7.7-24.1-16-46-23.4-62.9-5.9-13.5-11.8-23.9-15-28.6zM65.01 337.1H355.6c7.5 29.1 12.8 59.7 12.8 84.3 0 13.8-14.6 28.3-29.2 28.3H81.04c-14.29 0-28.73-14.5-28.73-28.3 0-24.6 5.24-55.2 12.7-84.3z"></path>
117 |     </svg>
118 |   )
119 | }
120 | 
121 | export const HeadphonesIcon = () => {
122 |   return (
123 |     <svg
124 |       stroke="currentColor"
125 |       fill="currentColor"
126 |       strokeWidth="0"
127 |       viewBox="0 0 512 512"
128 |       height="1em"
129 |       width="1em"
130 |       xmlns="http://www.w3.org/2000/svg"
131 |       className="text-2xl text-accent"
132 |     >
133 |       <path d="M256 51c-54.994 0-107.32 25.053-148.22 66.826l16.525 8.264C163.22 88.012 210.558 65 256 65c45.45 0 92.803 22.997 131.725 61.074l16.496-8.248C363.32 76.053 310.995 51 256 51zM95.178 131.652C54.13 180.022 27.215 246.514 25.195 321h14.022c2.225-70.647 30.325-133.29 69.992-178.906.695-.8 1.403-1.583 2.106-2.373l-16.138-8.068zm321.644 0l-16.107 8.055c.692.778 1.39 1.548 2.076 2.336C442.46 187.646 470.56 250.29 472.784 321h14.022c-2.02-74.486-28.935-140.978-69.983-189.348zM128.042 262.8c-3.485-.013-6.98 1.078-7.042 3.415V458c0 4 14 4 14 0V266c0-2.074-3.473-3.19-6.96-3.2zm255.917 0c-3.487.01-6.96 1.126-6.96 3.2v192c0 4 14 4 14 0V266.215c-.06-2.337-3.557-3.428-7.04-3.416zM103 275.73c-15.623 2.393-25.644 11.16-33.133 24.64C61.022 316.294 57 339 57 362s4.022 45.707 12.867 61.63c7.49 13.48 17.51 22.247 33.133 24.64V275.73zm306 0v172.54c15.623-2.393 25.644-11.16 33.133-24.64C450.978 407.706 455 385 455 362s-4.022-45.707-12.867-61.63c-7.49-13.48-17.51-22.247-33.133-24.64zM25 339v46h14v-46H25zm448 0v46h14v-46h-14z"></path>
134 |     </svg>
135 |   )
136 | }
137 | 
138 | export const SpotifyIcon = () => {
139 |   return (
140 |     <svg
141 |       stroke="currentColor"
142 |       fill="currentColor"
143 |       strokeWidth="0"
144 |       viewBox="0 0 496 512"
145 |       height="21px"
146 |       width="21px"
147 |       xmlns="http://www.w3.org/2000/svg"
148 |     >
149 |       <path d="M248 8C111.1 8 0 119.1 0 256s111.1 248 248 248 248-111.1 248-248S384.9 8 248 8zm100.7 364.9c-4.2 0-6.8-1.3-10.7-3.6-62.4-37.6-135-39.2-206.7-24.5-3.9 1-9 2.6-11.9 2.6-9.7 0-15.8-7.7-15.8-15.8 0-10.3 6.1-15.2 13.6-16.8 81.9-18.1 165.6-16.5 237 26.2 6.1 3.9 9.7 7.4 9.7 16.5s-7.1 15.4-15.2 15.4zm26.9-65.6c-5.2 0-8.7-2.3-12.3-4.2-62.5-37-155.7-51.9-238.6-29.4-4.8 1.3-7.4 2.6-11.9 2.6-10.7 0-19.4-8.7-19.4-19.4s5.2-17.8 15.5-20.7c27.8-7.8 56.2-13.6 97.8-13.6 64.9 0 127.6 16.1 177 45.5 8.1 4.8 11.3 11 11.3 19.7-.1 10.8-8.5 19.5-19.4 19.5zm31-76.2c-5.2 0-8.4-1.3-12.9-3.9-71.2-42.5-198.5-52.7-280.9-29.7-3.6 1-8.1 2.6-12.9 2.6-13.2 0-23.3-10.3-23.3-23.6 0-13.6 8.4-21.3 17.4-23.9 35.2-10.3 74.6-15.2 117.5-15.2 73 0 149.5 15.2 205.4 47.8 7.8 4.5 12.9 10.7 12.9 22.6 0 13.6-11 23.3-23.2 23.3z"></path>
150 |     </svg>
151 |   )
152 | }
153 | 
154 | // Social Icons
155 | 
156 | export const GithubIcon = () => {
157 |   return (
158 |     <svg
159 |       stroke="currentColor"
160 |       fill="none"
161 |       strokeWidth="2"
162 |       viewBox="0 0 24 24"
163 |       strokeLinecap="round"
164 |       strokeLinejoin="round"
165 |       height="1em"
166 |       width="1em"
167 |       xmlns="http://www.w3.org/2000/svg"
168 |       className="text-xl text-fore-subtle group-hover:-translate-y-2 transition-transform"
169 |     >
170 |       <path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path>
171 |     </svg>
172 |   )
173 | }
174 | 
175 | export const LinkedinIcon = () => {
176 |   return (
177 |     <svg
178 |       stroke="currentColor"
179 |       fill="none"
180 |       strokeWidth="2"
181 |       viewBox="0 0 24 24"
182 |       strokeLinecap="round"
183 |       strokeLinejoin="round"
184 |       height="1em"
185 |       width="1em"
186 |       xmlns="http://www.w3.org/2000/svg"
187 |       className="text-xl text-fore-subtle group-hover:-translate-y-2 transition-transform"
188 |     >
189 |       <path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path>
190 |       <rect x="2" y="9" width="4" height="12"></rect>
191 |       <circle cx="4" cy="4" r="2"></circle>
192 |     </svg>
193 |   )
194 | }
195 | 
196 | export const EmailIcon = () => {
197 |   return (
198 |     <svg
199 |       stroke="currentColor"
200 |       fill="currentColor"
201 |       strokeWidth="0"
202 |       viewBox="0 0 24 24"
203 |       height="1em"
204 |       width="1em"
205 |       xmlns="http://www.w3.org/2000/svg"
206 |       className="text-xl text-fore-subtle group-hover:-translate-y-2 transition-transform"
207 |     >
208 |       <path fill="none" d="M0 0h24v24H0z"></path>
209 |       <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10h5v-2h-5c-4.34 0-8-3.66-8-8s3.66-8 8-8 8 3.66 8 8v1.43c0 .79-.71 1.57-1.5 1.57s-1.5-.78-1.5-1.57V12c0-2.76-2.24-5-5-5s-5 2.24-5 5 2.24 5 5 5c1.38 0 2.64-.56 3.54-1.47.65.89 1.77 1.47 2.96 1.47 1.97 0 3.5-1.6 3.5-3.57V12c0-5.52-4.48-10-10-10zm0 13c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3z"></path>
210 |     </svg>
211 |   )
212 | }
213 | 
214 | export const CosmicLogo = ({ width, height }) => {
215 |   const iconColor = 'fill-[#29abe2]'
216 |   return (
217 |     <svg
218 |       width={width ?? '135'}
219 |       height={height ?? '29'}
220 |       viewBox="0 0 135 29"
221 |       fill="none"
222 |       xmlns="http://www.w3.org/2000/svg"
223 |       className="h-auto max-w-full fill-gray-700 dark:fill-white"
224 |       aria-label="Cosmic logo"
225 |     >
226 |       <path
227 |         d="M11.0494 9.71143C11.7149 9.11524 12.3291 8.51905 12.9946 7.97705C12.4827 7.59766 12.022 7.27246 11.5613 6.94727C10.9982 7.43506 10.4352 7.97706 9.87208 8.51905C10.4352 8.73585 10.8447 9.16944 11.0494 9.71143Z"
228 |         className={iconColor}
229 |       />
230 |       <path
231 |         d="M9.41432 12.4816C10.6461 12.485 11.6473 11.4565 11.6505 10.1843C11.6537 8.91213 10.6578 7.8781 9.42602 7.87472C8.19424 7.87135 7.19307 8.89991 7.18983 10.1721C7.1866 11.4442 8.18254 12.4783 9.41432 12.4816Z"
232 |         className={iconColor}
233 |       />
234 |       <path
235 |         d="M11.386 23.0143C8.22254 24.8011 5.48801 25.2477 4.25479 24.0194C2.539 22.2885 4.09393 17.7659 7.84722 13.1874C7.25741 13.0199 6.77485 12.5732 6.50676 12.0149C1.03769 18.38 -1.42876 24.8011 0.984067 27.202C2.96795 29.212 7.73998 27.872 12.9946 24.2985C12.4584 23.9077 11.9222 23.461 11.386 23.0143Z"
236 |         className={iconColor}
237 |       />
238 |       <path
239 |         d="M14.9943 7.75792C15.1547 7.14542 15.5824 6.64428 16.1171 6.36587C9.80853 0.964741 3.39308 -1.42958 0.987291 0.964741C-0.990805 2.96929 0.292284 7.70224 3.87424 12.9363C4.30194 12.3795 4.72963 11.8784 5.15733 11.3216C3.39308 8.14769 2.91193 5.41928 4.14155 4.1386C5.9058 2.41247 10.3966 4.02724 14.9943 7.75792Z"
240 |         className={iconColor}
241 |       />
242 |       <path
243 |         d="M19.5443 9.25072C19.3362 9.80913 18.8678 10.2559 18.3474 10.4792C19.128 11.3169 19.8566 12.0986 20.4811 12.9363C20.8454 12.4337 21.2097 11.9311 21.4699 11.4285C20.8974 10.7026 20.2209 9.97666 19.5443 9.25072Z"
244 |         className={iconColor}
245 |       />
246 |       <path
247 |         d="M17.9013 11.5542C19.1461 11.5542 20.1316 10.5429 20.1316 9.25074C20.1316 7.95855 19.1461 6.94727 17.9013 6.94727C16.6564 6.94727 15.6709 7.95855 15.6709 9.25074C15.6709 10.4867 16.6564 11.5542 17.9013 11.5542Z"
248 |         className={iconColor}
249 |       />
250 |       <path
251 |         d="M24.0004 4.17002C25.7232 5.89898 24.162 10.4166 20.3933 14.9899C20.9855 15.1572 21.4701 15.6034 21.7393 16.1612C27.1769 9.80307 29.6534 3.33343 27.2307 0.935207C25.2387 -1.01684 20.4472 0.321707 15.2249 3.89116C15.7633 4.28157 16.3017 4.72775 16.8401 5.17393C20.0165 3.38921 22.7622 2.94302 24.0004 4.17002Z"
252 |         className={iconColor}
253 |       />
254 |       <path
255 |         d="M17.57 18.004C16.8053 18.7824 15.9896 19.5052 15.2249 20.1724C15.7347 20.5616 16.1935 20.8952 16.7033 21.2288C17.417 20.6172 18.0798 19.95 18.7935 19.2272C18.2327 19.0048 17.8249 18.56 17.57 18.004Z"
256 |         className={iconColor}
257 |       />
258 |       <path
259 |         d="M19.2518 15.6941C18.02 15.6905 17.0187 16.719 17.0153 17.9912C17.0119 19.2633 18.0078 20.2975 19.2395 20.301C20.4713 20.3045 21.4726 19.2761 21.476 18.0039C21.4794 16.7317 20.4835 15.6976 19.2518 15.6941Z"
260 |         className={iconColor}
261 |       />
262 |       <path
263 |         d="M9.87209 17.6968C9.09147 16.8592 8.36289 16.0774 7.7384 15.2398C7.37411 15.7423 7.00982 16.2449 6.74961 16.7475C7.37411 17.4734 7.9986 18.1994 8.67514 18.9253C8.8833 18.3669 9.29964 17.9202 9.87209 17.6968Z"
264 |         className={iconColor}
265 |       />
266 |       <path
267 |         d="M24.3579 15.2398C23.9316 15.7946 23.5053 16.2939 23.079 16.8488C24.8374 20.0113 25.317 22.6745 24.0382 23.9506C22.2798 25.6706 17.8039 24.0616 13.2214 20.3997C13.0615 21.01 12.6352 21.5093 12.1024 21.7868C18.4433 27.1686 24.8374 29.6098 27.2352 27.2241C29.2068 25.1712 27.9279 20.3997 24.3579 15.2398Z"
268 |         className={iconColor}
269 |       />
270 |       <path
271 |         d="M12.5543 18.9375C12.5575 17.6653 11.5616 16.6313 10.3298 16.6279C9.09803 16.6246 8.09687 17.6531 8.09365 18.9253C8.09044 20.1975 9.08639 21.2315 10.3182 21.2348C11.5499 21.2382 12.5511 20.2096 12.5543 18.9375Z"
272 |         className={iconColor}
273 |       />
274 |       <path d="M43.739 23.7834C49.0785 23.7834 52.7599 20.9732 52.7599 16.4487V16.0834H49.4157V16.4487C49.4157 19.3433 47.589 20.8608 43.7671 20.8608C39.3551 20.8608 37.2193 18.7812 37.2193 14.0881C37.2193 9.39503 39.3551 7.28736 43.7671 7.28736C47.589 7.28736 49.4157 8.83299 49.4157 11.6994V12.0929H52.7599V11.6994C52.7599 7.20305 49.0504 4.39282 43.739 4.39282C37.8937 4.39282 34.0156 8.21474 34.0156 14.0881C34.0156 19.9615 37.8937 23.7834 43.739 23.7834Z" />
275 |       <path d="M62.1338 23.7834C66.7987 23.7834 69.9181 20.8327 69.9181 16.533C69.9181 12.1772 66.7987 9.25452 62.1338 9.25452C57.4969 9.25452 54.3775 12.1772 54.3775 16.533C54.3775 20.8327 57.4969 23.7834 62.1338 23.7834ZM62.1338 21.0856C58.7615 21.0856 57.3564 19.4838 57.3564 16.533C57.3564 13.5542 58.7615 11.9242 62.1338 11.9242C65.5341 11.9242 66.9393 13.5542 66.9393 16.533C66.9393 19.4838 65.5341 21.0856 62.1338 21.0856Z" />
276 |       <path d="M78.7247 23.7834C82.659 23.7834 85.2444 22.2378 85.2444 19.6243C85.2444 17.3199 83.7269 16.1958 80.4108 15.7743L77.179 15.3246C75.0714 15.0436 74.5093 14.6502 74.5093 13.5542C74.5093 12.2334 75.4086 11.6713 77.9659 11.6713C81.0572 11.6713 81.9002 12.5425 81.9002 14.2005V14.3691H84.9072V14.2848C84.9072 10.9688 82.3218 9.25452 78.0502 9.25452C73.7506 9.25452 71.5305 10.9969 71.5305 13.4418C71.5305 15.7743 73.1323 16.8984 75.7739 17.2356L79.5958 17.7414C81.5911 18.0224 82.2656 18.3878 82.2656 19.54C82.2656 20.7765 81.4506 21.3385 78.7247 21.3385C75.802 21.3385 74.706 20.7484 74.706 18.9217V18.6969H71.671V18.7812C71.671 22.013 74.2283 23.7834 78.7247 23.7834Z" />
277 |       <path d="M90.4692 23.5024V16.5892C90.4692 13.498 91.509 11.9804 94.516 11.9804C97.2138 11.9804 98.2817 13.1607 98.2817 15.9148V23.5024H101.289V16.5892C101.289 13.498 102.357 11.9804 105.335 11.9804C108.033 11.9804 109.129 13.1607 109.129 15.9148V23.5024H112.136V15.0998C112.136 11.7275 110.309 9.25452 106.684 9.25452C103.143 9.25452 101.57 11.4746 101.204 13.8633H101.036C100.642 11.1936 98.928 9.25452 95.7525 9.25452C92.2678 9.25452 90.7503 11.4184 90.3849 13.7509H90.2163V9.53555H87.4342V23.5024H90.4692Z" />
278 |       <path d="M117.885 7.90561V4.67385H114.85V7.90561H117.885ZM117.885 23.5024V9.53555H114.85V23.5024H117.885Z" />
279 |       <path d="M127.75 23.7834C131.937 23.7834 135 21.4228 135 17.9381V17.629H131.993V17.8257C131.993 19.9896 130.419 21.0575 127.693 21.0575C124.546 21.0575 123.141 19.54 123.141 16.533C123.141 13.4699 124.546 11.9804 127.693 11.9804C130.419 11.9804 131.993 13.0483 131.993 15.2122V15.3808H135V15.0998C135 11.6151 131.937 9.25452 127.75 9.25452C123.141 9.25452 120.134 12.1772 120.134 16.533C120.134 20.8327 123.141 23.7834 127.75 23.7834Z" />
280 |     </svg>
281 |   )
282 | }
283 | 
284 | // Semantic Icons
285 | 
286 | export const ForwardArrowIcon = () => {
287 |   return (
288 |     <svg
289 |       stroke="currentColor"
290 |       fill="currentColor"
291 |       strokeWidth="0"
292 |       viewBox="0 0 24 24"
293 |       height="1.4em"
294 |       width="1.4em"
295 |       xmlns="http://www.w3.org/2000/svg"
296 |     >
297 |       <path fill="none" d="M0 0h24v24H0z"></path>
298 |       <path d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"></path>
299 |     </svg>
300 |   )
301 | }
302 | 
303 | export const MenuIcon = () => {
304 |   return (
305 |     <svg
306 |       xmlns="http://www.w3.org/2000/svg"
307 |       height="1.6em"
308 |       width="1.6em"
309 |       fill="none"
310 |       viewBox="0 0 24 24"
311 |       stroke="currentColor"
312 |     >
313 |       <path
314 |         strokeLinecap="round"
315 |         strokeLinejoin="round"
316 |         strokeWidth={2}
317 |         d="M4 8h16M4 16h16"
318 |       />
319 |     </svg>
320 |   )
321 | }
322 | 
323 | export const CloseIcon = () => {
324 |   return (
325 |     <svg
326 |       xmlns="http://www.w3.org/2000/svg"
327 |       height="1.6em"
328 |       width="1.6em"
329 |       fill="none"
330 |       viewBox="0 0 24 24"
331 |       stroke="currentColor"
332 |     >
333 |       <path
334 |         strokeLinecap="round"
335 |         strokeLinejoin="round"
336 |         strokeWidth={2}
337 |         d="M6 18L18 6M6 6l12 12"
338 |       />
339 |     </svg>
340 |   )
341 | }
342 | 
343 | export const HomeIcon = () => {
344 |   return (
345 |     <svg
346 |       stroke="currentColor"
347 |       fill="currentColor"
348 |       strokeWidth="0"
349 |       viewBox="0 0 512 512"
350 |       height="1em"
351 |       width="1em"
352 |       xmlns="http://www.w3.org/2000/svg"
353 |     >
354 |       <path d="M256 44.158L19.76 165.816 32 173.937l224-112 224 112 12.24-8.12L256 44.157zm0 37.904l-215 107.5V495h30V203h370v292h30V189.562l-215-107.5zM92 223v18h328v-18H92zm0 36v18h328v-18H92zm100 36c-8.5 0-14.393 5.524-18.95 11.6-4.556 6.075-8.276 13.701-11.478 22.24-4.27 11.389-7.54 24.334-9.248 36.887-8.722-2.235-22.048-4.431-24.324 2.273-2.354 6.934 7.344 13.583 16.668 18.217-.32 1.067-.63 2.17-.906 3.344C141.969 397.18 141 406.6 141 416c0 9.4.969 18.82 2.762 26.44 1.272 5.406 3.108 9.766 4.744 12.56h214.988c1.636-2.794 3.472-7.154 4.744-12.56C370.031 434.82 371 425.4 371 416c0-9.4-.969-18.82-2.762-26.44a56.768 56.768 0 0 0-.906-3.343c9.324-4.634 19.022-11.283 16.668-18.217-2.276-6.704-15.602-4.508-24.324-2.273-1.707-12.553-4.977-25.498-9.248-36.887-3.202-8.539-6.922-16.165-11.479-22.24C334.393 300.524 328.5 295 320 295H192zm0 18h128c-.5 0 1.607.476 4.55 4.4 2.944 3.925 6.224 10.299 9.022 17.76 3.673 9.795 6.488 21.437 8.028 32.414C318.195 361.125 292.18 361 256 361c-36.18 0-62.195.125-85.6 6.574 1.54-10.977 4.355-22.62 8.028-32.414 2.798-7.461 6.078-13.835 9.021-17.76 2.944-3.924 5.051-4.4 4.551-4.4zm-16 87a16 16 0 0 1 16 16 16 16 0 0 1-16 16 16 16 0 0 1-16-16 16 16 0 0 1 16-16zm160 0a16 16 0 0 1 16 16 16 16 0 0 1-16 16 16 16 0 0 1-16-16 16 16 0 0 1 16-16zm-183 73v22h30v-22h-30zm176 0v22h30v-22h-30z"></path>
355 |     </svg>
356 |   )
357 | }
358 | 
359 | export const ExternalLinkIcon = () => {
360 |   return (
361 |     <svg
362 |       stroke="currentColor"
363 |       fill="currentColor"
364 |       strokeWidth="0"
365 |       viewBox="0 0 24 24"
366 |       height="1em"
367 |       width="1em"
368 |       xmlns="http://www.w3.org/2000/svg"
369 |     >
370 |       <path d="m13 3 3.293 3.293-7 7 1.414 1.414 7-7L21 11V3z"></path>
371 |       <path d="M19 19H5V5h7l-2-2H5c-1.103 0-2 .897-2 2v14c0 1.103.897 2 2 2h14c1.103 0 2-.897 2-2v-5l-2-2v7z"></path>
372 |     </svg>
373 |   )
374 | }
375 | 


--------------------------------------------------------------------------------