Personal Website -- Rimah Harb
feature-designer: Personal Website for Rimah Harb
Agent: feature-designer
Domain: UX Design / Personal Branding
Date: 2026-04-16
Memory Search Results
- Searched:
.claude/memory/agent-learnings/feature-designer/-- no prior entries - Searched: project memory for Rimah profile, team contacts, personal context
- Found: Rimah profile data, PureBrain team structure, personal context (Dubai, Lebanese roots)
- Applying: Public research on Rimah's background, 2026 web design best practices, VC/executive website patterns
1. Site Map
rimahharb.com
|
|-- / (Home / Landing)
| Single-scroll page with anchored sections:
| |-- #hero -- Name, tagline, headshot
| |-- #about -- Bio and dual-role positioning
| |-- #roles -- Current roles (Pure Technology + MAKR)
| |-- #writing -- Articles and commentary
| |-- #speaking -- Speaking, media, podcast appearances
| |-- #contact -- Contact form / email / LinkedIn
|
|-- /articles/{slug} -- Individual article pages (optional, Phase 2)Rationale: A single-page structure with anchor navigation is the correct format for an executive personal site. It keeps the visitor focused, reduces bounce, and works well on mobile. Multi-page sites are for companies with product lines, not individuals with a personal brand. Article detail pages can be added later if Rimah publishes long-form content directly on the site rather than LinkedIn.
2. Wireframe Descriptions
2.1 Hero Section (#hero)
Layout: Full-viewport height. Left-aligned text block (60% width on desktop) with right-aligned professional headshot (40%). On mobile, headshot stacks above text.
Content:
- Name: "Rimah Harb" -- large, serif heading
- Tagline: One line, 8-12 words max. Examples:
- "Technology Strategy. AI Infrastructure. Venture Capital."
- "Building AI infrastructure across the GCC and beyond."
- Location indicator: "Dubai, UAE" -- small, understated
- Two subtle CTAs: "Read More" (scrolls to #about) and "Get in Touch" (scrolls to #contact)
Visual Notes:
- No background video or animation. Static, clean.
- Headshot should be professional, not casual. Dark suit or business attire. Neutral or architectural background. Not a selfie, not a conference candid.
- Subtle gradient or solid dark background behind text for contrast.
2.2 About Section (#about)
Layout: Centered text column, max-width 720px. Optional small secondary photo or none.
Content (approximately 150-200 words):
- Opening: Position Rimah at the intersection of technology operations and venture capital
- Middle: 15+ years in telecom and technology across GCC, EMEA, North America. Major carriers, mobile operators, enterprises.
- Closing: Current focus on AI infrastructure at national scale, GCC AI strategy, and backing founders building in AI/data
Tone: Third person. Institutional. Not startup casual. Think McKinsey partner bio, not Twitter bio.
Example framing (Rimah to finalize):
"Rimah Harb is a technology strategist and investor with over 15 years of experience across telecommunications, AI infrastructure, and venture capital. Based in Dubai with Lebanese roots, he operates at the intersection of technology operations and institutional investment, advising on AI deployment at national scale across the GCC and beyond."
2.3 Current Roles Section (#roles)
Layout: Two cards side by side on desktop, stacked on mobile. Each card has a thin top border accent line, role title, company name, and 2-3 sentences of description.
Card 1: Pure Technology
- Title: "Chief Strategy Officer"
- Company: "Pure Technology"
- Description: Technology strategy and partnerships. Enterprise and carrier-grade solutions. AI infrastructure deployment.
- Optional: Small company logo (if available and approved)
Card 2: MAKR Venture Fund
- Title: "Managing Partner"
- Company: "MAKR Venture Fund"
- Description: Early-stage venture capital. AI and data-driven companies. Jersey-domiciled global fund.
- CRITICAL: Do NOT include language that implies the fund is actively deployed or publicly launched. Use forward-looking or structural language:
- GOOD: "A Jersey-domiciled venture fund focused on early-stage AI and data-driven companies."
- BAD: "Investing in 20+ portfolio companies across..."
- BAD: "Our portfolio includes..."
Additional roles (optional, smaller treatment below the two cards):
- Advisor, Singularity Studio
- Any board seats Rimah wants to list
2.4 Writing Section (#writing)
Layout: Grid of 3-6 article cards (2 columns on desktop, 1 on mobile). Each card shows:
- Article title
- Source (e.g., "LinkedIn Article" or publication name)
- Date (month/year only)
- 1-2 sentence excerpt or topic tag
- Link (opens in new tab to LinkedIn or publication)
Content Strategy:
- Pull from Rimah's LinkedIn articles on AI at national scale, telecom-AI convergence, GCC AI strategy
- Topics to highlight: National AI strategy, telecom-AI convergence, GCC technology sovereignty, venture capital in AI
- If fewer than 3 articles exist, this section can start with 2-3 and grow
- "View All on LinkedIn" link at the bottom
Phase 2 Enhancement: If Rimah wants to publish long-form content on the site itself rather than LinkedIn, add /articles/{slug} routes with full article rendering.
2.5 Speaking and Media Section (#speaking)
Layout: Simple list or timeline format. Each entry shows:
- Event name / publication
- Topic or title
- Date (month/year)
- Link to recording, article, or event page (if available)
Content Types:
- Conference speaking engagements
- Podcast appearances
- Media interviews (e.g., the Onalytica interview)
- Panel discussions
If minimal content exists: This section can be combined into #writing as a "Writing & Media" section until there are enough entries to justify separation.
2.6 Contact Section (#contact)
Layout: Centered, minimal. Dark or contrasting background to visually separate from content above.
Content:
- Heading: "Get in Touch"
- Email: A professional email address (rimah@puretechnology.nyc or a dedicated personal domain email)
- LinkedIn: Icon + link to linkedin.com/in/rimahharb
- Optional: X/Twitter link if active
- NO contact form unless Rimah specifically wants one (forms on personal sites get spam; a direct email link is more executive)
What NOT to include:
- Phone number
- Physical office address
- Calendar booking link (too startup-founder)
3. Visual Design Specification
3.1 Color Palette
| Role | Color | Hex | Usage |
|---|---|---|---|
| Primary Background | Near-black | #0D0D0D | Hero section, contact section |
| Secondary Background | Off-white | #F5F3EF | About, roles, writing sections |
| Primary Text (dark bg) | Warm white | #EDEDED | Body text on dark backgrounds |
| Primary Text (light bg) | Dark charcoal | #1A1A1A | Body text on light backgrounds |
| Accent | Deep teal | #1A6B5C | Borders, hover states, links |
| Accent Secondary | Muted gold | #B8943E | Subtle highlights, card borders |
| Muted | Medium gray | #6B6B6B | Dates, secondary text, labels |
Rationale: The palette is institutional, not flashy. Near-black and off-white provide clean contrast. Deep teal reads as technology without being Silicon Valley blue. Muted gold adds warmth and a subtle GCC/Middle East resonance without being literal or cliche.
3.2 Typography
| Role | Font | Weight | Size (desktop) | Size (mobile) |
|---|---|---|---|---|
| Name / H1 | Freight Display Pro or Playfair Display | 700 | 56px | 36px |
| Section Headings / H2 | Inter | 600 | 32px | 24px |
| Subheadings / H3 | Inter | 500 | 20px | 18px |
| Body | Inter | 400 | 17px | 16px |
| Labels / Meta | Inter | 500 | 13px | 12px |
| Tagline | Inter | 300 | 22px | 18px |
Font pairing logic: A serif display font for the name only creates a sense of weight and legacy. Inter for everything else provides clean readability and a modern technology feel. This is the same pairing used by firms like Andreessen Horowitz and Lux Capital.
Fallback stack: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif for body; "Playfair Display", Georgia, serif for display.
3.3 Spacing System
Base unit: 8px
| Element | Spacing |
|---|---|
| Section padding (vertical) | 96px (desktop) / 64px (mobile) |
| Between heading and body text | 24px |
| Between content blocks | 48px |
| Card internal padding | 32px |
| Card gap (grid) | 24px |
| Max content width | 1120px |
| Body text max-width | 720px |
| Horizontal page margin | 80px (desktop) / 24px (mobile) |
3.4 Imagery Approach
Headshot:
- Professional studio photograph. Not AI-generated.
- Horizontal or square crop. Minimum 800x800px.
- Neutral background (gray, dark, or architectural). No branded backdrops.
- Business attire. Direct gaze preferred.
Section imagery:
- None. No stock photos. No abstract backgrounds. No geometric patterns.
- The design should feel like a well-typeset document, not a marketing page.
Icons:
- Minimal use. LinkedIn and email icons only, in the contact section.
- Use Lucide or Phosphor icon set. Outlined style, not filled.
- Size: 20px.
3.5 Interaction and Motion
- Scroll-triggered fade-in for sections: 200ms ease, 20px upward travel. Subtle, not dramatic.
- Hover on article cards: slight elevation (box-shadow increase) and accent border appearance.
- Hover on links: underline appears (not color change).
- No parallax. No scroll-jacking. No loading animations.
- Page should feel instant. No skeleton screens needed.
3.6 Responsive Breakpoints
| Breakpoint | Width | Layout Changes |
|---|---|---|
| Desktop | 1024px+ | Two-column hero, two-column role cards, two-column article grid |
| Tablet | 768px-1023px | Single-column hero, two-column role cards, two-column article grid |
| Mobile | <768px | Everything single-column, reduced padding, smaller type |
4. Content Outline
What Goes Where (and What Rimah Needs to Provide)
| Section | Content Needed | Who Provides | Status |
|---|---|---|---|
| Hero | Professional headshot | Rimah | NEEDED |
| Hero | Tagline (8-12 words) | Draft below, Rimah approves | DRAFT READY |
| About | Bio (150-200 words, 3rd person) | Draft below, Rimah approves | DRAFT READY |
| Roles - Pure Technology | 2-3 sentence description | Rimah reviews draft | DRAFT READY |
| Roles - MAKR | 2-3 sentence description (pre-launch safe) | Rimah reviews draft | DRAFT READY |
| Writing | 3-6 article links + titles + excerpts | Pull from LinkedIn | CAN BE AUTOMATED |
| Speaking | List of events, podcasts, media | Rimah provides | NEEDED |
| Contact | Email address for public use | Rimah decides | NEEDED |
| Contact | LinkedIn URL | Known: linkedin.com/in/rimahharb | READY |
| Meta | Domain name (rimahharb.com or similar) | Rimah registers | NEEDED |
| Meta | Favicon (initials "RH" in accent color) | Can be generated | READY |
Draft Content
Tagline options (Rimah to choose or modify):
- "Technology Strategy. AI Infrastructure. Venture Capital."
- "At the intersection of AI infrastructure and venture capital."
- "Building the infrastructure layer for AI across the GCC."
Bio draft:
Rimah Harb is a technology strategist and investor operating at the intersection of AI infrastructure and venture capital. With over 15 years of experience spanning telecommunications, enterprise technology, and strategic partnerships across the GCC, EMEA, and North America, he brings an operator's perspective to both building and funding technology companies.
As Chief Strategy Officer at Pure Technology, Rimah leads corporate strategy, technology partnerships, and market expansion for carrier-grade and enterprise solutions. As Managing Partner of MAKR Venture Fund, a Jersey-domiciled global fund, he focuses on early-stage companies building in artificial intelligence and data infrastructure.
His areas of focus include national-scale AI strategy, telecom-AI convergence, GCC technology sovereignty, and the infrastructure layer that enables AI deployment at scale. He is based in Dubai.
Pure Technology role description draft:
Leading corporate strategy, technology partnerships, and go-to-market expansion. Pure Technology delivers infrastructure and managed services to carriers, mobile operators, and enterprises across the GCC and North America.
MAKR role description draft:
A Jersey-domiciled venture fund focused on early-stage artificial intelligence and data-driven companies. The fund targets founders building foundational AI infrastructure, applied AI solutions, and data platforms with global scale potential.
5. Technical Recommendation
5.1 Recommended Stack
| Layer | Choice | Rationale |
|---|---|---|
| Framework | Astro | Static-first, ships zero JS by default, excellent performance. Ideal for content sites. |
| Styling | Tailwind CSS | Utility-first, fast iteration, excellent responsive support. |
| Hosting | Vercel or Netlify | Free tier covers this use case. Global CDN. Automatic HTTPS. Instant deploys from Git. |
| Domain | rimahharb.com (or rimah.vc) | Register via Namecheap or Cloudflare Registrar. |
| CMS (optional) | None initially; Notion or Contentful later | For Phase 1, articles are just links to LinkedIn. If Rimah later wants to publish on-site, add a headless CMS. |
| Analytics | Plausible or Fathom | Privacy-respecting, no cookie banner needed. Lightweight. |
| Forwarder only (e.g., contact@rimahharb.com -> personal email) | No need for full mailbox. Cloudflare email routing is free. |
5.2 Alternative: Simpler Path
If the Astro + Tailwind approach is more than Rimah wants to maintain:
| Layer | Choice | Rationale |
|---|---|---|
| Platform | Carrd.co (Pro plan, $49/year) | Single-page builder, custom domain, SSL, responsive. No code needed. |
| Domain | Same | Same |
| Analytics | Built-in | Carrd Pro includes basic analytics |
Trade-offs: Carrd is faster to launch (hours vs days) but offers less control over typography, spacing, and micro-interactions. For an executive site where polish matters, the custom Astro build is recommended.
5.3 Performance Targets
| Metric | Target |
|---|---|
| Lighthouse Performance | 95+ |
| Largest Contentful Paint | <1.5s |
| First Input Delay | <50ms |
| Cumulative Layout Shift | <0.05 |
| Total page weight | <500KB (including headshot) |
| Time to Interactive | <2s |
5.4 SEO Essentials
<title>: "Rimah Harb -- Technology Strategy, AI Infrastructure, Venture Capital"<meta description>: The tagline + first sentence of bio- Open Graph tags: Title, description, headshot image (for LinkedIn/Twitter share previews)
- Structured data: Person schema (schema.org/Person) with name, jobTitle, worksFor
- Canonical URL set
- robots.txt allowing all crawlers
- sitemap.xml (even for single page, for article pages in Phase 2)
6. Implementation Phases
Phase 1: Launch (Priority -- do first)
- Single-page site with all sections described above
- Professional headshot obtained and optimized
- Domain registered and DNS configured
- 3+ LinkedIn article links populated
- Deployed to Vercel/Netlify
- Analytics installed
- Open Graph tags verified (test with LinkedIn post inspector)
Phase 2: Content Expansion (After 8-10 LinkedIn articles exist)
- Add /articles/{slug} routes for on-site long-form content
- Add headless CMS (Notion API or Contentful) for article management
- RSS feed for articles
- Newsletter signup (optional, only if Rimah wants to build a mailing list)
Phase 3: Media Enhancement (As speaking/media portfolio grows)
- Expand speaking section with embedded video clips
- Add press/media logos if relevant (e.g., publications that featured Rimah)
- Testimonials or endorsements (only from institutional peers, not startup founders)
7. Acceptance Criteria
- [ ] Site loads in under 2 seconds on mobile 4G connection
- [ ] All sections render correctly on iPhone SE through 27" desktop
- [ ] Headshot is high-quality, professional, properly compressed
- [ ] MAKR description contains no language implying active fund deployment
- [ ] Contact section uses approved email address
- [ ] Open Graph preview renders correctly when URL is shared on LinkedIn
- [ ] Lighthouse score 95+ on Performance, Accessibility, Best Practices, SEO
- [ ] No stock photography or AI-generated imagery anywhere on the site
- [ ] Typography hierarchy is consistent across all sections
- [ ] Dark/light section alternation creates clear visual rhythm
- [ ] All external links open in new tab
- [ ] Favicon displays correctly (browser tab, bookmarks)
- [ ] WCAG 2.1 AA compliance for color contrast and interactive elements
8. Accessibility Requirements
- Color contrast ratio minimum 4.5:1 for body text, 3:1 for large text
- All images have descriptive alt text
- Navigation is fully keyboard-accessible (Tab, Enter, Escape)
- Focus states are visible on all interactive elements
- Semantic HTML: proper heading hierarchy (h1 > h2 > h3), landmark regions (nav, main, footer)
- Reduced motion media query respected (disable scroll animations for users who prefer reduced motion)
- Language attribute set on html element (
lang="en")
9. What NOT to Include
These are intentional omissions, not oversights:
- Blog section with CMS -- Not Phase 1. LinkedIn is the current publishing platform.
- Newsletter signup -- Not until there is a content cadence to sustain it.
- Chat widget or AI chatbot -- Wrong tone for an executive site.
- Testimonials -- Not until there are institutional-caliber endorsements.
- Portfolio/case studies -- This is a personal site, not a consultancy site.
- Social media feed embed -- Looks cluttered and breaks design consistency.
- Calendar booking link -- Too startup. Contact via email.
- "Download my resume" button -- Not appropriate for this level of seniority.
- Animated hero background -- Distracting, slow, unnecessary.
- Dark mode toggle -- Ship one mode, make it good. The alternating dark/light sections provide visual variety.
10. Research Evidence
Design decisions in this spec are informed by:
- 2026 web design best practices: Mobile-first design, performance as baseline, minimal JavaScript, typography-led layouts. Source: industry surveys from 5k.co, Lovable, CodeVix.
- VC/executive website patterns: Clean navigation, authority-first positioning, credibility signals (roles, writing, media). Single-page layouts common for individuals vs. multi-page for firms. Source: analysis of 40+ VC firm websites via ThoughtMedia, Thomas Digital, Mediaboom.
- WCAG 2.1 AA compliance: DOJ final rule (April 2026) establishes WCAG 2.1 Level AA as the technical standard. Building to this standard from the start avoids retrofit costs.
- Rimah's public profile research: LinkedIn articles focus on national-scale AI, telecom-AI convergence, GCC technology strategy. Interview with Onalytica confirms technology background, AI advocacy, and institutional tone. Site design reflects these themes.
End of specification.