MAINHACK

Viewing / Editing File: index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Apps by Rikon Rahman — studio.rikonrahman.com</title>
<style>
  * { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }
  body {
    background: #fafafa;
    color: #1d1d1f;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    line-height: 1.5;
  }
  .container { max-width: 1080px; margin: 0 auto; padding: 0 24px; }

header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(250,250,250,0.85);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid rgba(0,0,0,0.07);
  }
  .header-inner {
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .logo-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: inherit;
  }
  .logo {
    width: 36px;
    height: 36px;
    background: #111;
    color: #fff;
    border-radius: 9px;
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.3px;
  }
  .logo-text strong {
    display: block;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.1;
  }
  .logo-text span {
    display: block;
    font-size: 11.5px;
    color: #6e6e73;
    margin-top: 2px;
  }
  nav { display: flex; gap: 28px; }
  nav a {
    text-decoration: none;
    color: #1d1d1f;
    font-size: 14px;
    font-weight: 500;
    opacity: 0.8;
    transition: opacity .2s;
  }
  nav a:hover { opacity: 1; }

.hero {
    text-align: center;
    padding: 110px 24px 80px;
  }
  .hero h1 {
    font-size: clamp(42px, 7vw, 72px);
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 18px;
    line-height: 1.05;
  }
  .hero p {
    font-size: 19px;
    line-height: 1.65;
    color: #515154;
    max-width: 720px;
    margin: 0 auto 38px;
  }
  .cta-row {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
  }
  .btn-primary {
    background: #0071e3;
    color: white;
    border-radius: 999px;
    padding: 14px 28px;
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    display: inline-block;
    transition: transform .15s ease, background .15s ease;
  }
  .btn-primary:hover { background: #0077ed; transform: translateY(-1px); }
  .btn-secondary {
    background: white;
    border: 2px solid #0071e3;
    color: #0071e3;
    border-radius: 999px;
    padding: 14px 28px;
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    display: inline-block;
    transition: transform .15s ease, background .15s ease;
  }
  .btn-secondary:hover { background: #f5f9ff; transform: translateY(-1px); }

.section { padding: 20px 0 60px; }
  .section-header { text-align: center; margin-bottom: 44px; }
  .section-header h2 {
    font-size: 34px;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin-bottom: 8px;
  }
  .section-header p { color: #6e6e73; font-size: 16px; }

.grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
  .card {
    background: white;
    border-radius: 20px;
    padding: 26px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 4px 12px rgba(0,0,0,0.04);
    border: 1px solid rgba(0,0,0,0.06);
    display: flex;
    flex-direction: column;
    transition: transform .2s ease, box-shadow .2s ease;
  }
  .card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 24px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.05);
  }
  .card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
  }
  .icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    box-shadow: inset 0 1px 2px rgba(255,255,255,0.2);
  }
  .icon svg { width: 26px; height: 26px; color: white; }
  .status {
    font-size: 12px;
    font-weight: 500;
    padding: 6px 11px;
    border-radius: 999px;
    background: #f5f5f7;
    color: #424245;
    border: 1px solid #e8e8ed;
  }
  .card h3 {
    font-size: 21px;
    font-weight: 600;
    margin-bottom: 10px;
    letter-spacing: -0.01em;
  }
  .card-desc {
    font-size: 14.5px;
    line-height: 1.6;
    color: #515154;
    flex-grow: 1;
  }
  .card-footer {
    margin-top: 22px;
    padding-top: 16px;
    border-top: 1px solid #f0f0f2;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .coming-soon {
    font-size: 13px;
    color: #86868b;
    font-weight: 500;
  }

.about {
    margin-top: 80px;
    background: white;
    border-radius: 20px;
    padding: 48px;
    border: 1px solid rgba(0,0,0,0.06);
    box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 4px 12px rgba(0,0,0,0.04);
  }
  .about-grid {
    display: grid;
    grid-template-columns: 1.3fr 0.9fr;
    gap: 48px;
    align-items: start;
  }
  .about h2 {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 14px;
    letter-spacing: -0.01em;
  }
  .about p {
    font-size: 16px;
    line-height: 1.7;
    color: #515154;
    margin-bottom: 18px;
  }
  .about-link {
    color: #0071e3;
    text-decoration: none;
    font-weight: 500;
    font-size: 15px;
  }
  .about-link:hover { text-decoration: underline; }
  .stats {
    display: grid;
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 4px 0 0 24px;
    border-left: 1px solid #f0f0f2;
  }
  .stat-value {
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1;
  }
  .stat-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #86868b;
    font-weight: 600;
    margin-top: 6px;
  }

footer {
    margin-top: 80px;
    padding: 28px 0 50px;
    border-top: 1px solid #e5e5ea;
    color: #6e6e73;
    font-size: 13px;
  }
  .footer-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
  }
  .footer-links { display: flex; gap: 20px; }
  .footer-links a {
    color: #515154;
    text-decoration: none;
  }
  .footer-links a:hover { color: #0071e3; }

@media (max-width: 900px) {
    .grid { grid-template-columns: 1fr; }
    .about-grid { grid-template-columns: 1fr; gap: 32px; }
    .stats { border-left: none; padding-left: 0; grid-template-columns: repeat(3,1fr); border-top: 1px solid #f0f0f2; padding-top: 24px; }
  }
  @media (max-width: 640px) {
    .header-inner { height: 64px; }
    nav { gap: 18px; }
    .logo-text span { display: none; }
    .hero { padding: 80px 24px 60px; }
    .hero p { font-size: 17px; }
    .about { padding: 32px 24px; }
    .stats { grid-template-columns: 1fr; gap: 18px; }
    .footer-inner { flex-direction: column; align-items: flex-start; }
  }
</style>
</head>
<body>
  <header>
    <div class="container header-inner">
      <a href="#" class="logo-wrap" aria-label="Home">
        <div class="logo">RR</div>
        <div class="logo-text">
          <strong>Rikon Rahman</strong>
          <span>studio.rikonrahman.com</span>
        </div>
      </a>
      <nav>
        <a href="#experiments">Apps</a>
        <a href="#about">About</a>
        <a href="https://rikonrahman.com/" target="_blank" rel="noopener">Portfolio</a>
      </nav>
    </div>
  </header>

<main>
    <section class="hero container">
      <h1>Apps by Rikon Rahman</h1>
      <p>Product designer with over 10yrs experience, expert in design system, accessibility, ux, vibe coding, excited about new technology and innovation</p>
      <div class="cta-row">
        <a href="https://rikonrahman.com/" class="btn-primary">Visit portfolio</a>
        <a href="https://rikonrahman.com/case-study/" class="btn-secondary">Read case study</a>
      </div>
    </section>

<section id="experiments" class="section container">
      <div class="section-header">
        <h2>Current Experiments</h2>
        <p>A studio for shipping useful, human-centered tools</p>
      </div>

<div class="grid">
        
        <article class="card">
          <div class="card-top">
            <div class="icon" style="background: linear-gradient(135deg, #ff9f0a, #ff375f);">
              <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"/>
              </svg>
            </div>
            <span class="status">In Development</span>
          </div>
          <h3>PayQueue</h3>
          <p class="card-desc">a shopping list with the date when i want to buy including the link of the item to buy. on the day of buying it gives me notification to buy the item. it allows not to forget buying important things in the time when i have money in my account and buy less expensive things at the end of the month or any other time when i have more comfort</p>
          <div class="card-footer">
            <span class="coming-soon">Coming Soon</span>
            
          </div>
        </article>

<article class="card">
          <div class="card-top">
            <div class="icon" style="background: linear-gradient(135deg, #ff3b30, #ff2d55);">
              <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
              </svg>
            </div>
            <span class="status">Prototyping</span>
          </div>
          <h3>WakeForce</h3>
          <p class="card-desc">Not just an alarm clock, its a commitment. user can set only one alarm a day. when the alarm runs, user have to take a selfie with open eyes and walk 30 steps to shut alarm's sound.</p>
          <div class="card-footer">
            <span class="coming-soon">Coming Soon</span>
            
          </div>
        </article>

<article class="card">
          <div class="card-top">
            <div class="icon" style="background: linear-gradient(135deg, #30d158, #00c7be);">
              <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
              </svg>
            </div>
            <span class="status">Designing</span>
          </div>
          <h3>Budgeter</h3>
          <p class="card-desc">A personal monthly budget tracker where the user sets a planned amount for each spending category, enters actual amounts as they spend, marks categories as done, and sees at a glance whether they're over or under budget.</p>
          <div class="card-footer">
            <span class="coming-soon">Coming Soon</span>
            
          </div>
        </article>

<article class="card">
          <div class="card-top">
            <div class="icon" style="background: linear-gradient(135deg, #af52de, #5856d6);">
              <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
              </svg>
            </div>
            <span class="status">Concept</span>
          </div>
          <h3>Keep Receipt</h3>
          <p class="card-desc">allows users to quickly capture or upload receipts and store them in the app. Receipts can be organized into categories, making them easy to find later for personal record keeping, expense tracking, or tax submission purposes.</p>
          <div class="card-footer">
            <span class="coming-soon">Coming Soon</span>
            
          </div>
        </article>
      </div>

<div id="about" class="about">
        <div class="about-grid">
          <div>
            <h2>About Rikon</h2>
            <p>I'm a product designer focused on accessible, systematic design that scales. I've worked with top tier enterprises, with impact on over 100,000 users in healthcare and $350M in retail.</p>
            <a href="https://rikonrahman.com/" class="about-link" target="_blank" rel="noopener">View full portfolio →</a>
          </div>
          <div class="stats">
            <div class="stat">
              <div class="stat-value">10+ yrs</div>
              <div class="stat-label">EXPERIENCE</div>
            </div>
            <div class="stat">
              <div class="stat-value">100K+</div>
              <div class="stat-label">HEALTHCARE USERS</div>
            </div>
            <div class="stat">
              <div class="stat-value">$350M</div>
              <div class="stat-label">RETAIL IMPACT</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </main>

<footer>
    <div class="container footer-inner">
      <div>© 2026 studio.rikonrahman.com — Built by Rikon Rahman</div>
      <div class="footer-links">
        <a href="https://rikonrahman.com/" target="_blank" rel="noopener">Portfolio</a>
        <a href="https://rikonrahman.com/case-study/" target="_blank" rel="noopener">Case Studies</a>
      </div>
    </div>
  </footer>
<script>(function(){document.addEventListener("click",function(e){var a=e.target.closest("[data-product-id]");if(!a)return;e.preventDefault();var pid=a.getAttribute("data-product-id");if(pid)parent.postMessage({type:"ecto-artifact-link-click",productId:pid},"*")})})();</script>
</body>
</html>

Cancel / Back

[ MAINHACK ]

Viewing / Editing File: index.html

Server Info

System Features

User Info