Using only two colors for light & dark theme

blogs/debugging-tales.mdx

@@ -1,5 +1,8 @@
 ---
 title: Debugging Tales
+author: Ali Reza
+headline: Front-End developer
+img: https://www.alirezasamadi.com/_next/image?url=%2F_next%2Fstatic%2Fmedia%2FMy%20Image.0e022541.png&w=256&q=75
 bio: Throughout the past two weeks, I've been learning MDX with Nextjs.
 published: 2023/03/01
 banner: https://cdn.hashnode.com/res/hashnode/image/upload/v1677105369366/9cfd870b-146f-4867-b598-b55b173a6bac.png?w=1600&h=840&fit=crop&crop=entropy&auto=compress,format&format=webp

blogs/how-do-i-make-a-website.mdx

@@ -1,5 +1,8 @@
 ---
 title: "How do I make a Website?"
+author: Ali Reza
+headline: Front-End developer
+img: https://www.alirezasamadi.com/_next/image?url=%2F_next%2Fstatic%2Fmedia%2FMy%20Image.0e022541.png&w=256&q=75
 bio: "Read this blog as if you are talking to yourself. These are all my thoughts and 2 years of experience."
 published: "2023/01/15"
 banner: "https://cdn.hashnode.com/res/hashnode/image/upload/v1673768148176/0fb5d5d5-34b3-4dff-8e97-82bb54118d72.png?w=1600&h=840&fit=crop&crop=entropy&auto=compress,format&format=webp"

components/blogs/BlockQuote.tsx

@@ -6,7 +6,7 @@ type props = {
 
 const BlockQuote = ({ children }: props) => {
   return (
-    <blockquote className="p-4 italic border-2 border-secondary bg-slate-200 dark:bg-secondary dark:bg-opacity-20 rounded-xl">
+    <blockquote className="p-4 italic border-2 border-primary dark:border-secondary bg-primary/50 dark:bg-secondary dark:bg-opacity-20 rounded-xl">
       {children}
     </blockquote>
   );

components/blogs/Code.tsx

@@ -6,7 +6,7 @@ type Props = {
 
 export default function Code({ children }: Props) {
   return (
-    <code className="p-1 rounded-md bg-[#e1e1e1] dark:bg-secondary dark:bg-opacity-50">
+    <code className="p-1 rounded-md bg-primary dark:bg-secondary dark:bg-opacity-50">
       {children}
     </code>
   );

next.config.js

@@ -2,7 +2,7 @@
 const nextConfig = {
   reactStrictMode: true,
   images: {
-    domains: ["i.ibb.co", "cdn.hashnode.com"],
+    domains: ["i.ibb.co", "cdn.hashnode.com", "www.alirezasamadi.com"],
   },
 };
 

pages/blogs/[slug].tsx

@@ -18,6 +18,9 @@ type Props = {
   mdxSource: any;
   data: {
     title: string;
+    img: string;
+    author: string;
+    headline: string;
     banner: string;
     bio: string;
     published: string;
@@ -32,7 +35,7 @@ export default function Slug({ mdxSource, data }: Props) {
   return (
     <>
       <HeadTag title="Testimonial" />
-      <div className="mt-6" id="content">
+      <div className="mt-6">
         <div className="py-8 border-b-2 border-gray-400">
           <Image
             src={data.banner}
@@ -46,8 +49,23 @@ export default function Slug({ mdxSource, data }: Props) {
           </h1>
           <p className="text-sm text-center md:text-xl">{data.bio}</p>
           <p className="mt-3 text-center opacity-70">{data.published}</p>
+          <div>
+            <div className="flex items-center gap-2">
+              <Image
+                src={data.img}
+                width={100}
+                height={100}
+                alt=""
+                className="w-12 h-12 rounded-full"
+              />
+              <div>
+                <h1 className="font-bold leading-5">{data.author}</h1>
+                <small className="opacity-75">{data.headline}</small>
+              </div>
+            </div>
+          </div>
         </div>
-        <div className="mt-8">
+        <div className="mt-8" id="content">
           <MDXRemote {...mdxSource} components={Components}></MDXRemote>
         </div>
         <button

pages/index.tsx

@@ -57,7 +57,7 @@ export default function Home() {
             href="https://github.com/AliReza1083"
             target={"_blank"}
             aria-label="Check out my GitHub profile"
-            className="basis-[176px] p-4 text-2xl flex justify-between border-2 rounded-lg border-social-media hover:bg-[#EFEFEF] dark:hover:bg-[#1b1b1b] duration-100"
+            className="basis-[176px] p-4 text-2xl flex justify-between border-2 rounded-lg border-primary/40 hover:border-primary hover:bg-primary/30 dark:hover:bg-secondary/10 dark:border-secondary duration-100"
           >
             <AiFillGithub />
             <FiArrowUpRight />
@@ -66,7 +66,7 @@ export default function Home() {
             href="https://twitter.com/Ali_Developer05"
             target={"_blank"}
             aria-label="Check out my Twitter profile"
-            className="basis-[176px] p-4 text-2xl flex justify-between border-2 rounded-lg border-social-media hover:bg-[#EFEFEF] dark:hover:bg-[#1b1b1b] duration-100"
+            className="basis-[176px] p-4 text-2xl flex justify-between border-2 rounded-lg border-primary/40 hover:border-primary hover:bg-primary/30 dark:hover:bg-secondary/10 dark:border-secondary duration-100"
           >
             <AiFillTwitterCircle />
             <FiArrowUpRight />
@@ -75,7 +75,7 @@ export default function Home() {
             href="https://www.linkedin.com/in/alireza17"
             target={"_blank"}
             aria-label="Check out my LinkedIn profile"
-            className="basis-[176px] p-4 text-2xl flex justify-between border-2 rounded-lg border-social-media hover:bg-[#EFEFEF] dark:hover:bg-[#1b1b1b] duration-100"
+            className="basis-[176px] p-4 text-2xl flex justify-between border-2 rounded-lg border-primary/40 hover:border-primary hover:bg-primary/30 dark:hover:bg-secondary/10 dark:border-secondary duration-100"
           >
             <AiFillLinkedin />
             <FiArrowUpRight />

tailwind.config.js

@@ -10,7 +10,7 @@ module.exports = {
     extend: {
       colors: {
         black: "#212121",
-        primary: "#E1E1E1",
+        primary: "#E8E2E2",
         secondary: "#3A6351",
       },
       boxShadow: {