diff --git a/Dockerfile b/Dockerfile
new file mode 100644
index 0000000..a404de3
--- /dev/null
+++ b/Dockerfile
@@ -0,0 +1,61 @@
+# Make sure it uses up to date node js version
+FROM node:23-alpine AS base
+
+FROM base AS deps
+RUN apk add --no-cache libc6-compat
+# If you still run into build issue, go to "Problem #3: Making /app is read only.
+# in case you have permission issues.
+WORKDIR /app
+
+COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* .npmrc* ./
+RUN \
+  if [ -f pnpm-lock.yaml ]; then corepack enable && corepack prepare pnpm@latest --activate && pnpm i --frozen-lockfile --ignore-scripts; \
+  elif [ -f yarn.lock ]; then corepack enable && corepack prepare yarn@stable --activate && yarn install --frozen-lockfile --ignore-scripts; \
+  elif [ -f package-lock.json ]; then npm ci --ignore-scripts; \
+  else echo "Lockfile not found." && exit 1; \
+  fi
+
+FROM base AS builder
+WORKDIR /app
+COPY --from=deps /app/node_modules ./node_modules
+COPY . .
+
+# Uncomment the following line in case you want to disable telemetry during the build.
+# ENV NEXT_TELEMETRY_DISABLED=1
+ENV NEXT_PRIVATE_STANDALONE=true
+
+RUN \
+  if [ -f pnpm-lock.yaml ]; then corepack enable && corepack prepare pnpm@latest --activate && pnpm rebuild -r && pnpm run build; \
+  elif [ -f yarn.lock ]; then corepack enable && corepack prepare yarn@stable --activate && yarn run build; \
+  elif [ -f package-lock.json ]; then npm run build; \
+  else echo "Lockfile not found." && exit 1; \
+  fi
+
+FROM base AS runner
+WORKDIR /app
+
+ENV NODE_ENV=production
+# Uncomment the following line in case you want to disable telemetry during the build.
+# ENV NEXT_TELEMETRY_DISABLED=1
+ENV NEXT_PRIVATE_STANDALONE=true
+ENV NEXT_CACHE_DIR=/tmp/next/cache
+
+RUN addgroup --system --gid 1001 nodejs
+RUN adduser --system --uid 1001 nextjs
+
+COPY --from=builder /app/public ./public
+
+COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
+COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
+
+# Prepare a writable cache directory for Next.js at runtime
+RUN mkdir -p /tmp/next/cache && chown -R nextjs:nodejs /tmp/next && chmod -R 775 /tmp/next
+
+USER nextjs
+
+EXPOSE 3000
+
+ENV PORT=3000
+
+ENV HOSTNAME="0.0.0.0"
+CMD ["node", "server.js"]
\ No newline at end of file
diff --git a/README.md b/README.md
index abc338e..2667ebe 100644
--- a/README.md
+++ b/README.md
@@ -15,14 +15,12 @@ A modern, responsive blog built with Next.js 15, Fumadocs MDX, and Tailwind CSS.
 ## 🚀 Getting Started
 
 ```bash
-# Clone the repository
-git clone <repo-url>
-cd blog-template
+# option1: build docker image and run a container
+docker build -t ze-portfolio .
+docker run --rm -p 3000:3000 ze-portfolio
 
-# Install dependencies
+# option2: Run locally
 pnpm install
-
-# Start development server
 pnpm dev
 
 # Build for production
diff --git a/app/blog/[slug]/metadata.ts b/app/blog/[slug]/metadata.ts
index 32deee9..ad1ae6c 100644
--- a/app/blog/[slug]/metadata.ts
+++ b/app/blog/[slug]/metadata.ts
@@ -1,108 +1,108 @@
-import { Metadata } from "next";
-import { docs, meta } from "@/.source";
-import { loader } from "fumadocs-core/source";
-import { createMDXSource } from "fumadocs-mdx";
-import { siteConfig } from "@/lib/site";
-
-const blogSource = loader({
-  baseUrl: "/blog",
-  source: createMDXSource(docs, meta),
-});
-
-export async function generateMetadata({
-  params,
-}: {
-  params: Promise<{ slug: string }>;
-}): Promise<Metadata> {
-  try {
-    const { slug } = await params;
-
-    if (!slug || slug.length === 0) {
-      return {
-        title: "Blog Not Found",
-        description: "The requested blog post could not be found.",
-      };
-    }
-
-    const page = blogSource.getPage([slug]);
-
-    if (!page) {
-      return {
-        title: "Blog Not Found",
-        description: "The requested blog post could not be found.",
-      };
-    }
-
-    const ogUrl = `${siteConfig.url}/blog/${slug}`;
-    const ogImage = `${ogUrl}/opengraph-image`;
-
-    return {
-      title: page.data.title,
-      description: page.data.description,
-      keywords: [
-        page.data.title,
-        ...(page.data.tags || []),
-        "Blog",
-        "Article",
-        "Web Development",
-        "Programming",
-        "Technology",
-        "Software Engineering",
-      ],
-      authors: [
-        {
-          name: page.data.author || "Magic UI",
-          url: siteConfig.url,
-        },
-      ],
-      creator: page.data.author || "Magic UI",
-      publisher: "Magic UI",
-      robots: {
-        index: true,
-        follow: true,
-        googleBot: {
-          index: true,
-          follow: true,
-          "max-video-preview": -1,
-          "max-image-preview": "large",
-          "max-snippet": -1,
-        },
-      },
-      openGraph: {
-        title: page.data.title,
-        description: page.data.description,
-        type: "article",
-        url: ogUrl,
-        publishedTime: page.data.date,
-        authors: [page.data.author || "Magic UI"],
-        tags: page.data.tags,
-        images: [
-          {
-            url: page.data.thumbnail || ogImage,
-            width: 1200,
-            height: 630,
-            alt: page.data.title,
-          },
-        ],
-        siteName: siteConfig.name,
-      },
-      twitter: {
-        card: "summary_large_image",
-        title: page.data.title,
-        description: page.data.description,
-        images: [page.data.thumbnail || ogImage],
-        creator: "@dillionverma",
-        site: "@dillionverma",
-      },
-      alternates: {
-        canonical: ogUrl,
-      },
-    };
-  } catch (error) {
-    console.error("Error generating metadata:", error);
-    return {
-      title: "Blog Not Found",
-      description: "The requested blog post could not be found.",
-    };
-  }
-}
+import { Metadata } from "next";
+import { docs, meta } from "@/.source";
+import { loader } from "fumadocs-core/source";
+import { createMDXSource } from "fumadocs-mdx";
+import { siteConfig } from "@/lib/site";
+
+const blogSource = loader({
+  baseUrl: "/blog",
+  source: createMDXSource(docs, meta),
+});
+
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{ slug: string }>;
+}): Promise<Metadata> {
+  try {
+    const { slug } = await params;
+
+    if (!slug || slug.length === 0) {
+      return {
+        title: "Blog Not Found",
+        description: "The requested blog post could not be found.",
+      };
+    }
+
+    const page = blogSource.getPage([slug]);
+
+    if (!page) {
+      return {
+        title: "Blog Not Found",
+        description: "The requested blog post could not be found.",
+      };
+    }
+
+    const ogUrl = `${siteConfig.url}/blog/${slug}`;
+    const ogImage = `${ogUrl}/opengraph-image`;
+
+    return {
+      title: page.data.title,
+      description: page.data.description,
+      keywords: [
+        page.data.title,
+        ...(page.data.tags || []),
+        "Blog",
+        "Article",
+        "Web Development",
+        "Programming",
+        "Technology",
+        "Software Engineering",
+      ],
+      authors: [
+        {
+          name: page.data.author || "Magic UI",
+          url: siteConfig.url,
+        },
+      ],
+      creator: page.data.author || "Magic UI",
+      publisher: "Magic UI",
+      robots: {
+        index: true,
+        follow: true,
+        googleBot: {
+          index: true,
+          follow: true,
+          "max-video-preview": -1,
+          "max-image-preview": "large",
+          "max-snippet": -1,
+        },
+      },
+      openGraph: {
+        title: page.data.title,
+        description: page.data.description,
+        type: "article",
+        url: ogUrl,
+        publishedTime: page.data.date,
+        authors: [page.data.author || "Magic UI"],
+        tags: page.data.tags,
+        images: [
+          {
+            url: page.data.thumbnail || ogImage,
+            width: 1200,
+            height: 630,
+            alt: page.data.title,
+          },
+        ],
+        siteName: siteConfig.name,
+      },
+      twitter: {
+        card: "summary_large_image",
+        title: page.data.title,
+        description: page.data.description,
+        images: [page.data.thumbnail || ogImage],
+        creator: "@dillionverma",
+        site: "@dillionverma",
+      },
+      alternates: {
+        canonical: ogUrl,
+      },
+    };
+  } catch (error) {
+    console.error("Error generating metadata:", error);
+    return {
+      title: "Blog Not Found",
+      description: "The requested blog post could not be found.",
+    };
+  }
+}
diff --git a/app/page.tsx b/app/page.tsx
index a2de68b..3c67942 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -89,10 +89,10 @@ export default async function HomePage({
         <div className="max-w-7xl mx-auto w-full">
           <div className="flex flex-col gap-2">
             <h1 className="font-medium text-4xl md:text-5xl tracking-tighter">
-              Magic UI Blog
+              Portfolio
             </h1>
             <p className="text-muted-foreground text-sm md:text-base lg:text-lg">
-              Latest news and updates from Magic UI.
+              All my projects and work.
             </p>
           </div>
         </div>
diff --git a/blog/content/21-best-free-react-components.mdx b/blog/content/21-best-free-react-components.mdx
deleted file mode 100644
index f46fa7a..0000000
--- a/blog/content/21-best-free-react-components.mdx
+++ /dev/null
@@ -1,139 +0,0 @@
----
-title: "21 Best Free React Components Libraries To Kickstart Projects"
-description: "Discover the most powerful and popular React component libraries that will accelerate your development workflow and help you build stunning UIs."
-date: "2024-12-01"
-tags: ["UI Frameworks", "React", "Components"]
-featured: true
-readTime: "16 min read"
-author: "arghya"
-thumbnail: "/thumbnails/react-components-libraries.jpg"
----
-
-Building modern React applications requires a solid foundation of reusable components. Whether you're starting a new project or looking to enhance an existing one, having access to high-quality component libraries can significantly accelerate your development process.
-
-## Why Use Component Libraries?
-
-Component libraries offer several advantages:
-
-- **Consistency**: Maintain a unified design language across your application
-- **Speed**: Rapid prototyping and development
-- **Accessibility**: Built-in accessibility features and best practices
-- **Customization**: Flexible theming and styling options
-
-## Top React Component Libraries
-
-### 1. Material-UI (MUI)
-
-Material-UI is one of the most popular React component libraries, implementing Google's Material Design principles.
-
-```tsx
-import Button from "@mui/material/Button";
-import Stack from "@mui/material/Stack";
-
-export default function BasicButtons() {
-  return (
-    <Stack spacing={2} direction="row">
-      <Button variant="text">Text</Button>
-      <Button variant="contained">Contained</Button>
-      <Button variant="outlined">Outlined</Button>
-    </Stack>
-  );
-}
-```
-
-**Key Features:**
-
-- Comprehensive component set
-- Built-in dark mode support
-- Excellent TypeScript support
-- Active community and regular updates
-
-### 2. Ant Design
-
-A design language and React components library with a focus on enterprise-class UI design language.
-
-```tsx
-import { Button, Space } from "antd";
-
-const App = () => (
-  <Space wrap>
-    <Button type="primary">Primary Button</Button>
-    <Button>Default Button</Button>
-    <Button type="dashed">Dashed Button</Button>
-    <Button type="text">Text Button</Button>
-    <Button type="link">Link Button</Button>
-  </Space>
-);
-```
-
-**Key Features:**
-
-- Enterprise-focused design
-- Comprehensive internationalization
-- Advanced data handling components
-- Built-in form validation
-
-### 3. Chakra UI
-
-A modular and accessible component library that gives you the building blocks to build React applications.
-
-```tsx
-import { Button, ButtonGroup } from "@chakra-ui/react";
-
-function Example() {
-  return (
-    <ButtonGroup variant="outline" spacing="6">
-      <Button colorScheme="blue">Save</Button>
-      <Button>Cancel</Button>
-    </ButtonGroup>
-  );
-}
-```
-
-**Key Features:**
-
-- Simple and modular
-- Dark mode support
-- Accessibility-first approach
-- Easy theming system
-
-### 4. React Bootstrap
-
-Bootstrap components built for React, providing familiar Bootstrap styling with React functionality.
-
-```tsx
-import Button from "react-bootstrap/Button";
-import ButtonGroup from "react-bootstrap/ButtonGroup";
-
-function BasicExample() {
-  return (
-    <ButtonGroup aria-label="Basic example">
-      <Button variant="secondary">Left</Button>
-      <Button variant="secondary">Middle</Button>
-      <Button variant="secondary">Right</Button>
-    </ButtonGroup>
-  );
-}
-```
-
-## Performance Considerations
-
-When choosing a component library, consider:
-
-- **Bundle size impact**: Use tree-shaking to reduce bundle size
-- **Server-side rendering**: Ensure compatibility with SSR
-- **Loading performance**: Lazy load components when possible
-- **Accessibility**: Choose libraries with built-in a11y features
-
-## Getting Started
-
-1. **Choose your library**: Consider your project needs and design requirements
-2. **Install dependencies**: Follow the library's installation guide
-3. **Configure theming**: Set up your design tokens and theme
-4. **Start building**: Begin with basic components and expand
-
-## Conclusion
-
-The React ecosystem offers numerous high-quality component libraries, each with its own strengths. Whether you prefer the comprehensive approach of Material-UI, the enterprise focus of Ant Design, or the simplicity of Chakra UI, there's a solution that fits your project needs.
-
-Remember to evaluate libraries based on your specific requirements, including design philosophy, bundle size, community support, and long-term maintenance.
diff --git a/blog/content/heimlab.mdx b/blog/content/heimlab.mdx
new file mode 100644
index 0000000..89514cf
--- /dev/null
+++ b/blog/content/heimlab.mdx
@@ -0,0 +1,12 @@
+---
+title: "Heimlab"
+description: "A home server infrastructure using Docker"
+date: "2025-10-16"
+tags: ["infrastructure", "docker", "frontend", "backend", "postgreSQL"]
+featured: true
+readTime: "16 min read"
+author: "Ferez"
+thumbnail: "/thumbnails/thumbnail-heimlab.png"
+---
+
+## What is it?
diff --git a/blog/content/hemewimp.mdx b/blog/content/hemewimp.mdx
new file mode 100644
index 0000000..3b0d25f
--- /dev/null
+++ b/blog/content/hemewimp.mdx
@@ -0,0 +1,10 @@
+---
+title: "Help Me With My Prompt"
+description: "A very simple app that helps you generate a concise prompt for your LLM of choice"
+date: "2025-10-16"
+tags: ["frontend", "AI"]
+featured: true
+readTime: "16 min read"
+author: "Ferez"
+thumbnail: "/thumbnails/thumbnail-hemewimp.png"
+---
diff --git a/blog/content/nextjs-portfolio-templates.mdx b/blog/content/nextjs-portfolio-templates.mdx
deleted file mode 100644
index 5506391..0000000
--- a/blog/content/nextjs-portfolio-templates.mdx
+++ /dev/null
@@ -1,322 +0,0 @@
----
-title: "23 NextJS Portfolio Template Examples For Design Inspiration"
-description: "Explore the best NextJS portfolio templates and examples to showcase your work professionally and stand out from the competition."
-date: "2024-11-28"
-tags: ["Landing Page Examples"]
-featured: true
-readTime: "17 min read"
-author: "arghya"
-thumbnail: "/thumbnails/nextjs-portfolio-templates.jpg"
----
-
-Your portfolio is often the first impression potential clients or employers have of your work. In today's competitive landscape, having a well-designed, fast, and responsive portfolio website is crucial for standing out.
-
-<ImageViewer
-  src="https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=900&auto=format&fit=crop&q=60"
-  alt="Portfolio Website Design"
-  caption="Modern portfolio website showcasing creative work"
-/>
-
-## Why Choose NextJS for Your Portfolio?
-
-NextJS offers several advantages for portfolio websites:
-
-- **Performance**: Built-in optimization and static generation
-- **SEO**: Server-side rendering for better search visibility
-- **Developer Experience**: Hot reload, TypeScript support, and modern tooling
-- **Flexibility**: Can be deployed anywhere and scales easily
-
-<Accordion type="multiple" className="w-full not-prose flex flex-col gap-2">
-  <AccordionItem value="item-1" className="flex flex-col gap-2">
-    <AccordionTrigger className="cursor-pointer">Features</AccordionTrigger>
-    <AccordionContent className="flex flex-col gap-4">
-      <ul className="list-disc space-y-2 pl-4">
-        <li>
-          <strong>Redesigned navigation menu</strong> with improved organization
-          and visual hierarchy
-        </li>
-        <li>
-          Enhanced accessibility features with full keyboard navigation support
-        </li>
-        <li>High contrast mode for users with visual impairments</li>
-        <li>Optimized touch targets for better mobile interaction</li>
-        <li>Enhanced swipe gestures and mobile-specific navigation</li>
-      </ul>
-    </AccordionContent>
-  </AccordionItem>
-  <AccordionItem value="item-2" className="flex flex-col gap-2">
-    <AccordionTrigger className="cursor-pointer">Bug Fixes</AccordionTrigger>
-    <AccordionContent className="flex flex-col gap-4 text-balance">
-      <ul className="list-disc space-y-2 pl-4">
-        <li>
-          Fixed inconsistent button placement across different screen sizes
-        </li>
-        <li>Resolved color contrast issues affecting readability</li>
-        <li>Corrected tab order problems in form navigation</li>
-        <li>Fixed device orientation change handling on mobile devices</li>
-        <li>Improved ARIA label compatibility with screen readers</li>
-      </ul>
-    </AccordionContent>
-  </AccordionItem>
-</Accordion>
-
-## Essential Portfolio Sections
-
-### Hero Section
-
-Your hero section should immediately communicate who you are and what you do.
-
-```tsx
-export default function Hero() {
-  return (
-    <section className="min-h-screen flex items-center justify-center">
-      <div className="text-center space-y-6">
-        <h1 className="text-4xl md:text-6xl font-bold">
-          Hi, I'm <span className="text-blue-600">John Doe</span>
-        </h1>
-        <p className="text-xl text-gray-600 max-w-2xl mx-auto">
-          Full-stack developer passionate about creating beautiful, functional
-          web experiences
-        </p>
-        <div className="flex gap-4 justify-center">
-          <Button variant="primary">View My Work</Button>
-          <Button variant="outline">Contact Me</Button>
-        </div>
-      </div>
-    </section>
-  );
-}
-```
-
-### Project Showcase
-
-Display your best work with engaging visuals and clear descriptions.
-
-```tsx
-interface Project {
-  id: string;
-  title: string;
-  description: string;
-  image: string;
-  technologies: string[];
-  liveUrl?: string;
-  githubUrl?: string;
-}
-
-export default function ProjectGrid({ projects }: { projects: Project[] }) {
-  return (
-    <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
-      {projects.map((project) => (
-        <div
-          key={project.id}
-          className="group relative overflow-hidden rounded-lg"
-        >
-          <img
-            src={project.image}
-            alt={project.title}
-            className="w-full h-48 object-cover transition-transform group-hover:scale-105"
-          />
-          <div className="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent opacity-0 group-hover:opacity-100 transition-opacity">
-            <div className="absolute bottom-4 left-4 right-4">
-              <h3 className="text-white font-semibold">{project.title}</h3>
-              <p className="text-gray-200 text-sm">{project.description}</p>
-            </div>
-          </div>
-        </div>
-      ))}
-    </div>
-  );
-}
-```
-
-## Design Trends for 2024
-
-### Minimalist Layouts
-
-Clean, focused designs that put your work front and center:
-
-- Generous white space
-- Typography-first approach
-- Subtle animations and transitions
-- Limited color palettes
-
-### Interactive Elements
-
-Engage visitors with interactive components:
-
-```tsx
-import { useState } from "react";
-
-export default function InteractiveSkillBar() {
-  const [hoveredSkill, setHoveredSkill] = useState<string | null>(null);
-
-  const skills = [
-    { name: "React", level: 90 },
-    { name: "TypeScript", level: 85 },
-    { name: "NextJS", level: 88 },
-  ];
-
-  return (
-    <div className="space-y-4">
-      {skills.map((skill) => (
-        <div
-          key={skill.name}
-          onMouseEnter={() => setHoveredSkill(skill.name)}
-          onMouseLeave={() => setHoveredSkill(null)}
-          className="relative"
-        >
-          <div className="flex justify-between mb-1">
-            <span className="font-medium">{skill.name}</span>
-            <span className="text-sm text-gray-600">{skill.level}%</span>
-          </div>
-          <div className="w-full bg-gray-200 rounded-full h-2">
-            <div
-              className="bg-blue-600 h-2 rounded-full transition-all duration-700 ease-out"
-              style={{
-                width: hoveredSkill === skill.name ? `${skill.level}%` : "0%",
-              }}
-            />
-          </div>
-        </div>
-      ))}
-    </div>
-  );
-}
-```
-
-### Dark Mode Support
-
-Implement dark mode for better user experience:
-
-```tsx
-"use client";
-
-import { useTheme } from "next-themes";
-import { useState, useEffect } from "react";
-
-export default function ThemeToggle() {
-  const [mounted, setMounted] = useState(false);
-  const { theme, setTheme } = useTheme();
-
-  useEffect(() => {
-    setMounted(true);
-  }, []);
-
-  if (!mounted) {
-    return null;
-  }
-
-  return (
-    <button
-      onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
-      className="p-2 rounded-lg bg-gray-200 dark:bg-gray-800"
-    >
-      {theme === "dark" ? "☀️" : "🌙"}
-    </button>
-  );
-}
-```
-
-## Performance Optimization
-
-### Image Optimization
-
-Use NextJS Image component for optimal loading:
-
-```tsx
-import Image from "next/image";
-
-export default function OptimizedPortfolioImage() {
-  return (
-    <Image
-      src="/project-screenshot.jpg"
-      alt="Project Screenshot"
-      width={600}
-      height={400}
-      placeholder="blur"
-      blurDataURL="data:image/jpeg;base64,..."
-      className="rounded-lg"
-    />
-  );
-}
-```
-
-### Static Generation
-
-Pre-generate pages for better performance:
-
-```tsx
-export async function getStaticProps() {
-  const projects = await getProjects();
-
-  return {
-    props: {
-      projects,
-    },
-    revalidate: 3600, // Revalidate every hour
-  };
-}
-```
-
-## SEO Best Practices
-
-### Meta Tags
-
-```tsx
-import Head from "next/head";
-
-export default function Portfolio() {
-  return (
-    <>
-      <Head>
-        <title>John Doe - Full Stack Developer</title>
-        <meta
-          name="description"
-          content="Portfolio of John Doe, a full-stack developer specializing in React and NextJS"
-        />
-        <meta property="og:title" content="John Doe - Full Stack Developer" />
-        <meta
-          property="og:description"
-          content="Portfolio showcasing modern web development projects"
-        />
-        <meta property="og:image" content="/og-image.jpg" />
-        <meta name="twitter:card" content="summary_large_image" />
-      </Head>
-      {/* Your portfolio content */}
-    </>
-  );
-}
-```
-
-### Structured Data
-
-Add JSON-LD structured data for better search visibility:
-
-```tsx
-const portfolioSchema = {
-  "@context": "https://schema.org",
-  "@type": "Person",
-  name: "John Doe",
-  jobTitle: "Full Stack Developer",
-  url: "https://johndoe.dev",
-  sameAs: ["https://github.com/johndoe", "https://linkedin.com/in/johndoe"],
-};
-
-export default function Portfolio() {
-  return (
-    <>
-      <script
-        type="application/ld+json"
-        dangerouslySetInnerHTML={{ __html: JSON.stringify(portfolioSchema) }}
-      />
-      {/* Your content */}
-    </>
-  );
-}
-```
-
-## Conclusion
-
-Creating an effective NextJS portfolio requires thoughtful planning, clean design, and optimal performance. Focus on showcasing your best work, ensuring fast load times, and providing a great user experience across all devices.
-
-Remember to regularly update your portfolio with new projects and keep your content fresh and relevant to your target audience.
diff --git a/blog/content/react-animation-libraries.mdx b/blog/content/react-animation-libraries.mdx
deleted file mode 100644
index d5eabef..0000000
--- a/blog/content/react-animation-libraries.mdx
+++ /dev/null
@@ -1,180 +0,0 @@
----
-title: "13 Awesome React Animation Libraries To Elevate Your Design Projects"
-description: "Transform your React applications with these powerful animation libraries that make creating smooth, engaging user experiences effortless."
-date: "2024-11-25"
-tags: ["UI Frameworks", "React", "Animation"]
-featured: false
-readTime: "14 min read"
-author: "arghya"
-thumbnail: "/thumbnails/react-animation-libraries.jpg"
----
-
-Animations can transform a static interface into an engaging, delightful user experience. The right animations guide users' attention, provide feedback, and create a sense of polish that sets your application apart.
-
-## Why Animation Matters in React Apps
-
-Well-crafted animations serve multiple purposes:
-
-- **User Guidance**: Direct attention to important elements
-- **Feedback**: Confirm actions and state changes
-- **Polish**: Create professional, premium feeling interfaces
-- **Engagement**: Keep users interested and interactive
-
-## Top React Animation Libraries
-
-### 1. Framer Motion
-
-Framer Motion is a production-ready motion library for React with a simple, declarative API.
-
-```tsx
-import { motion } from "framer-motion";
-
-export default function AnimatedButton() {
-  return (
-    <motion.button
-      whileHover={{ scale: 1.1 }}
-      whileTap={{ scale: 0.9 }}
-      initial={{ opacity: 0 }}
-      animate={{ opacity: 1 }}
-      className="px-6 py-3 bg-blue-500 text-white rounded-lg"
-    >
-      Click me!
-    </motion.button>
-  );
-}
-```
-
-**Key Features:**
-
-- Declarative animations
-- Gesture support
-- Layout animations
-- Server-side rendering compatible
-
-### 2. React Spring
-
-A spring-physics based animation library that provides smooth, natural feeling animations.
-
-```tsx
-import { useSpring, animated } from "@react-spring/web";
-
-export default function SpringAnimation() {
-  const styles = useSpring({
-    from: { opacity: 0 },
-    to: { opacity: 1 },
-  });
-
-  return <animated.div style={styles}>I will fade in</animated.div>;
-}
-```
-
-### 3. React Transition Group
-
-Manage component states over time, specifically designed for managing component mounting and unmounting.
-
-```tsx
-import { CSSTransition, TransitionGroup } from "react-transition-group";
-
-export default function ListTransition({ items }) {
-  return (
-    <TransitionGroup>
-      {items.map((item) => (
-        <CSSTransition key={item.id} timeout={500} classNames="item">
-          <div>{item.text}</div>
-        </CSSTransition>
-      ))}
-    </TransitionGroup>
-  );
-}
-```
-
-## Animation Best Practices
-
-### Performance Considerations
-
-- Use `transform` and `opacity` for better performance
-- Leverage GPU acceleration
-- Avoid animating layout properties when possible
-- Use `will-change` CSS property judiciously
-
-### UX Guidelines
-
-- Keep animations fast (< 300ms for micro-interactions)
-- Provide reduced motion options for accessibility
-- Use easing functions that feel natural
-- Don't overdo it - subtle is often better
-
-## Advanced Animation Patterns
-
-### Staggered Animations
-
-Create cascading effects with staggered timing:
-
-```tsx
-import { motion } from "framer-motion";
-
-const container = {
-  hidden: { opacity: 1, scale: 0 },
-  visible: {
-    opacity: 1,
-    scale: 1,
-    transition: {
-      delayChildren: 0.3,
-      staggerChildren: 0.2,
-    },
-  },
-};
-
-const item = {
-  hidden: { y: 20, opacity: 0 },
-  visible: {
-    y: 0,
-    opacity: 1,
-  },
-};
-
-export default function StaggeredList({ items }) {
-  return (
-    <motion.ul variants={container} initial="hidden" animate="visible">
-      {items.map((text, index) => (
-        <motion.li key={index} variants={item}>
-          {text}
-        </motion.li>
-      ))}
-    </motion.ul>
-  );
-}
-```
-
-### Page Transitions
-
-Create smooth transitions between routes:
-
-```tsx
-import { AnimatePresence, motion } from "framer-motion";
-import { useRouter } from "next/router";
-
-export default function PageTransition({ children }) {
-  const router = useRouter();
-
-  return (
-    <AnimatePresence mode="wait">
-      <motion.div
-        key={router.route}
-        initial={{ opacity: 0, x: -200 }}
-        animate={{ opacity: 1, x: 0 }}
-        exit={{ opacity: 0, x: 200 }}
-        transition={{ duration: 0.3 }}
-      >
-        {children}
-      </motion.div>
-    </AnimatePresence>
-  );
-}
-```
-
-## Conclusion
-
-Animation libraries for React have matured significantly, offering powerful tools to create engaging user experiences. Whether you choose the declarative approach of Framer Motion, the spring-physics of React Spring, or another solution, the key is to use animations purposefully to enhance your user interface.
-
-Remember to prioritize performance, accessibility, and user experience over flashy effects. The best animations are often the ones users don't consciously notice but make the interface feel more responsive and polished.
diff --git a/blog/content/react-landing-page-templates.mdx b/blog/content/react-landing-page-templates.mdx
deleted file mode 100644
index a2b4dbf..0000000
--- a/blog/content/react-landing-page-templates.mdx
+++ /dev/null
@@ -1,362 +0,0 @@
----
-title: "21 Best React Landing Page Templates To Inspire Yours"
-description: "Discover stunning React landing page templates and learn the design principles that make them convert visitors into customers."
-date: "2024-11-22"
-tags: ["Landing Page Examples", "React", "Templates"]
-featured: false
-readTime: "21 min read"
-author: "dillion"
-thumbnail: "/thumbnails/react-landing-page-templates.jpg"
----
-
-A well-designed landing page can be the difference between a visitor and a customer. In the competitive digital landscape, your landing page needs to capture attention instantly, communicate value clearly, and guide users toward action.
-
-<ImageViewer
-  src="https://images.unsplash.com/photo-1551650975-87deedd944c3?w=900&auto=format&fit=crop&q=60"
-  alt="Landing Page Design"
-  caption="Modern landing page showcasing clean design and clear call-to-action"
-/>
-
-## Essential Landing Page Elements
-
-### Hero Section
-
-Your hero section has seconds to make an impression. It should clearly communicate your value proposition.
-
-```tsx
-export default function HeroSection() {
-  return (
-    <section className="bg-gradient-to-r from-blue-600 to-purple-600 text-white py-20">
-      <div className="container mx-auto px-4 text-center">
-        <h1 className="text-4xl md:text-6xl font-bold mb-4">
-          Build Amazing Apps Faster
-        </h1>
-        <p className="text-xl mb-8 max-w-2xl mx-auto">
-          Our React components help you ship products 10x faster with beautiful,
-          accessible, and production-ready components.
-        </p>
-        <div className="space-x-4">
-          <button className="bg-white text-blue-600 px-8 py-3 rounded-lg font-semibold hover:bg-gray-100">
-            Get Started Free
-          </button>
-          <button className="border-2 border-white px-8 py-3 rounded-lg font-semibold hover:bg-white hover:text-blue-600">
-            Watch Demo
-          </button>
-        </div>
-      </div>
-    </section>
-  );
-}
-```
-
-### Social Proof
-
-Build trust with testimonials, logos, and statistics:
-
-```tsx
-interface Testimonial {
-  name: string;
-  role: string;
-  company: string;
-  content: string;
-  avatar: string;
-}
-
-export default function SocialProof({
-  testimonials,
-}: {
-  testimonials: Testimonial[];
-}) {
-  return (
-    <section className="py-16 bg-gray-50">
-      <div className="container mx-auto px-4">
-        <h2 className="text-3xl font-bold text-center mb-12">
-          Trusted by thousands of developers
-        </h2>
-        <div className="grid md:grid-cols-3 gap-8">
-          {testimonials.map((testimonial, index) => (
-            <div key={index} className="bg-white p-6 rounded-lg shadow-sm">
-              <p className="text-gray-600 mb-4">"{testimonial.content}"</p>
-              <div className="flex items-center">
-                <img
-                  src={testimonial.avatar}
-                  alt={testimonial.name}
-                  className="w-12 h-12 rounded-full mr-4"
-                />
-                <div>
-                  <h4 className="font-semibold">{testimonial.name}</h4>
-                  <p className="text-sm text-gray-500">
-                    {testimonial.role} at {testimonial.company}
-                  </p>
-                </div>
-              </div>
-            </div>
-          ))}
-        </div>
-      </div>
-    </section>
-  );
-}
-```
-
-## Conversion Optimization Strategies
-
-### Clear Call-to-Action
-
-Make your CTA impossible to miss:
-
-```tsx
-export default function CTASection() {
-  return (
-    <section className="bg-gray-900 text-white py-20">
-      <div className="container mx-auto px-4 text-center">
-        <h2 className="text-4xl font-bold mb-4">
-          Ready to Transform Your Development?
-        </h2>
-        <p className="text-xl mb-8 text-gray-300 max-w-2xl mx-auto">
-          Join thousands of developers who are building faster with our
-          components
-        </p>
-        <button className="bg-blue-500 hover:bg-blue-600 px-8 py-4 rounded-lg text-lg font-semibold transform hover:scale-105 transition-all">
-          Start Building Today
-        </button>
-        <p className="text-sm text-gray-400 mt-4">
-          No credit card required • Free 14-day trial
-        </p>
-      </div>
-    </section>
-  );
-}
-```
-
-### Features Section
-
-Highlight key benefits with visual hierarchy:
-
-```tsx
-interface Feature {
-  icon: React.ComponentType;
-  title: string;
-  description: string;
-}
-
-export default function FeaturesSection({ features }: { features: Feature[] }) {
-  return (
-    <section className="py-20">
-      <div className="container mx-auto px-4">
-        <div className="text-center mb-16">
-          <h2 className="text-4xl font-bold mb-4">Everything You Need</h2>
-          <p className="text-xl text-gray-600 max-w-2xl mx-auto">
-            Comprehensive tools to build modern applications with confidence
-          </p>
-        </div>
-        <div className="grid md:grid-cols-3 gap-8">
-          {features.map((feature, index) => {
-            const Icon = feature.icon;
-            return (
-              <div key={index} className="text-center">
-                <div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
-                  <Icon className="w-8 h-8 text-blue-600" />
-                </div>
-                <h3 className="text-xl font-semibold mb-2">{feature.title}</h3>
-                <p className="text-gray-600">{feature.description}</p>
-              </div>
-            );
-          })}
-        </div>
-      </div>
-    </section>
-  );
-}
-```
-
-## Advanced Techniques
-
-### Interactive Elements
-
-Add engaging interactions to increase time on page:
-
-```tsx
-import { useState } from "react";
-
-export default function InteractiveDemo() {
-  const [activeTab, setActiveTab] = useState(0);
-  const tabs = ["Design", "Code", "Deploy"];
-
-  return (
-    <section className="py-20 bg-gray-50">
-      <div className="container mx-auto px-4">
-        <h2 className="text-4xl font-bold text-center mb-12">
-          See It In Action
-        </h2>
-        <div className="max-w-4xl mx-auto">
-          <div className="flex justify-center mb-8">
-            {tabs.map((tab, index) => (
-              <button
-                key={index}
-                onClick={() => setActiveTab(index)}
-                className={`px-6 py-3 mx-2 rounded-lg font-semibold ${
-                  activeTab === index
-                    ? "bg-blue-500 text-white"
-                    : "bg-white text-gray-600 hover:bg-gray-100"
-                }`}
-              >
-                {tab}
-              </button>
-            ))}
-          </div>
-          <div className="bg-white rounded-lg shadow-lg p-8">
-            {activeTab === 0 && (
-              <div className="text-center">
-                <h3 className="text-2xl font-semibold mb-4">
-                  Beautiful Design System
-                </h3>
-                <p>
-                  Consistent, modern components that work together seamlessly
-                </p>
-              </div>
-            )}
-            {activeTab === 1 && (
-              <div className="text-center">
-                <h3 className="text-2xl font-semibold mb-4">
-                  Clean, Maintainable Code
-                </h3>
-                <p>
-                  TypeScript-first components with excellent developer
-                  experience
-                </p>
-              </div>
-            )}
-            {activeTab === 2 && (
-              <div className="text-center">
-                <h3 className="text-2xl font-semibold mb-4">Deploy Anywhere</h3>
-                <p>Works with any React framework and deployment platform</p>
-              </div>
-            )}
-          </div>
-        </div>
-      </div>
-    </section>
-  );
-}
-```
-
-### Animated Statistics
-
-Show impressive numbers with animated counters:
-
-```tsx
-import { useState, useEffect, useRef } from "react";
-
-export default function AnimatedStats() {
-  const [counts, setCounts] = useState([0, 0, 0]);
-  const [hasAnimated, setHasAnimated] = useState(false);
-  const ref = useRef<HTMLDivElement>(null);
-
-  const stats = [
-    { label: "Active Users", target: 10000, suffix: "+" },
-    { label: "Components", target: 150, suffix: "+" },
-    { label: "GitHub Stars", target: 2500, suffix: "+" },
-  ];
-
-  useEffect(() => {
-    const observer = new IntersectionObserver(
-      ([entry]) => {
-        if (entry.isIntersecting && !hasAnimated) {
-          setHasAnimated(true);
-          stats.forEach((stat, index) => {
-            let start = 0;
-            const increment = stat.target / 100;
-            const timer = setInterval(() => {
-              start += increment;
-              if (start >= stat.target) {
-                setCounts((prev) => {
-                  const newCounts = [...prev];
-                  newCounts[index] = stat.target;
-                  return newCounts;
-                });
-                clearInterval(timer);
-              } else {
-                setCounts((prev) => {
-                  const newCounts = [...prev];
-                  newCounts[index] = Math.floor(start);
-                  return newCounts;
-                });
-              }
-            }, 20);
-          });
-        }
-      },
-      { threshold: 0.5 }
-    );
-
-    if (ref.current) observer.observe(ref.current);
-    return () => observer.disconnect();
-  }, [hasAnimated]);
-
-  return (
-    <section ref={ref} className="py-20 bg-blue-900 text-white">
-      <div className="container mx-auto px-4">
-        <div className="grid md:grid-cols-3 gap-8 text-center">
-          {stats.map((stat, index) => (
-            <div key={index}>
-              <div className="text-4xl font-bold mb-2">
-                {counts[index].toLocaleString()}
-                {stat.suffix}
-              </div>
-              <div className="text-blue-200">{stat.label}</div>
-            </div>
-          ))}
-        </div>
-      </div>
-    </section>
-  );
-}
-```
-
-## Mobile Optimization
-
-Ensure your landing page works perfectly on mobile:
-
-```tsx
-export default function MobileOptimizedHero() {
-  return (
-    <section className="bg-gradient-to-r from-purple-600 to-blue-600 text-white">
-      <div className="container mx-auto px-4 py-12 lg:py-20">
-        <div className="flex flex-col lg:flex-row items-center">
-          <div className="lg:w-1/2 mb-8 lg:mb-0">
-            <h1 className="text-3xl sm:text-4xl lg:text-6xl font-bold mb-4 lg:mb-6">
-              Mobile-First Development
-            </h1>
-            <p className="text-lg lg:text-xl mb-6 lg:mb-8">
-              Build responsive applications that work beautifully on every
-              device
-            </p>
-            <div className="flex flex-col sm:flex-row gap-4">
-              <button className="bg-white text-purple-600 px-6 py-3 rounded-lg font-semibold w-full sm:w-auto">
-                Get Started
-              </button>
-              <button className="border-2 border-white px-6 py-3 rounded-lg font-semibold w-full sm:w-auto">
-                Learn More
-              </button>
-            </div>
-          </div>
-          <div className="lg:w-1/2">
-            <img
-              src="/hero-image.jpg"
-              alt="Product Screenshot"
-              className="w-full max-w-md mx-auto lg:max-w-none rounded-lg shadow-2xl"
-            />
-          </div>
-        </div>
-      </div>
-    </section>
-  );
-}
-```
-
-## Conclusion
-
-Creating effective React landing pages requires combining compelling design with technical excellence. Focus on clear messaging, strong visual hierarchy, and smooth user experience to maximize conversions.
-
-Remember to test different variations, optimize for mobile, and continuously iterate based on user feedback and analytics data.
diff --git a/blog/content/react-native-libraries.mdx b/blog/content/react-native-libraries.mdx
deleted file mode 100644
index 66c8e99..0000000
--- a/blog/content/react-native-libraries.mdx
+++ /dev/null
@@ -1,536 +0,0 @@
----
-title: "21 Best React Native Libraries You Should Know About"
-description: "Explore essential React Native libraries that will streamline your mobile app development and enhance functionality."
-date: "2024-11-20"
-tags: ["UI Frameworks", "React Native", "Mobile"]
-featured: false
-readTime: "22 min read"
-author: "dillion"
-thumbnail: "/thumbnails/react-native-libraries.jpg"
----
-
-React Native has revolutionized mobile development by enabling developers to build native apps using JavaScript and React. The ecosystem has grown tremendously, offering numerous libraries that can significantly accelerate your development process.
-
-## Why Use Third-Party Libraries?
-
-Third-party libraries offer several advantages:
-
-- **Time Savings**: Pre-built solutions for common functionality
-- **Community Support**: Battle-tested by thousands of developers
-- **Maintenance**: Regular updates and bug fixes
-- **Performance**: Often optimized for specific use cases
-
-## Navigation Libraries
-
-### 1. React Navigation
-
-The most popular navigation solution for React Native applications.
-
-```tsx
-import { NavigationContainer } from "@react-navigation/native";
-import { createNativeStackNavigator } from "@react-navigation/native-stack";
-
-const Stack = createNativeStackNavigator();
-
-export default function App() {
-  return (
-    <NavigationContainer>
-      <Stack.Navigator initialRouteName="Home">
-        <Stack.Screen name="Home" component={HomeScreen} />
-        <Stack.Screen name="Details" component={DetailsScreen} />
-      </Stack.Navigator>
-    </NavigationContainer>
-  );
-}
-```
-
-**Key Features:**
-
-- Stack, tab, and drawer navigation
-- Deep linking support
-- Customizable transitions
-- TypeScript support
-
-### 2. React Native Navigation
-
-A native navigation library by Wix, offering better performance for complex apps.
-
-## State Management
-
-### 3. Redux Toolkit
-
-Simplified Redux setup with less boilerplate.
-
-```tsx
-import { configureStore, createSlice } from "@reduxjs/toolkit";
-
-const counterSlice = createSlice({
-  name: "counter",
-  initialState: { value: 0 },
-  reducers: {
-    increment: (state) => {
-      state.value += 1;
-    },
-    decrement: (state) => {
-      state.value -= 1;
-    },
-  },
-});
-
-export const { increment, decrement } = counterSlice.actions;
-
-const store = configureStore({
-  reducer: {
-    counter: counterSlice.reducer,
-  },
-});
-```
-
-### 4. Zustand
-
-A small, fast, and scalable state management solution.
-
-```tsx
-import { create } from "zustand";
-
-const useStore = create((set) => ({
-  count: 0,
-  increment: () => set((state) => ({ count: state.count + 1 })),
-  decrement: () => set((state) => ({ count: state.count - 1 })),
-}));
-
-function Counter() {
-  const { count, increment, decrement } = useStore();
-  return (
-    <View>
-      <Text>{count}</Text>
-      <Button title="+" onPress={increment} />
-      <Button title="-" onPress={decrement} />
-    </View>
-  );
-}
-```
-
-## UI Libraries
-
-### 5. NativeBase
-
-A mobile-first component library for React Native.
-
-```tsx
-import { Box, Text, Button, VStack } from "native-base";
-
-export default function Example() {
-  return (
-    <Box flex={1} bg="#fff" alignItems="center" justifyContent="center">
-      <VStack space={4} alignItems="center">
-        <Text fontSize="lg">Welcome to NativeBase</Text>
-        <Button onPress={() => console.log("Button pressed")}>Click me</Button>
-      </VStack>
-    </Box>
-  );
-}
-```
-
-### 6. React Native Elements
-
-Cross-platform UI toolkit with consistent design.
-
-```tsx
-import { Button, Header } from "react-native-elements";
-
-export default function App() {
-  return (
-    <>
-      <Header
-        centerComponent={{ text: "MY TITLE", style: { color: "#fff" } }}
-        backgroundColor="#397af8"
-      />
-      <Button
-        title="Hello World"
-        onPress={() => console.log("Button pressed")}
-      />
-    </>
-  );
-}
-```
-
-## Networking & Data Fetching
-
-### 7. React Query
-
-Powerful data synchronization for React Native.
-
-```tsx
-import { useQuery } from "react-query";
-
-function Profile({ userId }) {
-  const { data, isLoading, error } = useQuery(["profile", userId], () =>
-    fetchProfile(userId)
-  );
-
-  if (isLoading) return <Text>Loading...</Text>;
-  if (error) return <Text>Error occurred</Text>;
-
-  return (
-    <View>
-      <Text>{data.name}</Text>
-      <Text>{data.email}</Text>
-    </View>
-  );
-}
-```
-
-### 8. Axios
-
-Promise-based HTTP client for API requests.
-
-```tsx
-import axios from "axios";
-
-const api = axios.create({
-  baseURL: "https://api.example.com",
-  timeout: 1000,
-});
-
-const fetchUserData = async (userId) => {
-  try {
-    const response = await api.get(`/users/${userId}`);
-    return response.data;
-  } catch (error) {
-    throw new Error("Failed to fetch user data");
-  }
-};
-```
-
-## Animation Libraries
-
-### 9. React Native Reanimated
-
-High-performance animations and gestures.
-
-```tsx
-import Animated, {
-  useSharedValue,
-  withSpring,
-  useAnimatedStyle,
-} from "react-native-reanimated";
-
-export default function AnimatedBox() {
-  const offset = useSharedValue(0);
-
-  const animatedStyles = useAnimatedStyle(() => {
-    return {
-      transform: [{ translateX: offset.value }],
-    };
-  });
-
-  const handlePress = () => {
-    offset.value = withSpring(offset.value + 50);
-  };
-
-  return (
-    <>
-      <Animated.View style={[styles.box, animatedStyles]} />
-      <Button onPress={handlePress} title="Move" />
-    </>
-  );
-}
-```
-
-### 10. Lottie React Native
-
-Render After Effects animations in React Native.
-
-```tsx
-import LottieView from "lottie-react-native";
-
-export default function Animation() {
-  return (
-    <LottieView
-      source={require("./animation.json")}
-      autoPlay
-      loop
-      style={{ width: 200, height: 200 }}
-    />
-  );
-}
-```
-
-## Form Handling
-
-### 11. React Hook Form
-
-Performant forms with minimal re-renders.
-
-```tsx
-import { useForm, Controller } from "react-hook-form";
-import { TextInput, Button, Text } from "react-native";
-
-export default function MyForm() {
-  const {
-    control,
-    handleSubmit,
-    formState: { errors },
-  } = useForm();
-
-  const onSubmit = (data) => {
-    console.log(data);
-  };
-
-  return (
-    <View>
-      <Controller
-        control={control}
-        rules={{ required: true }}
-        render={({ field: { onChange, onBlur, value } }) => (
-          <TextInput
-            placeholder="Username"
-            onBlur={onBlur}
-            onChangeText={onChange}
-            value={value}
-          />
-        )}
-        name="username"
-      />
-      {errors.username && <Text>Username is required.</Text>}
-
-      <Button title="Submit" onPress={handleSubmit(onSubmit)} />
-    </View>
-  );
-}
-```
-
-### 12. Formik
-
-Build forms without tears in React Native.
-
-```tsx
-import { Formik } from "formik";
-import * as Yup from "yup";
-
-const validationSchema = Yup.object().shape({
-  email: Yup.string().email("Invalid email").required("Required"),
-  password: Yup.string().min(8, "Too short").required("Required"),
-});
-
-export default function LoginForm() {
-  return (
-    <Formik
-      initialValues={{ email: "", password: "" }}
-      validationSchema={validationSchema}
-      onSubmit={(values) => console.log(values)}
-    >
-      {({ handleChange, handleBlur, handleSubmit, values, errors }) => (
-        <View>
-          <TextInput
-            placeholder="Email"
-            onChangeText={handleChange("email")}
-            onBlur={handleBlur("email")}
-            value={values.email}
-          />
-          {errors.email && <Text>{errors.email}</Text>}
-
-          <TextInput
-            placeholder="Password"
-            secureTextEntry
-            onChangeText={handleChange("password")}
-            onBlur={handleBlur("password")}
-            value={values.password}
-          />
-          {errors.password && <Text>{errors.password}</Text>}
-
-          <Button onPress={handleSubmit} title="Submit" />
-        </View>
-      )}
-    </Formik>
-  );
-}
-```
-
-## Storage Solutions
-
-### 13. AsyncStorage
-
-Simple, unencrypted, asynchronous storage for React Native.
-
-```tsx
-import AsyncStorage from "@react-native-async-storage/async-storage";
-
-const storeData = async (key, value) => {
-  try {
-    const jsonValue = JSON.stringify(value);
-    await AsyncStorage.setItem(key, jsonValue);
-  } catch (e) {
-    console.error("Error saving data", e);
-  }
-};
-
-const getData = async (key) => {
-  try {
-    const jsonValue = await AsyncStorage.getItem(key);
-    return jsonValue != null ? JSON.parse(jsonValue) : null;
-  } catch (e) {
-    console.error("Error reading data", e);
-  }
-};
-```
-
-### 14. React Native Keychain
-
-Secure storage for sensitive data.
-
-```tsx
-import * as Keychain from "react-native-keychain";
-
-const storeCredentials = async (username, password) => {
-  try {
-    await Keychain.setInternetCredentials("server", username, password);
-    console.log("Credentials stored successfully");
-  } catch (error) {
-    console.log("Could not store credentials", error);
-  }
-};
-
-const getCredentials = async () => {
-  try {
-    const credentials = await Keychain.getInternetCredentials("server");
-    return credentials;
-  } catch (error) {
-    console.log("Could not load credentials", error);
-  }
-};
-```
-
-## Testing Libraries
-
-### 15. React Native Testing Library
-
-Simple and complete testing utilities.
-
-```tsx
-import { render, fireEvent, waitFor } from "@testing-library/react-native";
-import Counter from "../Counter";
-
-test("increments counter", async () => {
-  const { getByText, getByTestId } = render(<Counter />);
-
-  const counter = getByTestId("counter");
-  const incrementButton = getByText("+");
-
-  expect(counter).toHaveTextContent("0");
-
-  fireEvent.press(incrementButton);
-
-  await waitFor(() => {
-    expect(counter).toHaveTextContent("1");
-  });
-});
-```
-
-### 16. Detox
-
-Gray box end-to-end testing and automation framework.
-
-```javascript
-describe("Login", () => {
-  beforeEach(async () => {
-    await device.reloadReactNative();
-  });
-
-  it("should login successfully", async () => {
-    await element(by.id("email")).typeText("user@example.com");
-    await element(by.id("password")).typeText("password123");
-    await element(by.id("login")).tap();
-
-    await expect(element(by.id("welcome"))).toBeVisible();
-  });
-});
-```
-
-## Utilities
-
-### 17. React Native Vector Icons
-
-Customizable icons for React Native.
-
-```tsx
-import Icon from "react-native-vector-icons/FontAwesome";
-
-export default function IconExample() {
-  return (
-    <View>
-      <Icon name="rocket" size={30} color="#900" />
-      <Icon.Button
-        name="facebook"
-        backgroundColor="#3b5998"
-        onPress={() => console.log("Facebook login")}
-      >
-        Login with Facebook
-      </Icon.Button>
-    </View>
-  );
-}
-```
-
-### 18. React Native Image Picker
-
-Select images and videos from the device library or camera.
-
-```tsx
-import { launchImageLibrary } from "react-native-image-picker";
-
-const selectImage = () => {
-  const options = {
-    mediaType: "photo",
-    quality: 1,
-  };
-
-  launchImageLibrary(options, (response) => {
-    if (response.assets) {
-      console.log(response.assets[0]);
-    }
-  });
-};
-```
-
-## Performance Monitoring
-
-### 19. Flipper
-
-Desktop debugging platform for mobile developers.
-
-```tsx
-// Install Flipper plugins
-import { logger } from "react-native-logs";
-
-const defaultLogger = logger.createLogger({
-  severity: __DEV__ ? logger.logLevel.trace : logger.logLevel.error,
-  transport: __DEV__
-    ? logger.chromeConsoleTransport
-    : logger.fileAsyncTransport,
-  transportOptions: {
-    colors: {
-      info: "blueBright",
-      warn: "yellowBright",
-      error: "redBright",
-    },
-  },
-});
-
-// Usage
-defaultLogger.info("App started");
-defaultLogger.warn("Warning message");
-defaultLogger.error("Error occurred");
-```
-
-## Conclusion
-
-The React Native ecosystem offers a rich collection of libraries that can significantly enhance your development experience. When choosing libraries, consider factors like:
-
-- **Maintenance**: Active development and community support
-- **Performance**: Impact on app size and runtime performance
-- **Documentation**: Quality of documentation and examples
-- **Compatibility**: Works with your target React Native version
-
-Start with the essential libraries that solve your immediate needs, and gradually add more specialized tools as your project grows in complexity.
diff --git a/blog/content/react-portfolio-templates.mdx b/blog/content/react-portfolio-templates.mdx
deleted file mode 100644
index 84a6a2d..0000000
--- a/blog/content/react-portfolio-templates.mdx
+++ /dev/null
@@ -1,552 +0,0 @@
----
-title: "Looking For A React Portfolio Template? 19 Best React Portfolio Templates"
-description: "Discover the best React portfolio templates to showcase your work professionally and land your dream job or clients."
-date: "2024-11-18"
-tags: ["Landing Page Examples", "React", "Portfolio"]
-featured: true
-readTime: "16 min read"
-author: "arghya"
-thumbnail: "/thumbnails/react-portfolio-templates.jpg"
----
-
-Your portfolio is your digital business card, resume, and showcase all rolled into one. In today's competitive market, having a standout React portfolio can make the difference between landing your dream job or getting lost in the crowd.
-
-<ImageViewer
-  src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=900&auto=format&fit=crop&q=60"
-  alt="Developer Portfolio"
-  caption="Professional developer showcasing their React portfolio"
-/>
-
-## What Makes a Great React Portfolio?
-
-A compelling React portfolio should demonstrate your technical skills while providing an excellent user experience.
-
-### Key Elements
-
-- **Clean, Modern Design**: Professional aesthetics that don't distract from your work
-- **Responsive Layout**: Perfect display across all devices and screen sizes
-- **Performance Optimized**: Fast loading times and smooth interactions
-- **Clear Navigation**: Easy to find information and projects
-- **Call-to-Actions**: Clear paths for potential employers or clients to contact you
-
-## Essential Portfolio Sections
-
-### Hero Section
-
-Your hero section should immediately communicate who you are and what you do.
-
-```tsx
-import { useState, useEffect } from "react";
-
-export default function Hero() {
-  const [displayText, setDisplayText] = useState("");
-  const roles = ["Frontend Developer", "React Specialist", "UI/UX Designer"];
-
-  useEffect(() => {
-    // Typewriter effect implementation
-    let currentRoleIndex = 0;
-    let currentCharIndex = 0;
-    let isDeleting = false;
-
-    const typeWriter = () => {
-      const currentRole = roles[currentRoleIndex];
-
-      if (!isDeleting && currentCharIndex <= currentRole.length) {
-        setDisplayText(currentRole.slice(0, currentCharIndex));
-        currentCharIndex++;
-      } else if (isDeleting && currentCharIndex >= 0) {
-        setDisplayText(currentRole.slice(0, currentCharIndex));
-        currentCharIndex--;
-      }
-
-      if (currentCharIndex === currentRole.length) {
-        isDeleting = true;
-        setTimeout(typeWriter, 2000);
-      } else if (isDeleting && currentCharIndex === 0) {
-        isDeleting = false;
-        currentRoleIndex = (currentRoleIndex + 1) % roles.length;
-        setTimeout(typeWriter, 500);
-      } else {
-        setTimeout(typeWriter, isDeleting ? 100 : 150);
-      }
-    };
-
-    typeWriter();
-  }, []);
-
-  return (
-    <section className="min-h-screen flex items-center justify-center bg-gradient-to-br from-gray-900 via-blue-900 to-purple-900">
-      <div className="text-center text-white px-4">
-        <h1 className="text-5xl md:text-7xl font-bold mb-4">
-          Hi, I'm <span className="text-blue-400">Sarah</span>
-        </h1>
-        <div className="text-2xl md:text-3xl mb-8 h-10">
-          I'm a{" "}
-          <span className="text-yellow-400 border-r-2 border-yellow-400">
-            {displayText}
-          </span>
-        </div>
-        <p className="text-xl mb-12 max-w-2xl mx-auto text-gray-300">
-          I create beautiful, functional, and user-centered digital experiences
-          that bring ideas to life through clean code and thoughtful design.
-        </p>
-        <div className="flex flex-col sm:flex-row gap-4 justify-center">
-          <button className="bg-blue-500 hover:bg-blue-600 px-8 py-4 rounded-full text-lg font-semibold transition-all transform hover:scale-105">
-            View My Work
-          </button>
-          <button className="border-2 border-white hover:bg-white hover:text-gray-900 px-8 py-4 rounded-full text-lg font-semibold transition-all">
-            Get In Touch
-          </button>
-        </div>
-      </div>
-    </section>
-  );
-}
-```
-
-### Projects Showcase
-
-Display your best work with detailed case studies:
-
-```tsx
-interface Project {
-  id: string;
-  title: string;
-  description: string;
-  image: string;
-  technologies: string[];
-  liveUrl?: string;
-  githubUrl?: string;
-  featured?: boolean;
-}
-
-export default function ProjectsGrid({ projects }: { projects: Project[] }) {
-  const [filter, setFilter] = useState("all");
-  const [filteredProjects, setFilteredProjects] = useState(projects);
-
-  const categories = ["all", "react", "nextjs", "mobile", "fullstack"];
-
-  useEffect(() => {
-    if (filter === "all") {
-      setFilteredProjects(projects);
-    } else {
-      setFilteredProjects(
-        projects.filter((project) =>
-          project.technologies.some((tech) =>
-            tech.toLowerCase().includes(filter.toLowerCase())
-          )
-        )
-      );
-    }
-  }, [filter, projects]);
-
-  return (
-    <section className="py-20 bg-gray-50">
-      <div className="container mx-auto px-4">
-        <div className="text-center mb-16">
-          <h2 className="text-4xl font-bold mb-4">Featured Projects</h2>
-          <p className="text-xl text-gray-600 max-w-2xl mx-auto">
-            Here are some of my recent projects that showcase my skills and
-            experience
-          </p>
-        </div>
-
-        {/* Filter Buttons */}
-        <div className="flex flex-wrap justify-center gap-4 mb-12">
-          {categories.map((category) => (
-            <button
-              key={category}
-              onClick={() => setFilter(category)}
-              className={`px-6 py-3 rounded-full font-semibold transition-all ${
-                filter === category
-                  ? "bg-blue-500 text-white"
-                  : "bg-white text-gray-600 hover:bg-gray-100"
-              }`}
-            >
-              {category.charAt(0).toUpperCase() + category.slice(1)}
-            </button>
-          ))}
-        </div>
-
-        {/* Projects Grid */}
-        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
-          {filteredProjects.map((project) => (
-            <div
-              key={project.id}
-              className="group relative bg-white rounded-xl overflow-hidden shadow-lg hover:shadow-xl transition-all duration-300"
-            >
-              <div className="relative overflow-hidden">
-                <img
-                  src={project.image}
-                  alt={project.title}
-                  className="w-full h-48 object-cover group-hover:scale-110 transition-transform duration-300"
-                />
-                <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300">
-                  <div className="absolute bottom-4 left-4 right-4 flex gap-2">
-                    {project.liveUrl && (
-                      <button className="bg-blue-500 text-white px-4 py-2 rounded-lg text-sm font-semibold hover:bg-blue-600">
-                        Live Demo
-                      </button>
-                    )}
-                    {project.githubUrl && (
-                      <button className="bg-gray-800 text-white px-4 py-2 rounded-lg text-sm font-semibold hover:bg-gray-900">
-                        GitHub
-                      </button>
-                    )}
-                  </div>
-                </div>
-              </div>
-
-              <div className="p-6">
-                <div className="flex items-center justify-between mb-2">
-                  <h3 className="text-xl font-semibold">{project.title}</h3>
-                  {project.featured && (
-                    <span className="bg-yellow-400 text-yellow-900 px-2 py-1 rounded-full text-xs font-semibold">
-                      Featured
-                    </span>
-                  )}
-                </div>
-                <p className="text-gray-600 mb-4">{project.description}</p>
-
-                <div className="flex flex-wrap gap-2">
-                  {project.technologies.map((tech) => (
-                    <span
-                      key={tech}
-                      className="bg-gray-100 text-gray-700 px-3 py-1 rounded-full text-sm"
-                    >
-                      {tech}
-                    </span>
-                  ))}
-                </div>
-              </div>
-            </div>
-          ))}
-        </div>
-      </div>
-    </section>
-  );
-}
-```
-
-### Skills & Technologies
-
-Showcase your technical expertise:
-
-```tsx
-export default function SkillsSection() {
-  const skillCategories = [
-    {
-      title: "Frontend",
-      skills: [
-        { name: "React", level: 95 },
-        { name: "TypeScript", level: 90 },
-        { name: "Next.js", level: 88 },
-        { name: "Tailwind CSS", level: 92 },
-      ],
-    },
-    {
-      title: "Backend",
-      skills: [
-        { name: "Node.js", level: 85 },
-        { name: "Python", level: 80 },
-        { name: "PostgreSQL", level: 78 },
-        { name: "GraphQL", level: 82 },
-      ],
-    },
-    {
-      title: "Tools & Others",
-      skills: [
-        { name: "Git", level: 93 },
-        { name: "Docker", level: 75 },
-        { name: "AWS", level: 70 },
-        { name: "Figma", level: 88 },
-      ],
-    },
-  ];
-
-  return (
-    <section className="py-20 bg-white">
-      <div className="container mx-auto px-4">
-        <div className="text-center mb-16">
-          <h2 className="text-4xl font-bold mb-4">Skills & Technologies</h2>
-          <p className="text-xl text-gray-600 max-w-2xl mx-auto">
-            Here's a breakdown of my technical skills and proficiency levels
-          </p>
-        </div>
-
-        <div className="grid md:grid-cols-3 gap-8">
-          {skillCategories.map((category, categoryIndex) => (
-            <div key={categoryIndex} className="bg-gray-50 rounded-xl p-6">
-              <h3 className="text-2xl font-semibold mb-6 text-center">
-                {category.title}
-              </h3>
-              <div className="space-y-4">
-                {category.skills.map((skill, skillIndex) => (
-                  <div key={skillIndex}>
-                    <div className="flex justify-between mb-2">
-                      <span className="font-medium">{skill.name}</span>
-                      <span className="text-sm text-gray-600">
-                        {skill.level}%
-                      </span>
-                    </div>
-                    <div className="w-full bg-gray-200 rounded-full h-3">
-                      <div
-                        className="bg-blue-500 h-3 rounded-full transition-all duration-1000 ease-out"
-                        style={{ width: `${skill.level}%` }}
-                      />
-                    </div>
-                  </div>
-                ))}
-              </div>
-            </div>
-          ))}
-        </div>
-      </div>
-    </section>
-  );
-}
-```
-
-## Advanced Portfolio Features
-
-### Dark Mode Toggle
-
-Implement theme switching for better user experience:
-
-```tsx
-import { createContext, useContext, useEffect, useState } from "react";
-
-const ThemeContext = createContext();
-
-export function ThemeProvider({ children }) {
-  const [theme, setTheme] = useState("light");
-
-  useEffect(() => {
-    const stored = localStorage.getItem("theme");
-    if (stored) {
-      setTheme(stored);
-    } else if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
-      setTheme("dark");
-    }
-  }, []);
-
-  useEffect(() => {
-    localStorage.setItem("theme", theme);
-    document.documentElement.classList.toggle("dark", theme === "dark");
-  }, [theme]);
-
-  const toggleTheme = () => {
-    setTheme((prev) => (prev === "light" ? "dark" : "light"));
-  };
-
-  return (
-    <ThemeContext.Provider value={{ theme, toggleTheme }}>
-      {children}
-    </ThemeContext.Provider>
-  );
-}
-
-export const useTheme = () => useContext(ThemeContext);
-
-// Usage in component
-export default function ThemeToggle() {
-  const { theme, toggleTheme } = useTheme();
-
-  return (
-    <button
-      onClick={toggleTheme}
-      className="p-2 rounded-lg bg-gray-200 dark:bg-gray-800 hover:bg-gray-300 dark:hover:bg-gray-700"
-    >
-      {theme === "dark" ? "☀️" : "🌙"}
-    </button>
-  );
-}
-```
-
-### Contact Form
-
-Create an interactive contact form:
-
-```tsx
-import { useState } from "react";
-
-export default function ContactForm() {
-  const [formData, setFormData] = useState({
-    name: "",
-    email: "",
-    subject: "",
-    message: "",
-  });
-  const [isSubmitting, setIsSubmitting] = useState(false);
-  const [submitStatus, setSubmitStatus] = useState("");
-
-  const handleSubmit = async (e) => {
-    e.preventDefault();
-    setIsSubmitting(true);
-
-    try {
-      const response = await fetch("/api/contact", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify(formData),
-      });
-
-      if (response.ok) {
-        setSubmitStatus("success");
-        setFormData({ name: "", email: "", subject: "", message: "" });
-      } else {
-        setSubmitStatus("error");
-      }
-    } catch (error) {
-      setSubmitStatus("error");
-    }
-
-    setIsSubmitting(false);
-  };
-
-  const handleChange = (e) => {
-    setFormData({
-      ...formData,
-      [e.target.name]: e.target.value,
-    });
-  };
-
-  return (
-    <section className="py-20 bg-gray-900 text-white">
-      <div className="container mx-auto px-4 max-w-4xl">
-        <div className="text-center mb-16">
-          <h2 className="text-4xl font-bold mb-4">Let's Work Together</h2>
-          <p className="text-xl text-gray-300 max-w-2xl mx-auto">
-            Have a project in mind? I'd love to hear about it. Send me a message
-            and let's discuss!
-          </p>
-        </div>
-
-        <form onSubmit={handleSubmit} className="grid md:grid-cols-2 gap-6">
-          <div>
-            <label className="block text-sm font-medium mb-2">Name</label>
-            <input
-              type="text"
-              name="name"
-              value={formData.name}
-              onChange={handleChange}
-              required
-              className="w-full p-3 rounded-lg bg-gray-800 border border-gray-700 focus:border-blue-500 focus:outline-none"
-            />
-          </div>
-
-          <div>
-            <label className="block text-sm font-medium mb-2">Email</label>
-            <input
-              type="email"
-              name="email"
-              value={formData.email}
-              onChange={handleChange}
-              required
-              className="w-full p-3 rounded-lg bg-gray-800 border border-gray-700 focus:border-blue-500 focus:outline-none"
-            />
-          </div>
-
-          <div className="md:col-span-2">
-            <label className="block text-sm font-medium mb-2">Subject</label>
-            <input
-              type="text"
-              name="subject"
-              value={formData.subject}
-              onChange={handleChange}
-              required
-              className="w-full p-3 rounded-lg bg-gray-800 border border-gray-700 focus:border-blue-500 focus:outline-none"
-            />
-          </div>
-
-          <div className="md:col-span-2">
-            <label className="block text-sm font-medium mb-2">Message</label>
-            <textarea
-              name="message"
-              value={formData.message}
-              onChange={handleChange}
-              required
-              rows={6}
-              className="w-full p-3 rounded-lg bg-gray-800 border border-gray-700 focus:border-blue-500 focus:outline-none resize-none"
-            />
-          </div>
-
-          <div className="md:col-span-2">
-            <button
-              type="submit"
-              disabled={isSubmitting}
-              className="w-full bg-blue-500 hover:bg-blue-600 disabled:bg-gray-600 px-8 py-4 rounded-lg text-lg font-semibold transition-all"
-            >
-              {isSubmitting ? "Sending..." : "Send Message"}
-            </button>
-
-            {submitStatus === "success" && (
-              <p className="text-green-400 text-center mt-4">
-                Message sent successfully!
-              </p>
-            )}
-            {submitStatus === "error" && (
-              <p className="text-red-400 text-center mt-4">
-                Failed to send message. Please try again.
-              </p>
-            )}
-          </div>
-        </form>
-      </div>
-    </section>
-  );
-}
-```
-
-## SEO and Performance Tips
-
-### Meta Tags and Open Graph
-
-```tsx
-import Head from "next/head";
-
-export default function SEOHead() {
-  return (
-    <Head>
-      <title>Sarah Johnson - Frontend Developer & React Specialist</title>
-      <meta
-        name="description"
-        content="Frontend Developer specializing in React, Next.js, and modern web technologies. Available for freelance projects and full-time opportunities."
-      />
-
-      <meta property="og:title" content="Sarah Johnson - Frontend Developer" />
-      <meta
-        property="og:description"
-        content="Frontend Developer specializing in React and modern web technologies"
-      />
-      <meta property="og:image" content="/og-image.jpg" />
-      <meta property="og:url" content="https://sarahjohnson.dev" />
-
-      <meta name="twitter:card" content="summary_large_image" />
-      <meta name="twitter:title" content="Sarah Johnson - Frontend Developer" />
-      <meta
-        name="twitter:description"
-        content="Frontend Developer specializing in React and modern web technologies"
-      />
-      <meta name="twitter:image" content="/og-image.jpg" />
-
-      <link rel="canonical" href="https://sarahjohnson.dev" />
-      <meta name="viewport" content="width=device-width, initial-scale=1" />
-    </Head>
-  );
-}
-```
-
-## Conclusion
-
-A well-crafted React portfolio is more than just a showcase of your work—it's a demonstration of your skills, attention to detail, and understanding of user experience. Focus on creating something that not only looks great but also performs well and provides genuine value to visitors.
-
-Remember to:
-
-- Keep your portfolio updated with recent projects
-- Optimize for performance and SEO
-- Make it mobile-friendly
-- Include clear contact information
-- Showcase your personality and unique value proposition
-
-Your portfolio is an investment in your career—make it count!
diff --git a/blog/content/reexrut.mdx b/blog/content/reexrut.mdx
new file mode 100644
index 0000000..c0b09d4
--- /dev/null
+++ b/blog/content/reexrut.mdx
@@ -0,0 +1,55 @@
+---
+title: "Reexrut"
+description: "An HR SAAS Software that uses AI to summarizes applicants data and create a profile"
+date: "2025-10-16"
+tags: ["frontend", "saas", "backend", "AI", "LLM"]
+featured: true
+readTime: "5 min read"
+author: "Ferez"
+thumbnail: ""
+---
+
+## Must Haves
+
+To set the perfect tone for your game night, you’ll need:
+
+- **Snacks & Drinks** – Popcorn, chips, finger food, and a mix of cocktails or mocktails.
+- **Music** – A good Spotify playlist sets the mood. Try _“Game Night Vibes”_ or _“Friends & Fun”_.
+- **Lighting** – Soft lights or a few candles instantly make the atmosphere cozy.
+- **Apps** – Keep things digital with apps like **Houseparty**, **Psych!**, or **Heads Up!** for quick laughs.
+
+---
+
+## Non-Alcoholic Game Ideas
+
+A game night doesn’t need alcohol to be fun — it’s all about the energy!
+
+- **Werewolf (a.k.a. Mafia)** – A storytelling bluffing game where villagers try to find the werewolves before they’re all eliminated. The tension and drama are half the fun!
+- **Spyfall / Spy** – Everyone gets a role at a secret location, except one person — the spy — who must blend in by guessing where everyone is. Perfect for quick rounds and clever banter.
+- **Mister White** – Similar to Spyfall, but with a twist: one person is “Mister White” and has to guess a secret word without ever hearing it.
+- **Charades** or **Heads Up!** – Classic guessing games that never get old.
+- **Jackbox Games** – If you’ve got a TV and smartphones, you’re set. Try _Fibbage_ or _Drawful_ for endless laughter.
+
+---
+
+## Alcoholic Game Ideas (18+)
+
+If you’re looking to spice things up a little, mix in a few classic drinking games — responsibly!
+
+- **Never Have I Ever** – Simple, revealing, and guaranteed to spark conversation.
+- **Kings Cup** – Grab a deck of cards and assign rules to each value — chaos and laughter ensue.
+- **Drunk Jenga** – Write challenges or dares on each block; take a sip if you fail!
+- **Buzzed (App)** – A fun drinking game app with hilarious prompts to keep everyone entertained.
+- **Most Likely To** – Everyone points to who’s “most likely” to do something crazy — the one with the most fingers pointed takes a sip.
+
+---
+
+## Wrap-Up
+
+Game nights at home are all about connection, laughter, and friendly chaos. Whether you’re hunting werewolves, outsmarting spies, or just playing charades with your favorite playlist in the background, it’s the shared moments that make the night memorable.
+
+So grab some snacks, queue your games, and let the fun begin!
+
+---
+
+Would you like me to make it slightly more **playful and blog-style conversational** (like something for a lifestyle website), or keep it **clean and structured** (like your current style)?
diff --git a/components/nav-links.tsx b/components/nav-links.tsx
new file mode 100644
index 0000000..cce7fd0
--- /dev/null
+++ b/components/nav-links.tsx
@@ -0,0 +1,53 @@
+import Link from "next/link";
+import { ThemeToggle } from "@/components/theme-toggle";
+
+const NavLinks = () => {
+  return (
+    <nav className="flex items-center space-x-4">
+      <Link
+        href="https://docs.ferez.cloud"
+        target="_blank"
+        rel="noopener noreferrer"
+        className="text-sm font-medium text-muted-foreground hover:text-foreground transition-colors"
+      >
+        Docs
+      </Link>
+      <Link
+        href="https://github.com/ferez22"
+        target="_blank"
+        rel="noopener noreferrer"
+        className="text-sm font-medium text-muted-foreground hover:text-foreground transition-colors"
+      >
+        GitHub
+      </Link>
+      <Link
+        href="https://www.instagram.com/mukke_ferez?igsh=NWZqbnB5eGwyeHgz"
+        target="_blank"
+        rel="noopener noreferrer"
+        className="text-sm font-medium text-muted-foreground hover:text-foreground transition-colors"
+      >
+        Instagram
+      </Link>
+      <Link
+        href="https://discord.gg/P5XxPwX8"
+        target="_blank"
+        rel="noopener noreferrer"
+        className="text-sm font-medium text-muted-foreground hover:text-foreground transition-colors"
+      >
+        Discord
+      </Link>
+      <Link
+        href="https://soundcloud.com/ferez-197925187"
+        target="_blank"
+        rel="noopener noreferrer"
+        className="text-sm font-medium text-muted-foreground hover:text-foreground transition-colors"
+      >
+        Soundcloud
+      </Link>
+
+      <ThemeToggle />
+    </nav>
+  );
+};
+
+export default NavLinks;
diff --git a/components/promo-content.tsx b/components/promo-content.tsx
index dfbece1..5a60312 100644
--- a/components/promo-content.tsx
+++ b/components/promo-content.tsx
@@ -22,7 +22,7 @@ export function PromoContent({
           />
           <div className="flex-1 min-w-0">
             <p className="text-xs font-medium text-foreground/90 truncate">
-              Try Magic UI Pro
+              Follow me on Github
             </p>
             <p className="text-xs text-muted-foreground truncate">
               Beautiful design system
@@ -52,11 +52,12 @@ export function PromoContent({
         />
         <div className="flex flex-col gap-1">
           <h3 className="text-lg font-semibold tracking-tighter">
-            Try Magic UI Pro
+            Follow me on Github
           </h3>
           <p className="text-sm text-muted-foreground">
-            Magic UI Pro is a design system for building beautiful and
-            responsive web applications.
+            find my <pre>mycro-services</pre> Infrastructure on github. It is an
+            open source project ot create a robust scalable infrastructure for
+            your own server.
           </p>
         </div>
       </div>
diff --git a/components/site-nav.tsx b/components/site-nav.tsx
index e9cdafa..5803efa 100644
--- a/components/site-nav.tsx
+++ b/components/site-nav.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable @next/next/no-img-element */
 import Link from "next/link";
-import { ThemeToggle } from "@/components/theme-toggle";
+import NavLinks from "./nav-links";
 
 export function SiteNav() {
   return (
@@ -10,19 +10,12 @@ export function SiteNav() {
           <Link
             href="/"
             className="mr-6 flex items-center space-x-2 font-medium text-lg tracking-tighter h-8 w-8 rounded-md overflow-hidden"
-          >
-            <img
-              src="/magicui-logo.png"
-              alt="Magic UI"
-              className="w-10 h-10 object-cover"
-            />
-          </Link>
+          ></Link>
+          <b>ze-portfolio</b>
         </div>
 
         <div className="flex flex-1 w-full justify-end">
-          <nav className="flex items-center">
-            <ThemeToggle />
-          </nav>
+          <NavLinks />
         </div>
       </div>
     </header>
diff --git a/lib/site.ts b/lib/site.ts
index b45b5e5..8258d10 100644
--- a/lib/site.ts
+++ b/lib/site.ts
@@ -1,8 +1,7 @@
 export const siteConfig = {
-  name: "Magic UI Blog",
-  url: "https://blog-magicui.vercel.app",
-  description:
-    "Modern React and web development tutorials, insights, and best practices.",
+  name: "Ze Portfolio",
+  url: "https://github.com/Ferez22/ze-portfolio",
+  description: "My personal portfolio",
 };
 
 export type SiteConfig = typeof siteConfig;
diff --git a/package.json b/package.json
index ce7db80..9503995 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "blog-template",
+  "name": "ze-portfolio",
   "version": "0.1.0",
   "private": true,
   "scripts": {
diff --git a/public/thumbnails/nextjs-portfolio-templates.jpg b/public/thumbnails/nextjs-portfolio-templates.jpg
deleted file mode 100644
index 2ac30f1..0000000
Binary files a/public/thumbnails/nextjs-portfolio-templates.jpg and /dev/null differ
diff --git a/public/thumbnails/react-animation-libraries.jpg b/public/thumbnails/react-animation-libraries.jpg
deleted file mode 100644
index 2ac3f62..0000000
Binary files a/public/thumbnails/react-animation-libraries.jpg and /dev/null differ
diff --git a/public/thumbnails/react-components-libraries.jpg b/public/thumbnails/react-components-libraries.jpg
deleted file mode 100644
index 26a35de..0000000
Binary files a/public/thumbnails/react-components-libraries.jpg and /dev/null differ
diff --git a/public/thumbnails/react-landing-page-templates.jpg b/public/thumbnails/react-landing-page-templates.jpg
deleted file mode 100644
index 3e1818f..0000000
Binary files a/public/thumbnails/react-landing-page-templates.jpg and /dev/null differ
diff --git a/public/thumbnails/react-native-libraries.jpg b/public/thumbnails/react-native-libraries.jpg
deleted file mode 100644
index b95c2c8..0000000
Binary files a/public/thumbnails/react-native-libraries.jpg and /dev/null differ
diff --git a/public/thumbnails/react-portfolio-templates.jpg b/public/thumbnails/react-portfolio-templates.jpg
deleted file mode 100644
index 7f8fdb3..0000000
Binary files a/public/thumbnails/react-portfolio-templates.jpg and /dev/null differ
diff --git a/public/thumbnails/thumbnail-heimlab.png b/public/thumbnails/thumbnail-heimlab.png
new file mode 100644
index 0000000..9afcee0
Binary files /dev/null and b/public/thumbnails/thumbnail-heimlab.png differ
diff --git a/public/thumbnails/thumbnail-hemewimp.png b/public/thumbnails/thumbnail-hemewimp.png
new file mode 100644
index 0000000..663e7a2
Binary files /dev/null and b/public/thumbnails/thumbnail-hemewimp.png differ
diff --git a/public/thumbnails/video-heimlab.mov b/public/thumbnails/video-heimlab.mov
new file mode 100644
index 0000000..4c12ea0
Binary files /dev/null and b/public/thumbnails/video-heimlab.mov differ