first commit

2025-05-13 12:12:47 +02:00
commit c37cf55f67
75 changed files with 13258 additions and 0 deletions
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -0,0 +1,137 @@
+import { useState, useEffect } from 'react';
+import Link from 'next/link';
+import { VscArrowRight } from 'react-icons/vsc';
+
+import styles from '@/styles/HomePage.module.css';
+
+export default function HomePage() {
+  const [activeLineIndex, setActiveLineIndex] = useState(0);
+
+  const codeLines = [
+    { code: 'const HomePage = () => {', type: 'function' },
+    {
+      code: '  const [isLoaded, setIsLoaded] = useState(true);',
+      type: 'variable',
+    },
+    { code: '  const developerInfo = {', type: 'variable' },
+    { code: "    name: 'Ahmed Galadima',", type: 'array-item' },
+    { code: "    role: 'Senior QA Engineer & Consultant',", type: 'array-item' },
+    { code: "    bio: 'Dynamic Senior QA Engineer & Consultant with over 10+ years of expertise'", type: 'array-item' },
+    { code: '  };', type: 'array-end' },
+    { code: '', type: 'blank' },
+    { code: '  useEffect(() => {', type: 'nested-function' },
+    {
+      code: '    document.title = `${developerInfo.name} | Portfolio`;',
+      type: 'return',
+    },
+    { code: '    setIsLoaded(true);', type: 'function-call' },
+    { code: '  }, []);', type: 'close' },
+    { code: '', type: 'blank' },
+    { code: '  return (', type: 'return-object' },
+    { code: '    <main className="hero-container">', type: 'object-method' },
+    { code: '      <h1>{developerInfo.name}</h1>', type: 'object-method' },
+    { code: '      <p>{developerInfo.role}</p>', type: 'object-method' },
+    { code: '      <div className="cta">', type: 'object-method' },
+    {
+      code: '        <Link href="/projects">View Projects</Link>',
+      type: 'object-method',
+    },
+    { code: '      </div>', type: 'object-method' },
+    { code: '    </main>', type: 'object-method' },
+    { code: '  );', type: 'close' },
+    { code: '};', type: 'close-function' },
+    { code: '', type: 'blank' },
+    { code: 'export default HomePage;', type: 'function-call' },
+  ];
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setActiveLineIndex((prev) => (prev + 1) % codeLines.length);
+    }, 2000);
+
+    return () => clearInterval(interval);
+  }, [codeLines.length]);
+
+  return (
+    <div className={styles.heroLayout}>
+      <div className={styles.container}>
+        <div className={styles.codeSection}>
+          <div className={styles.codeContainer}>
+            <div className={styles.editorContent}>
+              <div className={styles.lineNumbers}>
+                {codeLines.map((_, index) => (
+                  <div
+                    key={index}
+                    className={`${styles.lineNumber} ${
+                      index === activeLineIndex ? styles.activeLine : ''
+                    }`}
+                  >
+                    {index + 1}
+                  </div>
+                ))}
+              </div>
+
+              <div className={styles.codeEditor}>
+                {codeLines.map((line, index) => (
+                  <div
+                    key={index}
+                    className={`${styles.codeLine} ${styles[line.type]} ${
+                      index === activeLineIndex ? styles.highlightedLine : ''
+                    }`}
+                  >
+                    {line.code}
+                  </div>
+                ))}
+              </div>
+
+              <div className={styles.overlayGlow}></div>
+            </div>
+          </div>
+        </div>
+
+        <div className={styles.infoSection}>
+          <h1 className={styles.developerName}>
+            Ahmed <span className={styles.accentText}>Galadima</span>
+          </h1>
+
+          <div className={styles.developerRole}>Senior QA Engineer & Consultant</div>
+
+          <p className={styles.bio}>
+          Dynamic Senior QA Engineer & Consultant with 10+ years of expertise in delivering 30% faster software releases and
+          40%+ cost savings for startups and enterprises. Specialize in transforming chaotic workflows into streamlined,
+          automation-driven processes that ensure client products exceed market standards.
+          </p>
+
+          <div className={styles.actionLinks}>
+            <Link href="/projects" className={styles.primaryLink}>
+              View Projects <VscArrowRight />
+            </Link>
+          </div>
+        </div>
+      </div>
+
+      <div className={styles.decorElements}>
+        <div className={styles.codeFlare}></div>
+        <div className={styles.gridLines}></div>
+        <div className={styles.codeBlock1}>{'{'}</div>
+        <div className={styles.codeBlock2}>{'}'}</div>
+        <div className={styles.codeBlock3}>{'<>'}</div>
+        <div className={styles.codeBlock4}>{'/>'}</div>
+        <div className={styles.orb1}></div>
+        <div className={styles.orb2}></div>
+        <div className={styles.orb3}></div>
+        <div className={styles.codeSymbol1}>{'()'}</div>
+        <div className={styles.codeSymbol2}>{'[]'}</div>
+        <div className={styles.codeSymbol3}>{'=>'}</div>
+        <div className={styles.dotPattern}></div>
+        <div className={styles.mobileAccent}></div>
+      </div>
+    </div>
+  );
+}
+
+export async function getStaticProps() {
+  return {
+    props: { title: 'Home' },
+  };
+}