marknewcomb1/index.html at master · MarkNewcomb1/marknewcomb1 · 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
<!DOCTYPE html>
<html lang="en">
<head>
  <!-- Basic Page Needs
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <meta charset="utf-8">
  <title>Mark Newcomb Portfolio</title>
  <meta name="description" content="Frontend engineer portfolio of Mark Newcomb Vue, React, clean architecture, and developer-focused UI/UX.">
  <meta name="author" content="Mark Newcomb">
  <meta property="og:title" content="Mark Newcomb Portfolio">
  <meta property="og:description" content="Frontend engineer specializing in Vue, React, clean UI/UX, and scroll-based animation.">
  <meta property="og:image" content="https://marknewcomb1.com/images/me-front-shot-orangeifiedDARKER.jpg">
  <meta property="og:url" content="https://marknewcomb1.com">
  <meta property="og:type" content="website">

  <!-- Mobile Specific Metas
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- FONT
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
<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=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">

  <!-- CSS
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/style.css">

  <!-- GreenSock Animation
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/ScrollTrigger.min.js"></script>
<script src="main.js" defer></script>

  <!-- Favicon
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <link rel="icon" type="image/png" href="images/favicon.png">

</head>
<body>
  <!-- Primary Page Layout
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <div class="sticky-section">
    <div class="container">
      <div class="row">
        <div class="one-half column hero-content-wrapper">
        <video src="/videos/coding-compilation-re-rendered.mp4" playsinline webkit-playsinline preload="auto" muted class="video-background"></video>
    <div id="container1"></div>
          <h4 class="hero-heading barlow-medium">Mark Newcomb: Frontend Engineer</h4>
          <p class="vue-react-specialist barlow-extralight-italic">Vue + React specialist with a strong product mindset. Clean architecture, and a bias toward simplicity.</p>
                <h5 class="section-heading">View my GitHub or Linkedin</h5>
                <div class="socials">
      <a class="button button-primary" href="https://github.com/MarkNewcomb1" target="_blank">GitHub</a>
      <a class="button button-primary" href="https://www.linkedin.com/in/marknewcomb1" target="_blank">LinkedIn</a>
        </div>
    </div>
      </div>
    </div>
  </div>
  <div class="section values">
    <div class="container">
      <div class="row">
        <div class="one-half offset-by-six column">
          <h5 class="value-heading">About Me</h5>
          <p class="value-description">I've led feature development on Apple device management tools, migrated codebases from Backbone to Vue Router and Redux to Pinia, and improved user experience with clean, accessible interfaces backed by thoughtful state architecture.</p>
          <p class="value-description">I care deeply about developer ergonomics, code maintainability, and fast, intuitive user flows.</p>
        </div>
        <div class="one-half offset-by-six column">
          <h5 class="value-heading">Clean UI, Honest UX</h5>
          <p class="value-description">I believe interfaces should behave as expected. No scrolljacking! I build features that respect user habits and developer sanity.</p>
        </div>
        <div class="one-half offset-by-six column">
          <h5 class="value-heading">Get It Done</h5>
          <p class="value-description">I value direct collaboration, thoughtful naming, and making sure future developers don't hate me.</p>
        </div>
      </div> <!-- row -->
    </div>
  </div>
    <div class="section">
    <div class="container">
        <div class="row">
              <div class="one-half offset-by-six column">
            <h3 class="section-heading barlow-extralight" id="worked-for">Who I've worked for / What I've worked on</h3>
            <h5 class="value-heading barlow-medium">JumpCloud</h5>
            <p>Apple team of device management - think VPP, MDM, Apple's Zero-Touch Enrollment and Software Management pages</p>
            <img class="bh" src="images/jc-software-m.png" />
            <div class="spacer"></div>
            <h5 class="value-heading barlow-medium">AUTOPAY</h5>
            <p>Built React form for customer intake of car refinances + internal dashboard written in AngularJS for loan finalization</p>
            <img class="bh" src="images/auto-p.png" />
            <div class="spacer"></div>
            <h5 class="value-heading barlow-medium">Catalyst Repository Systems/OpenText</h5>
            <p>eDiscovery - think "google for lawyers": worked on their platform Insight Discovery, complete with OCR (Optical Character Recognition) and "burning"/redacting digital documents</p>
            <img class="bh" src="images/catalyst.png" />
              </div>
      </div>
    </div>
  </div>

    <div class="section react">
    <div class="container">
      <div class="row">
        <div class="one-half offset-by-six column">
      <h3 class="section-heading barlow-extralight">React.js Music Collection/Search App</h3>
      <p class="section-description">I've made an app for keeping track of your physical media collection. Built with Discogs API, React, Node, Express, jQuery and hand-built CSS - NO Bootstrap!</p>
      <a class="button button-primary" href="https://github.com/MarkNewcomb1/final-project" target="_blank">GitHub source</a>
      <a class="button button-primary" href="https://www.youtube.com/watch?v=gsKL-Dx6mRc" target="_blank">Demo Video</a>
    </div>
    </div>
    </div>
  </div>

    <div class="section get-help hot-rod">
    <div class="container">
      <div class="row">
        <div class="one-half offset-by-six column">
      <h3 class="section-heading barlow-extralight">Fender Hot Rod Deluxe Owner's Guide</h3>
      <p class="section-description">A passion project keeping alive the information previously lost to the internet. Responsive website built with static HTML/CSS and some jQuery.</p>
      <a class="button button-primary" href="https://github.com/MarkNewcomb1/Hot-Rod" target="_blank">GitHub source</a>
      <a class="button button-primary" href="http://hotroddiy.com" target="_blank">Visit Site</a>
      </div>
    </div>
    </div>
  </div>
      <div class="section categories">
    <div class="container">
      <div class="row">
        <div class="one-half offset-by-six column">
          <h4 class="hero-heading barlow-extralight">Past Builds: They've Moved On, But I Was There:</h4>
<p><a href="https://www.crownroyal.com" target="_blank">Crown Royal Whisky</a> - wrote some CSS for the main slider.</p>
<p><a href="http://www.energizer.com" target="_blank">Energizer Batteries</a> - rebuilt the Power and Lighting menus, adhering to both desktop and mobile PSDs sent to me by the design team.</p>
<p><a href="http://www.vo5haircare.com" target="_blank">VO5 Haircare</a>, <a href="http://zest.com" target="_blank">Zest</a>, <a href="http://www.coastsoap.com" target="_blank">Coast soap</a>, <a href="http://www.whiterain.com" target="_blank">White Rain</a>- most content entry/packaging images. Integrated Press Room page on VO5.</p>
<p><a href="https://web.archive.org/web/20171024180738/http://www.getolympus.com/brunch" target="_blank">Olympus Camera promotion</a> - Mostly built by me; built and styled the templates, and integrated the forms.</p>
<p><a href="https://web.archive.org/web/20171020051509/https://www.point72.com/" target="_blank">Point72</a> - most static template builds (minus Wistia video integration), most styles. This was a huge, months-long build, using multiple branches concurrently, with testing and deployment responsibility resting on me.</p>
<p><a href="http://amherstinsightlabs.com/" target="_blank">Amherst Insight Labs</a>, <a href="http://www.amherst.com" target="_blank">Amherst Holdings</a> - built all templates and most styles.</p>
<p>Barhunter app - built HTML and CSS. This was a static prototype for a mobile-only app for looking up either bars or liquor stores (depending on which option was chosen by the end user) in Mexico City. Has not been deployed yet, but here are screenshots from spinning up a server from my local copy:</p>
<img class="bh" src="images/1.jpg">
<img class="bh" src="images/5.jpg">
<img class="bh" src="images/6.jpg">
        </div>
      </div>
    </div>
<div class="clear"></div>
  </div>
  <div class="section">
    <div class="container">
      <div class="row">
        <div class="twelve columns">
          <h4 class="hero-heading barlow-bold built-by-me">100% built by me:</h4>
<p><a href="https://web.archive.org/web/20171124223455/http://www.fitblockgyms.com/" target="_blank">Fitblock Gyms</a></p>
<p><a href="https://web.archive.org/web/20171124183027/http://runtillvalhalla.com/" target="_blank">Run Till Valhalla</a></p>
<p><a href="https://web.archive.org/web/20161214084516/http://millersmith.com/gratitude/" target="_blank">2016 Holiday Card</a> - This was a challenge positioning the stars to align to the 50-star configuration on the American flag. <a href="https://web.archive.org/web/20171124182040/https://www.cadc.org/awards/2017/excellence.html#piece-13" target="_blank">Won an Excellence Award at the Connecticut Art Director's Club Awards Show.</a></p>
<p><a href="https://web.archive.org/web/20171125001500/http://millersmith.com/cal2016/" target="_blank">Catch a Lift Fund 2016 Veteran's Day Benefit</a></p>

<p><a href="https://web.archive.org/web/20171015001419/https://hrcadvisory.com/" target="_blank">HRC Advisory</a></p>
<p>Reside - a planned offshoot of Amherst, but never deployed live. Image of actual build below:</p>
<img src="images/reside.png" class="u-max-full-width" style="width:480px;">
        </div>
      </div>
    </div>
  </div>
<!-- End Document
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
</body>
</html>