fix scrollbar affecting layout

LICENSE.md

@@ -2,6 +2,8 @@
 
 Copyright (c) 2025 Lê Vĩnh Khang
 
+Copyright (c) 2025 Alex Lebens
+
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
 in the Software without restriction, including without limitation the rights

src/components/DynamicIcon.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import * as FaIcons from 'react-icons/fa';
+import * as MdIcons from 'react-icons/md';
+import * as AiIcons from 'react-icons/ai';
+import * as GiIcons from 'react-icons/gi';
+import * as IoIcons from 'react-icons/io';
+import * as CiIcons from "react-icons/ci";
+import * as FiIcons from "react-icons/fi";
+import * as LuIcons from "react-icons/lu";
+import * as SiIcons from 'react-icons/si';
+
+const iconSets = {
+  fa: FaIcons,
+  md: MdIcons,
+  ai: AiIcons,
+  gi: GiIcons,
+  io: IoIcons,
+  ci: CiIcons,
+  fi: FiIcons,
+  lu: LuIcons,
+  si: SiIcons,
+};
+
+const DynamicIcon = ({ name, set = 'fa', size = 20, color = 'currentColor', className = '' }: {name: string, set: string, size: number, color: string, className: string }) => {
+  let IconComponent = FaIcons.FaAlignCenter;
+
+  if (name.startsWith("Fa")) {
+    IconComponent = iconSets["fa"][name]
+  } else if (name.startsWith("Si")) {
+    IconComponent = iconSets["si"][name]
+  } else {
+    IconComponent = iconSets[set][name];
+  }
+
+  return <IconComponent size={size} color={color} className={className} />;
+};
+
+export default DynamicIcon;

src/pages/about.astro

@@ -1,7 +1,6 @@
 ---
 import BaseLayout from '../layouts/BaseLayout.astro';
-import { FaJs, FaReact, FaNodeJs, FaPython } from 'react-icons/fa';
+import DynamicIcon from '../components/DynamicIcon.tsx';
-import { SiTypescript, SiAstro } from 'react-icons/si';
 
 import directus from '../../lib/directus';
 import { readSingleton, readItems } from '@directus/sdk';
@@ -107,7 +106,7 @@ const skills = await directus.request(
       </div>
     </div>
 
-    <!-- Skills Section -->
+    <!-- Skills Section - Improved for mobile -->
     <div class="theme-transition-all mb-16 sm:mb-20 md:mb-24">
       <h2
         class="theme-transition-color mb-8 text-center text-2xl font-bold text-zinc-900 sm:mb-12 sm:text-3xl dark:text-zinc-100"
@@ -119,13 +118,13 @@ const skills = await directus.request(
         <!-- Main slider container -->
         <div class="slider-track animate-slide flex">
           {
-            skills.map((skill, index) => (
+            [...skills, ...skills, ...skills].map((skill) => (
               <div class="skill-card theme-transition-element mx-2 min-w-[220px] transform rounded-xl border border-zinc-200 bg-white transition-all duration-300 hover:-translate-y-2 hover:scale-105 hover:border-zinc-300 hover:shadow-xl sm:mx-4 sm:min-w-[280px] dark:border-zinc-700 dark:bg-zinc-800/50 dark:hover:border-zinc-600">
                 <div class="p-4 sm:p-6">
                   <div class="mb-4 flex items-center justify-between sm:mb-6">
                     <div class="flex items-center gap-2 sm:gap-4">
                       <div class="theme-transition-bg theme-transition-color flex h-8 w-8 transform items-center justify-center rounded-lg bg-zinc-100 text-zinc-800 transition-transform group-hover:rotate-12 sm:h-12 sm:w-12 dark:bg-zinc-800 dark:text-zinc-200">
-                        <skill.icon />
+                        <DynamicIcon name={skill.icon} />
                       </div>
                       <h3 class="theme-transition-color text-base font-semibold text-zinc-900 sm:text-xl dark:text-zinc-100">
                         {skill.title}

src/styles/global.css

@@ -1,6 +1,10 @@
 /* Remove all the complex mobile menu styles and keep only what's necessary */
 @import 'tailwindcss';
 
+/* Dark mode support for Tailwind CSS v4 */
+/* https://tailwindcss.com/docs/dark-mode */
+@custom-variant dark (&:where(.dark, .dark *));
+
 @layer base {
   :root {
     font-family: 'Inter', sans-serif;
@@ -12,6 +16,7 @@
   html {
     scroll-behavior: smooth;
     scroll-padding-top: 5rem;
+    overflow-y: scroll;
   }
 
   body {

tsconfig.json

@@ -3,6 +3,7 @@
   "compilerOptions": {
     "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
+    "allowImportingTsExtensions": true,
     "target": "ES6",
     "skipLibCheck": true,
     "strict": true,