From 1a2c43323b95c7f84b2a779695d19fe97ff8f0fa Mon Sep 17 00:00:00 2001
From: A Charlwood <andrew.charlwood@gmail.com>
Date: Tue, 10 Feb 2026 17:03:11 +0000
Subject: [PATCH] Task 10: Build Footer component with ECG decoration
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Created Footer.tsx with decorative ECG waveform SVG
- Footer uses Framer Motion for scroll-triggered entrance animation
- Centered layout with border-top, muted attribution text
- Integrated Footer into App.tsx content phase
- Three-phase orchestration (boot → ecg → content) already working
---
 .ralph/ralph-loop.state.json |  2 +-
 src/App.tsx                  |  2 ++
 src/components/Footer.tsx    | 36 ++++++++++++++++++++++++++++++++++++
 3 files changed, 39 insertions(+), 1 deletion(-)
 create mode 100644 src/components/Footer.tsx

diff --git a/.ralph/ralph-loop.state.json b/.ralph/ralph-loop.state.json
index 925cac0..761638e 100644
--- a/.ralph/ralph-loop.state.json
+++ b/.ralph/ralph-loop.state.json
@@ -1,6 +1,6 @@
 {
   "active": true,
-  "iteration": 8,
+  "iteration": 9,
   "minIterations": 1,
   "maxIterations": 0,
   "completionPromise": "COMPLETE",
diff --git a/src/App.tsx b/src/App.tsx
index 11b29d2..b8a4966 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -9,6 +9,7 @@ import { Experience } from './components/Experience'
 import { Education } from './components/Education'
 import { Projects } from './components/Projects'
 import { Contact } from './components/Contact'
+import { Footer } from './components/Footer'
 
 function App() {
   const [phase, setPhase] = useState<Phase>('boot')
@@ -39,6 +40,7 @@ function App() {
 
             <Contact />
           </main>
+          <Footer />
         </>
       )}
     </div>
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
new file mode 100644
index 0000000..d438ea6
--- /dev/null
+++ b/src/components/Footer.tsx
@@ -0,0 +1,36 @@
+import { motion } from 'framer-motion'
+
+const Footer: React.FC = () => {
+  return (
+    <motion.footer
+      initial={{ opacity: 0, y: 16 }}
+      whileInView={{ opacity: 1, y: 0 }}
+      viewport={{ once: true, margin: '-50px' }}
+      transition={{ duration: 0.5, ease: 'easeOut' }}
+      className="text-center pt-12 pb-8 border-t border-slate-200"
+    >
+      <svg
+        className="block mx-auto mb-3"
+        width="120"
+        height="20"
+        viewBox="0 0 120 20"
+        fill="none"
+      >
+        <path
+          d="M 0 10 L 35 10 L 40 10 C 42 10 43 7 45 7 C 47 7 48 10 50 10 L 54 10 L 56 13 L 60 2 L 64 15 L 66 10 L 70 10 C 72 10 73 7 75 7 C 77 7 78 10 80 10 L 120 10"
+          stroke="#00897B"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          opacity="0.3"
+          fill="none"
+        />
+      </svg>
+      <p className="font-secondary text-xs text-muted">
+        Andy Charlwood &mdash; MPharm, GPhC Registered Pharmacist
+      </p>
+    </motion.footer>
+  )
+}
+
+export { Footer }