init

src/components/footer.js

@@ -0,0 +1,21 @@
+import React from 'react'
+
+export const Footer = () => {
+  const year = new Date().getFullYear()
+  // const { biolinkUrl } = useSiteMetadata()
+
+  return (
+    <footer className="mt-4 flex items-center justify-center gap-2 bg-surface py-6 shadow-inner">
+      <div>© {year}</div>
+      {/* <a href={biolinkUrl} className="!no-underline">
+        Stephen Cavender
+      </a> */}
+      <h2 className="text-2xl font-bold">
+        Footer
+      </h2>
+      {/* <Ichthys alt="ichthys" className="w-8" /> */}
+    </footer>
+  )
+}
+
+export default Footer

src/components/header.js

@@ -0,0 +1,42 @@
+import React from 'react'
+import { Link } from 'gatsby'
+import Logo from '../images/icon.png'
+
+//mr-4 text-2xl text-gray-500 hover:no-underline shrink-0 font-normal
+
+export const Header = () => {
+  return (
+    <header className="bg-white border-gray-200 dark:bg-gray-900">
+    <div className="mx-auto max-w-screen-xl">
+        <div className="mx-6 flex justify-between">
+          <Link className="flex gap-1 text-lg" to="/">
+            <img alt="logo" src={Logo} className="w-10 object-contain" />
+            <span className="ml-3 hidden shrink-0 text-gray-800 py-5 text-3xl sm:block">Artur Akmalov</span> 
+          </Link>
+          <nav className="flex gap-6 py-5">
+            <Link
+              className="border-b-[3px] border-transparent text-lg"
+              to="/"
+            >
+              Home
+            </Link>
+            <Link
+              className="border-b-[3px] border-transparent text-lg"
+              to="/blog"
+            >
+              Blog
+            </Link>
+            <Link
+              className="border-b-[3px] border-transparent text-lg"
+              to="/about"
+            >
+              About
+            </Link>
+          </nav>
+        </div>
+      </div>
+    </header>
+  )
+}
+
+export default Header

src/components/index.js

@@ -0,0 +1,3 @@
+export * from './footer'
+export * from './header'
+export * from './layout'

src/components/layout.js

@@ -0,0 +1,15 @@
+import React from 'react'
+import { Header } from './header'
+import { Footer } from './footer'
+
+export const Layout = ({ children }) => {
+  return (
+    <div className="prose prose-sm min-w-full bg-bg sm:prose">
+      <Header />
+      <main className="mx-auto min-h-screen max-w-2xl px-2 sm:px-4">
+        {children}
+      </main>
+      <Footer />
+    </div>
+  )
+}