feat: added linear gradient to section headings

Author: steadyfall

src/components/About.tsx

@@ -1,12 +1,16 @@
 import { ArrowUpRight } from "lucide-react"
 import BlurFade, { BLUR_FADE_DELAY } from "@/components/ui/BlurFade";
 import Highlight from "@/lib/highlighter";
+import { cn } from "@/lib/utils";
 
 const About = () => {
   return (
     <section id="about" className="mb-12">
         <BlurFade delay={BLUR_FADE_DELAY * 3}>
-          <h2 className="text-2xl md:text-3xl lg:text-4xl font-section mb-4">About</h2>
+          <h2 className={cn(
+            "text-2xl md:text-3xl lg:text-4xl font-section mb-4",
+            "inline-block text-transparent bg-clip-text bg-gradient-to-r dark:from-gray-300 dark:to-gray-100 from-[#434343] to-[#000000]"
+          )}>About</h2>
         </BlurFade>
         <BlurFade delay={BLUR_FADE_DELAY * 4}>
           <p className="text-gray-700 dark:text-gray-300">

src/components/Education.tsx

@@ -1,13 +1,17 @@
 import { useMediaQuery } from '@/hooks/useMediaQuery'
 import { ArrowUpRight } from 'lucide-react'
 import BlurFade, { BLUR_FADE_DELAY } from '@/components/ui/BlurFade'
+import { cn } from '@/lib/utils'
 
 export function Education() {
     const isDesktop = useMediaQuery('(min-width: 768px)')
     return (
         <section id="education" className="mb-12">
             <BlurFade delay={BLUR_FADE_DELAY * 7}>
-                <h2 className="text-2xl md:text-3xl lg:text-4xl font-section font-bold mb-4">Education</h2>
+                <h2 className={cn(
+                    "text-2xl md:text-3xl lg:text-4xl font-section mb-4",
+                    "inline-block text-transparent bg-clip-text bg-gradient-to-r dark:from-gray-300 dark:to-gray-100 from-[#434343] to-[#000000]"
+                )}>Education</h2>
             </BlurFade>
             <BlurFade delay={BLUR_FADE_DELAY * 8}>
                 <div className="flex items-center">

src/components/Experiences.tsx

@@ -3,6 +3,7 @@
 import { useState, useEffect } from 'react'
 import { ExperienceTileProps, ExperienceTile } from './Tiles/ExperienceTile'
 import BlurFade, { BLUR_FADE_DELAY } from '@/components/ui/BlurFade';
+import { cn } from '@/lib/utils';
 
 interface ExperiencesProps {
     arr: ExperienceTileProps[];
@@ -13,7 +14,10 @@ export function Experiences({ arr }: ExperiencesProps) {
     return (
         <section id="experience" className="mb-12">
             <BlurFade delay={BLUR_FADE_DELAY * 5}>
-                <h2 className="text-2xl md:text-3xl lg:text-4xl font-section mb-4">Experience</h2>
+                <h2 className={cn(
+                    "text-2xl md:text-3xl lg:text-4xl font-section mb-4",
+                    "inline-block text-transparent bg-clip-text bg-gradient-to-r dark:from-gray-300 dark:to-gray-100 from-[#434343] to-[#000000]"
+                )}>Experience</h2>
             </BlurFade>
             {experiences && experiences.length > 0 ? (
             <div className="space-y-6">

src/components/Projects.tsx

@@ -1,6 +1,7 @@
 import { useState, useEffect } from 'react'
 import { ProjectTile, ProjectTileProps } from './Tiles/ProjectTile'
 import BlurFade, { BLUR_FADE_DELAY } from '@/components/ui/BlurFade';
+import { cn } from '@/lib/utils';
 
 interface ProjectProps {
     arr: ProjectTileProps[];
@@ -11,7 +12,10 @@ export function Projects({ arr }: ProjectProps) {
     return (
         <section id="projects" className="mb-12">
             <BlurFade delay={BLUR_FADE_DELAY * 11}>
-                <h2 className="text-2xl md:text-3xl lg:text-4xl font-section font-bold mb-4">Projects</h2>
+                <h2 className={cn(
+                    "text-2xl md:text-3xl lg:text-4xl font-section mb-4",
+                    "inline-block text-transparent bg-clip-text bg-gradient-to-r dark:from-gray-300 dark:to-gray-100 from-[#434343] to-[#000000]"
+                )}>Projects</h2>
             </BlurFade>
             {projects && projects.length > 0 ? (
                 <div className="space-y-5">

src/components/Skills.tsx

@@ -1,6 +1,7 @@
 import { Badge } from '@/components/ui/Badge';
 import { useState } from 'react';
 import BlurFade, { BLUR_FADE_DELAY } from '@/components/ui/BlurFade';
+import { cn } from '@/lib/utils';
 
 interface SkillsProps {
     arr: string[];
@@ -11,7 +12,10 @@ export function Skills({ arr }: SkillsProps) {
     return (
         <section id="skills" className="mb-12">
             <BlurFade delay={BLUR_FADE_DELAY * 9}>
-                <h2 className="text-2xl md:text-3xl lg:text-4xl font-section font-bold mb-4">Skills</h2>
+                <h2 className={cn(
+                    "text-2xl md:text-3xl lg:text-4xl font-section mb-4",
+                    "inline-block text-transparent bg-clip-text bg-gradient-to-r dark:from-gray-300 dark:to-gray-100 from-[#434343] to-[#000000]"
+                )}>Skills</h2>
             </BlurFade>
             {skills && skills.length > 0 ? (
                 <div className="flex flex-wrap gap-1">