Update post previews and colors

artemnovichkov · Oct 31, 2024 · 7e0c1e6 · 7e0c1e6
1 parent 141f76b
commit 7e0c1e6
Show file tree

Hide file tree

Showing 10 changed files with 44 additions and 58 deletions.
diff --git a/public/images/companies/skyeng.png b/public/images/companies/skyeng.png
diff --git a/src/app/_components/experience.tsx b/src/app/_components/experience.tsx
@@ -3,10 +3,10 @@ import Image from "next/image"
 export default function Experience() {
     return (
         <div>
-            <p className="font-bold text-3xl tracking-tight mb-4 text-black dark:text-white">
+            <p className="font-bold text-3xl tracking-tight mb-4 text-zinc-800 dark:text-gray-100">
                 Experience
             </p>
-            <h3 className="font-bold text-2xl tracking-tight mb-4 text-black dark:text-white">
+            <h3 className="font-bold text-2xl tracking-tight mb-4 text-zinc-800 dark:text-gray-100">
                 Full-time positions
             </h3>
             <ul>
@@ -16,7 +16,7 @@ export default function Experience() {
                     </li>
                 ))}
             </ul>
-            <h3 className="font-bold text-2xl tracking-tight mb-4 text-black dark:text-white">
+            <h3 className="font-bold text-2xl tracking-tight mb-4 text-zinc-800 dark:text-gray-100">
                 Part-time positions
             </h3>
             <ul>
@@ -60,15 +60,15 @@ const Position: React.FC<PositionProps> = ({ position }) => {
                 width={40}
                 height={40}
             />
-            <div className="flex flex-col items-start">
-                <p className="text-xl text-black dark:text-white">{position.title}</p>
-                <a className="text-base underline text-black dark:text-white"
+            <div className="flex flex-col">
+                <p className="text-x font-bold text-zinc-800 dark:text-gray-100">{position.title}</p>
+                <a className="text-base underline text-zinc-800 dark:text-gray-100"
                     target="_blank"
                     rel="noopener noreferrer"
                     href={position.url}>
                     {position.company}
                 </a>
-                <div className="flex items-center gap-1 text-sm text-gray-600 dark:text-gray-400">
+                <div className="flex items-center gap-1 text-sm text-zinc-500 dark:text-gray-400">
                     {startDateTag}
                     {`→`}
                     {finishDateTag}

diff --git a/src/app/_components/header.tsx b/src/app/_components/header.tsx
@@ -4,13 +4,13 @@ export default function Header() {
     return (
         <header className="sticky-nav w-full py-4">
             <nav>
-                <Link href="/" className="p-4 text-gray-900 hover:text-gray-600 dark:text-white">
+                <Link href="/" className="p-4 text-gray-900 hover:text-gray-600 dark:text-gray-100">
                     Home
                 </Link>
-                <Link href="/blog" className="p-4 text-gray-900 hover:text-gray-600 dark:text-white">
+                <Link href="/blog" className="p-4 text-gray-900 hover:text-gray-600 dark:text-gray-100">
                     Blog
                 </Link>
-                <Link href="/feed.xml" className="p-4 text-gray-900 hover:text-gray-600 dark:text-white">
+                <Link href="/feed.xml" className="p-4 text-gray-900 hover:text-gray-600 dark:text-gray-100">
                     RSS
                 </Link>
             </nav>

diff --git a/src/app/_components/post-preview.tsx b/src/app/_components/post-preview.tsx
@@ -1,6 +1,9 @@
 import Image from 'next/image'
 import Link from 'next/link'
 import { Post } from '@/interfaces/post';
+import PostDate from './post-date';
+import readingTime from 'reading-time'
+import ViewCounter from './view-counter';
 
 interface PostPreviewProps {
     post: Post;
@@ -9,21 +12,30 @@ interface PostPreviewProps {
 export default function PostPreview({ post }: PostPreviewProps) {
     return (
         <Link href={`/blog/${post.slug}`}>
-            <div className="mb-10">
-                    <h4 className="text-xl font-medium text-gray-900 dark:text-white"> 
-                        {post.title}
-                    </h4>
-                    <h4 className="mb-2 text-base font-normal text-gray-600 dark:text-gray-400"> 
-                        {post.description}
-                    </h4>
-                    <Image className="rounded"
-                            priority
-                            width={1200}
-                            height={740}
-                            src={post.cover}
-                            alt={`cover`}
-                    />
+            <div className="mb-8 flex items-center bg-zinc-200 dark:bg-gray-800 p-4 rounded-lg border border-zinc-300 dark:border-gray-600">
+                <Image className="rounded mr-4"
+                    priority
+                    width={200}
+                    height={124}
+                    src={post.cover}
+                    alt={`cover`}
+                />
+                <div className="flex flex-col justify-between min-h-32">
+                    <div>
+                        <h4 className="text-xl font-medium text-zinc-800 dark:text-gray-100">
+                            {post.title}
+                        </h4>
+                        <h4 className="mb-4 text-base font-normal text-zinc-500 dark:text-gray-400">
+                            {post.description}
+                        </h4>
+                    </div>
+                    <div className="text-sm font-normal font-xs text-zinc-500 dark:text-gray-400">
+                        <PostDate dateString={post.date} />
+                        {` • `}
+                        {readingTime(post.content).text}
+                    </div>
                 </div>
+            </div>
         </Link>
     )
 }
diff --git a/src/app/blog/[slug]/page.tsx b/src/app/blog/[slug]/page.tsx
@@ -51,7 +51,7 @@ export default async function BlogPost({ params }: { params: { slug: string } })
     return (
         <div>
             <article>
-                <h1 className="mb-4 font-bold text-3xl tracking-tight text-black dark:text-white">
+                <h1 className="mb-4 font-bold text-3xl tracking-tight text-zinc-800 dark:text-gray-100">
                     {post.title}
                 </h1>
                 <PostHeader post={post} />

diff --git a/src/app/blog/page.tsx b/src/app/blog/page.tsx
@@ -5,7 +5,7 @@ export default function Blog() {
   const posts = getAllPosts();
   return (
     <main>
-      <p className="font-bold text-3xl tracking-tight mb-8 text-black dark:text-white">Blog</p>
+      <p className="font-bold text-3xl tracking-tight mb-8 text-zinc-800 dark:text-gray-100">Blog</p>
       <section>
         <ul>
           {posts.map((post) => (

diff --git a/src/app/components/post-preview.js b/src/app/components/post-preview.js
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -13,15 +13,13 @@
   position: sticky;
   z-index: 10;
   top: 0;
-  backdrop-filter: saturate(180%) blur(20px);
-  transition: background-color 0.1 ease-in-out;
 }
 
 .shiki {
-  background-color: rgb(17 24 39) !important;
+  background-color: rgb(31 41 55) !important;
 }
 
 /* inline code */
 .prose code:not(.shiki code) {
-  @apply px-1 py-0.5 border rounded-md bg-gray-100 dark:bg-gray-900 border-gray-100 dark:border-gray-800 dark:border-gray-800 text-gray-800 dark:text-white;
+  @apply px-1 py-0.5 border rounded-md bg-gray-100 dark:bg-gray-800 dark:border-gray-800 text-gray-800 dark:text-white;
 }
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -39,7 +39,7 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
-      <body className="bg-white dark:bg-black">
+      <body className="bg-zinc-100 dark:bg-gray-900">
         <Header />
         <main className="flex flex-col justify-center max-w-2xl mx-auto px-4 sm:px-0">
           {children}

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -4,7 +4,7 @@ import Experience from "./_components/experience";
 export default function About() {
     return (
         <div className="flex flex-col justify-center items-start max-w-2xl mx-auto">
-            <p className="font-bold text-3xl tracking-tight mb-8 text-black dark:text-white">About Me</p>
+            <p className="font-bold text-3xl tracking-tight mb-8 text-zinc-800 dark:text-gray-100">About Me</p>
             <Image
                 className="rounded-full"
                 priority
@@ -13,7 +13,7 @@ export default function About() {
                 width={144}
                 alt="Artem Novichkov"
             />
-            <div className="flex flex-col gap-2 my-4 text-black dark:text-white">
+            <div className="flex flex-col gap-2 my-4 text-zinc-800 dark:text-gray-100">
                 <p>
                     Hi there! My name is Artem Novichkov. I am an iOS Developer.
                 </p>
@@ -30,7 +30,7 @@ export default function About() {
                     </a>. I am currently working on developing pet projects and writing blog posts on SwiftUI.
                 </p>
                 <p>
-                    Occasionally, I also enjoy sharing my knowledge through public speaking. You can find a playlist of my talks on &nbsp;
+                    Occasionally, I also enjoy sharing my knowledge through public speaking. You can find a playlist of my talks on&nbsp;
                     <a className="text-base underline" href="https://www.youtube.com/playlist?list=PLRSU1SC70qRudLaYKSjM14tJmA-J-dRvU" target="_blank" rel="noopener noreferrer">
                         Youtube
                     </a>.