Dashboard Temp Share Shortlinks Frames API

HTMLify

star-wars-3d-models-and-blueprints.html
Views: 26 | Author: cody
  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
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
<!DOCTYPE html>
<html lang="en" dir="ltr" data-cast-api-enabled="true">
  <head>
    <!-- META -->
    <meta charset="UTF-8">
    <meta http-equiv="Content-Language" content="en">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Primary Meta Tags -->
    <title>Star Wars 3D Models and Blueprints Project Walkthrough</title>
    <meta name="title" content="Star Wars 3D Models and Blueprints Project Walkthrough">
    <meta name="author" content="Jacob Grisham">
    <meta name="keywords" content="Jacob,Grisham,Jacob Grisham,Star Wars 3D Models and Blueprints,Star Wars,Ships">
    <meta name="description" content="Walkthrough of my project Star Wars 3D Models and Blueprints. Star Wars 3D Models and Blueprints is a front-end web app built with Gatsby, React, Styled Components, and hosted on Netflify.">

    <!-- Open Graph / Facebook -->
    <meta property="og:locale" content="en_US">
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://www.jacobgrisham.com/">
    <meta property="og:title" content="Star Wars 3D Models and Blueprints Project Walkthrough">
    <meta property="og:site_name" content="Jacob Grisham Professional Portfolio">
    <meta property="og:image" content="https://www.jacobgrisham.com/img/thumbnail.png">
    <meta property="og:image:secure_url" content="https://www.jacobgrisham.com/img/thumbnail.png">
    <meta property="og:image:type" content="image/png">
    <meta property="og:image:height" content="630">
    <meta property="og:image:width" content="1200">
    <meta property="og:image:alt" content="Star Wars 3D Models and Blueprints">
    <meta property="og:description" content="Walkthrough of my project Star Wars 3D Models and Blueprints. Star Wars 3D Models and Blueprints is a front-end web app built with Gatsby, React, Styled Components, and hosted on Netflify." name="description">
    <meta property="fb:app_id" content="2733409333567092">

    <!-- Twitter Meta Tags -->
    <meta property="twitter:card" content="summary_large_image">
    <meta property="twitter:url" content="https://www.jacobgrisham.com/">
    <meta property="twitter:title" content="Star Wars 3D Models and Blueprints Project Walkthrough">
    <meta property="twitter:description" content="Walkthrough of my project Star Wars 3D Models and Blueprints. Star Wars 3D Models and Blueprints is a front-end web app built with Gatsby, React, Styled Components, and hosted on Netflify.">
    <meta property="twitter:image" content="https://www.jacobgrisham.com/img/thumbnail.png">

    <!-- SEO -->
    <link rel="canonical" href="https://www.jacobgrisham.com/pages/projects/star-wars-3d-models-and-blueprints.html">

    <!-- FONTS -->
    <link href="https://fonts.googleapis.com/css2?&family=Montserrat:wght@100;200;300&family=Nunito+Sans:wght@200;300;400&family=PT+Mono&display=swap" rel="stylesheet">

    <!-- CSS -->
    <link rel="stylesheet" href="../css/style.css">
    <!-- Include this second link for production -->
    <link rel="text/css" href="../css/style.css">

    <!-- FAVICON -->
    <link rel="icon" href="../favicon.ico" type="image/x-icon">
    <link rel="shortcut icon" href="../favicon.ico">
    <link rel="apple-touch-icon" sizes="180x180" href="../favicon_io/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="../favicon_io/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="../favicon_io/favicon-16x16.png">
    <link rel="manifest" href="../site.webmanifest">
    </head>
  <body class="projects-body">
    <!-- Loader -->
    <div class="laptop loader">
      <svg class="laptop__svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 79.375 79.375" height="300" width="300">
        <g transform="translate(-2.22 3.222)">
          <g transform="translate(-335.788 -22.347) scale(.39771)">
            <rect fill="#b3b3b3" width="137.583" height="89.958" x="880.884" y="99.204" ry="2.022"/>
            <rect y="100.527" x="882.207" height="87.313" width="134.938" ry="2.134" rx="0"/>
            <path d="M886.175 104.496h127v79.375h-127z" fill="#4d4d4d"/>
            <rect fill="#333" width="29.788" height="70.68" x="891.36" y="113.22" ry="0" rx="0"/>
          </g>
          <path d="M16.674 20.813h50.597v.317H16.674zM30.53 24.5h36.617v15.488H30.529zm0-1.555h9.184V24.5H30.53z" fill="#1a1a1a"/>
          <path d="M30.53 22.69h9.183v.255H30.53z" fill="#003380"/>
          <rect fill="#2c5aa0" width="6.399" height=".455" x="32.113" y="23.546" ry=".227"/>
          <path d="M30.534 41.82h36.645v8.972H30.534zm-.005-1.557h9.184v1.555H30.53z" fill="#1a1a1a"/>
          <path d="M30.53 40.007h9.183v.256H30.53z" fill="#003380"/>
          <rect fill="#2c5aa0" ry=".227" y="40.793" x="32.089" height=".455" width="6.399"/>
          <g transform="translate(-19.725 -1.116) scale(.39771)" fill="#ccc">
            <rect ry=".767" y="62.346" x="99.493" height="1.535" width="14.902"/>
            <rect width="14.902" height="1.535" x="103.298" y="65.818" ry=".767"/>
            <rect width="16.379" height="1.535" x="106.895" y="69.291" ry=".767"/>
            <rect width="11.497" height="1.535" x="106.959" y="72.763" ry=".767"/>
            <rect ry=".767" y="76.235" x="107.055" height="1.535" width="11.497"/>
            <rect ry=".767" y="79.707" x="106.927" height="1.535" width="11.497"/>
            <rect ry=".767" y="83.179" x="102.833" height="1.535" width="16.379"/>
            <rect ry=".767" y="86.651" x="102.746" height="1.535" width="13.001"/>
            <rect ry=".767" y="90.123" x="106.991" height="1.535" width="16.379"/>
            <rect ry=".767" y="93.595" x="107.338" height="1.535" width="9.882"/>
            <rect ry=".767" y="97.067" x="100.024" height="1.535" width="16.379"/>
            <rect ry=".767" y="100.539" x="100.196" height="1.535" width="12.74"/>
            <rect ry=".767" y="104.011" x="100.379" height="1.535" width="12.44"/>
          </g>
          <g transform="translate(-411.355 -23.965) scale(.39771)">
            <rect fill="#ccc" ry=".887" y="193.745" x="1056.522" height="4.151" width="166.317"/>
            <path fill="#999" d="M1222.19 197.896h-165.048l4.029 2.723h156.468z"/>
          </g>
          <rect fill="#b3b3b3" ry=".4" y="53.067" x="38.233" height=".801" width="7.35"/>
          <rect fill="#999" ry=".4" y="43.091" x="31.651" height=".801" width="10.779"/>
          <rect fill="#999" width="10.779" height=".801" x="31.651" y="45.052" ry=".4"/>
          <rect fill="#999" width="10.779" height=".801" x="31.651" y="47.013" ry=".4"/>
          <rect fill="#999" width="10.779" height=".801" x="31.651" y="48.975" ry=".4"/>
          <rect fill="#999" ry=".051" y="49.718" x="43.875" height=".103" width="1.511"/>
          <rect fill="#999" width="5.07" height=".801" x="43.661" y="43.181" ry=".4"/>
          <rect fill="#999" width="13.784" height=".801" x="43.683" y="45.152" ry=".4"/>
          <rect fill="#999" width="10.779" height=".801" x="43.703" y="46.958" ry=".4"/>
          <rect fill="#c83737" width="4.572" height=".61" x="31.725" y="25.832" ry=".305"/>
          <rect fill="#fd5" width="8.157" height=".61" x="37.883" y="25.823" ry=".305"/>
          <rect fill="#fd5" ry=".305" y="27.46" x="37.922" height=".61" width="10.535"/>
          <rect fill="#fd5" ry=".305" y="29.214" x="37.922" height=".61" width="6.053"/>
          <rect fill="#999" width="10.779" height=".801" x="31.751" y="30.95" ry=".4"/>
          <rect fill="#ccc" ry=".325" y="32.771" x="31.771" height=".649" width="3.93"/>
          <rect fill="#c83737" ry=".305" y="32.771" x="36.627" height=".61" width="4.572"/>
          <rect fill="#5fbcd3" width="6.053" height=".61" x="42.045" y="32.731" ry=".305"/>
          <rect fill="#ccc" width="3.93" height=".649" x="48.951" y="32.672" ry=".325"/>
          <rect class="code" id="code-8" fill="#fd5" width="6.053" height=".61" x="35.771" y="34.449" ry=".305" />
          <rect class="code" id="code-7" fill="#5fbcd3" ry=".305" y="34.5" x="42.27" height=".61" width="9.509" />
          <rect class="code" id="code-6" fill="#ccc" ry=".325" y="36.08" x="38.948" height=".649" width="3.93" />
          <rect class="code" id="code-5" fill="#37c871" ry=".325" y="36.08" x="44.106" height=".649" width="2.847" />
          <rect class="code" id="code-4" fill="#37c871" ry=".325" y="36.131" x="47.923" height=".649" width="2.692" />
          <rect class="code" id="code-3" fill="#5fbcd3" ry=".325" y="36.131" x="51.585" height=".649" width="6.097" />
          <rect class="code" id="code-2" fill="#ccc" width="3.93" height=".649" x="35.904" y="37.834" ry=".325" />
          <rect class="code" id="code-1" fill="#c83737" width="7.203" height=".61" x="41.102" y="37.905" ry=".305" />
        </g>
      </svg>
    </div>

    <div class="projects-body__focus-container">
      <!-- HEADER -->
      <section>
        <h1 class="projects-body__main-heading">Star Wars 3D Models and Blueprints Project Walkthrough</h1>
        <h2 class="blog-body__sub-heading">November 2020</h2>
    
        <h2 class="projects-body__heading">Source Code
          <span>
            <a href="https://github.com/JacobGrisham/Gatsby.js-and-Styled-Components" aria-label="link to Star Wars 3D Models and Blueprints source code" target="_blank" rel="noopener noreferrer">
              <svg class="skills-box__header-icon">
                <use xlink:href="../img/sprite.svg#icon-github"></use>
              </svg>
            </a>
          </span>
        </h2>

        <div>
          <img src="../img/StarWarsMetaImage-min.png" class="projects-body__image lax"></img>
        </div>
      </section>
  
      <!-- ABOUT -->
      <section>
        <h2 class="projects-body__heading">About</h2>
        <p>Originally homework from CS50, where we were tasked to build a simple homepage using HTML, CSS, and JavaScript. I took this as an opportunity to go beyond this by practicing design and using advanced CSS methods. The first version of the website built was Flask is archived is this repo: <a href="https://github.com/JacobGrisham/Star-Wars-Front-End-Web-App-using-Flask" aria-label="link to archived Star Wars repo" class="curriculum__link" target="_blank" rel="noopener noreferrer">Star-Wars-Front-End-Web-App-using-Flask</a>. I later refactored it from Flask to Gatsby.js and Styled Components. The core of the application was built in November 2020, with two small updates in April 2021 and one major update in July 2021.</p>
      </section>
  
      <!-- PRODUCT FEATURES AND SPECIFICATIONS -->
      <section>
        <h2 class="projects-body__heading">Product Features and Specifications</h2>
        <ul class="projects-body__list">
          <li>3D Model and and blueprints for the following starships</li>
          <ul class="projects-body__list">
            <li>Millennium Falcon</li>
            <li>Imperial Star Destroyer</li>
            <li>Tie Fighter</li>
          </ul>
        </ul>
      </section>
  
      <!-- TECHONOLOGIES -->
      <section class="technologies">
        <h2 class="projects-body__heading technologies__header">Technologies</h2>
        <div class="skills-box__no-shadow">
          <h4 class="skills-box__header">
            <svg class="skills-box__header-icon">
              <use xlink:href="../img/sprite.svg#icon-embed2"></use>
            </svg>
            Front-End
          </h4>
          <ul class="skills-box__list">
            <li class="skills-box__item">
              <svg class="skills-box__icon">
                <use xlink:href="../img/sprite.svg#icon-gatsby"></use>
              </svg>
              Gatbsy
            </li>
            <li class="skills-box__item">
              <svg class="skills-box__icon">
                <use xlink:href="../img/sprite.svg#icon-react"></use>
              </svg>
              React
            </li>
            <li class="skills-box__item">
              <svg class="skills-box__icon">
                <use xlink:href="../img/sprite.svg#icon-typescript"></use>
              </svg>
              Typescript
            </li>
            <li class="skills-box__item">
              <svg class="skills-box__icon">
                <use xlink:href="../img/sprite.svg#icon-javascript"></use>
              </svg>
              Javascript ES6+
            </li>
            <li class="skills-box__item">
              <svg class="skills-box__icon">
                <use xlink:href="../img/sprite.svg#icon-styled-components"></use>
              </svg>
              Styled Components
            </li>
            <li class="skills-box__item">
              <svg class="skills-box__icon">
                <use xlink:href="../img/sprite.svg#icon-graphql"></use>
              </svg>
              GraphQL
            </li>
          </ul>
        </div>

        <!-- DEVELOPMENT -->
        <div class="skills-box__no-shadow">
          <h4 class="skills-box__header">
            <svg class="skills-box__header-icon">
              <use xlink:href="../img/sprite.svg#icon-cogs"></use>
            </svg>
            Development
          </h4>
          <ul class="skills-box__list">
            <li class="skills-box__item">
              <svg class="skills-box__icon">
                <use xlink:href="../img/sprite.svg#icon-git"></use>
              </svg>
              Git
            </li>
            <li class="skills-box__item">
              <svg class="skills-box__icon">
                <use xlink:href="../img/sprite.svg#icon-github"></use>
              </svg>
              GitHub
            </li>
            <li class="skills-box__item">
              <svg class="skills-box__icon">
                <use xlink:href="../img/sprite.svg#icon-codacy"></use>
              </svg>
              Codacy
            </li>
          </ul>
        </div>
    
        <!-- PRODUCTION -->
        <div class="skills-box__no-shadow">
          <h4 class="skills-box__header">
            <svg class="skills-box__header-icon">
              <use xlink:href="../img/sprite.svg#icon-cloud-upload"></use>
            </svg>
            Production
          </h4>
          <ul class="skills-box__list">
            <li class="skills-box__item">
              <svg class="skills-box__icon">
                <use xlink:href="../img/sprite.svg#icon-netlify"></use>
              </svg>
              Netlify
            </li>
            <li class="skills-box__item">
              <svg class="skills-box__icon">
                <use xlink:href="../img/sprite.svg#icon-google-domains"></use>
              </svg>
              Google Domains
            </li>
            <li class="skills-box__item">
              <svg class="skills-box__icon">
                <use xlink:href="../img/sprite.svg#icon-google-analytics"></use>
              </svg>
              Google Analytics
            </li>
          </ul>
        </div>
      </section>

      <!-- UX/UI MOCKS AND GRAPHIC DESIGN -->
      <section>
        <h2 class="projects-body__heading">UX/UI Mocks and Graphic Design</h2>
        <p class="projects-body__paragraph-spacing-below">Heavily relied on open-source assests to make use of the high quality material created or curated by the open-source community. For the full list, please refer to the <a href="https://github.com/JacobGrisham/Gatsby.js-and-Styled-Components#-attribution" target="_blank" rel="noopener noreferrer">attribute section of this GitHub repo</a>.</p>
        <p><a href="https://xd.adobe.com/view/7a47b313-e7c4-4e8b-a5ef-d096e883699b-2f14/" target="_blank" rel="noopener noreferrer">Protoyped website with a Mobile-first design</a> as practice for implementing the industry-standard principle.Below is an AdobeXD interactive prototype mock for the mobile view. Start clicking on the screen to see hints where you should click next (highlighted in blue).</p>
        <div class="adobexd">
          <img src="../img/iPhone.svg" alt="iPhone" class="adobexd--iphone">
          <iframe src="https://xd.adobe.com/embed/7a47b313-e7c4-4e8b-a5ef-d096e883699b-2f14/" frameborder="0" allowfullscreen class="adobexd--iphone--star-wars"></iframe>
        </div>
        <p><a href="https://xd.adobe.com/view/30388c86-a547-4b6b-9b93-a1ee3e1deb1d-656b/" target="_blank" rel="noopener noreferrer">Created prototype in AdobeXD</a> to prevent wasted engineering time, to practice UX/UI design, and to practice building from a UX/UI design specification. Below is an AdobeXD interactive prototype mock for the desktop view. Start clicking on the screen to see hints where you should click next (highlighted in blue).</p>
        <div class="adobexd">
          <img src="../img/MacBook-Pro.svg" alt="MacBook Pro" class="adobexd--macbook">
          <iframe src="https://xd.adobe.com/embed/30388c86-a547-4b6b-9b93-a1ee3e1deb1d-656b/" frameborder="0" allowfullscreen class="adobexd--macbook--star-wars"></iframe>
        </div>
      </section>

      <!-- DESIGN AND ARCHITECTURE -->
      <section>
        <h2 class="projects-body__heading">Design and Architecture</h2>
        <p class="projects-body__paragraph-spacing-below">Initially built this website with a backend server using the Python framework, Flask, which was primarily used for its templating capabilities offered by Jinja 2.0. The website was hosted on the free tier plan on Heroku, alongside two other websites using the free tier plan. The main problem with this approach was that it was both heavy and expensive. It was heavy in that Flask wasn't strictly neccessary to achieve templating. It was expensive in that the free tier plan on Heroku put the app to sleep after 30 minutes. Furthermore, the free dyno minutes would often expire by the 24th of each month, which effectively took down the website until the start of the next month. Therefore, after learning about React and the Jamstack, I put the two together and refactored this application by migrating from a server-based architecture with Flask to a static website architecture with Gatsby.js, and by switching cloud-hosting providers from Heroku to Netlify. The code is more simple, DRY, and modular with React. The website has better performance when loading pages with Gatsby and even supports offline capability with Progressive Web App service workers.</p>
        <p>Refactored plain CSS with Styled Components as a CSS alternative for better code organization, to practice working with CSS-in-JS, and to practice working with a new technology by only reading documentaton. Furthermore, Styled Components are the combination of the element and the rules that style it, so it's also less verbose than something like CSSModules.</p>
      </section>

      <!-- PRODUCTION METRICS -->
      <section>
        <h2>Production System Cost</h2>
        <ul class="projects-body__list">
          <li>Netlify Starter Plan: free</li>
          <li>GitHub Free Tier: free</li>
        </ul>
        <h2 class="projects-body__heading">Production Metrics</h2>
        <ul class="projects-body__list">
          <li><span class="projects-body__bold-text">Traffic</span>: 100+ total website visits since launch</li>
          <li><span class="projects-body__bold-text">Site Reliability</span>: 100% uptime service-level indicator (SLI) and available even when internet is disconnected thanks to Progressive Web App features</li>
          <li><span class="projects-body__bold-text">Security</span>: Mozzila Observatory</li>
          <li><span class="projects-body__bold-text">Performance</span>: from Google Lighthouse</li>
          <li><span class="projects-body__bold-text">Accessibility</span>: from Google Lighthouse</li>
          <li><span class="projects-body__bold-text">Cross-Browser Compatibility</span>: from LambdaTest</li>
        </ul>
      </section>

      <!-- LESSONS LEARNED -->
      <section>
        <h2 class="projects-body__heading">Lessons Learned</h2>
        <ul class="projects-body__list">
          <li>Before Refactor</li>
          <ul class="projects-body__list">
            <li>Prototyping in AdobeXD</li>
            <li>Building Front-End from Design Specs</li>
            <li>SVG in place of heavy CSS</li>
            <li>SVG animations</li>
            <li>Advanced CSS properties</li>
            <li>Git branch management</li>
          </ul>
          <li>During Refactor</li>
          <ul class="projects-body__list">
            <li>Gatsby.js</li>
            <li>Portal for Navbar</li>
            <li>StaticImage from gatsby-plugin-image</li>
            <li>Styled Components</li>
            <li>Extending styles</li>
            <li>Props</li>
            <li>Referencing other components</li>
            <li>GraphQL</li>
          </ul>
        </ul>
      </section>
    </div>

    <!-- FOOTER -->
    <footer class="footer">
      <p class="footer__fun-note">Made with<svg class="footer__icon"><use xlink:href="../img/sprite.svg#icon-heart"></use></svg>in SF</p>
      <p>Copyright &copy; <time id="date"></time> by Jacob Grisham</p>
    </footer>

  <!-- JAVASCRIPT -->
  <!-- Global site tag (gtag.js) - Google Analytics -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=G-SV51NLJS21"></script>
  <script type="text/javascript" src="../js/common.js"></script>
  </body>
</html>