Skip to content

Commit b6f73f3

Browse files
author
Jimmy
committed
Dark mode support. PWA
1 parent 66fb7ee commit b6f73f3

12 files changed

+134
-39
lines changed

Diff for: ‎assets/.DS_Store

6 KB
Binary file not shown.

Diff for: ‎assets/css/app.css

+40-25
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ main {
3838
}
3939

4040
.container {
41-
background-color: white;
41+
background-color: var(--colors-site-bg);
4242
}
4343

4444
.italic {
@@ -55,7 +55,7 @@ main {
5555

5656
h1 {
5757
margin: 0.5em 0 0 0;
58-
color: white;
58+
color: #FFF;
5959
font-family: var(--fonts-raleway);
6060
font-size: 2.5em;
6161
letter-spacing: 1em;
@@ -78,7 +78,7 @@ h3 {
7878
font-family: var(--fonts-raleway);
7979
color: var(--colors-pink);
8080
text-transform: uppercase;
81-
background-color: var(--colors-dark-grey);
81+
background-color: var(--colors-heading-background);
8282
font-size: 14px;
8383
text-align: center;
8484
font-weight: 700;
@@ -90,7 +90,7 @@ h3 {
9090

9191
h4 {
9292
font-family: var(--fonts-raleway);
93-
color: var(--colors-dark-grey);
93+
color: var(--colors-subheading);
9494
text-align: center;
9595
margin: 1em 0 0 0;
9696
letter-spacing: 0.4em;
@@ -104,6 +104,7 @@ nav {
104104
padding: 0 1em;
105105
height: 100%;
106106
font-size: 14px;
107+
border-radius: 2px;
107108
}
108109

109110
nav .profile-photo {
@@ -139,17 +140,10 @@ nav .expertise {
139140
padding: 0;
140141
}
141142

142-
nav .expertise li {
143-
margin-left: 10px;
144-
color: var(--colors-dark-grey);
145-
letter-spacing: 3px;
146-
font-weight: 600;
147-
line-height: 3em;
148-
}
149-
150143
nav section p {
151144
margin-left: 10px;
152145
font-size: 16px;
146+
color: var(--colors-sidebar-font);
153147
}
154148

155149
main hr.thin {
@@ -192,31 +186,38 @@ main .divider .diamond {
192186
height: 1.5em;
193187
border: 1px solid #999;
194188
transform: rotate(45deg);
195-
background-color: white;
189+
background-color: var(--colors-diamond-background);
196190
border-radius:2px;
197191
}
198192

199193
main .role {
200194
margin-top: 3em;
201195
}
202196

203-
main section.skills ul {
204-
counter-reset: index;
197+
main section.skills ul.gradient {
198+
counter-reset: primary;
199+
counter-set: primary 0;
205200
padding: 0;
201+
width: 100%;
202+
}
203+
204+
main .skills-sections {
205+
display: flex;
206+
justify-content: space-between;
206207
}
207208

208209
/* List element */
209-
main section.skills ul li {
210-
counter-increment: index;
210+
main ul.gradient li {
211+
counter-increment: primary;
211212
display: flex;
212213
align-items: center;
213214
padding: 12px 0;
214215
box-sizing: border-box;
215216
}
216217

217218
/* Element counter */
218-
main section.skills ul li::before {
219-
content: counters(index, ".", decimal-leading-zero);
219+
main ul.gradient li::before {
220+
content: counters(primary, ".", decimal-leading-zero);
220221
font-size: 1.5rem;
221222
text-align: right;
222223
font-weight: bold;
@@ -227,11 +228,25 @@ main section.skills ul li::before {
227228
background-image: linear-gradient(to bottom, var(--colors-body-font), var(--colors-pink));
228229
background-attachment: fixed;
229230
-webkit-background-clip: text;
231+
background-clip: text;
230232
-webkit-text-fill-color: transparent;
231233
}
232234

235+
main ul.secondary {
236+
counter-reset: secondary;
237+
counter-set: secondary 3;
238+
}
239+
240+
main ul.secondary li {
241+
counter-increment: secondary;
242+
}
243+
244+
main ul.secondary li::before {
245+
content: counters(secondary, ".", decimal-leading-zero);
246+
}
247+
233248
/* Element separation */
234-
main section.skills ul li + li {
249+
main section.skills ul.gradient li + li {
235250
border-top: 1px solid rgba(50,50,50,0.2);
236251
}
237252

@@ -293,17 +308,17 @@ main header .head-container {
293308
top: 0;
294309
z-index: 0;
295310
opacity: 0.3;
311+
border-radius: 2px;
296312

297313
animation: animate-video 25s ease-in-out infinite;
298-
animation-delay: 3s;
299314
}
300315

301316
@keyframes animate-video {
302317
0% {opacity: 0;}
303-
10% {opacity: 0.1;}
304-
20% {opacity: 0.5;}
318+
10% {opacity: 0.0;}
319+
20% {opacity: 0.1;}
305320
30% {opacity: 0.3;}
306-
60% {opacity: 0.3;}
321+
60% {opacity: 0.5;}
307322
80% {opacity: 0.1;}
308323
100% {opacity: 0.01;}
309324
}
@@ -384,4 +399,4 @@ main header h1 span {
384399
nav .profile-photo img {
385400
margin-top: 1em;
386401
}
387-
}
402+
}

Diff for: ‎assets/css/vars.css

+21
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,31 @@
77
--colors-dark-grey: #333;
88
--colors-light-grey: #666;
99
--colors-body-font: #333;
10+
--colors-sidebar-font: #333;
11+
--colors-heading: #FFF;
12+
--colors-subheading: #333;
13+
--colors-heading-background: #333;
14+
--colors-site-bg: #FFF;
15+
--colors-sidebar-bg: #E1D6CE;
16+
--colors-diamond-background: #FFF;
1017

1118
--fonts-montserrat: 'Montserrat';
1219
--fonts-body: 'Open Sans';
1320
--fonts-condensed: 'Open Sans Condensed';
1421
--fonts-raleway: 'Raleway';
1522
--fonts-karla: 'Karla';
23+
}
24+
25+
/** Creepers be creepers */
26+
@media (prefers-color-scheme: dark) {
27+
:root {
28+
--colors-heading: #333;
29+
--colors-subheading: #333;
30+
--colors-heading-background: #555;
31+
--colors-body-font: #FFF;
32+
--colors-site-bg: #333;
33+
--colors-sidebar-bg: #E1D6CE;
34+
--colors-sidebar-font: #333;
35+
--colors-diamond-background: #555;
36+
}
1637
}

Diff for: ‎assets/js/main.8e8cdce43303975b7fb1.bundle.js

+1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

Diff for: ‎assets/js/main.dc7bcca593c26407e400.bundle.js renamed to ‎assets/js/main.de29a15eceb307875c2a.bundle.js

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

Diff for: ‎assets/js/sw.js

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
var CACHE_NAME = 'jimmy-cache-v1';
2+
var urlsToCache = ['/index.html'];
3+
4+
self.addEventListener('install', function (event) {
5+
// Perform install steps
6+
event.waitUntil(
7+
caches.open(CACHE_NAME).then(function (cache) {
8+
return cache.addAll(urlsToCache);
9+
})
10+
);
11+
});
12+
13+
// https://developers.google.com/web/ilt/pwa/caching-files-with-service-worker
14+
self.addEventListener('fetch', function (event) {
15+
16+
// Network falling back to the cache
17+
event.respondWith(
18+
fetch(event.request).catch(function() {
19+
return caches.match(event.request);
20+
})
21+
);
22+
});
23+
24+
self.addEventListener('activate', function (event) {
25+
event.waitUntil(
26+
caches.keys().then(function (cacheNames) {
27+
return Promise.all(
28+
cacheNames.filter(function (cacheName) {
29+
return urlsToCache.includes(cacheName);
30+
}).map(function (cacheName) {
31+
return caches.delete(cacheName);
32+
})
33+
);
34+
})
35+
);
36+
});

Diff for: ‎index.ejs

+14-5
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313
<link rel="shortcut icon" href="/favicon.ico">
1414
<meta name="apple-mobile-web-app-status-bar-style" content="default">
1515
<meta name="application-name" content="James Resume">
16+
<meta name="color-scheme" content="dark light">
1617

1718
<link rel="apple-touch-icon" sizes="180x180" href="/assets/img/apple-touch-icon.png">
1819
<link rel="icon" type="image/png" href="/assets/img/favicon-32x32.png" sizes="32x32">
@@ -282,11 +283,19 @@
282283
<section class="skills">
283284
<h3>CORE TECH STACK</h3>
284285

285-
<ul>
286-
<li>HTML</li>
287-
<li>CSS</li>
288-
<li>JavaScript</li>
289-
</ul>
286+
<!-- <div class="skills-sections">
287+
<ul class="gradient primary">
288+
<li>HTML</li>
289+
<li>CSS</li>
290+
<li>JavaScript</li>
291+
</ul>
292+
<ul class="gradient secondary">
293+
<li>Accessibility</li>
294+
<li>SEO</li>
295+
<li>InfoSec</li>
296+
<li>i8ln</li>
297+
</ul>
298+
</div> -->
290299

291300
<div class="chart-container">
292301
<svg version="1.1" id="wp-chart" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 650 650" class="skills-chart">

Diff for: ‎index.html

+1-1
Large diffs are not rendered by default.

Diff for: ‎manifest.json

+7-3
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,17 @@
11
{
2-
"name": "",
2+
"name": "James Harris",
3+
"short_name": "JH Profile",
4+
"description": "Personal profile and work experience",
5+
"start_url": "/",
6+
"id": "/",
37
"icons": [
48
{
5-
"src": "/dist/assets/img/android-chrome-192x192.png",
9+
"src": "/assets/img/android-chrome-192x192.png",
610
"sizes": "192x192",
711
"type": "image/png"
812
},
913
{
10-
"src": "/dist/assets/img/android-chrome-256x256.png",
14+
"src": "/assets/img/android-chrome-256x256.png",
1115
"sizes": "256x256",
1216
"type": "image/png"
1317
}

Diff for: ‎src/app.ts

+8-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,10 @@
11
import SkillsChart from "./skills";
22

3-
const skillsChart = new SkillsChart('svg.skills-chart');
3+
const skillsChart = new SkillsChart('svg.skills-chart');
4+
5+
if ('serviceWorker' in navigator) {
6+
navigator.serviceWorker.register('./assets/js/sw.js');
7+
}
8+
else {
9+
console.log('no service workers');
10+
}

Diff for: ‎tsconfig.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212

1313
/* Language and Environment */
1414
"target": "ESNext", /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
15-
"lib": ["ESNext"], /* Specify a set of bundled library declaration files that describe the target runtime environment. */
15+
"lib": ["ESNext", "DOM"], /* Specify a set of bundled library declaration files that describe the target runtime environment. */
1616
// "jsx": "preserve", /* Specify what JSX code is generated. */
1717
// "experimentalDecorators": true, /* Enable experimental support for TC39 stage 2 draft decorators. */
1818
// "emitDecoratorMetadata": true, /* Emit design-type metadata for decorated declarations in source files. */

Diff for: ‎webpack.config.js

+4-2
Original file line numberDiff line numberDiff line change
@@ -32,8 +32,10 @@ module.exports = function(env, argv) {
3232
compress: true,
3333
hot: true,
3434
port,
35-
host: 'local-ip',
36-
allowedHosts: "all"
35+
host: 'localhost',
36+
allowedHosts: "all",
37+
server: 'https',
38+
http2: true
3739
},
3840

3941
devtool: false,

0 commit comments

Comments
 (0)