yt fix

components/Youtube.tsx

@@ -1,9 +1,5 @@
-export const YouTubeVideo = ({id, children} : any) => (
-    <iframe
-      src={'https://www.youtube.com/embed/' + id}
-      width="640"
-      height="360"
-    >
-      {children}
+export const YouTubeVideo = ({ id, children }: any) => (
+    <iframe src={'https://www.youtube.com/embed/' + id} className="w-full xl:h-96 md:h-80 h-64">
+        {children}
     </iframe>
 )

layouts/MainLayout.tsx

@@ -1,13 +1,12 @@
-import { PropsWithChildren } from "react";
-import { R3Gradient } from '../components/R3Background';
-import { Navbar } from "../components/Navbar";
+import { PropsWithChildren } from 'react'
+import { R3Gradient } from '../components/R3Background'
+import { Navbar } from '../components/Navbar'
 
 export const MainLayout = ({ children }: PropsWithChildren) => {
-  return (
-    <div className="w-full">
-      <Navbar />
-      <R3Gradient />
-      <main className="xl:p-5 p-4 px-5 xl:mx-0">{children}</main>
-    </div>
-  );
-};
+    return (
+        <div className="w-full">
+            <Navbar />
+            <main className="xl:p-5 p-4 px-5 xl:mx-0">{children}</main>
+        </div>
+    )
+}

pages/_app.tsx

@@ -1,6 +1,12 @@
+import { R3Gradient } from '../components/R3Background'
 import '../styles/globals.css'
 import type { AppProps } from 'next/app'
 
 export default function App({ Component, pageProps }: AppProps) {
-  return <Component {...pageProps} />
+    return (
+        <>
+            <R3Gradient />
+            <Component {...pageProps} />
+        </>
+    )
 }

pages/projects/index.tsx

@@ -1,71 +1,55 @@
-import { GetServerSideProps } from "next";
-import { MainLayout } from "../../layouts/MainLayout";
-import { Post, getAllProjectsFrontMatter } from "../../utils/markdown";
-import Link from "next/link";
-import { formatDate } from "../../utils/general";
-import { BasicArticleProps } from "../../components/PostHeader";
+import { GetServerSideProps } from 'next'
+import { MainLayout } from '../../layouts/MainLayout'
+import { Post, getAllProjectsFrontMatter } from '../../utils/markdown'
+import Link from 'next/link'
+import { formatDate } from '../../utils/general'
+import { BasicArticleProps } from '../../components/PostHeader'
 
-const ProjectCard = ({
-  project,
-  slug,
-}: {
-  project: BasicArticleProps;
-  slug: string;
-}) => {
-  return (
-    <div className="p-4 rounded-md border border-gray-200 shadow-md shadow-gray-200 dark:shadow-gray-900 dark:border-gray-700 grid grid-cols-1 xl:grid-cols-2 items-center gap-4 bg-black bg-opacity-60">
-      <div className="order-last xl:order-1">
-        <div className="text-sm font-medium text-gray-500">
-          {formatDate(project.date)}
+const ProjectCard = ({ project, slug }: { project: BasicArticleProps; slug: string }) => {
+    return (
+        <div className="p-4 rounded-md border border-gray-200 shadow-md shadow-gray-200 dark:shadow-gray-900 dark:border-gray-700 grid grid-cols-1 xl:grid-cols-2 items-center gap-4 bg-black bg-opacity-60">
+            <div className="order-last xl:order-1">
+                <div className="text-sm font-medium text-gray-500">{formatDate(project.date)}</div>
+                <h2 className="text-2xl font-bold">{project.title}</h2>
+                <p className="text-gray-600 dark:text-gray-400 text-sm">{project.description}</p>
+                <Link href={`project/${slug}`}>
+                    <button className="bg-action px-2 py-1 rounded-md mt-4 hover:bg-action/60 transition-all ease-in duration-100 font-bold text-white">
+                        Read more
+                    </button>
+                </Link>
+            </div>
+            {project.thumbnail && (
+                <img
+                    src={project.thumbnail}
+                    alt={`${slug}-thumbnail`}
+                    className="w-full xl:h-40 h-auto object-cover rounded-md order-1 xl:order-last"
+                />
+            )}
         </div>
-        <h2 className="text-2xl font-bold">{project.title}</h2>
-        <p className="text-gray-600 dark:text-gray-400 text-sm">
-          {project.description}
-        </p>
-        <Link href={`project/${slug}`}>
-          <button className="bg-action px-2 py-1 rounded-md mt-4 hover:bg-action/60 transition-all ease-in duration-100 font-bold text-white">
-            Read more
-          </button>
-        </Link>
-      </div>
-      {project.thumbnail && (
-        <img
-          src={project.thumbnail}
-          alt={`${slug}-thumbnail`}
-          className="w-full xl:h-40 h-auto object-cover rounded-md order-1 xl:order-last"
-        />
-      )}
-    </div>
-  );
-};
+    )
+}
 
 const Projects = ({ posts }: { posts: Post[] }) => {
-  return (
-    <MainLayout>
-      <h1 className="text-3xl font-bold text-gray-800 dark:text-gray-100">
-        Projects
-      </h1>
-      <div className="w-full h-0.5 bg-violet-200 dark:bg-white/20 my-4 rounded-full" />
-      <div className="grid grid-cols-1 gap-4">
-        {posts.map((post, index) => (
-          <ProjectCard
-            key={index}
-            project={post.frontMatter as BasicArticleProps}
-            slug={post.slug}
-          />
-        ))}
-      </div>
-    </MainLayout>
-  );
-};
+    return (
+        <MainLayout>
+            <h1 className="text-3xl font-bold text-gray-800 dark:text-gray-100">Projects</h1>
+            <div className="w-full h-0.5 bg-violet-200 dark:bg-white/20 my-4 rounded-full" />
+            <div className="grid grid-cols-1 gap-4">
+                {posts.map((post, index) => (
+                    <ProjectCard key={index} project={post.frontMatter as BasicArticleProps} slug={post.slug} />
+                ))}
+            </div>
+        </MainLayout>
+    )
+}
 
 export const getServerSideProps: GetServerSideProps = async () => {
-  const posts = getAllProjectsFrontMatter();
-  return {
-    props: {
-      posts,
-    },
-  };
-};
+    const posts = getAllProjectsFrontMatter()
+    return {
+        props: {
+            posts,
+        },
+    }
+}
 
-export default Projects;
+export default Projects