maxwellbo.github.io/let-me-live-with-you.html at master · MaxwellBo/maxwellbo.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
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>max's "let me live with you" site</title>
  <meta property="og:image" content="https://maxbo.me/img/me4.jpg" />
  <meta property="og:type" content="website" />
  <meta property="og:title" content="max's &quot;let me live with you&quot; site" />
  <meta property="og:description" content="max is looking for housemates in NYC" />

  <meta name="twitter:title" content="max's &quot;let me live with you&quot; site" />
  <meta name="twitter:description" content="max is looking for housemates in NYC" />
  <meta name="twitter:image" content="https://maxbo.me/img/me4.jpg" />
</head>
<style>
  body {
    background-color: rgb(231, 231, 231);
  }

  .tiny-img {
    height: 3ch;
    cursor: pointer;
  }

  main {
    max-width: 100ch;
    margin: 0 auto;
    padding: 1ch;
  }

  #about-me {
    padding: 14px;
    border-width: 2px;
    border-color: grey;
    border-style: dotted;
  }

  #about-me > h2 {
    margin: 1px;
  }

  .intro-section {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 2ch;
    margin-bottom: 2ch;
  }

  .intro-text {
    flex: 1 1 0;
  }

  .intro-img {
    flex: 0 0 auto;
  }

  @media (max-width: 700px) {
    .intro-section {
      flex-direction: column;
      gap: 1ch;
    }
    .intro-img img {
      width: 100%;
      max-width: 100vw;
    }
  }
</style>
<body>
  <main>
    <div>
      <a href="index.html">← max bo</a>
    </div>
    <h1>max's <i>let me live with you</i> site</h1>
    <i>2nd September 2025</i>
    <div class="intro-section">
      <div class="intro-text">
      <p>
        my name is Max. i'm 28. i just moved from Sydney to New York City. i was previously working as a software engineer at Canva but i've just started work at Meta.
      </p>
      <p>
        i've lived with housemates for the past 6 years and they are now some of my closest friends. i'm looking for new housemates to live with (either renting with, or subletting from).
      </p>
      </div>
      <div class="intro-img">
      <!-- <img src="https://maxbo.me/html-in-hyde/0/photos/b.JPG" style="width: 30ch" /> -->
      <br />
      <img src="img/me4.jpg" style="max-width: 50ch" />
      </div>
    </div>
    <section id="about-me">
    <h2>
      about me
    </h2>
    <p>
      i play badminton a lot --- pool, snooker and <a href="img/mahjong.JPG">mahjong</a> <img class="tiny-img" src="img/mahjong.JPG" /> sometimes. i enjoy <a href="img/trivia2.jpg">winning at pub trivia</a> <img class="tiny-img" src="img/trivia2.jpg" /> with teammates who have special interests.
    </p>
    <p>
      i play the <a href="img/classical.jpg">classical guitar</a> <img class="tiny-img" src="img/classical.jpg" />. i love live music, particularly jazz, sludge metal and IDM.
      i <a href="https://rateyourmusic.com/~mbo">rate every album</a> i ever listen to.
    </p>
    <p>
      i love <a href="img/computer.JPG">da computer</a> <img class="tiny-img" src="img/computer.JPG" />. i make <a href="index.html">silly websites and graphs</a>. i frequently tend to my <a href="https://www.are.na/max-bo">are.na</a>. i run <a href="https://maxbo.me/html-in-hyde">HTML picnics</a> <img class="tiny-img" src="img/ifb.JPG" /> and attend <a href="https://www.matchamonday.net">matcha meetups</a>. i print papers off arxiv to take to the cafe.
    </p>
    <p>
      i am a chronic extrovert; i rarely tire of people. i almost always eat dinner out, as i cannot (and do not attempt to) cook. i <a href="img/sleep.JPG">fall asleep</a> <img class="tiny-img" src="img/sleep.JPG" /> quickly.
    </p>
    <p>
      i am just starting to pick up pottery. i intend to start dinghy sailing again. i dream of learning to use a loom.
    </p>
    </section>
    <p>
      if you think i might be a good fit for you or someone you know, you can reach me at
      <a href="maxwell.j.bo+housing@gmail.com">maxwell.j.bo@gmail.com</a>, or whatsapp +61 447724463, <abbr title="sorry, anti-spam measure">but with the last number changed to a 2</abbr>. i have a completely free schedule for inspections and meetups from the 5th of September until the 1st of October.
    </p>
    <p>
      best, max
    </p>
  </main>
</body>

<script>
document.querySelectorAll('.tiny-img').forEach(img => {
  img.addEventListener('mouseenter', function() {
    const floatingImg = document.createElement('img');
    floatingImg.src = img.src;
    floatingImg.style.position = 'fixed';
    floatingImg.style.bottom = '20px';
    floatingImg.style.right = '20px';
    floatingImg.style.maxWidth = '50vw';
    floatingImg.style.maxHeight = '80vh';
    floatingImg.style.width = 'auto';
    floatingImg.style.height = 'auto';
    floatingImg.style.zIndex = '9999';
    floatingImg.className = 'floating-tiny-img';
    document.body.appendChild(floatingImg);

    img._floatingImg = floatingImg;
  });

  img.addEventListener('mouseleave', function() {
    if (img._floatingImg) {
      img._floatingImg.remove();
      img._floatingImg = null;
    }
  });
});
</script>
</html>