diff --git a/diff.txt b/diff.txt
deleted file mode 100644
index 4fecfa2..0000000
--- a/diff.txt
+++ /dev/null
@@ -1,506 +0,0 @@
-diff --git a/src/App.tsx b/src/App.tsx
-index 19c9751..78d9f0c 100644
---- a/src/App.tsx
-+++ b/src/App.tsx
-@@ -5,7 +5,6 @@ import remarkGfm from "remark-gfm";
- 
- // Components
- import {
--    AnimatedBackground,
-     ProjectThumb,
-     CascadeItem,
-     FadeContainer,
-@@ -14,7 +13,6 @@ import {
- 
- // Hooks
- import {
--    useSystemDarkMode,
-     useGitHubReadme,
-     useGitHubRepoImages,
- } from "./hooks";
-@@ -31,13 +29,27 @@ export default function PortfolioAboveTheFold() {
-         null,
-     );
-     const [isContentVisible, setIsContentVisible] = useState(true);
--    const isDark = useSystemDarkMode();
- 
-     // Handle project selection with fade transition
-     const handleProjectSelect = (projectId: number) => {
-         if (projectId === active) return;
- 
--        // Start fade out
-+        // If on mobile/tablet, trigger the modal instantly without waiting for fade-out
-+        if (window.innerWidth < 1024) {
-+            setIsContentVisible(false); // Reset content visibility for the cascade
-+            setActive(projectId);
-+            setDisplayedProject(projectId);
-+            
-+            // Wait for the modal wrapper to begin its CSS transition before starting the cascade
-+            requestAnimationFrame(() => {
-+                requestAnimationFrame(() => {
-+                    setIsContentVisible(true);
-+                });
-+            });
-+            return;
-+        }
-+
-+        // Start fade out for desktop
-         setIsContentVisible(false);
- 
-         // After fade out completes, update the project and fade in
-@@ -48,19 +60,31 @@ export default function PortfolioAboveTheFold() {
-             requestAnimationFrame(() => {
-                 setIsContentVisible(true);
-             });
--        }, 200); // Match the fade-out duration
-+        }, 300); // Match the fade-out duration
-     };
- 
-     // Handle closing with fade transition
-     const handleClose = () => {
-         setIsContentVisible(false);
-+
-+        if (window.innerWidth < 1024) {
-+            // Instantly start scaling down the modal on mobile
-+            setActive(null);
-+            setDisplayedProject(null);
-+            requestAnimationFrame(() => {
-+                setIsContentVisible(true);
-+            });
-+            return;
-+        }
-+
-+        // On desktop, wait for fade-out before resetting project
-         setTimeout(() => {
-             setActive(null);
-             setDisplayedProject(null);
-             requestAnimationFrame(() => {
-                 setIsContentVisible(true);
-             });
--        }, 200);
-+        }, 300);
-     };
- 
-     // Combine all projects for lookup
-@@ -87,40 +111,36 @@ export default function PortfolioAboveTheFold() {
-     } = useGitHubReadme(activeRepo);
- 
-     return (
--        <main className="h-screen w-full flex items-center justify-center p-6 overflow-hidden relative">
--            <AnimatedBackground
--                palette={activeProject?.palette}
--                isDark={isDark}
--            />
--            <section className="relative max-w-[1100px] w-full h-[88vh] bg-white/60 dark:bg-slate-900/60 backdrop-blur-sm border border-white/60 dark:border-slate-700/60 rounded-2xl shadow-2xl p-6 grid grid-cols-2 gap-6 items-stretch">
--                <ScrollArea className="min-h-0" scrollbarOffset={12}>
-+        <main className="h-screen w-full bg-white dark:bg-slate-950 overflow-hidden font-sans text-slate-900 dark:text-slate-100 transition-colors duration-300">
-+            <section className="mx-auto max-w-[1400px] w-full h-full grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-16 items-stretch px-6 py-6 md:px-12 md:py-12 lg:px-16 lg:py-16 relative">
-+                <ScrollArea className="min-h-0 pr-4 lg:pr-6" scrollbarOffset={12}>
-                     <div className="flex flex-col gap-4">
-                         <div>
--                            <p className="text-sm uppercase tracking-wide text-gray-500 dark:text-gray-400">
-+                            <p className="text-sm font-medium tracking-wide text-gray-500 dark:text-gray-400">
-                                 Hello, I'm
-                             </p>
--                            <h1 className="mt-2 text-[clamp(22px,3.6vw,40px)] leading-tight font-semibold text-gray-900 dark:text-white">
-+                            <h1 className="mt-2 text-[clamp(32px,5vw,56px)] leading-none font-bold tracking-tight text-gray-900 dark:text-white">
-                                 {profile.name}
-                             </h1>
--                            <p className="mt-1 text-[clamp(14px,1.6vw,18px)] text-gray-600 dark:text-gray-300">
--                                {profile.role} • {profile.location}
-+                            <p className="mt-2 text-[clamp(16px,2vw,22px)] font-medium text-gray-600 dark:text-gray-300">
-+                                {profile.role} <span className="text-gray-300 dark:text-gray-600 mx-2">•</span> {profile.location}
-                             </p>
- 
--                            <p className="mt-6 text-[clamp(13px,1.2vw,16px)] text-gray-700 dark:text-gray-300 max-w-[38ch]">
-+                            <p className="mt-8 text-base lg:text-lg text-gray-600 dark:text-gray-400 max-w-[45ch] leading-relaxed">
-                                 {profile.blurb}
-                             </p>
- 
--                            <div className="mt-6 flex flex-wrap gap-3">
-+                            <div className="mt-8 flex flex-wrap gap-4">
-                                 <a
-                                     href={profile.cv}
--                                    className="inline-flex items-center gap-2 rounded-md px-4 py-2 border border-gray-200 dark:border-slate-600 shadow-sm text-sm font-medium text-gray-900 dark:text-white hover:shadow hover:-translate-y-0.5 transition-transform"
-+                                    className="inline-flex items-center gap-2 rounded-full px-6 py-2.5 border border-gray-200 dark:border-slate-800 bg-white dark:bg-slate-900 shadow-sm text-sm font-medium text-gray-900 dark:text-white hover:bg-gray-50 dark:hover:bg-slate-800 transition-colors"
-                                 >
-                                     Download CV
-                                 </a>
- 
-                                 <a
-                                     href={`mailto:${profile.email}`}
--                                    className="inline-flex items-center gap-2 rounded-md px-4 py-2 bg-gray-900 dark:bg-white text-white dark:text-gray-900 text-sm font-medium hover:opacity-95 transition-opacity"
-+                                    className="inline-flex items-center gap-2 rounded-full px-6 py-2.5 bg-gray-900 dark:bg-white text-white dark:text-gray-900 text-sm font-medium hover:bg-gray-800 dark:hover:bg-gray-100 transition-colors"
-                                 >
-                                     Contact
-                                 </a>
-@@ -137,48 +157,24 @@ export default function PortfolioAboveTheFold() {
-                                     const isActive = active === p.id;
- 
-                                     return (
--                                        // Wrapper div creates the gradient border effect
-                                         <div
-                                             key={p.id}
--                                            className="group relative rounded-lg p-[2px] transition-all duration-200 shadow-sm hover:shadow-md hover:-translate-y-0.5 bg-white dark:bg-slate-800"
-+                                            className={`group relative rounded-xl transition-all duration-200 bg-gray-50 dark:bg-slate-900 border ${
-+                                                isActive
-+                                                    ? "border-gray-900 dark:border-white shadow-sm"
-+                                                    : "border-transparent hover:border-gray-200 dark:hover:border-slate-700"
-+                                            }`}
-                                         >
--                                            {/* Gradient border layer - always present, opacity controlled */}
--                                            <div
--                                                aria-hidden
--                                                className="absolute inset-0 rounded-lg transition-opacity duration-300 pointer-events-none"
--                                                style={{
--                                                    backgroundImage: p.gradient,
--                                                    opacity: isActive ? 1 : 0,
--                                                }}
--                                            />
-                                             <button
-                                                 onClick={() =>
-                                                     handleProjectSelect(p.id)
-                                                 }
--                                                className={`relative flex flex-col w-full rounded-[6px] overflow-hidden
--                                            bg-white dark:bg-slate-800
--                                            focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-indigo-500`}
-+                                                className={`relative flex flex-col w-full rounded-xl overflow-hidden focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-gray-500`}
-                                                 aria-expanded={isActive}
-                                                 type="button"
-                                             >
--                                                {/* Gradient overlay that covers the entire button; becomes visible on hover. */}
--                                                <div
--                                                    aria-hidden
--                                                    className="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none rounded-[6px]"
--                                                    style={{
--                                                        backgroundImage:
--                                                            p.gradient,
--                                                    }}
--                                                />
--
--                                                {/* Slight dark layer to insure text contrast when gradient is visible */}
--                                                <div
--                                                    aria-hidden
--                                                    className="absolute inset-0 bg-black/0 group-hover:bg-black/25 transition-colors duration-300 pointer-events-none rounded-[6px]"
--                                                />
--
-                                                 {/* Image fills width */}
--                                                <div className="relative z-10 w-full h-24 overflow-hidden">
-+                                                <div className="relative z-10 w-full h-32 overflow-hidden bg-gray-200 dark:bg-slate-800">
-                                                     <ProjectThumb
-                                                         src={
-                                                             (p.repo &&
-@@ -192,11 +188,11 @@ export default function PortfolioAboveTheFold() {
-                                                 </div>
- 
-                                                 {/* Text below image */}
--                                                <div className="relative z-10 text-left p-2">
--                                                    <div className="text-sm font-medium transition-colors duration-200 text-gray-900 dark:text-white group-hover:text-white">
-+                                                <div className="relative z-10 text-left p-3">
-+                                                    <div className="text-sm font-semibold transition-colors duration-200 text-gray-900 dark:text-white">
-                                                         {p.title}
-                                                     </div>
--                                                    <div className="text-xs transition-colors duration-200 text-gray-500 dark:text-gray-400 group-hover:text-gray-100 line-clamp-2">
-+                                                    <div className="text-xs transition-colors duration-200 text-gray-600 dark:text-gray-400 mt-1 line-clamp-2">
-                                                         {p.desc}
-                                                     </div>
-                                                 </div>
-@@ -215,48 +211,24 @@ export default function PortfolioAboveTheFold() {
-                                     const isActive = active === p.id;
- 
-                                     return (
--                                        // Wrapper div creates the gradient border effect
-                                         <div
-                                             key={p.id}
--                                            className="group relative rounded-lg p-[2px] transition-all duration-200 shadow-sm hover:shadow-md hover:-translate-y-0.5 bg-white dark:bg-slate-800"
-+                                            className={`group relative rounded-xl transition-all duration-200 bg-gray-50 dark:bg-slate-900 border ${
-+                                                isActive
-+                                                    ? "border-gray-900 dark:border-white shadow-sm"
-+                                                    : "border-transparent hover:border-gray-200 dark:hover:border-slate-700"
-+                                            }`}
-                                         >
--                                            {/* Gradient border layer - always present, opacity controlled */}
--                                            <div
--                                                aria-hidden
--                                                className="absolute inset-0 rounded-lg transition-opacity duration-300 pointer-events-none"
--                                                style={{
--                                                    backgroundImage: p.gradient,
--                                                    opacity: isActive ? 1 : 0,
--                                                }}
--                                            />
-                                             <button
-                                                 onClick={() =>
-                                                     handleProjectSelect(p.id)
-                                                 }
--                                                className={`relative flex flex-col w-full rounded-[6px] overflow-hidden
--                                            bg-white dark:bg-slate-800
--                                            focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-indigo-500`}
-+                                                className={`relative flex flex-col w-full rounded-xl overflow-hidden focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-gray-500`}
-                                                 aria-expanded={isActive}
-                                                 type="button"
-                                             >
--                                                {/* Gradient overlay that covers the entire button; becomes visible on hover. */}
--                                                <div
--                                                    aria-hidden
--                                                    className="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none rounded-[6px]"
--                                                    style={{
--                                                        backgroundImage:
--                                                            p.gradient,
--                                                    }}
--                                                />
--
--                                                {/* Slight dark layer to insure text contrast when gradient is visible */}
--                                                <div
--                                                    aria-hidden
--                                                    className="absolute inset-0 bg-black/0 group-hover:bg-black/25 transition-colors duration-300 pointer-events-none rounded-[6px]"
--                                                />
--
-                                                 {/* Image fills width */}
--                                                <div className="relative z-10 w-full h-24 overflow-hidden">
-+                                                <div className="relative z-10 w-full h-32 overflow-hidden bg-gray-200 dark:bg-slate-800">
-                                                     <ProjectThumb
-                                                         src={
-                                                             (p.repo &&
-@@ -270,11 +242,11 @@ export default function PortfolioAboveTheFold() {
-                                                 </div>
- 
-                                                 {/* Text below image */}
--                                                <div className="relative z-10 text-left p-2">
--                                                    <div className="text-sm font-medium transition-colors duration-200 text-gray-900 dark:text-white group-hover:text-white">
-+                                                <div className="relative z-10 text-left p-3">
-+                                                    <div className="text-sm font-semibold transition-colors duration-200 text-gray-900 dark:text-white">
-                                                         {p.title}
-                                                     </div>
--                                                    <div className="text-xs transition-colors duration-200 text-gray-500 dark:text-gray-400 group-hover:text-gray-100 line-clamp-2">
-+                                                    <div className="text-xs transition-colors duration-200 text-gray-600 dark:text-gray-400 mt-1 line-clamp-2">
-                                                         {p.desc}
-                                                     </div>
-                                                 </div>
-@@ -282,13 +254,59 @@ export default function PortfolioAboveTheFold() {
-                                         </div>
-                                     );
-                                 })}
-+                                </div>
-+                            </div>
-+                        </div>
-+
-+                        <div className="mt-8 pt-8 border-t border-gray-200/60 dark:border-slate-800/60 flex flex-col lg:flex-row items-start lg:items-center justify-between gap-6 px-2 pb-8">
-+                            <div>
-+                                <h4 className="text-xs font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-widest">
-+                                    Skills
-+                                </h4>
-+                                <div className="mt-3 flex flex-wrap gap-2.5">
-+                                    {skills.map((s, i) => (
-+                                        <span
-+                                            key={i}
-+                                            className="text-[11px] font-medium tracking-wide px-3 py-1.5 bg-gray-100 dark:bg-slate-800/50 rounded-full text-gray-700 dark:text-gray-300"
-+                                        >
-+                                            {s}
-+                                        </span>
-+                                    ))}
-+                                </div>
-+                            </div>
-+
-+                            <div className="text-left lg:text-right text-sm font-medium text-gray-500 dark:text-gray-400">
-+                                <div className="flex items-center gap-2 lg:justify-end mb-1">
-+                                    <span className="w-2 h-2 rounded-full bg-emerald-500 animate-pulse"></span>
-+                                    Available for freelance & contract
-+                                </div>
-+                                <a href={`mailto:${profile.email}`} className="hover:text-gray-900 dark:hover:text-white transition-colors">{profile.email}</a>
-                             </div>
-                         </div>
-                     </div>
-                 </ScrollArea>
- 
--                <div className="flex flex-col gap-4 min-h-0">
--                    <div className="flex-1 bg-white dark:bg-slate-800 rounded-lg border border-gray-100 dark:border-slate-700 overflow-hidden">
-+                <div
-+                    className={`flex flex-col gap-6 min-h-0 h-full transition-all duration-300 fixed inset-0 z-50 p-4 sm:p-8 bg-slate-50/90 dark:bg-slate-950/90 backdrop-blur-md lg:static lg:p-0 lg:bg-transparent lg:dark:bg-transparent lg:backdrop-blur-none ${
-+                        displayedProject !== null
-+                            ? "opacity-100 pointer-events-auto"
-+                            : "opacity-0 pointer-events-none lg:opacity-100 lg:pointer-events-auto"
-+                    }`}
-+                    onClick={() => {
-+                        // Only close on click if it's acting as a modal (narrow viewports)
-+                        if (window.innerWidth < 1024 && displayedProject !== null) {
-+                            handleClose();
-+                        }
-+                    }}
-+                >
-+                    <div 
-+                        className={`flex-1 bg-white dark:bg-slate-900 lg:rounded-3xl border border-gray-200/60 dark:border-slate-800/60 shadow-xl overflow-hidden rounded-2xl transition-all duration-300 ease-out transform ${
-+                            displayedProject !== null 
-+                                ? "translate-y-0 scale-100 opacity-100" 
-+                                : "translate-y-8 scale-95 opacity-0 lg:translate-y-0 lg:scale-100 lg:opacity-100"
-+                        }`}
-+                        onClick={(e) => e.stopPropagation()}
-+                    >
-                         <div className="w-full h-full flex items-center justify-center relative">
-                             {/* Project detail view */}
-                             <FadeContainer
-@@ -302,12 +320,22 @@ export default function PortfolioAboveTheFold() {
-                                         className="w-full h-full"
-                                         scrollbarOffset={12}
-                                     >
--                                        <article>
-+                                        <article className="p-6 md:p-10">
-+                                            <button
-+                                                onClick={handleClose}
-+                                                className="absolute z-50 top-4 right-4 md:top-6 md:right-6 p-2 rounded-full bg-white/80 dark:bg-slate-900/80 backdrop-blur text-gray-500 hover:text-gray-900 hover:bg-gray-100 dark:hover:text-white dark:hover:bg-slate-800 border border-gray-200/50 dark:border-slate-700/50 shadow-sm transition-all lg:hidden"
-+                                                aria-label="Close project"
-+                                            >
-+                                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-+                                                    <line x1="18" y1="6" x2="6" y2="18"></line>
-+                                                    <line x1="6" y1="6" x2="18" y2="18"></line>
-+                                                </svg>
-+                                            </button>
-                                             <CascadeItem
-                                                 delay={0}
-                                                 isVisible={isContentVisible}
-                                             >
--                                                <div className="w-full aspect-[4/3] rounded-lg overflow-hidden bg-gray-100 dark:bg-slate-700">
-+                                                <div className="w-full aspect-video rounded-xl overflow-hidden bg-gray-100 dark:bg-slate-800 border border-gray-200/50 dark:border-slate-700/50">
-                                                     <ProjectThumb
-                                                         src={
-                                                             readmeImage ||
-@@ -333,8 +361,8 @@ export default function PortfolioAboveTheFold() {
-                                                 delay={75}
-                                                 isVisible={isContentVisible}
-                                             >
--                                                <div className="mt-4 flex items-start justify-between">
--                                                    <h2 className="text-lg font-semibold text-gray-900 dark:text-white">
-+                                                <div className="mt-6 flex items-start justify-between">
-+                                                    <h2 className="text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
-                                                         {
-                                                             allProjectsList.find(
-                                                                 (p) =>
-@@ -345,9 +373,13 @@ export default function PortfolioAboveTheFold() {
-                                                     </h2>
-                                                     <button
-                                                         onClick={handleClose}
--                                                        className="text-sm text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200"
-+                                                        className="hidden lg:block p-2 -mr-2 rounded-full text-gray-400 hover:text-gray-900 hover:bg-gray-100 dark:hover:text-white dark:hover:bg-slate-800 transition-colors"
-+                                                        aria-label="Close project"
-                                                     >
--                                                        Close
-+                                                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-+                                                            <line x1="18" y1="6" x2="6" y2="18"></line>
-+                                                            <line x1="6" y1="6" x2="18" y2="18"></line>
-+                                                        </svg>
-                                                     </button>
-                                                 </div>
-                                             </CascadeItem>
-@@ -366,7 +398,7 @@ export default function PortfolioAboveTheFold() {
-                                                         ?.tags.map((t, i) => (
-                                                             <span
-                                                                 key={i}
--                                                                className="text-xs px-2 py-1 bg-gray-100 dark:bg-slate-700 rounded-md text-gray-700 dark:text-gray-300"
-+                                                                className="text-[11px] font-medium tracking-wide uppercase px-2.5 py-1 bg-white dark:bg-slate-800 border border-gray-200 dark:border-slate-700 rounded-full text-gray-600 dark:text-gray-400"
-                                                             >
-                                                                 {t}
-                                                             </span>
-@@ -380,13 +412,15 @@ export default function PortfolioAboveTheFold() {
-                                             >
-                                                 <div className="mt-4">
-                                                     {readmeLoading && (
--                                                        <div className="text-sm text-gray-500 dark:text-gray-400">
--                                                            Loading README...
-+                                                        <div className="flex flex-col gap-3 mt-8 opacity-50 animate-pulse w-full max-w-lg">
-+                                                            <div className="h-4 bg-gray-200 dark:bg-slate-800 rounded-full w-3/4"></div>
-+                                                            <div className="h-4 bg-gray-200 dark:bg-slate-800 rounded-full w-1/2"></div>
-+                                                            <div className="h-4 bg-gray-200 dark:bg-slate-800 rounded-full w-5/6"></div>
-                                                         </div>
-                                                     )}
-                                                     {readmeError &&
-                                                         !readmeLoading && (
--                                                            <p className="text-sm text-gray-700 dark:text-gray-300">
-+                                                            <p className="text-base text-gray-600 dark:text-gray-400 mt-6 leading-relaxed">
-                                                                 {
-                                                                     allProjectsList.find(
-                                                                         (p) =>
-@@ -398,7 +432,7 @@ export default function PortfolioAboveTheFold() {
-                                                         )}
-                                                     {readmeContent &&
-                                                         !readmeLoading && (
--                                                            <div className="prose prose-sm dark:prose-invert max-w-none text-gray-700 dark:text-gray-300">
-+                                                            <div className="prose prose-base md:prose-lg dark:prose-invert max-w-none text-gray-600 dark:text-gray-300 mt-8 prose-headings:font-semibold prose-a:text-blue-600 dark:prose-a:text-blue-400">
-                                                                 <Markdown
-                                                                     remarkPlugins={[
-                                                                         remarkGfm,
-@@ -468,7 +502,7 @@ export default function PortfolioAboveTheFold() {
-                                                         )}
-                                                     {!activeRepo &&
-                                                         !readmeLoading && (
--                                                            <p className="text-sm text-gray-700 dark:text-gray-300">
-+                                                            <p className="text-base text-gray-600 dark:text-gray-400 leading-relaxed mt-6">
-                                                                 {
-                                                                     allProjectsList.find(
-                                                                         (p) =>
-@@ -487,12 +521,13 @@ export default function PortfolioAboveTheFold() {
- 
-                             {/* Empty state view */}
-                             <FadeContainer
-+                                className="hidden lg:flex"
-                                 isVisible={
-                                     displayedProject === null &&
-                                     isContentVisible
-                                 }
-                             >
--                                <div className="text-center max-w-[44ch] flex flex-col items-center justify-center h-full">
-+                                <div className="text-center max-w-[44ch] flex flex-col items-center justify-center h-full p-6 md:p-10">
-                                     <CascadeItem
-                                         delay={0}
-                                         isVisible={
-@@ -500,8 +535,8 @@ export default function PortfolioAboveTheFold() {
-                                             isContentVisible
-                                         }
-                                     >
--                                        <h2 className="text-xl font-semibold text-gray-900 dark:text-white">
--                                            Selected work
-+                                        <h2 className="text-2xl font-semibold tracking-tight text-gray-900 dark:text-white">
-+                                            Selected Work
-                                         </h2>
-                                     </CascadeItem>
- 
-@@ -512,9 +547,9 @@ export default function PortfolioAboveTheFold() {
-                                             isContentVisible
-                                         }
-                                     >
--                                        <p className="mt-3 text-sm text-gray-600 dark:text-gray-400">
-+                                        <p className="mt-4 text-base text-gray-500 dark:text-gray-400 max-w-sm mx-auto">
-                                             Click a project on the left to open
--                                            a short preview.
-+                                            a quick preview and read more.
-                                         </p>
-                                     </CascadeItem>
- 
-@@ -531,29 +566,6 @@ export default function PortfolioAboveTheFold() {
-                             </FadeContainer>
-                         </div>
-                     </div>
--
--                    <div className="flex items-center justify-between gap-3">
--                        <div>
--                            <h4 className="text-xs text-gray-500 dark:text-gray-400 uppercase tracking-wide">
--                                Skills
--                            </h4>
--                            <div className="mt-2 flex flex-wrap gap-2">
--                                {skills.map((s, i) => (
--                                    <span
--                                        key={i}
--                                        className="text-xs px-2 py-1 border border-gray-200 dark:border-slate-600 rounded-md text-gray-700 dark:text-gray-300"
--                                    >
--                                        {s}
--                                    </span>
--                                ))}
--                            </div>
--                        </div>
--
--                        <div className="text-right text-xs text-gray-500 dark:text-gray-400">
--                            <div>Available for freelance & contract</div>
--                            <div className="mt-2">{profile.email}</div>
--                        </div>
--                    </div>
-                 </div>
- 
-                 <div className="pointer-events-none absolute bottom-6 right-6 text-[10px] text-gray-400 dark:text-gray-500">