maxwellmcmahon/index.html at master · maxwellmc/maxwellmcmahon · 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
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
<!doctype html>
<html lang="en">
<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="Description" content="The professional website of Maxwell McMahon, a web app developer located in Gainesville, FL.">

  <!-- CSS -->
  <link href="dist/main.css" rel="stylesheet">

  <!-- Google Fonts -->
  <link href="https://fonts.googleapis.com/css?family=Bitter:700|Lato:400,400i,700|Noto+Serif:400i&display=swap" rel="stylesheet">

  <title>Max McMahon - Web App Developer | Gainesville, FL</title>
</head>
<body>

  <div class="container-fluid">

    <div class="chunk-about-headshot">
      <img src="assets/img/max-headshot-small.jpg" class="headshot" alt="" />
    </div>

    <div class="chunk chunk-about">

      <div class="chunk-about-text p-md-5">
        <h1>Hi, I'm Max!</h1>

        <p class="mt-md-4">
          I'm a web app developer located in Gainesville, Florida.
        </p>
        <p>
          I have experience in designing data-dense yet clutter-free user experiences, and writing powerful code with a focus on maintainability, reusability, and elegance.
        </p>
        <p>
          Some career highlights so far include creating Android apps for a DoD client, and creating the world's first diabetes surgery risk calculator.
        </p>
      </div>

    </div>

    <div class="chunk chunk-bio p-md-5">
      <h2 class="text-center pb-2">My Passions</h2>
      <h3>Your One-Stop App Shop</h3>
      <p>
        My experience so far has been as a full-stack developer, creating apps from concept to release and being involved in everything from the server design to supporting the end-users. I'm super passionate about doing whatever it takes to create beautiful interfaces and rock-solid backends that totally solve the user's problem.
      </p>
      <h3 class="mt-4">Diversity & Disability</h3>
      <p>
        I also have personal passions for increasing diversity in tech and accomodating disability through accessibility.
      </p>
    </div>

    <div id="parallax1" class="parallaxParent">
      <div id="parallax1Image" class="parallaxImage"></div>
    </div>

    <div class="chunk chunk-skills p-md-5">
      <h2 class="text-center">My Skills</h2>
      <ul>
        <li>
          <img class="skill-logo" src="dist\img\skills\php7.png" alt="" /> PHP 7.3
        </li>
        <li>
          <img class="skill-logo" src="dist\img\skills\es6.svg" alt="" /> Modern JavaScript (ES6+)
        </li>
        <li>
          <img class="skill-logo" src="dist\img\skills\mysql.svg" alt="" /> MySQL 5.7
        </li>
        <li>
          <img class="skill-logo" src="dist\img\skills\symfony.svg" alt="" /> Symfony 4 <i>(with Twig, Doctrine ORM)</i>
        </li>
        <li>
          <img class="skill-logo" src="dist\img\skills\bootstrap.svg" alt="" /> Bootstrap 4
        </li>
        <li>
          <img class="skill-logo" src="dist\img\skills\webpack.svg" alt="" /> Webpack 4
        </li>
        <li>
          <img class="skill-logo" src="dist\img\skills\aws.svg" alt="" /> Amazon Web Services <i>(EC2, RDS, S3, CloudWatch)</i>
        </li>
        <li>
          <img class="skill-logo" src="dist\img\skills\git.svg" alt="" /> Git
        </li>
      </ul>
    </div>

    <div id="parallax2" class="parallaxParent">
      <div id="parallax2Image" class="parallaxImage"></div>
    </div>

    <div class="chunk chunk-career p-md-5">
      <h2 class="text-center">My Career</h2>

      <h4>ASMBS</h4>
      <ul>
        <li>Develop an enterprise Symfony web app for the management of our membership of over 4,000 healthcare professionals and our annual educational events</li>
        <li>Write in PHP 7.2 and modern JavaScript (ES6+) with extensive BDD functional testing</li>
        <li>Upgrade, extend, and maintain our public WordPress-based sites to modern standards</li>
        <li>Execute AWS server upgrades and migrations, reducing our monthly hosting costs by 70%</li>
      </ul>

      <h4>Interloc Solutions, Inc.</h4>
      <ul>
        <li>Created multiple apps for a Department of Defense client, mobilizing IBM’s Maximo system for Android with our Mobile Informer platform</li>
        <li>Owned each project as the sole mobile developer for the D.O.D. client</li>
        <li>Worked independently with the client on-site to gather business requirements, perform demos, and oversee go-lives</li>
        <li>Developed custom Maximo solutions in Java to extend existing non-mobile software</li>
        <li>Created an app that was featured at IBM InterConnect 2015, and co-developed a drone app featured in Uptime Magazine and showcased at PANMU 2015</li>
      </ul>

      <div class="text-center mt-4">
        <a href="https://www.linkedin.com/in/max-mcmahon-16437775/" class="btn btn-primary" target="_blank">Check out my LinkedIn</a>
      </div>
    </div>

    <div class="chunk chunk-portfolio p-md-5">
      <h2 class="text-center">My Portfolio</h2>

      <div class="portfolio-pieces-container mt-5">
        <div class="row">
          <div class="col-12 col-lg-6 portfolio-piece">
            <div class="card bg-secondary">
              <div class="card-header">
                <h3 class="d-inline">Diabetes Surgery Risk Calculator</h3>
                <span class="portfolio-piece-year">2019</span>
              </div>
              <div class="d-block w-100">
              <div class="aspect-ratio-box">
                <video class="lazy-load portfolio-piece-media" autoplay muted loop playsinline poster="assets/vid/risk-calculator-poster.jpg">
                  <source data-src="assets/vid/risk-calculator.webm" type="video/webm" />
                  <source data-src="assets/vid/risk-calculator.mp4" type="video/mp4" />
                </video>
              </div>
            </div>
              <div class="card-body portfolio-caption">
                This is the world's first diabetes surgery risk calculator, for the ASMBS' "Escape Diabetes" site. The results are calculated with clean, object-oriented ES6+ JS, while still supporting IE11. The UI was designed and styled by me.
              </div>
              <div class="card-footer">
                <span class="portfolio-technologies">
                  Written in: ES6+
                </span>
                <a href="https://asmbs.org/escape-diabetes/risk-calculator" class="btn btn-primary float-right" target="_blank" aria-label="View the Escape Diabetes surgery risk calculator">
                  View it live
                </a>
              </div>
            </div>
          </div>
          <div class="co-12 col-lg-6 portfolio-piece mt-3 mt-lg-0">
            <div class="card bg-secondary">
              <div class="card-header">
                <h3 class="d-inline">ASMBS Provider Search</h3>
                <span class="portfolio-piece-year">2018</span>
              </div>
              <div class="aspect-ratio-box">
                <video class="lazy-load portfolio-piece-media" autoplay muted loop playsinline poster="assets/vid/asmbs-provider-search-poster.jpg">
                  <source data-src="assets/vid/asmbs-provider-search.webm" type="video/webm" />
                  <source data-src="assets/vid/asmbs-provider-search.mp4" type="video/mp4" />
                </video>
              </div>
              <div class="card-body portfolio-caption">
                The ASMBS' previous provider search had no map and retrieved providers by
                looping through a manually-updated CSV file. My revamp
                added Google Maps, Google Places Autocomplete, user geolocation, responsive member photos stored on Amazon CloudFront,
                and live results pulled directly from the RESTful database API that I designed.
              </div>
              <div class="card-footer">
                <span class="portfolio-technologies">
                  Written in: ES6+
                </span>
                <a href="https://asmbs.org/patients/find-a-provider" class="btn btn-primary float-right" target="_blank" aria-label="View the ASMBS Provider Search">
                  View it live
                </a>
              </div>
            </div>
          </div>
        </div>
        <div class="row mt-3">
          <div class="co-12 col-lg-6 portfolio-piece">
            <div class="card bg-secondary">
              <div class="card-header">
                <h3 class="d-inline">ASMBSdb</h3>
                <span class="portfolio-piece-year">2017-2019</span>
              </div>
              <div class="aspect-ratio-box">
                <video class="lazy-load portfolio-piece-media" autoplay muted loop playsinline poster="assets/vid/asmbs-db-poster.jpg">
                  <source data-src="assets/vid/asmbs-db.webm" type="video/webm" />
                  <source data-src="assets/vid/asmbs-db.mp4" type="video/mp4" />
                </video>
              </div>
              <div class="card-body portfolio-caption">
                Inherited from another developer, this custom-built association management app allows staff to manage members, invoices,
                committees, and more. I have added a module for running and snapshotting reports, a module for
                managing their annual events (attended by over 5,000), and a system for asynchronously importing
                legacy event records (including a complex person-matching algorithm). There is also a full BDD testing suite
                to catch bugs and prevent regressions, and bulletproof integrations with MailChimp, Cvent, and
                Planstone.
              </div>
              <div class="card-footer">
                <span class="portfolio-technologies">
                  Written in: PHP 7.3 (with Symfony 4, MySQL)
                </span>
              </div>
            </div>
          </div>
          <div class="col-12 col-lg-6 portfolio-piece mt-3 mt-lg-0">
            <div class="card bg-secondary">
              <div class="card-header">
                <h3 class="d-inline">Absorb</h3>
                <span class="portfolio-piece-year">2014</span>
              </div>
              <div class="aspect-ratio-box">
                <video class="lazy-load portfolio-piece-media" autoplay muted loop playsinline poster="assets/vid/absorb-poster.jpg">
                  <source data-src="assets/vid/absorb.webm" type="video/webm" />
                  <source data-src="assets/vid/absorb.mp4" type="video/mp4" />
                </video>
              </div>
              <div class="card-body portfolio-caption">
                Absorb is a browser game in which you are an orb floating through space, absorbing others who are smaller to stay alive, and avoiding larger predators. When you grow to full size, you split into two, and your goal is to not only survive, but to ensure the survival of your offspring.
              </div>
              <div class="card-footer">
                <span class="portfolio-technologies">
                  Written in: Classic JavaScript (ES5)
                </span>
                <a href="absorb/index.html" class="btn btn-primary float-right" target="_blank" aria-label="Play the game Absorb">
                  Play Absorb
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div id="parallax3" class="parallaxParent">
      <div id="parallax3Image" class="parallaxImage"></div>
    </div>

    <div class="chunk chunk-contact p-md-5">
      <h2 class="text-center">Say Hi!</h2>
      <p class="my-5 text-center contact-email">
        wmaxmcmahon@gmail.com
      </p>
      <div class="text-center mt-4">
        <p>This site's source is on GitHub!</p>
        <a href="https://github.com/maxwellmc/maxwellmcmahon" class="btn btn-primary" target="_blank">Review my code</a>
      </div>
    </div>

  </div>

  <!-- App Script -->
  <script src="dist/main.js"></script>

</body>
</html>