maximoseq.github.io/data.html at main · Maximoseq/maximoseq.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
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Maximiliano Bange</title>
    <link rel="stylesheet" href="style.css" />
  </head>

  <body class="data-page">
    <div class="page">
      <!-- Header -->
      <header class="header">
        <div class="header-left">
          <img
            class="avatar"
            src="images/profile-image.jpg"
            alt="Portrait photo of Maximiliano Bange"
          />

          <div class="header-text">
            <h1 class="name">Maximiliano Sequoyah Bange</h1>
            <p class="sub">University of Washington</p>
          </div>
        </div>

        <nav class="switch">
          <a class="switch-btn" href="index.html">Design &amp; Product</a>
          <a class="switch-btn active" href="data.html" aria-current="page">Data &amp; Analysis</a>
          <a class="switch-btn" href="resume.html">Resume</a>
        </nav>

        <div class="header-right">
          <div class="social-links">
            <a class="pill" href="https://github.com/Maximoseq" target="_blank" rel="noreferrer">GitHub</a>
            <a class="pill" href="https://www.linkedin.com/in/mbange3/" target="_blank" rel="noreferrer">LinkedIn</a>
            <a class="pill" href="mailto:mbange@uw.edu">Email</a>
          </div>

          <div class="school-logo">
            <img
              src="images/ischool-logo.png"
              alt="University of Washington Information School logo"
            />
          </div>
        </div>
      </header>

      <!-- Intro -->
      <section class="card intro">
        <p class="lead">
          I primarily use R for data visualization and exploratory analysis, and
          I'm currently using Python more in my coursework to expand how I work with and visualize data.
          I'm especially interested in using visualization to make patterns and system behavior easier to see and
          understand.
        </p>

        <p class="contact">
          UW: <a href="mailto:mbange@uw.edu">mbange@uw.edu</a>
        </p>

        <h2 class="section-title">Data &amp; Analysis</h2>
        <p class="muted">
          I use data to explain what's happening, not just what we assume is happening. This portion
          of my work focuses on visualization and data storytelling, with an emphasis on clean analysis,
          readable visuals, and straightforward interpretation.
        </p>
      </section>

      <!-- Data projects -->
      <main class="stack">
        <article class="project">
          <div class="project-body">
            <h3 class="project-title">Bicycle Traffic Patterns on Seattle's Fremont Bridge</h3>
            <p class="project-desc">
              Trends over time with weekday vs. weekend patterns using Seattle Open Data.
            </p>

            <p class="tags">Tools: R · tidyverse · lubridate · ggplot</p>

            <div class="actions">
              <a class="pill pill-dark" href="/data/fremont_bike_analysis.html" target="_blank" rel="noreferrer">
                View Report
              </a>
            </div>
          </div>

          <div class="project-media">
            <img
              src="images/fremont-bike-graph.png"
              alt="Preview image for Fremont Bridge bike traffic report"
              loading="lazy"
              onerror="this.style.display='none'"
            />
          </div>
        </article>

        <article class="project">
          <div class="project-body">
            <h3 class="project-title">More analysis work coming</h3>
            <p class="project-desc">
              I'm adding additional data reports using Python and pandas to show data processing and edge-case handling.
            </p>
            <p class="tags">Tools: Python · pandas (soon)</p>
          </div>
        </article>
      </main>

      <footer class="footer">
        <p class="muted">© <span id="year"></span> Maximiliano Bange</p>
      </footer>
    </div>

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