🚀 update: 2.0.0 deployment

skillzl · Jun 12, 2022 · 0a239f1 · 0a239f1
1 parent a37b62b
commit 0a239f1
Show file tree

Hide file tree

Showing 47 changed files with 10,267 additions and 4,375 deletions.
diff --git a/components/Badge.tsx b/components/Badge.tsx
@@ -0,0 +1,17 @@
+const colors = {
+  blue: 'bg-blue-200 text-blue-800 dark:bg-blue-700 dark:text-blue-200',
+  red: 'bg-red-200 text-red-800 dark:bg-red-700 dark:text-red-200',
+  green: 'bg-green-200 text-green-800 dark:bg-green-700 dark:text-green-200',
+  indigo: 'bg-indigo-200 text-indigo-800 dark:bg-indigo-700 dark:text-indigo-200',
+  yellow: 'bg-yellow-200 text-yellow-800 dark:bg-yellow-700 dark:text-yellow-200',
+}
+
+export default function Badge({ text, color }: { text: string; color: keyof typeof colors }) {
+  return (
+    <span
+      className={`${colors[color]} inline-block rounded-full px-2 py-0.5 text-xs font-bold uppercase tracking-normal`}
+    >
+      {text}
+    </span>
+  )
+}
diff --git a/components/Container.tsx b/components/Container.tsx
@@ -0,0 +1,53 @@
+import Head from 'next/head'
+import { useRouter } from 'next/router'
+import { ReactNode } from 'react'
+
+interface ContainerProps {
+  title?: string
+  description?: string
+  image?: string
+  children: ReactNode
+  date?: string
+}
+
+const defaultMeta = {
+  title: 'skillzl',
+  description: 'self-thought programmer',
+  image: 'https://skillzl.me/banner.png',
+  date: '',
+}
+
+export default function Container({
+  children,
+  title,
+  description,
+  image,
+  date,
+}: ContainerProps & typeof defaultMeta) {
+  const router = useRouter()
+  return (
+    <>
+      <Head>
+        <title>{title}</title>
+        <meta name="robots" content="follow, index" />
+        <meta content={description} name="description" />
+        <meta property="og:url" content={`https://skillzl.me${router.asPath}`} />
+        <link rel="canonical" href={`https://skillzl.me${router.asPath}`} />
+        <meta property="og:type" content="website" />
+        <meta property="og:site_name" content="skillzl" />
+        <meta property="og:description" content={description} />
+        <meta property="og:title" content={title} />
+        <meta property="og:image" content={image} />
+        <meta name="twitter:card" content="summary_large_image" />
+        <meta name="twitter:site" content="@skillzl47" />
+        <meta name="twitter:title" content={title} />
+        <meta name="twitter:description" content={description} />
+        <meta name="twitter:image" content={image} />
+        {date && <meta property="article:published_time" content={date} />}
+      </Head>
+      {children}
+    </>
+  )
+}
+
+Container.defaultProps = defaultMeta
diff --git a/components/Header.tsx b/components/Header.tsx
@@ -0,0 +1,20 @@
+import { ReactNode } from 'react'
+
+interface HeaderProps {
+  title: string
+  icon: ReactNode
+}
+
+export default function Header({ title, icon }: HeaderProps) {
+  return (
+    <header className="mb-8 flex items-center space-x-4 text-gray-800 dark:text-white md:mb-10">
+      <span
+        className="flex h-12 w-12 items-center justify-center rounded-2xl bg-white shadow-sm p-2 text-gray-500/80
+      dark:bg-gray-800 dark:text-gray-500"
+      >
+        {icon}
+      </span>
+      <h1 className="text-3xl font-bold tracking-tight sm:text-4xl">{title}</h1>
+    </header>
+  )
+}
diff --git a/components/Layout.js b/components/Layout.js
diff --git a/components/LoadingSpinner.tsx b/components/LoadingSpinner.tsx
@@ -0,0 +1,15 @@
+export default function LoadingSpinner({ className }: { className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 24 24" fill="none">
+      <circle className="stroke-current stroke-[4px] opacity-25" cx="12" cy="12" r="10" />
+      <path
+        className="fill-current"
+        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"
+      />
+    </svg>
+  )
+}
+
+LoadingSpinner.defaultProps = {
+  className: '',
+}
diff --git a/components/Navbar.tsx b/components/Navbar.tsx
@@ -0,0 +1,124 @@
+import { useState, useEffect, ReactNode } from 'react'
+import { useTheme } from 'next-themes'
+import Link from 'next/link'
+import Github from 'components/icons/Github'
+import Tooltip from 'components/Tooltip'
+import {
+  ChartPieIcon,
+  HomeIcon,
+  ViewBoardsIcon,
+  SunIcon,
+  MoonIcon,
+} from '@heroicons/react/solid'
+import Instagram from './icons/Instagram'
+
+const NAVIGATION = [
+  {
+    id: 1,
+    href: '/',
+    text: 'Home',
+    icon: <HomeIcon />,
+  },
+  {
+    id: 2,
+    href: '/projects',
+    text: 'Projects',
+    icon: <ViewBoardsIcon />,
+  },
+  {
+    id: 3,
+    href: '/stats',
+    text: 'Stats',
+    icon: <ChartPieIcon />,
+  },
+]
+
+function NavItem({ href, text, icon }: { href: string; text: string; icon: ReactNode }) {
+  return (
+    <Link href={href}>
+      <a
+        className="group relative ml-1 flex h-14 w-14 flex-shrink-0 snap-end items-center justify-center rounded-2xl
+      border-2 border-green-600 border-opacity-0 bg-gray-200 transition-all hover:scale-110 hover:border-opacity-100
+      active:scale-95 dark:border-green-600 dark:border-opacity-0 dark:bg-gray-800 dark:hover:border-opacity-100
+      dark:hover:shadow-green-500/30 sm:m-0 sm:h-16 sm:w-16 sm:hover:shadow-md sm:hover:shadow-green-200"
+      >
+        <span className="h-8 w-8 text-gray-400 duration-300 group-hover:scale-125 group-hover:text-gray-500 dark:text-gray-500 dark:group-hover:text-gray-400">
+          {icon}
+        </span>
+        <Tooltip text={text} />
+      </a>
+    </Link>
+  )
+}
+
+function DarkmodeButton() {
+  const [mounted, setMounted] = useState(false)
+  const { resolvedTheme, setTheme } = useTheme()
+
+  useEffect(() => setMounted(true), [])
+
+  return (
+    <button
+      onClick={() => setTheme(resolvedTheme === 'dark' ? 'light' : 'dark')}
+      type="button"
+      className="group relative ml-1 flex h-14 w-14 flex-shrink-0 snap-end items-center justify-center rounded-2xl
+      border-2 border-green-600 border-opacity-0 bg-gray-200 transition-all hover:scale-110 hover:border-opacity-100
+      active:scale-95 dark:border-green-600 dark:border-opacity-0 dark:bg-gray-800 dark:hover:border-opacity-100
+      dark:hover:shadow-green-500/30 sm:m-0 sm:h-16 sm:w-16 sm:hover:shadow-md sm:hover:shadow-green-200"
+    >
+      <span
+        className="h-8 w-8 text-gray-400 duration-300 group-hover:scale-125 group-hover:text-gray-500
+      dark:text-gray-500 dark:group-hover:text-gray-400"
+      >
+        {mounted && resolvedTheme === 'dark' ? <SunIcon /> : <MoonIcon />}
+      </span>
+      {mounted && <Tooltip text={resolvedTheme === 'dark' ? 'Light mode' : 'Dark mode'} />}
+    </button>
+  )
+}
+
+function Navbar() {
+  return (
+    <header
+      className="fixed bottom-6 left-1/2 z-10 w-5/6 max-w-min sm:max-w-none -translate-x-1/2 rounded-3xl border border-gray-300
+    bg-white/60 px-2.5 py-1.5 shadow backdrop-blur-md dark:border-gray-700 dark:bg-gray-900/60
+    dark:shadow-black/60 sm:w-auto sm:p-2.5"
+    >
+      <nav className="flex snap-x items-center justify-start sm:gap-2.5 gap-1.5 overflow-x-auto sm:overflow-x-visible">
+        {NAVIGATION.map(({ id, ...props }) => (
+          <NavItem key={id} {...props} />
+        ))}
+        <hr className="h-16 rounded-lg border border-r ml-1 sm:ml-0 dark:border-gray-700" />
+        <DarkmodeButton />
+        <a
+          href="https://github.com/skillzl"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="group relative ml-1 flex h-14 w-14 flex-shrink-0 snap-end items-center justify-center rounded-2xl
+          border-2 border-green-600 border-opacity-0 bg-gray-200 shadow-none transition-all hover:scale-110
+          hover:border-opacity-100 active:scale-95 dark:border-green-600 dark:border-opacity-0 dark:bg-gray-800
+          dark:hover:border-opacity-100 dark:hover:shadow-green-500/30 sm:m-0 sm:h-16 sm:w-16 sm:hover:shadow-md
+          sm:hover:shadow-green-200"
+        >
+          <Github className="h-8 w-8 mb-0.5 fill-gray-400 duration-300 group-hover:scale-125 group-hover:fill-gray-500 dark:fill-gray-500 dark:group-hover:fill-gray-400" />
+          <Tooltip text="GitHub" />
+        </a>
+        <a
+          href="https://www.instagram.com/bnrcatalin/"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="group relative mr-1.5 ml-1 flex h-14 w-14 flex-shrink-0 snap-end items-center justify-center rounded-2xl
+          border-2 border-green-600 border-opacity-0 bg-gray-200 shadow-none transition-all hover:scale-110
+          hover:border-opacity-100 active:scale-95 dark:border-green-600 dark:border-opacity-0 dark:bg-gray-800
+          dark:hover:border-opacity-100 dark:hover:shadow-green-500/30 sm:m-0 sm:h-16 sm:w-16 sm:hover:shadow-md
+          sm:hover:shadow-green-200"
+        >
+          <Instagram className="ml-0.5 mb-0.5 h-8 w-8 fill-gray-400 duration-300 group-hover:scale-125 group-hover:fill-gray-500 dark:fill-gray-500 dark:group-hover:fill-gray-400" />
+          <Tooltip text="Instagram" />
+        </a>
+      </nav>
+    </header>
+  )
+}
+
+export default Navbar
diff --git a/components/Portfolio.js b/components/Portfolio.js
diff --git a/components/PortfolioBio.js b/components/PortfolioBio.js
diff --git a/components/PortfolioImage.js b/components/PortfolioImage.js
diff --git a/components/PortfolioJob.js b/components/PortfolioJob.js
diff --git a/components/PortfolioName.js b/components/PortfolioName.js
diff --git a/components/Project.js b/components/Project.js