-
Notifications
You must be signed in to change notification settings - Fork 0
/
rebuilding-my-website.html
266 lines (231 loc) · 13.8 KB
/
rebuilding-my-website.html
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
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Nick Scala | Rebuilding My Website</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!-- Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-9FX4SN3792"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-9FX4SN3792');
</script>
<!-- /Google Analytics -->
<!-- Metadata tags -->
<meta name="description" content="Rebuilding My Website">
<meta name="keywords" content="Nick Scala, Nicholas Scala, nickscala, nicholasscala, resume, portfolio, website portfolio, senior product manager, product management, product lead, product owner, agile, amazon, advertising, digital commerce, e-commerce, jetblue, UI, UX, web, responsive, development, personal">
<meta name="author" content="Nick Scala">
<meta name="copyright" content="Copyright (c) 2023 Nick Scala All rights reserved">
<!-- /Metadata tags -->
<!-- Favicon -->
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
<link rel="manifest" href="site.webmanifest">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">
<!-- /Favicon -->
<!-- Style sheets -->
<link rel="stylesheet" href="css/reset.css" type="text/css">
<link rel="stylesheet" href="css/bootstrap-grid.min.css" type="text/css">
<link rel="stylesheet" href="css/animations.css" type="text/css">
<link rel="stylesheet" href="css/perfect-scrollbar.css" type="text/css">
<link rel="stylesheet" href="css/owl.carousel.css" type="text/css">
<link rel="stylesheet" href="css/magnific-popup.css" type="text/css">
<link rel="stylesheet" href="css/main.css" type="text/css">
<link href="css/foundation.css" rel="stylesheet" type="text/css">
<link href="css/twentytwenty-no-compass.css" rel="stylesheet" type="text/css">
<!-- /Style sheets -->
<script src="js/modernizr.custom.js"></script>
</head>
<body>
<!-- Animated background -->
<div class="lm-animated-bg" style="background-image: url(img/header/main_bg.png);"></div>
<!-- /Animated background -->
<!-- Loading animation -->
<div class="preloader">
<div class="preloader-animation">
<div class="preloader-spinner">
</div>
</div>
</div>
<!-- /Loading animation -->
<div class="page">
<div class="page-content">
<!-- Header section -->
<header id="site_header" class="header mobile-menu-hide">
<!-- Title content -->
<div class="header-content">
<div class="header-photo">
<img src="img/header/main_photo.png" alt="Nick Scala avatar">
</div>
<div class="header-titles">
<h2>Nick Scala</h2>
<h4>Senior Product Manager</h4>
</div>
</div>
<!-- /Title content -->
<!-- Navigation links -->
<ul class="main-menu">
<li class="active">
<a href="index.html#home" class="nav-anim">
<span class="menu-icon lnr lnr-home"></span>
<span class="link-text">Home</span>
</a>
</li>
<li>
<a href="index.html#about" class="nav-anim">
<span class="menu-icon lnr lnr-user"></span>
<span class="link-text">About</span>
</a>
</li>
<li>
<a href="index.html#resume" class="nav-anim">
<span class="menu-icon lnr lnr-license"></span>
<span class="link-text">Resume</span>
</a>
</li>
<li>
<a href="index.html#work" class="nav-anim">
<span class="menu-icon lnr lnr-briefcase"></span>
<span class="link-text">Work</span>
</a>
</li>
<li>
<a href="index.html#music" class="nav-anim">
<span class="menu-icon lnr lnr-music-note"></span>
<span class="link-text">Music</span>
</a>
</li>
<li>
<a href="index.html#contact" class="nav-anim">
<span class="menu-icon lnr lnr-envelope"></span>
<span class="link-text">Contact</span>
</a>
</li>
</ul>
<!-- /Navigation links -->
</header>
<!-- /Header section -->
<!-- Mobile hamburger navigation -->
<div class="menu-toggle">
<span></span>
<span></span>
<span></span>
</div>
<!-- /Mobile hamburger navigation -->
<!-- Main content -->
<div class="content-area single-page-area">
<div class="single-page-content">
<article class="post">
<div class="post-thumbnail">
<img src="img/work_website/website_header.png" alt="New nickscala.com website">
</div>
<div class="post-content">
<!-- /Entry header -->
<header class="entry-header">
<h2 class="entry-title">Rebuilding My Website</h2>
</header>
<!-- /Entry header -->
<!-- Entry content -->
<div class="entry-content">
<div class="row">
<div class=" col-xs-12 col-sm-12 ">
<div class="col-inner">
<p>During the winter of 2021, I decided to dust off my old website and rebuild it. Originally created in 2013, the old website's information became outdated after years without updates and the overall experience felt stale and unengaging. I wanted to use this opportunity to improve my web development skills, refine my design skills, and test my product management skills on a project that when complete, would also serve as a platform to share my professional experiences and personal interests.</p>
<figure>
<div class="twentytwenty-container">
<img src="img/work_website/website_old.png" alt="Old website design">
<img src="img/work_website/website_new.png" alt="New website design">
</div>
<figcaption>Previous website design left, new design right.</figcaption>
</figure>
<p>Although the website is built on top of an HTML5 template (no Squarespace, Wix, or WordPress here), there was a significant amount of work that went into getting the site into a state that met my vision. Below are the highlights of those efforts:</p>
<ul>
<li>Scoured the web looking for an HTML5 template that was unique, responsive with a great UX specifically on mobile devices, and well reviewed.
</li>
<li>Researched hosting providers that were reliable, fast, and cost effective. I ultimately selected <a href="https://pages.github.com/" target="_blank" title="GitHub Pages">GitHub Pages</a> because in addition to meeting all three criteria, GitHub Pages also allowed me to establish a <a href="https://github.com/nickscala" target="_blank" title="Nick Scala's GitHub">presence on GitHub</a> and provide transparency into <a href="https://github.com/nickscala/nickscala.github.io" target="_blank" title="Nick Scala's Github">all of the commits</a> I've pushed to the site. Then, I pointed my registered domain to the GitHub directory.
</li>
<li>Established a JIRA board, created user stories, and prioritized a backlog to keep all of my thoughts and tasks organized, ensure that no feature went forgotten, and build the site in priority order.</li>
<li>Researched replacements for the template's PHP contact form solution due to known <a href="https://medium.com/@munish.walia/high-risk-vulnerabilities-in-php-web-applications-a38a75627a75" target="_blank" title="High-Risk Vulnerabilities in PHP Web Applications">PHP security vulnerabilities</a> and incompatibility with GitHub Pages before landing on <a href="https://formspree.io/" target="_blank" title="Formspree">Formspree's solution</a>. Then, implemented custom JS that bypassed the redirect to Formspree's "thank you" page to improve the user experience and display a unique confirmation message natively.
</li>
<li>Integrated <a href="https://zurb.com/playground/twentytwenty" target="_blank" title="Zurb's TwentyTwenty image slider">Zurb's TwentyTwenty image slider</a> JS, CSS, and HTML to showcase before and after image comparisons like the one found above and on other pages throughout the site.
</li>
<li>Configured <a href="https://marketingplatform.google.com/about/analytics/" target="_blank" title="Google Analytics">Google Analytics</a> and <a href="https://search.google.com/search-console/about" target="_blank" title="Google Search Console">Google Search Console</a> tools so I can measure the success of the new site.</li>
<li>Chose a blue color scheme as it conveys trust and dependability (important qualities for a product manager and a portfolio website) and then tested over 50 different blue gradients using tools like <a href="https://uigradients.com/" target="_blank" title="uiGradients website">uiGradients</a> before landing on #0575E6 and #021B79 as these shades felt professional, yet friendly and inviting.
</li>
<li>Tested 20 different sans-serif Google Fonts (Open Sans, Roboto, Montserrat, etc.) searching for a font that felt modern, but more importantly had good readability on screen and in print (for <a href="pdf/header/Nick_Scalas_Resume.pdf" target="_blank" title="Nick Scala's resume">my matching resume</a>) before landing on <a href="https://fonts.google.com/specimen/Assistant?query=assistant&preview.text_type=custom" target="_blank" title="Google Fonts - Assistant">Assistant</a>. Once Assistant was chosen as the body font, I looked for a complementary font for headings and selected <a href="https://fonts.google.com/specimen/Lato?query=lato&preview.text_type=custom" target="_blank" title="Google Fonts - Lato">Lato</a>.
</li>
<li>Used Adobe Photoshop to standardize sizing and resolution of all website images, create device mockups like the one found below and on other pages to showcase responsive design, and create a <a class="lightbox" href="android-chrome-512x512.png" target="_blank" title="Custom nickscala.com favicon">custom favicon</a> that matched the site's header font and blue gradient background.
</li>
<li>Ran <a href="https://developers.google.com/web/tools/lighthouse" target="_blank" title="Google's Lighthouse web development tool">Google's Lighthouse</a> web development tool to identify issues and improve performance and SEO of the site.
</li>
<li>Ran <a href="https://www.webaccessibility.com/" target="_blank" title="Level Access' Web Accessibility tester">Level Access' Web Accessibility tester</a> to identify issues and improve accessibility of the site.
</li>
<li>Used Adobe InDesign to update <a href="pdf/header/Nick_Scalas_Resume.pdf" target="_blank" title="Nick Scala's resume">my resume</a> to match the font, colors, and overall visual aesthetic of the site.
</li>
</ul>
<div class="work-image">
<figure>
<div class="work-item-img">
<img src="img/work_website/website_responsive.png" alt="Responsive website design">
<a class="lightbox" href="img/work_website/website_responsive.png" title="Responsive website design"></a>
<figcaption>Responsive website design.</figcaption>
</div>
</figure>
</div>
<p>No product launch is truly complete for a product manager unless proper KPIs are established and tracked. Given that this is a personal website that I am not actively driving traffic to and lacks explicit action beyond providing information, KPIs were tricky to establish. However, my main goal was to engage visitors with content they might be interested in and so I am mainly tracking Google Analytics' "average engagement time" metric. As of writing this article, average engagement time is up over 2,000% compared to my older website.</p>
<div class="work-image">
<figure>
<div class="work-item-img">
<img src="img/work_website/website_metrics.png" alt="Engagement metrics for nickscala.com via Google Analytics">
<a class="lightbox" href="img/work_website/website_metrics.png" title="Engagement metrics for nickscala.com via Google Analytics"></a>
<figcaption>Engagement metrics for nickscala.com via Google Analytics.</figcaption>
</div>
</figure>
</div>
</div>
</div>
</div>
</div>
<!-- /Entry content -->
<div class="entry-meta entry-meta-bottom">
<div class="date-author">
<span class="entry-date">
<i class="far fa-clock"></i>
<span class="entry-date"> February 04, 2021</span>
</span>
</div>
</div>
</div>
</article>
</div>
</div>
</div>
</div>
<!-- Additional scripts -->
<script src="js/jquery-2.1.3.min.js"></script>
<script src="js/modernizr.custom.js"></script>
<script src="js/animating.js"></script>
<script src="js/imagesloaded.pkgd.min.js"></script>
<script src='js/perfect-scrollbar.min.js'></script>
<script src='js/jquery.shuffle.min.js'></script>
<script src='js/masonry.pkgd.min.js'></script>
<script src='js/owl.carousel.min.js'></script>
<script src="js/jquery.magnific-popup.min.js"></script>
<script src="js/main.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="js/jquery.event.move.js"></script>
<script src="js/jquery.twentytwenty.js"></script>
<script>
$(window).load(function(){
$(".twentytwenty-container[data-orientation!='vertical']").twentytwenty({default_offset_pct: 0.4});
});
</script>
<!-- /Additional scripts -->
</body>
</html>