Implement Video section and style Skills cards

Author: Shourov-Paul

content/videos/videoq.json

@@ -0,0 +1,14 @@
+[
+    {
+        "id": "8tDqHPajY8o",
+        "title": "KiCad 9 Tutorial for Beginners | Learn PCB Design Step by Step",
+        "description": "Learn PCB Design Step by Step with KiCad 9.",
+        "videoUrl": "https://www.youtube.com/embed/8tDqHPajY8o"
+    },
+    {
+        "id": "eruujRirdkI",
+        "title": "Top 8 Best KiCad 9 Plugins for Beginners | Boost Your PCB Design Workflow in 2026",
+        "description": "Boost Your PCB Design Workflow with these top KiCad plugins.",
+        "videoUrl": "https://www.youtube.com/embed/eruujRirdkI"
+    }
+]

src/app/page.tsx

@@ -3,17 +3,20 @@ import Hero from '@/components/Hero/Hero'
 import ProjectSection from '@/components/Projects/ProjectSection'
 import ServiceSection from '@/components/Services/ServiceSection'
 import TestimonialSection from '@/components/Testimonials/TestimonialSection'
-import { getAllProjects, getAllTestimonials } from '@/services'
+import VideoSection from '@/components/Videos/VideoSection'
+import { getAllProjects, getAllTestimonials, getVideos } from '@/services'
 
 export default async function Home() {
   const projects = await getAllProjects()
   const testimonials = await getAllTestimonials()
+  const videos = await getVideos()
 
   return (
     <main>
       <Hero />
       <div className="mx-auto my-8 max-w-[1200px] px-4 md:my-[3.75rem]">
         <ProjectSection projects={projects} />
+        <VideoSection videos={videos} />
         <ServiceSection />
         {/* <TestimonialSection testimonials={testimonials} /> */}
         <ContactSection />

src/components/Navbar/Navbar.tsx

@@ -15,6 +15,10 @@ const navItems = [
     label: 'PROJECTS',
     href: '/#projects',
   },
+  {
+    label: 'VIDEO',
+    href: '/#videos',
+  },
   {
     label: 'SKILLS',
     href: '/#skills',

src/components/Services/ServiceCard.tsx

@@ -11,8 +11,8 @@ const ServiceCard: React.FC<ServiceCardTypes> = ({ title, shortDescription, icon
     <div className="bg-secondary border-border flex flex-col items-center rounded-[14px] border p-5">
       <Image src={icon} alt={title} className="my-1 size-14" />
       <h5 className="text-accent mt-2 mb-5 text-center text-base font-semibold">{title}</h5>
-      <div className="bg-primary rounded-2xl p-4">
-        <p className="text-primary-content text-center text-sm font-normal">{shortDescription}</p>
+      <div className="bg-primary text-primary-content my-4 h-[80px] w-full overflow-scroll rounded-2xl px-4 py-2">
+        <p className="text-center text-[14px] font-normal md:text-base">{shortDescription}</p>
       </div>
     </div>
   )

src/components/Videos/VideoSection.tsx

@@ -0,0 +1,33 @@
+import { Video } from '@/lib/types'
+import SectionHeading from '../SectionHeading/SectionHeading'
+
+const VideoSection = ({ videos }: { videos: Video[] }) => {
+    return (
+        <section id="videos" className="mb-24 scroll-mt-24">
+            <SectionHeading title="Videos" subtitle="My Recent Videos" />
+            <div className="my-8 grid grid-cols-1 gap-8 md:my-12 md:grid-cols-2">
+                {videos.map((video) => (
+                    <div
+                        key={video.id}
+                        className="border-border bg-secondary flex flex-col gap-4 rounded-2xl border p-4 transition-all duration-300 hover:border-accent">
+                        <div className="relative aspect-video w-full overflow-hidden rounded-xl">
+                            <iframe
+                                src={`https://www.youtube.com/embed/${video.id}`}
+                                title={video.title}
+                                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+                                allowFullScreen
+                                className="absolute top-0 left-0 h-full w-full border-0"
+                            />
+                        </div>
+                        <div className="flex flex-col gap-2 p-2">
+                            <h3 className="text-secondary-content text-xl font-bold">{video.title}</h3>
+                            <p className="text-neutral font-light">{video.description}</p>
+                        </div>
+                    </div>
+                ))}
+            </div>
+        </section>
+    )
+}
+
+export default VideoSection

src/lib/types.d.ts

@@ -29,6 +29,13 @@ export interface Heading {
   items: Heading[]
 }
 
+export interface Video {
+  id: string
+  title: string
+  description: string
+  videoUrl: string
+}
+
 export interface Testimonial {
   name: string
   title?: string

src/services/index.ts

@@ -1,4 +1,4 @@
-import { Project, Testimonial } from '@/lib/types'
+import { Project, Testimonial, Video } from '@/lib/types'
 import { promises as fs } from 'fs'
 import path from 'path'
 
@@ -62,4 +62,15 @@ const getProjectBySlug = async (slug: string): Promise<Project | undefined> => {
   return projects.find((project) => project.slug === slug)
 }
 
-export { getAllProjects, getAllTestimonials, getProjectBySlug }
+const getVideos = async (): Promise<Video[]> => {
+  try {
+    const filePath = path.join(process.cwd(), '/content/videos/videoq.json')
+    const fileContent = await fs.readFile(filePath, 'utf8')
+    return JSON.parse(fileContent)
+  } catch (error) {
+    console.error('Error fetching videos:', error)
+    return []
+  }
+}
+
+export { getAllProjects, getAllTestimonials, getProjectBySlug, getVideos }