Plan: Contact Page + Site-Wide OG Tags

Part 1: Contact Page

1.1 Homepage Addition

Add a new link to index.html:

<div class="link-item">
  <span class="link-description"><a href="/contact">contact</a> - get in touch</span>
</div>

1.2 Contact Page Design (`contact.html`)

Style: Matches existing pages (socials, crypto) - minimalist, dark theme, lowercase aesthetic

Content Structure:

← back

contact

get in touch

For inquiries about building something together, integrations, 
or professional opportunities, email is the best way to reach me.

[Email Section]
jh@jeremyhi.us
- Clickable mailto link
- Copy button for convenience

[Social]
You can also find me on X: @ruhroh (hyperlinked)

[Note]
I try to respond within a few days. For urgent matters, 
DM me on X.

Key Elements:

mailto: link for email
Copy-to-clipboard button (matches crypto page pattern)
X profile link
Clean, minimal layout matching site style

1.3 Contact Page Technical Specs

Layout: home
Permalink: /contact/
Title: “Contact - Jeremy”

Part 2: Site-Wide OG Tags

2.1 Pages Needing OG Tags

Page	Title	Description	Image
index.html	Jeremy Hi	Developer building complex systems and MVPs. Working at Gemini on KYC/onboarding, managing Propheseer for prediction markets.	og/home.png
contact.html	Contact - Jeremy	Get in touch for collaborations, integrations, or professional opportunities.	og/contact.png
socials.html	Socials - Jeremy	Follow Jeremy on X (@ruhroh) and other platforms.	og/socials.png
crypto.html	Crypto - Jeremy	Crypto addresses for tips and donations - ETH, BTC, SOL.	og/crypto.png
work.html	Work - Jeremy	Portfolio of projects including Gemini, Propheseer, and more.	og/work.png

2.2 Update Home Layout (`_layouts/home.html`)

Add OG meta tags support:

<head>
  ...
  <!-- Open Graph -->
  <meta property="og:title" content="Plan: Contact Page + Site-Wide OG Tags">
  <meta property="og:description" content="Personal website of jeremy (@ruhroh)">
  <meta property="og:url" content="https://jeremyhi.us/CONTACT-AND-OG-PLAN.html">
  <meta property="og:type" content="website">
  <meta property="og:site_name" content="Jeremy Hi">
  <meta property="og:locale" content="en_US">
  
  
  <!-- Twitter Card -->
  <meta name="twitter:card" content="summary">
  <meta name="twitter:title" content="Plan: Contact Page + Site-Wide OG Tags">
  <meta name="twitter:description" content="Personal website of jeremy (@ruhroh)">
  
</head>

2.3 OG Image Design

Style (matching existing work section images):

Dark gradient background (#0d0d0d to #1a1a1a)
Subtle blue grid overlay
Monospace title
Description text in gray
Blue accent dot
“jeremyhi.us” domain footer
1200x630px, PNG, <100KB

Images to Generate:

home.png - “jeremy hi” + tagline about building things
contact.png - “contact” + reach out message
socials.png - “socials” + follow me message
crypto.png - “crypto” + addresses for tips
work.png - “work” + portfolio message

Part 3: Implementation Steps

Phase 1: Layout Update

Update _layouts/home.html with OG tag support

Phase 2: Contact Page

Create contact.html with content and frontmatter
Add contact link to index.html

Phase 3: OG Tags for All Pages

Add og_title, og_description, og_image frontmatter to:
- index.html
- contact.html
- socials.html
- crypto.html
- work.html

Phase 4: OG Images

Generate 5 OG images using existing script pattern
Place in /assets/og/

Phase 5: Testing

Deploy to feature branch
Test with Facebook/Twitter validators
Verify contact page functionality
Merge to main

File Changes Summary

File	Action
`_layouts/home.html`	Add OG meta tags
`index.html`	Add contact link + OG frontmatter
`contact.html`	CREATE - new contact page
`socials.html`	Add OG frontmatter
`crypto.html`	Add OG frontmatter
`work.html`	Add OG frontmatter
`assets/og/home.png`	CREATE - OG image
`assets/og/contact.png`	CREATE - OG image
`assets/og/socials.png`	CREATE - OG image
`assets/og/crypto.png`	CREATE - OG image
`assets/og/work.png`	CREATE - OG image
`scripts/generate-og-image.js`	UPDATE - add new pages

Contact Page Copy (Final)

contact

the best way to reach me

For building something together, integrations, consulting,
or professional opportunities - email works best.

📧 jh@jeremyhi.us

You can also find me on X where I'm fairly active:
→ @ruhroh

I typically respond within a few days.