sspoon.github.io/index.html at main · sspoon/sspoon.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Sarah Poon — Portfolio</title>

    <!-- Tailwind CSS via CDN -->
    <script src="https://cdn.tailwindcss.com"></script>

    <!-- Optional: custom styles -->
    <link rel="stylesheet" href="styles.css" />
    <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600&family=Inter:wght@400;500&display=swap" rel="stylesheet">

  </head>

  <body class="bg-fuchsia-100 text-gray-800 font-inter">
    <!-- Header -->
    <header class="bg-fuchsia-100/80 backdrop-blur py-4 border-b border-gray-300 sticky top-0 z-50">
    <div class="max-w-6xl mx-auto flex justify-between items-center px-4">
      <h1 class="font-playfair text-3xl">Sarah Poon</h1>
        <nav class="font-inter space-x-6 text-gray-700 text-lg">
          <a href="./projects.html" class="hover:text-gray-900 hover:underline underline-offset-4">Projects</a>
          <a href="#contact" class="hover:text-gray-900 hover:underline underline-offset-4">Contact</a>
        </nav>
    </div>
  </header>

    <!-- Hero -->
    <section class="bg-fuchsia-100">
      <div class="mx-auto max-w-6xl px-4 py-16 md:py-24 grid gap-10 md:grid-cols-2 items-center">
        <!-- Left: blurb + CTA -->
        <div>
          <h1 class="font-playfair text-4xl md:text-5xl leading-tight text-gray-900">
            Hi! I'm a user experience designer specializing in expert use systems.
          </h1>
          <p class="mt-4 font-inter text-lg text-gray-700 max-w-prose">
            I design and build expert use software that helps people do their work better — from scientific UIs in domains like astrophysics and genomics to tools that support fashion merchandisers and warehouse teams in their day-to-day work.
          </p>


          <div class="mt-8 flex flex-wrap items-center gap-3">
            <a href="./projects.html"
               class="font-inter inline-flex items-center gap-2 rounded-xl px-5 py-3 bg-gray-900 text-white border border-gray-900 hover:bg-gray-800 transition shadow-sm">
              View my work
              <span aria-hidden="true">→</span>
            </a>
            <!--a href="/resume.pdf"
               class="font-inter inline-flex items-center gap-2 rounded-xl px-5 py-3 border border-gray-300 text-gray-800 hover:bg-white/70 transition"
               target="_blank" rel="noreferrer">
              Resume
            </a -->
          </div>
        </div>

        <!-- Right: profile photo -->
        <div class="order-first md:order-none md:justify-self-end">
          <img src="./assets/sarahpoon.png" alt="Your portrait"
              class="w-full max-w-md rounded-2xl shadow-lg object-cover" />
        </div>
      </div>
    </section>


    <!-- Contact -->
    <section id="contact" class="border-t border-gray-300 bg-fuchsia-50">
      <div class="mx-auto max-w-6xl px-4 py-20 text-center">
        <h2 class="font-playfair text-3xl md:text-4xl text-gray-900">
          Get in touch
        </h2>
        <p class="font-inter mt-4 text-gray-700 text-lg max-w-xl mx-auto">
          Feel free to contact me it you want to discuss my work or are interested in collaborating.
        </p>

        <div class="mt-8">
          <a href="mailto:sarahpoon@gmail.com"
             class="font-inter inline-block rounded-xl bg-gray-900 text-white px-6 py-3 text-base md:text-lg hover:bg-gray-800 transition shadow-sm">
            sarahpoon@gmail.com
          </a>
        </div>
      </div>
    </section>


    <script>
      document.getElementById("year").textContent = new Date().getFullYear();
    </script>
  </body>
</html>