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/RateCard.js

@@ -1,30 +1,27 @@
+import Icon from './Icon';
+
 export default function RateCard({ provider, rate, href, isBest, index, formatCurrency, logo }) {
   return (
     <a
       href={href}
       target="_blank"
       rel="noopener noreferrer"
-      className={`rate-card ${isBest ? 'best' : ''}`}
-      style={{ animationDelay: `${index * 0.1}s` }}
+      className={`rate-card ${isBest ? 'is-best' : ''}`}
+      style={{ animationDelay: `${index * 60}ms` }}
     >
       <div className="rate-card-header">
         <div className="provider-info">
-          {logo && (
-            <img
-              src={logo}
-              alt={`${provider} logo`}
-              className="provider-logo"
-            />
-          )}
+          {logo && <img src={logo} alt="" className="provider-logo" />}
           <h3 className="provider-name">{provider}</h3>
         </div>
-        {isBest && <span className="best-badge">Best Rate</span>}
+        {isBest && <span className="pill pill-accent">Best rate</span>}
       </div>
 
       <div className="rate-value">{formatCurrency(rate)}</div>
 
       <div className="rate-card-footer">
-        <span className="visit-link">Visit provider →</span>
+        <span>Visit provider</span>
+        <Icon name="arrowUpRight" size={16} className="rate-arrow" />
       </div>
     </a>
   );