Improvements

.pre-commit-config.yaml

@@ -37,8 +37,8 @@ repos:
 
   - repo: local
     hooks:
-      - id: eslint
-        name: eslint
+      - id: lint
+        name: lint
         entry: make lint
         language: system
         types: [file]

Makefile

@@ -33,11 +33,16 @@ deps-notion: ## Install dependencies for react-notion-x
 	cd vendor/react-notion-x && yarn install --frozen-lockfile
 .PHONY: notion-deps
 
-deps: ## Install repo dependencies
+deps: deps-notion ## Install repo dependencies
 	@echo "Installing dependencies."
 	pnpm install
 .PHONY: deps
 
+deps-prod: deps-notion ## Install production dependencies
+	@echo "Installing production dependencies."
+	pnpm install --frozen-lockfile
+.PHONY: deps-prod
+
 pre-commit: ## Install pre-commit hooks
 	@echo "Installing pre-commit hooks."
 	pre-commit install -t pre-commit -t commit-msg
@@ -69,7 +74,7 @@ run-prod: build ## Run production server
 
 lint: ## Lint project
 	@echo "Linting project."
-	pnpm run lint
+	pnpm run lint && pnpm run stylelint && pnpm run typecheck
 .PHONY: lint
 
 format: ## Format project

app/components/molecules/Menu.tsx → app/components/molecules/MenuItems.tsx

@@ -1,12 +1,12 @@
 import { Link } from "@remix-run/react";
 
-export const Menu = () => {
+export const MenuItems = () => {
   return (
     <ul className="menu menu-horizontal menu-md px-1 text-white">
       <li>
         <Link
           to="/blog"
-          className="font-eb-garamond-bold btn btn-ghost text-base sm:text-lg"
+          className="font-eb-garamond-black btn btn-ghost text-base sm:text-xl"
         >
           Blog
         </Link>
@@ -16,15 +16,15 @@ export const Menu = () => {
           to="/Gleb_Khaykin.pdf"
           prefetch="intent"
           target="_blank"
-          className="font-eb-garamond-bold btn btn-ghost text-base sm:text-lg"
+          className="font-eb-garamond-black btn btn-ghost text-base sm:text-xl"
         >
           CV
         </Link>
       </li>
       <li>
         <Link
           to="/"
-          className="font-eb-garamond-bold btn btn-ghost text-base sm:text-lg"
+          className="font-eb-garamond-black btn btn-ghost text-base sm:text-xl"
         >
           About
         </Link>

app/components/molecules/MobileMenuItems.tsx

@@ -0,0 +1,40 @@
+import { Link } from "@remix-run/react";
+import { IoMdMenu } from "react-icons/io";
+
+export const MobileMenuItems = () => (
+  <details className="dropdown dropdown-end">
+    <summary className="btn btn-circle btn-ghost">
+      <IoMdMenu className="h-6 w-6 text-white" />
+    </summary>
+    <ul className="menu dropdown-content absolute right-0 z-[1] mt-2 w-28 rounded-lg bg-white shadow-lg">
+      <li>
+        <Link
+          to="/blog"
+          className="font-eb-garamond-bold btn btn-ghost text-base hover:bg-gray-100"
+        >
+          Blog
+        </Link>
+      </li>
+      <hr className="my-1 border-t border-gray-200" />
+      <li>
+        <Link
+          to="/Gleb_Khaykin.pdf"
+          prefetch="intent"
+          target="_blank"
+          className="font-eb-garamond-bold btn btn-ghost text-base hover:bg-gray-100"
+        >
+          CV
+        </Link>
+      </li>
+      <hr className="my-1 border-t border-gray-200" />
+      <li>
+        <Link
+          to="/"
+          className="font-eb-garamond-bold btn btn-ghost text-base hover:bg-gray-100"
+        >
+          About
+        </Link>
+      </li>
+    </ul>
+  </details>
+);

app/components/organisms/Header.tsx

@@ -1,4 +1,5 @@
-import { Menu } from "../molecules/Menu";
+import { MenuItems } from "../molecules/MenuItems";
+import { MobileMenuItems } from "../molecules/MobileMenuItems";
 
 interface HeaderProps {
   backgroundImage: string;
@@ -15,11 +16,14 @@ export const Header = ({ backgroundImage }: HeaderProps) => {
       ></div>
       <div className="absolute inset-0 bg-gradient-to-b from-black/20 to-black/20"></div>
       <div className="relative z-10 mx-auto flex w-full max-w-[700px] items-center justify-between">
-        <span className="font-eb-garamond-black text-lg text-white sm:text-2xl">
+        <span className="font-eb-garamond-black text-xl text-white sm:text-2xl">
           ~/khaykingleb
         </span>
-        <nav>
-          <Menu />
+        <nav className="hidden sm:block">
+          <MenuItems />
+        </nav>
+        <nav className="flex items-center sm:hidden">
+          <MobileMenuItems />
         </nav>
       </div>
     </header>

app/components/organisms/Pagination.tsx

@@ -16,7 +16,7 @@ export const Pagination = ({
   const endPage = Math.min(startPage + MAX_VISIBLE_PAGES, pagesInTotal);
 
   return (
-    <div className="join mt-auto">
+    <div className="join mt-auto flex justify-center space-x-0">
       <button
         className="btn join-item btn-sm"
         onClick={() => onPageChange(currentPage - 1)}

app/routes/_index.tsx

@@ -7,14 +7,15 @@ import { Header } from "~/components/organisms/Header";
 export const meta: MetaFunction = () => {
   return [
     { charset: "utf-8" },
+    { name: "viewport", content: "width=device-width, initial-scale=1" },
     { name: "author", content: "Gleb Khaykin" },
     { property: "og:title", content: "About | Gleb Khaykin" },
     { property: "og:description", content: "Gleb Khaykin's personal website" },
     { property: "og:type", content: "website" },
     { property: "og:url", content: "https://khaykingleb.com" },
     {
       property: "og:image",
-      content: "/img/van_gogh_wheatfield_with_crows.jpg",
+      content: "/img/avatar.jpg",
     },
   ];
 };
@@ -27,7 +28,7 @@ export default function IndexRoute() {
         <Avatar />
       </div>
       <div className="flex-grow">
-        <div className="font-eb-garamond-light mx-auto max-w-lg text-pretty text-center text-sm sm:text-base">
+        <div className="font-eb-garamond-light mx-auto max-w-lg text-pretty px-4 text-center text-sm sm:text-base">
           <p className="mb-2">
             Hi there! I&apos;m Gleb, a full-stack developer specializing in
             DevOps and MLOps engineering. My background includes distributed

app/routes/blog.$slug.tsx

@@ -42,8 +42,11 @@ const Pdf = lazy(() =>
 const Code = lazy(() =>
   import("react-notion-x/build/third-party/code").then(async (module) => {
     await Promise.all([
+      // @ts-expect-error: Expect missing type declarations for prism components
       import("prismjs/components/prism-python"),
+      // @ts-expect-error: Expect missing type declarations for prism components
       import("prismjs/components/prism-rust"),
+      // @ts-expect-error: Expect missing type declarations for prism components
       import("prismjs/components/prism-bash"),
     ]);
     return {
@@ -64,6 +67,7 @@ const Collection = lazy(() =>
 const NotionPage = React.memo(
   ({ recordMap }: { recordMap: ExtendedRecordMap }) => {
     return (
+      // @ts-expect-error: Expect missing type declarations for NotionRenderer
       <NotionRenderer
         recordMap={recordMap}
         fullPage={true}
@@ -107,13 +111,15 @@ export const loader: LoaderFunction = async ({
   return defer({ post, recordMap: recordMapPromise });
 };
 
+// @ts-expect-error: Expect not assignable type (otherwise, it would be a server timeout)
 export const meta: MetaFunction = ({ data }: { data: { post: Post } }) => {
   const { post } = data;
   const description = `Created at ${post.publishDate.replace(/-/g, "/")}`;
 
   return [
     { charset: "utf-8" },
     { name: "author", content: "Gleb Khaykin" },
+    { name: "viewport", content: "width=device-width, initial-scale=1" },
     {
       property: "og:image",
       content: post.imageUrl || "/img/van_gogh_wheatfield_with_cypresses.jpg",

app/routes/blog._index.tsx

@@ -11,14 +11,15 @@ import { posts } from "~/data/posts";
 export const meta: MetaFunction = () => {
   return [
     { charset: "utf-8" },
+    { name: "viewport", content: "width=device-width, initial-scale=1" },
     { name: "author", content: "Gleb Khaykin" },
     { property: "og:title", content: "Posts | Gleb Khaykin" },
     { property: "og:description", content: "Gleb Khaykin's personal website" },
     { property: "og:type", content: "website" },
     { property: "og:url", content: "https://khaykingleb.com/blog" },
     {
       property: "og:image",
-      content: "/img/van_gogh_wheatfield_under_thunderclouds.jpg",
+      content: "/img/van_gogh_wheatfield_with_cypresses.jpg",
     },
   ];
 };
@@ -79,7 +80,7 @@ export default function BlogRoute() {
 
   return (
     <div className="flex min-h-screen flex-col">
-      <Header backgroundImage="/img/van_gogh_wheatfield_under_thunderclouds.jpg" />
+      <Header backgroundImage="/img/van_gogh_wheatfield_with_cypresses.jpg" />
       <main className="flex flex-grow flex-col px-4 sm:px-6 lg:px-8">
         <div className="mx-auto flex h-full w-full max-w-[700px] flex-grow flex-col">
           <TagSearchBar tagOptions={tagOptions} setTagOptions={setTagOptions} />

app/styles/notion.css

@@ -34,9 +34,57 @@
 .notion-list,
 .notion-text {
   @apply font-eb-garamond-regular;
+
   max-width: 100%;
 }
 
+.notion-title {
+  margin-top: -1.5rem !important;
+  font-size: 1.75rem !important;
+}
+
+.notion-h1 {
+  font-size: 1.5rem !important;
+}
+
+.notion-h2 {
+  font-size: 1.25rem !important;
+}
+
+.notion-h3 {
+  font-size: 1rem !important;
+}
+
+.notion-table-of-contents,
+.notion-list,
+.notion-text {
+  font-size: 0.875rem !important;
+}
+
+@media (width >= 640px) {
+  .notion-title {
+    font-size: 2.5rem !important;
+  }
+
+  .notion-h1 {
+    font-size: 1.75rem !important;
+  }
+
+  .notion-h2 {
+    font-size: 1.5rem !important;
+  }
+
+  .notion-h3 {
+    font-size: 1.25rem !important;
+  }
+
+  .notion-table-of-contents,
+  .notion-list,
+  .notion-text {
+    font-size: 1rem !important;
+  }
+}
+
 .notion-code,
 .notion-code pre,
 .notion-code code {