index.html

<style>
  .site { max-width: 720px; margin: 0 auto; padding: 2rem 1.5rem; font-family: var(--font-sans); }
  .nav { display: flex; gap: 1.5rem; margin-bottom: 2.5rem; border-bottom: 0.5px solid var(--color-border-tertiary); padding-bottom: 1rem; }
  .nav a { font-size: 14px; color: var(--color-text-secondary); text-decoration: none; }
  .nav a.active { color: var(--color-text-primary); font-weight: 500; }
  .header { display: flex; gap: 1.5rem; align-items: flex-start; margin-bottom: 2.5rem; }
  .avatar { width: 80px; height: 80px; border-radius: 50%; background: var(--color-background-info); display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 500; color: var(--color-text-info); flex-shrink: 0; }
  .header-text h1 { font-size: 22px; font-weight: 500; margin: 0 0 4px; color: var(--color-text-primary); }
  .header-text p { font-size: 14px; color: var(--color-text-secondary); margin: 0 0 8px; }
  .tags { display: flex; gap: 6px; flex-wrap: wrap; }
  .tag { font-size: 12px; background: var(--color-background-secondary); color: var(--color-text-secondary); padding: 3px 10px; border-radius: 99px; border: 0.5px solid var(--color-border-tertiary); }
  .section { margin-bottom: 2rem; }
  .section h2 { font-size: 13px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-tertiary); margin: 0 0 1rem; }
  .bio { font-size: 15px; color: var(--color-text-secondary); line-height: 1.7; margin: 0; }
  .pub { padding: 1rem 1.25rem; background: var(--color-background-primary); border: 0.5px solid var(--color-border-tertiary); border-radius: var(--border-radius-lg); margin-bottom: 10px; }
  .pub-title { font-size: 15px; font-weight: 500; color: var(--color-text-primary); margin: 0 0 4px; }
  .pub-authors { font-size: 13px; color: var(--color-text-secondary); margin: 0 0 6px; }
  .pub-venue { font-size: 12px; color: var(--color-text-tertiary); margin: 0 0 8px; }
  .pub-links { display: flex; gap: 8px; }
  .pub-link { font-size: 12px; color: var(--color-text-info); text-decoration: none; border: 0.5px solid var(--color-border-tertiary); padding: 2px 10px; border-radius: 99px; }
  .interest-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; }
  .interest-card { background: var(--color-background-secondary); border: 0.5px solid var(--color-border-tertiary); border-radius: var(--border-radius-md); padding: 10px 12px; font-size: 13px; color: var(--color-text-secondary); }
  .interest-card strong { display: block; font-size: 14px; font-weight: 500; color: var(--color-text-primary); margin-bottom: 2px; }
  .links-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
  .ext-link { font-size: 13px; color: var(--color-text-info); text-decoration: none; }
</style>

<div class="site">
  <nav class="nav">
    <a href="#" class="active">Home</a>
    <a href="#">Publications</a>
    <a href="#">CV</a>
    <a href="#">Contact</a>
  </nav>

  <div class="header">
    <div class="avatar">YN</div>
    <div class="header-text">
      <h1>Amna Shahnawaz</h1>
      <p>PhD Candidate @ Lahore University of Management Sciences (LUMS)</p>
      <div class="tags">
        <span class="tag">Human-Computer Interaction</span>
        <span class="tag">Digital Health</span>
        <span class="tag">FinTech</span>
      </div>
      <div class="links-row">
        <a href="https://www.linkedin.com/in/amnashahnawaz/">LinkedIn</a>
        <a href="mailto:amna.shahnawaz@lums.edu.pk">
      </div>
    </div>
  </div>

  <div class="section">
    <h2>About</h2>
    <p class="bio">I am a PhD student advised by Prof. Advisor Name. My research focuses on [your area]. I am interested in [broader theme]. Previously, I completed my BS/MS at [University].</p>
  </div>

  <div class="section">
    <h2>Publications</h2>

    <div class="pub">
      <p class="pub-title">Your Paper Title Goes Here</p>
      <p class="pub-authors"><strong>Your Name</strong>, Co-author One, Co-author Two</p>
      <p class="pub-venue">Conference / Journal Name, 2024</p>
      <div class="pub-links">
        <a class="pub-link" href="#">PDF</a>
        <a class="pub-link" href="#">arXiv</a>
        <a class="pub-link" href="#">Code</a>
      </div>
    </div>

    <div class="pub">
      <p class="pub-title">Another Paper Title</p>
      <p class="pub-authors"><strong>Your Name</strong>, Co-author Name</p>
      <p class="pub-venue">Workshop Name @ NeurIPS 2023</p>
      <div class="pub-links">
        <a class="pub-link" href="#">PDF</a>
        <a class="pub-link" href="#">Poster</a>
      </div>
    </div>
  </div>

  <div class="section">
    <h2>Research interests</h2>
    <div class="interest-grid">
      <div class="interest-card"><strong>Topic One</strong>Brief description here</div>
      <div class="interest-card"><strong>Topic Two</strong>Brief description here</div>
      <div class="interest-card"><strong>Topic Three</strong>Brief description here</div>
    </div>
  </div>
</div>