style: improve layout

Author: khaykingleb

app/components/atoms/Avatar.tsx

@@ -1,6 +1,6 @@
 export const Avatar = () => {
   return (
-    <div className="h-40 w-40 overflow-hidden rounded-full sm:h-44 sm:w-44 md:h-48 md:w-48 lg:h-52 lg:w-52 xl:h-56 xl:w-56 2xl:h-64 2xl:w-64">
+    <div className="h-48 w-48 overflow-hidden rounded-full sm:h-64 sm:w-64">
       <img
         src="/avatar.jpg"
         alt="Avatar"

app/components/atoms/Copyright.tsx

@@ -1,6 +1,6 @@
 export const Copyright = () => {
   return (
-    <div className="text-center">
+    <div className="mb-2 text-center">
       <p>&copy; 2024 Gleb Khaykin</p>
     </div>
   );

app/components/molecules/MenuItems.tsx

@@ -2,7 +2,7 @@ import { Link } from "@remix-run/react";
 
 export const MenuItems = () => {
   return (
-    <ul className="menu menu-horizontal menu-md px-1 text-white">
+    <ul className="menu menu-horizontal menu-md text-white">
       <li>
         <Link
           to="/blog"

app/components/molecules/SocialMedia.tsx

@@ -4,7 +4,7 @@ import { MdEmail } from "react-icons/md";
 
 export const SocialMedia = () => {
   return (
-    <div className="flex space-x-4">
+    <div className="mt-2 flex space-x-3">
       <a
         href="https://www.linkedin.com/in/khaykingleb"
         target="_blank"

app/components/molecules/TagSearchBar.tsx

@@ -191,7 +191,7 @@ export const TagSearchBar = ({
 
   return (
     <div
-      className="font-eb-garamond-light relative mx-auto mt-8 w-full max-w-xs"
+      className="font-eb-garamond-light relative mx-auto mt-6 w-full max-w-xs"
       ref={TagSearchBarRef}
       onKeyDown={handleKeyDown}
       role="combobox"

app/routes/_index.tsx

@@ -24,31 +24,47 @@ export default function IndexRoute() {
   return (
     <div className="flex min-h-screen flex-col">
       <Header backgroundImage="/img/van_gogh_wheatfield_with_crows.jpg" />
-      <div className="avatar flex items-center justify-center p-6">
+      <div className="avatar mb-6 mt-6 flex items-center justify-center">
         <Avatar />
       </div>
       <div className="flex-grow">
-        <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">
+        <div className="font-eb-garamond-light mx-auto max-w-[500px] px-4 text-center text-sm sm:text-base">
+          <p className="mb-3">
             Hi there! I&apos;m Gleb, a full-stack developer specializing in
             DevOps and MLOps engineering. My background includes distributed
             systems, speech processing, speech synthesis, natural language
             processing, and finance. When I&apos;m not coding, you&apos;ll
             likely find me at the gym, lifting weights.
           </p>
-          <p className="mb-2">
+          <p className="mb-3">
             I&apos;ve graduated summa cum laude from the Higher School of
             Economics, where I studied both Computer Science and Finance. This
             dual background helps me understand both the technical and business
             aspects of projects.
           </p>
-          <p className="mb-2">
+          <p className="mb-3">
             On this site, you&apos;ll find a collection of resources that
             I&apos;ve found valuable. Feel free to explore, and I hope you
-            discover some useful tools and materials for yourself! You can also
-            find links to my Telegram channel (in Russian) and X profile (in
-            English) in the footer below. It&apos;s where I share my thoughts
-            and materials in a more freestyle format.
+            discover some useful tools and materials for yourself! For more of
+            my thoughts and freestyle content, check out my{" "}
+            <a
+              href="https://t.me/khaykingleb_blog"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-blue-600 hover:underline"
+            >
+              Telegram channel
+            </a>{" "}
+            (in Russian) and{" "}
+            <a
+              href="https://x.com/khaykingleb"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-blue-600 hover:underline"
+            >
+              X profile
+            </a>{" "}
+            (in English).
           </p>
         </div>
       </div>

app/routes/blog.$slug.tsx

@@ -122,7 +122,7 @@ export const meta: MetaFunction = ({ data }: { data: { post: Post } }) => {
     { name: "viewport", content: "width=device-width, initial-scale=1" },
     {
       property: "og:image",
-      content: post.imageUrl || "/img/van_gogh_wheatfield_with_cypresses.jpg",
+      content: post.imageUrl || "/img/van_gogh_wheatfield_with_crows.jpg",
     },
     { property: "og:title", content: post.title },
     { property: "og:description", content: description },
@@ -140,7 +140,7 @@ export default function BlogPostRoute() {
 
   return (
     <div className="flex min-h-screen flex-col">
-      <Header backgroundImage="/img/van_gogh_wheatfield_with_cypresses.jpg" />
+      <Header backgroundImage="/img/van_gogh_wheatfield_with_crows.jpg" />
       <main className="flex-grow px-4 sm:px-6 lg:px-8">
         <div className="mx-auto flex min-h-[calc(100vh-4rem-6rem)] max-w-[700px] flex-col">
           <Suspense fallback={<LoadingSpinner />}>

app/routes/blog._index.tsx

@@ -19,7 +19,7 @@ export const meta: MetaFunction = () => {
     { property: "og:url", content: "https://khaykingleb.com/blog" },
     {
       property: "og:image",
-      content: "/img/van_gogh_wheatfield_with_cypresses.jpg",
+      content: "/img/van_gogh_wheatfield_with_crows.jpg",
     },
   ];
 };
@@ -80,7 +80,7 @@ export default function BlogRoute() {
 
   return (
     <div className="flex min-h-screen flex-col">
-      <Header backgroundImage="/img/van_gogh_wheatfield_with_cypresses.jpg" />
+      <Header backgroundImage="/img/van_gogh_wheatfield_with_crows.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} />