OpenSpec: Portfolio Enhancement - “Hire Me” Page

Status: 🟡 Proposed
Priority: 🔴 Critical
Parent: 001-job-search-campaign.md
Created: 2025-12-24
Deliverable: /hire-me landing page for recruiters

📋 Objective

Create a dedicated “Hire Me” landing page that serves as the primary conversion point for recruiters and hiring managers. This page should:

✅ Clearly communicate availability and value proposition
✅ Make it easy to contact and schedule calls
✅ Provide downloadable resumes and portfolio links
✅ Build trust through testimonials and achievements
✅ Capture leads through contact form

🎯 Page Structure

URL

https://oyi77.github.io/hire-me

Meta Tags (SEO)

<title>Hire Fikri Izzuddin - Senior Software Engineer Available for Remote Work</title>
<meta name="description" content="Senior Software Engineer with 7+ years experience in FinTech, blockchain, and algorithmic trading. Available for remote positions. Led teams to 3,000+, achieved 90%+ trading win rates, $100K profit.">
<meta name="keywords" content="hire software engineer, remote developer, FinTech engineer, blockchain developer, senior backend engineer, engineering manager, available for hire">

📐 Page Sections

1. Hero Section

Layout: Full-width, centered, eye-catching

Content:

🚀 AVAILABLE FOR REMOTE WORK

Muchammad Fikri Izzuddin
Senior Software Engineer | FinTech & Blockchain Expert

7+ Years Experience | Led Teams to 3,000+ | 90%+ Trading Win Rate | $100K Profit Generated

[Schedule a Call] [Download Resume] [View Portfolio]

Design:

Large, bold headline
Gradient background (matching portal.css theme)
Animated entrance (fade in + slide up)
Three prominent CTAs (buttons)

Technical:

<section class="hero-section">
  <div class="hero-badge">🚀 AVAILABLE FOR REMOTE WORK</div>
  <h1 class="hero-title">Muchammad Fikri Izzuddin</h1>
  <p class="hero-subtitle">Senior Software Engineer | FinTech & Blockchain Expert</p>
  <div class="hero-metrics">
    <span class="metric">7+ Years Experience</span>
    <span class="metric">Led Teams to 3,000+</span>
    <span class="metric">90%+ Trading Win Rate</span>
    <span class="metric">$100K Profit Generated</span>
  </div>
  <div class="hero-cta">
    <a href="#contact" class="btn btn-primary">Schedule a Call</a>
    <a href="/assets/resumes/resume-package.zip" class="btn btn-secondary" download>Download Resume</a>
    <a href="/terminal" class="btn btn-tertiary">View Portfolio</a>
  </div>
</section>

2. Why Hire Me Section

Layout: 2-column grid (desktop), stacked (mobile)

Content:

Column 1: Proven Track Record

✅ $100K Profit Generated
   Fomo Watcher token prediction campaign at Bitwyre

✅ 90%+ Win Rate Achieved
   AiTradePulse algorithmic trading platform

✅ 40% Cost Reduction
   Infrastructure optimization at GarudaMedia

✅ 5B+ IDR Monthly Revenue
   Managed operations at BerkahKarya (~$330K USD)

✅ 3,000+ Team Members Led
   Technical infrastructure at GarudaMedia

✅ Indonesia's First Legal Crypto Mining
   Pioneered as CTO at Solomon Mining

Column 2: Remote-Ready

🌍 Timezone Flexible
   UTC+7 (overlaps Asia-Pacific, can work US/EU hours)

💬 Async Communication Expert
   Experienced with distributed teams, Slack, Notion, Jira

🏠 Fully Equipped Home Office
   High-speed internet, professional setup, quiet workspace

📹 Video Call Ready
   Zoom, Google Meet, Microsoft Teams proficient

⏰ Reliable & Self-Motivated
   Proven track record of remote work and delivery

🔒 Security Conscious
   VPN, 2FA, secure development practices

Design:

Card-based layout
Icons for each point
Hover effects (subtle scale/shadow)
Alternating colors for visual interest

3. Availability & Logistics Section

Layout: Clean, scannable table/list

Content:

📅 AVAILABILITY

Notice Period:        Immediate to 1 month (negotiable)
Preferred Start Date: Flexible, as early as February 2025
Work Hours:           Flexible (UTC-8 to UTC+8 coverage)
Contract Type:        Full-time, Contract, or Part-time
Location:             Surabaya, Indonesia (Remote-only)
Visa Status:          Remote work (no sponsorship needed)
Travel:               Available for occasional team meetups

Design:

Two-column layout (label: value)
Clean typography
Subtle background color
Icons for each row

4. Compensation Expectations Section

Layout: Transparent, professional

Content:

💰 COMPENSATION EXPECTATIONS

Salary Range:         $60,000 - $120,000 USD/year
                      (Based on role, company stage, and equity)

Open to:
  • Base salary + equity (preferred for startups)
  • Performance bonuses
  • Stock options/RSUs
  • Comprehensive benefits (health, learning budget)
  • Flexible PTO

Negotiable based on:
  • Role complexity and scope
  • Company growth stage
  • Equity opportunity
  • Learning and growth potential
  • Team and culture fit

Note: Rates reflect global remote market standards.
      Indonesian local rates are significantly lower.

Design:

Professional, not apologetic
Clear ranges
Emphasis on flexibility and value
Subtle note about market context

5. Skills & Expertise Section

Layout: Tag cloud or categorized grid

Content:

🛠️ TECHNICAL EXPERTISE

Languages:
  Python • JavaScript/TypeScript • PHP • C++ • Java • Bash • PowerShell

Frontend:
  React • Next.js • HTML5 • CSS3 • Flutter • Responsive Design

Backend:
  Node.js • Django • Laravel • Express.js • REST APIs • GraphQL • WebSocket

Databases:
  PostgreSQL • MongoDB • Redis • MySQL • TimescaleDB • Oracle

Infrastructure:
  Docker • Kubernetes • AWS • GCP • Terraform • CI/CD • Nginx

Blockchain:
  Smart Contracts • Web3 • Solidity • DEX • DeFi • Ethereum • BSC • Solana

AI/ML:
  TensorFlow • PyTorch • NumPy • Pandas • Scikit-learn • ML Ops

Trading:
  Algorithmic Trading • Quantitative Analysis • Risk Management • Backtesting

Leadership:
  Team Management • Agile/Scrum • Mentorship • Technical Strategy • Hiring

Design:

Interactive tags (filter by category)
Color-coded by category
Hover effects
Search/filter functionality

6. What I’m Looking For Section

Layout: Bullet list with icons

Content:

🎯 IDEAL OPPORTUNITY

I'm seeking a role where I can:

✨ Solve Complex Problems
   Challenging technical problems in FinTech, blockchain, or high-scale systems

🚀 Make Impact
   Contribute to products that matter, with measurable business outcomes

📈 Grow & Learn
   Work with talented engineers, learn new technologies, expand expertise

🌍 Work Remotely
   Fully remote or remote-first company culture

💡 Own & Innovate
   End-to-end ownership, autonomy to make technical decisions

🤝 Collaborate
   Supportive team, strong engineering culture, open communication

📊 See Results
   Data-driven environment, clear metrics, visible impact

🎓 Continuous Learning
   Learning budget, conference attendance, skill development

Design:

Clean list with emoji icons
Expandable details (optional)
Subtle animations on scroll

7. Testimonials Section (Optional)

Layout: Carousel or grid

Content:

💬 WHAT PEOPLE SAY

[If available, add quotes from:]
- Previous managers
- Colleagues
- LinkedIn recommendations
- GitHub collaborators

Example:
"Fikri is an exceptional engineer with deep expertise in blockchain and trading systems. His ability to architect scalable solutions while leading teams is remarkable."
— [Name], [Title] at [Company]

Design:

Card-based testimonials
Profile photos (if available)
Company logos
Rotating carousel

8. Contact Form Section

Layout: Simple, clean form

Content:

📧 GET IN TOUCH

I'm always open to discussing new opportunities, interesting projects, or just connecting with fellow engineers.

[Contact Form]
  Name:        [____________]
  Email:       [____________]
  Company:     [____________]
  Role:        [____________]
  Message:     [____________]
               [____________]
               [____________]

  [Send Message]

Or reach me directly:
📧 Email: mbahkoe.pendekar@gmail.com
💼 LinkedIn: linkedin.com/in/fikriizzuddin
🐙 GitHub: github.com/oyi77

Technical Implementation:

// Form submission handler
async function handleContactForm(event) {
  event.preventDefault();
  
  const formData = {
    name: document.getElementById('contact-name').value,
    email: document.getElementById('contact-email').value,
    company: document.getElementById('contact-company').value,
    role: document.getElementById('contact-role').value,
    message: document.getElementById('contact-message').value,
    timestamp: new Date().toISOString()
  };
  
  // Option 1: Use Formspree (free tier)
  const response = await fetch('https://formspree.io/f/YOUR_FORM_ID', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(formData)
  });
  
  // Option 2: Use EmailJS (free tier)
  // emailjs.send('service_id', 'template_id', formData);
  
  // Option 3: Use Netlify Forms (if hosted on Netlify)
  // Just add data-netlify="true" to form
  
  if (response.ok) {
    showSuccessMessage();
    sendAutoResponse(formData.email);
  }
}

function sendAutoResponse(email) {
  // Send auto-response with resume and portfolio links
  const autoResponseData = {
    to: email,
    subject: 'Thanks for reaching out!',
    body: `
      Hi there,
      
      Thanks for your interest! I'll get back to you within 24 hours.
      
      In the meantime, here are some resources:
      - Portfolio: https://oyi77.github.io
      - Resume: https://oyi77.github.io/assets/resumes/resume-package.zip
      - LinkedIn: https://linkedin.com/in/fikriizzuddin
      - GitHub: https://github.com/oyi77
      
      Best regards,
      Fikri Izzuddin
    `
  };
  
  // Send via email service
}

Design:

Clean, minimal form
Validation (client-side + server-side)
Success/error messages
Loading state during submission
Auto-response confirmation

9. Quick Links Section

Layout: Icon grid

Content:

🔗 QUICK LINKS

[📄 Download Resume]     [💼 LinkedIn Profile]
[🐙 GitHub Profile]      [🖥️ Terminal Portfolio]
[🎨 Graphical CV]        [📅 Schedule Call]
[📧 Email Me]            [🌐 Personal Website]

Design:

Large, clickable icons
Hover effects
Grid layout (4 columns desktop, 2 mobile)

Layout: Simple, clean

Content:

Built with ❤️ by Muchammad Fikri Izzuddin
© 2025 | Available for Remote Work

[GitHub] [LinkedIn] [Email]

🎨 Design System

Colors (Match portal.css)

:root {
  --primary: #00ff00;        /* Matrix green */
  --secondary: #0a0a0a;      /* Dark background */
  --accent: #00ffff;         /* Cyan accent */
  --text-primary: #e0e0e0;   /* Light gray text */
  --text-secondary: #a0a0a0; /* Muted gray */
  --card-bg: rgba(20, 20, 20, 0.8);
  --border: rgba(0, 255, 0, 0.2);
}

Typography

/* Headers */
h1 { font-size: 3rem; font-weight: 700; }
h2 { font-size: 2rem; font-weight: 600; }
h3 { font-size: 1.5rem; font-weight: 600; }

/* Body */
body { font-family: 'Inter', sans-serif; font-size: 1rem; line-height: 1.6; }

/* Code/Terminal */
code, .terminal { font-family: 'JetBrains Mono', monospace; }

Spacing

/* Consistent spacing scale */
--space-xs: 0.5rem;
--space-sm: 1rem;
--space-md: 2rem;
--space-lg: 4rem;
--space-xl: 6rem;

Components

/* Buttons */
.btn {
  padding: 1rem 2rem;
  border-radius: 0.5rem;
  font-weight: 600;
  transition: all 0.3s ease;
  cursor: pointer;
}

.btn-primary {
  background: var(--primary);
  color: var(--secondary);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(0, 255, 0, 0.3);
}

/* Cards */
.card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 1rem;
  padding: 2rem;
  backdrop-filter: blur(10px);
}

.card:hover {
  border-color: var(--primary);
  transform: translateY(-5px);
  transition: all 0.3s ease;
}

📱 Responsive Design

Breakpoints

/* Mobile First */
@media (min-width: 640px) { /* Tablet */ }
@media (min-width: 1024px) { /* Desktop */ }
@media (min-width: 1280px) { /* Large Desktop */ }

Mobile Optimizations

Stack columns vertically
Larger touch targets (min 44px)
Simplified navigation
Optimized images
Reduced animations

⚡ Performance

Optimization Checklist

Target Metrics

First Contentful Paint: < 1.5s
Time to Interactive: < 3s
Lighthouse Score: > 90

🔧 Technical Implementation

File Structure

hire-me/
├── index.html              # Main page
├── hire-me.css            # Styles
├── hire-me.js             # Interactivity
└── assets/
    ├── images/
    │   └── profile.jpg
    └── resumes/
        ├── resume-backend-engineer.pdf
        ├── resume-engineering-manager.pdf
        ├── resume-fullstack-engineer.pdf
        └── resume-package.zip

Integration Points

Contact Form: Formspree or EmailJS
Scheduling: Calendly embed (optional)
Analytics: Google Analytics event tracking
Email: Auto-response via email service

✅ Acceptance Criteria

🚀 Next Steps

Create HTML structure - Build page skeleton
Style with CSS - Match portal.css design system
Add interactivity - Form handling, animations
Integrate contact form - Set up Formspree/EmailJS
Add resumes - Upload all resume versions
Test responsiveness - Mobile, tablet, desktop
Optimize performance - Images, caching, minification
Deploy - Push to GitHub Pages
Link from homepage - Add prominent CTA
Share on LinkedIn - Announce availability

Ready to build this page? Let’s create an amazing “Hire Me” landing page! 🎯

OpenSpec: Portfolio Enhancement - “Hire Me” Page

📋 Objective

🎯 Page Structure

URL

Meta Tags (SEO)

📐 Page Sections

1. Hero Section

2. Why Hire Me Section

3. Availability & Logistics Section

4. Compensation Expectations Section

5. Skills & Expertise Section

6. What I’m Looking For Section

7. Testimonials Section (Optional)

8. Contact Form Section

9. Quick Links Section

10. Footer

🎨 Design System

Colors (Match portal.css)

Typography

Spacing

Components

📱 Responsive Design

Breakpoints

Mobile Optimizations

⚡ Performance

Optimization Checklist

Target Metrics

🔧 Technical Implementation

File Structure

Integration Points

✅ Acceptance Criteria

🚀 Next Steps