turbo progress

sikhote · Oct 7, 2023 · e14af2a · e14af2a
1 parent 673f80d
commit e14af2a
Show file tree

Hide file tree

Showing 62 changed files with 619 additions and 1,311 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
diff --git a/app/head.js b/app/head.js
@@ -0,0 +1,5 @@
+import Head from 'components/Head';
+
+export default function PageHead(props) {
+  return <Head {...{ ...props, path: '' }} />;
+}
diff --git a/app/layout.js b/app/layout.js
@@ -1,5 +1,7 @@
-import Link from 'next/link';
-import styles from 'styles.module.scss';
+import Navigation from 'components/Navigation';
+import Main from 'components/Main';
+import './styles.scss'
+import 'lib/fonts/fontello/fontello.css';
 
 export default function RootLayout({ children }) {
   return (
@@ -10,32 +12,8 @@ export default function RootLayout({ children }) {
         <meta charSet="utf-8" />
       </head>
       <body>
-        <nav
-          css={[
-            styles.nav,
-            router.pathname === '/resume' ? styles.navResume : {},
-          ]}
-        >
-          {[
-            { href: '/', title: 'Home', icon: 'home' },
-            { href: '/pictures', title: 'Pictures', icon: 'camera' },
-            { href: '/projects', title: 'Projects', icon: 'folder' },
-            { href: '/thoughts', title: 'Thoughts', icon: 'feather' },
-          ].map(({ href, title, icon }) => (
-            <Link passHref key={href} href={href}>
-              <a
-                css={[
-                  styles.link,
-                  router.pathname === href ? styles.linkActive : {},
-                ]}
-              >
-                <i className={`icon-${icon}`} />
-                <span>{title}</span>
-              </a>
-            </Link>
-          ))}
-        </nav>
-        <div>{children}</div>
+        <Navigation />
+        <Main>{children}</Main>
       </body>
     </html>
   );

diff --git a/app/page.js b/app/page.js
@@ -1,3 +1,12 @@
-export default function Page() {
-  return <h1>Hello, Next.js!</h1>;
+import Grid from 'components/Grid';
+import Md from 'components/Md';
+import getContent from 'lib/getContent';
+
+async function getData() {
+  return await getContent('public/assets/md/home.md');
+}
+
+export default async function Page() {
+  const data = await getData();
+  return <Grid items={[{ key: 0, item: <Md html={data} /> }]} />;
 }
diff --git a/app/resume/page.js b/app/resume/page.js
@@ -0,0 +1,17 @@
+import Md from 'components/Md';
+import getContent from 'lib/getContent';
+import styles from './styles.module.scss';
+
+async function getData() {
+  return await getContent('public/assets/md/resume.md');
+}
+
+export default async function Page() {
+  const data = await getData();
+
+  return (
+    <div className={styles.root}>
+      <Md html={data} />
+    </div>
+  );
+}
diff --git a/app/resume/styles.module.scss b/app/resume/styles.module.scss
@@ -0,0 +1,48 @@
+@use 'lib/variables.scss' as *;
+
+.root {
+  :global(.markdown) {
+    h1 {
+      padding-bottom: 0;
+    }
+
+    h2 {
+      font-weight: var(--font-weight-thin);
+    }
+
+    > ul:nth-of-type(1) > li {
+      padding-left: 0;
+      text-indent: 0;
+
+      &:before {
+        display: none;
+      }
+    }
+
+    > ul:nth-of-type(2) {
+      column-count: 3;
+    }
+
+    > h4 + p:not(:last-of-type) {
+      padding-bottom: var(--space-c) !important;
+    }
+  }
+
+  @media (max-width: $bp-a) {
+    padding: var(--space-e);
+
+    :global(.markdown) {
+      > ul:nth-of-type(2) {
+        column-count: 1;
+      }
+    }
+  }
+
+  @media print {
+    :global(.markdown) {
+      > ul:nth-of-type(2) {
+        column-count: 3 !important;
+      }
+    }
+  }
+}
diff --git a/app/styles.module.scss b/app/styles.module.scss
diff --git a/app/styles.scss b/app/styles.scss
@@ -0,0 +1,71 @@
+:root {
+  --z-index-nav: 9;
+  --z-index-overlay: 99;
+  --space-a: 0;
+  --space-b: 2px;
+  --space-c: 4px;
+  --space-d: 8px;
+  --space-e: 16px;
+  --space-f: 24px;
+  --space-g: 32px;
+  --space-h: 48px;
+  --space-i: 72px;
+  --color-inherit: inherit;
+  --color-transparent: transparent;
+  --color-black: rgb(0, 0, 0);
+  --color-dark-grey-1: rgb(25, 25, 25);
+  --color-dark-grey-2: rgb(40, 40, 40);
+  --color-dark-grey-3: rgb(55, 55, 55);
+  --color-white: rgb(255, 255, 255);
+  --color-light-grey-1: rgb(200, 200, 200);
+  --color-light-grey-2: rgb(130, 130, 130);
+  --color-light-grey-3: rgb(100, 100, 100);
+  --color-green-1: rgb(13, 166, 120);
+  --color-green-2: rgb(10, 145, 103);
+  --color-code-green: #859900;
+  --color-code-cyan: #2aa198;
+  --color-code-blue: #268bd2;
+  --color-code-red: #dc322f;
+  --color-code-yellow: #b58900;
+  --color-code-orange: #cb4b16;
+  --font-size-a: 12px;
+  --font-size-b: 16px;
+  --font-size-c: 18px;
+  --font-size-d: 24px;
+  --font-size-e: 32px;
+  --font-size-code: 13px;
+  --line-height-normal: 1.4;
+  --line-height-close: 1;
+  --font-family-normal: -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI',
+    Roboto, 'Helvetica Neue', Arial, sans-serif;
+  --font-weight-thin: 200;
+  --font-weight-normal: 300;
+  --font-weight-bold: 600;
+  --border-radius-a: 4px;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: var(--font-family-normal);
+  font-weight: var(--font-weight-normal);
+  font-size: var(--font-size-b);
+  line-height: var(--line-height-normal);
+  color: var(--color-light-grey-3);
+  background: var(--color-black);
+}
+
+::selection {
+  background: var(--color-dark-grey-1);
+}
+
+@media print {
+  body {
+    color: var(--color-black);
+    background: var(--color-white);
+  }
+}
diff --git a/components/App/index.js b/components/App/index.js
diff --git a/components/App/styles.js b/components/App/styles.js