feat: Initialize portfolio website with core sections, smooth scrolling, scroll reveal animations, and comprehensive SEO.

app/components/Section.tsx

@@ -1,4 +1,5 @@
 import type React from "react";
+import { Reveal } from "./Reveal";
 
 interface SectionProps {
   id?: string;
@@ -8,6 +9,7 @@ interface SectionProps {
   dark?: boolean;
   aside?: React.ReactNode;
   children: React.ReactNode;
+  disableChildrenAnimation?: boolean;
 }
 
 export const Section = ({
@@ -18,22 +20,31 @@ export const Section = ({
   dark,
   aside,
   children,
+  disableChildrenAnimation = false,
 }: SectionProps) => {
   const baseClass = dark ? "ds-section ds-section-dark" : "ds-section";
   return (
     <section id={id} className={baseClass}>
       <div className="ds-section-shell">
-        <div className="ds-section-header">
-          <div className="ds-section-meta">
-            {eyebrow && <p className="ds-eyebrow">{eyebrow}</p>}
-            <h2 className="ds-section-title">{title}</h2>
-            {description && (
-              <p className="ds-section-description">{description}</p>
-            )}
+        <Reveal y={40} duration={0.8}>
+          <div className="ds-section-header">
+            <div className="ds-section-meta">
+              {eyebrow && <p className="ds-eyebrow">{eyebrow}</p>}
+              <h2 className="ds-section-title">{title}</h2>
+              {description && (
+                <p className="ds-section-description">{description}</p>
+              )}
+            </div>
+            {aside && <aside>{aside}</aside>}
           </div>
-          {aside && <aside>{aside}</aside>}
-        </div>
-        <div>{children}</div>
+        </Reveal>
+        {!disableChildrenAnimation ? (
+          <Reveal y={60} duration={1} delay={0.2}>
+            <div>{children}</div>
+          </Reveal>
+        ) : (
+          <div>{children}</div>
+        )}
       </div>
     </section>
   );