feat: redesign site as a modern developer portfolio

- New home page: hero, stats, about, focus areas, stack, projects, contact
- Light/dark theme with system default and persisted toggle
- Content centralised in data/profile.js
- Restyle /rates to match; remove it from nav and projects
- Afriex: log a clear error now that its API requires a device id

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>

components/ProjectCard.js

@@ -0,0 +1,48 @@
+import Link from 'next/link';
+import Icon from './Icon';
+
+export default function ProjectCard({ project }) {
+  const { title, description, tags, href, repo, featured, internal } = project;
+  const primaryHref = href || repo;
+
+  return (
+    <article className={`project-card ${featured ? 'is-featured' : ''}`}>
+      <div className="project-top">
+        {featured ? (
+          <span className="pill pill-accent">
+            <span className="live-dot" /> Live
+          </span>
+        ) : (
+          <Icon name="github" size={20} className="project-glyph" />
+        )}
+        {repo && href && (
+          <a href={repo} target="_blank" rel="noopener noreferrer" className="project-repo" aria-label={`${title} source code`}>
+            <Icon name="github" size={16} />
+          </a>
+        )}
+      </div>
+
+      <h3 className="project-title">
+        {internal ? (
+          <Link href={primaryHref} className="project-link">
+            {title}
+          </Link>
+        ) : (
+          <a href={primaryHref} target="_blank" rel="noopener noreferrer" className="project-link">
+            {title}
+          </a>
+        )}
+        <Icon name="arrowUpRight" size={18} className="project-arrow" />
+      </h3>
+      <p className="project-description">{description}</p>
+
+      <ul className="tag-list">
+        {tags.map((tag) => (
+          <li key={tag} className="tag">
+            {tag}
+          </li>
+        ))}
+      </ul>
+    </article>
+  );
+}