metavida.github.com/index.html at master · metavida/metavida.github.com · 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
<!DOCTYPE html>
<html>
<head>
  <!-- Primary Meta Tags -->
  <title>Marcos Wright-Kuhns</title>
  <meta name="title" content="Marcos Wright-Kuhns" />
  <meta name="description" content="Enjoy some of my fun, little projects!" />

  <!-- Open Graph / Facebook -->
  <meta property="og:type" content="website" />
  <meta property="og:url" content="https://marcos.wrightkuhns.com/" />
  <meta property="og:title" content="Marcos Wright-Kuhns" />
  <meta property="og:description" content="Enjoy some of my fun, little projects!" />
  <meta property="og:image" content="https://marcos.wrightkuhns.com/assets/watercolor-open-graph.jpg" />

  <!-- Twitter -->
  <meta property="twitter:card" content="summary_large_image" />
  <meta property="twitter:url" content="https://marcos.wrightkuhns.com/" />
  <meta property="twitter:title" content="Marcos Wright-Kuhns" />
  <meta property="twitter:description" content="Enjoy some of my fun, little projects!" />
  <meta property="twitter:image" content="https://marcos.wrightkuhns.com/assets/watercolor-open-graph.jpg" />
  <!-- Meta Tags Generated with https://metatags.io -->

  <link rel="icon" href="assets/favicon.png" />
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300..800&display=swap" rel="stylesheet">
  <link href="assets/main.css" rel="stylesheet" type="text/css">
  <meta name='viewport' content='initial-scale=1, viewport-fit=cover, width=device-width'>
</head>
<body>
  <div id="background">
    <div class="mountain"></div>
    <div class="forest"></div>
    <div class="forest"></div>
  </div>
  <div id="content">
    <header id="top">
      <hgroup>
        <h1><span>Marcos&nbsp;</span> <span>Wright-Kuhns</span></h1>
      </hgroup>
    </header>
    <section>
      <article id="projects">
        <header>
          <h2>Personal Projects</h2>
        </header>
        <ul>
          <li>
            <a href="https://vanguard-estates.wrightkuhns.com/">
              <img src="images/vanguard-estates.jpg" alt="A smiling android, wearing a tuxedo, caries a covered platter" />
              <span>
                Welcome to Vanguard Estates
                <span class="more">An interactive choose-your-own-path story!</span>
              </span>
            </a>
          </li>
          <li>
            <a href="https://life-in-weeks.wrightkuhns.com/">
              <img src="images/life-in-weeks.jpg" alt="A grid of colorful squares, each representing a week of life" />
              <span>
                Life in Weeks: A Visualization
                <span class="more">Puting my life in perspective, one week at a time</span>
              </span>
            </a>
          </li>
          <li>
            <a href="https://oneyear.wrightkuhns.com/">
              <img src="images/one-year-in-photos.jpg" alt="A photo of my family" />
              <span>
                One Year of Photos
                <span class="more">A nostalgic visualization</span>
              </span>
            </a>
          </li>
        </ul>
      </article>

      <article id="about-me">
        <header>
          <h2>About Me</h2>
        </header>
        <ul>
          <li>
            <p>I'm a dad, husband, software creator, &amp; navigator of sociotechnical systems. I enjoy time with my family, board games, admiring
              nature, and live music. I'm always aiming to be more compassionate.</p>
          </li>
        </ul>
      </article>

      <article id="work">
        <div>
          <header>
            <h2>Related Work</h2>
          </header>
          <ul>
            <li class="github"><a href="https://github.com/metavida">GitHub</a></li>
            <li class="flickr"><a href="https://flickr.com/photos/metavida">Flickr</a></li>
            <li class="linkedin"><a href="https://www.linkedin.com/in/marcoswk">LinkedIn</a></li>
          </ul>
        </div>
      </article>
    </section>

  </div>
  <footer>
    <div>
      <header>Illustrations</header>
      <ul>
        <li>
          Mt. Hood watercolor by <a href="https://www.etsy.com/listing/1544188148/mt-hood-oregon-watercolor-digital-print">Rose City Digitals</a>
        </li>
        <li>
          Forest watercolor by <a href="https://www.etsy.com/listing/1775549943/13-pine-tree-forest-clipart-watercolor">VenissiDesigns</a>
        </li>
      </ul>
    </div>
    <div>&copy; 2025 Marcos Wright-Kuhns</div>
  </footer>
  <script src="assets/main.js"></script>
</body>
</html>