diff --git a/sample.pdf b/sample.pdf
index 4c96b9b..baaee58 100644
Binary files a/sample.pdf and b/sample.pdf differ
diff --git a/screenshot.png b/screenshot.png
index 62744c5..4aa5043 100644
Binary files a/screenshot.png and b/screenshot.png differ
diff --git a/src/components/dark.hbs b/src/components/dark.hbs
new file mode 100644
index 0000000..c65bb36
--- /dev/null
+++ b/src/components/dark.hbs
@@ -0,0 +1,25 @@
+
+
+
diff --git a/src/layouts/main.hbs b/src/layouts/main.hbs
index 91396bc..268a89c 100644
--- a/src/layouts/main.hbs
+++ b/src/layouts/main.hbs
@@ -17,11 +17,13 @@
href="/src/assets/logo.svg"
sizes="any"
type="image/svg+xml">
+
+ {{> components/dark.hbs }}
{{> components/basics.hbs }}
{{> components/skills.hbs }}
{{> components/languages.hbs }}
diff --git a/src/pages/index.json b/src/pages/index.json
index 9535284..bc71730 100644
--- a/src/pages/index.json
+++ b/src/pages/index.json
@@ -268,7 +268,7 @@
"mongodb": "tabler:brand-mongodb",
"mqtt": "mdi:mq",
"na": "gravity-ui--circle-exclamation-fill",
- "alacritty": "tabler:layout-board-split",
+ "alacritty": "simple-icons:alacritty",
"tui": "gravity-ui:terminal",
"awesomewm": "tabler:layout-board-split",
"wezterm": "simple-icons:wezterm",
diff --git a/src/styles/hexo.css b/src/styles/hexo.css
new file mode 100644
index 0000000..105af73
--- /dev/null
+++ b/src/styles/hexo.css
@@ -0,0 +1,131 @@
+/* color palette from github.com/metaory/hexocd-colorscheme
+ *
+ * █░█ █▀▀ ▀▄▀ █▀█ █▀▀ █▀▄
+ * █▀█ ██▄ █░█ █▄█ █▄▄ █▄▀
+ *
+ * * * * * * * * * * * * * */
+
+:root {
+ --c00: #443388;
+ --c01: #CC3377;
+ --ca1: #FF3399;
+ --c02: #55CC44;
+ --c03: #DDAA33;
+ --c04: #1177DD;
+ --c05: #6644DD;
+ --c06: #44DDBB;
+ --c07: #9999EE;
+
+ --c08: #5544AA;
+ --c09: #BB4488;
+ --c10: #77DD55;
+ --c11: #EEBB44;
+ --c12: #2299EE;
+ --c13: #8866EE;
+ --c14: #66EECC;
+ --c15: #AABBFF;
+
+ --cc0: #332266;
+ --cc1: #DD2266;
+ --cc2: #33BB33;
+ --cc3: #CC9922;
+ --cc4: #2244CC;
+ --cc5: #5522CC;
+ --cc6: #22CCAA;
+ --cc7: #8888EE;
+
+ --cy0: #6655BB;
+ --cy1: #AA5599;
+ --cy2: #99EE66;
+ --cy3: #FFCC55;
+ --cy4: #44BBFF;
+ --cy5: #9988FF;
+ --cy6: #88FFDD;
+ --cy7: #BBCCFF;
+
+ --cx0: #221155;
+ --cx1: #EE1155;
+ --cx2: #11AA22;
+ --cx3: #BB8811;
+ --cx4: #3311BB;
+ --cx5: #4422BB;
+ --cx6: #11BB99;
+ --cx7: #8877DD;
+
+ --cz0: #111133;
+ --cz1: #FF0044;
+ --cz2: #009911;
+ --cz3: #AA7700;
+ --cz4: #3300AA;
+ --cz5: #4411AA;
+ --cz6: #00AA88;
+ --cz7: #7766CC;
+
+ --zk0: #BB44AA;
+ --zk1: #BB55BB;
+ --zk2: #CC66CC;
+ --zk3: #CC77DD;
+ --zk4: #DD88DD;
+ --zk5: #DD99EE;
+ --zk6: #EEAAEE;
+ --zk7: #EEBBFF;
+ --zk8: #FFCCFF;
+ --zk9: #FFDDFF;
+
+ --pk0: #FF4488;
+ --pk1: #EE4499;
+ --pk2: #DD44AA;
+ --pk3: #CC44BB;
+ --pk4: #BB44CC;
+ --pk5: #AA44DD;
+ --pk6: #9944EE;
+ --pk7: #8844FF;
+ --pk8: #7755FF;
+ --pk9: #6655FF;
+
+ --sbg: #DD3366;
+ --sfg: #331155;
+ --wbg: #3311BB;
+ --wfg: #2299EE;
+ --ebg: #009911;
+ --efg: #f13344;
+ --xbg: #221155;
+
+ --xbg: #EEDDFF;
+ --xfg: #44BBFF;
+ --xgg: #DDCCFF33;
+
+ --sk0: #220044;
+ --sk1: #441155;
+ --sk2: #662266;
+ --sk3: #883377;
+ --sk4: #994488;
+ --sk5: #AA5599;
+ --sk6: #BB66AA;
+ --sk7: #CC77BB;
+ --sk8: #DD88CC;
+ --sk9: #EE99DD;
+
+ --wk0: #200244;
+ --wk1: #221155;
+ --wk2: #332266;
+ --wk3: #443388;
+ --wk4: #5544AA;
+ --wk5: #6655BB;
+ --wk6: #7766CC;
+ --wk7: #8877DD;
+ --wk8: #9999EE;
+ --wk9: #BBAAFF;
+
+ --ek0: #003322;
+ --ek1: #114433;
+ --ek2: #226644;
+ --ek3: #339955;
+ --ek4: #44AA66;
+ --ek5: #55BB77;
+ --ek6: #66CC88;
+ --ek7: #77DD99;
+ --ek8: #88EEAA;
+ --ek9: #99FFAA;
+}
+
diff --git a/src/styles/legacy.css b/src/styles/legacy.css
index 8b326c0..5421fe9 100644
--- a/src/styles/legacy.css
+++ b/src/styles/legacy.css
@@ -1,3 +1,4 @@
+
body::-webkit-scrollbar {
display: none;
}
@@ -8,11 +9,10 @@ html {
font-family: KR-M, monospace, sans-serif;
font-weight: Bold;
font-size: 14px;
- color: var(--wk5);
+ color: var(--fg);
margin: 0;
padding: 0;
zoom: normal;
-
}
p {
@@ -28,14 +28,14 @@ a:visited {
a,
span.url,
a:visited {
- color: var(--c05);
+ color: var(--ic);
}
span.icon {
width: 20px;
height: 20px;
opacity: 0.8;
- color: var(--c05);
+ color: var(--ic);
}
li {
@@ -59,7 +59,7 @@ h3 {
}
em {
- color: var(--wk7);
+ color: var(--f3);
opacity: .7;
}
@@ -92,18 +92,20 @@ strong {
margin: auto;
}
- color: var(--wk6);
+ color: var(--f2);
span.image {
- outline: solid 14px var(--xgg);
+ outline: solid 10px var(--xgg);
+ outline-offset: 6px;
padding: 10px;
+ margin: 0 20px;
justify-self: end;
border-radius: 40%;
background-color: var(--xgg);
backdrop-filter: contrast(94%);
>img {
- width: 80px;
+ width: 60px;
opacity: .9;
}
}
@@ -112,7 +114,7 @@ strong {
display: grid;
grid-template-columns: 2fr 1fr;
justify-content: center;
- color: var(--c05);
+ color: var(--ix);
align-items: center;
font-size: 3.8rem;
margin-bottom: .6em;
@@ -179,7 +181,6 @@ section.main-summary {
background: var(--xgg);
border-radius: var(--brl);
backdrop-filter: blur(var(--blur));
- color: var(--wk5);
>ul>li {
list-style: none;
@@ -263,7 +264,6 @@ section#languages {
.item>.fluency {
em {
- color: var(--wk7);
opacity: .7;
}
}
@@ -277,7 +277,6 @@ section#languages {
justify-content: start;
h3 {
- color: var(--wk5);
padding: 4px 8px;
border-radius: var(--brm);
background-color: var(--xgg);
@@ -311,7 +310,7 @@ section#interests {
font-family: KR-B;
width: max-content;
padding: 8px;
- color: var(--wk6);
+ color: var(--f2);
}
width: 50mm;
@@ -334,7 +333,7 @@ section#interests {
padding: 6px 8px;
&>span {
- color: var(--wk8);
+ color: var(--f4);
}
}
}
@@ -346,7 +345,7 @@ section#interests {
align-items: center;
gap: 10px;
padding: .4em .6em;
- color: var(--c13);
+ color: var(--iz);
text-transform: uppercase;
font-weight: 900;
border: none;
@@ -406,7 +405,6 @@ section#interests {
.name {
font-weight: 900;
font-size: 1.4em;
- color: var(--wk5);
}
.company::before,
@@ -414,7 +412,7 @@ section#interests {
.organization::before,
.awarder::before {
content: "at ";
- color: var(--wk7);
+ color: var(--f3);
font-style: italic;
}
@@ -430,7 +428,7 @@ section#interests {
display: block;
font-size: 1rem;
padding: 0.1em 0;
- color: var(--wk8);
+ color: var(--f4);
font-weight: 400;
}
@@ -446,7 +444,7 @@ section#interests {
padding: 6px;
font-size: 0.9rem;
line-height: 1;
- color: var(--wk6);
+ color: var(--f2);
border-radius: var(--brs);
background-color: var(--xgg);
border: 0 solid var(--cy2);
@@ -456,7 +454,6 @@ span.url:hover,
.keywords li:hover,
.courses li:hover {
background: var(--cy2);
- color: var(--wk5);
}
.highlights {
@@ -492,7 +489,7 @@ span.url:hover,
.level .bar {
width: 40mm !important;
- background-color: var(--wk9);
+ background-color: var(--f5);
border-radius: var(--brs);
display: block;
margin: 0 8px;
@@ -511,27 +508,27 @@ span.url:hover,
.level.beginner .bar::after {
border-radius: var(--brs);
- background: linear-gradient(90deg, var(--pk6), var(--pk7));
+ background: linear-gradient(90deg, var(--cc6), var(--pk7));
width: 25%;
}
.level.intermediate .bar::after {
border-radius: var(--brs);
- background: linear-gradient(90deg, var(--pk6), var(--pk9));
+ background: linear-gradient(90deg, var(--cc6), var(--pk9));
width: 55%;
}
.level.advanced .bar::after,
.level.fluent .bar::after {
- background: var(--c05);
- background: linear-gradient(90deg, var(--pk6), var(--cc5));
+ background: var(--ic);
+ background: linear-gradient(90deg, var(--cc6), var(--cc5));
border-radius: var(--brs);
width: 75%;
}
.level.master .bar::after,
.level.native.speaker .bar::after {
- background: linear-gradient(90deg, var(--pk6), var(--cx5));
+ background: linear-gradient(90deg, var(--cc6), var(--cx5));
border-radius: var(--brs);
width: 100%;
}
@@ -649,7 +646,7 @@ span.url {
max-width: 210mm;
& svg {
- fill: var(--c05);
+ fill: var(--ic);
background-color: var(--xgg);
border-radius: var(--brs);
}
@@ -679,14 +676,14 @@ svg.hr {
}
.item-count {
- color: var(--wk9);
+ color: var(--f5);
font-style: italic;
font-size: .6em;
vertical-align: top;
}
blockquote {
- color: var(--c05);
+ color: var(--ic);
}
@@ -705,11 +702,11 @@ ul.keywords {
padding: 4px 8px;
&>span.icon {
- color: var(--wk8);
+ color: var(--f4);
}
&>span {
- color: var(--wk6);
+ color: var(--f2);
}
}
}
diff --git a/src/styles/main.css b/src/styles/main.css
index 00c383b..abc1e7e 100644
--- a/src/styles/main.css
+++ b/src/styles/main.css
@@ -2,145 +2,22 @@
@tailwind components;
@tailwind utilities;
-
-/* color palette from github.com/metaory/hexocd-colorscheme
- *
- * █░█ █▀▀ ▀▄▀ █▀█ █▀▀ █▀▄
- * █▀█ ██▄ █░█ █▄█ █▄▄ █▄▀
- *
- * * * * * * * * * * * * * */
-
:root {
- --cww: #FFF;
- --cbb: #000;
-
--brx: 18px;
--brl: 14px;
--brm: 10px;
--brs: 6px;
--blur: 8px;
- --c00: #443388;
- --c01: #CC3377;
- --ca1: #FF3399;
- --c02: #55CC44;
- --c03: #DDAA33;
- --c04: #1177DD;
- --c05: #6644DD;
- --c06: #44DDBB;
- --c07: #9999EE;
-
- --c08: #5544AA;
- --c09: #BB4488;
- --c10: #77DD55;
- --c11: #EEBB44;
- --c12: #2299EE;
- --c13: #8866EE;
- --c14: #66EECC;
- --c15: #AABBFF;
-
- --cc0: #332266;
- --cc1: #DD2266;
- --cc2: #33BB33;
- --cc3: #CC9922;
- --cc4: #2244CC;
- --cc5: #5522CC;
- --cc6: #22CCAA;
- --cc7: #8888EE;
-
- --cy0: #6655BB;
- --cy1: #AA5599;
- --cy2: #99EE66;
- --cy3: #FFCC55;
- --cy4: #44BBFF;
- --cy5: #9988FF;
- --cy6: #88FFDD;
- --cy7: #BBCCFF;
-
- --cx0: #221155;
- --cx1: #EE1155;
- --cx2: #11AA22;
- --cx3: #BB8811;
- --cx4: #3311BB;
- --cx5: #4422BB;
- --cx6: #11BB99;
- --cx7: #8877DD;
-
- --cz0: #111133;
- --cz1: #FF0044;
- --cz2: #009911;
- --cz3: #AA7700;
- --cz4: #3300AA;
- --cz5: #4411AA;
- --cz6: #00AA88;
- --cz7: #7766CC;
-
- --zk0: #BB44AA;
- --zk1: #BB55BB;
- --zk2: #CC66CC;
- --zk3: #CC77DD;
- --zk4: #DD88DD;
- --zk5: #DD99EE;
- --zk6: #EEAAEE;
- --zk7: #EEBBFF;
- --zk8: #FFCCFF;
- --zk9: #FFDDFF;
-
- --pk0: #FF4488;
- --pk1: #EE4499;
- --pk2: #DD44AA;
- --pk3: #CC44BB;
- --pk4: #BB44CC;
- --pk5: #AA44DD;
- --pk6: #9944EE;
- --pk7: #8844FF;
- --pk8: #7755FF;
- --pk9: #6655FF;
-
- --sbg: #DD3366;
- --sfg: #331155;
- --wbg: #3311BB;
- --wfg: #2299EE;
- --ebg: #009911;
- --efg: #113344;
- --xbg: #221155;
-
- --xbg: #EEDDFF;
- --xfg: #44BBFF;
- --xgg: #DDCCFF33;
-
- --sk0: #220044;
- --sk1: #441155;
- --sk2: #662266;
- --sk3: #883377;
- --sk4: #994488;
- --sk5: #AA5599;
- --sk6: #BB66AA;
- --sk7: #CC77BB;
- --sk8: #DD88CC;
- --sk9: #EE99DD;
-
- --wk0: #200244;
- --wk1: #221155;
- --wk2: #332266;
- --wk3: #443388;
- --wk4: #5544AA;
- --wk5: #6655BB;
- --wk6: #7766CC;
- --wk7: #8877DD;
- --wk8: #9999EE;
- --wk9: #BBAAFF;
-
- --ek0: #003322;
- --ek1: #114433;
- --ek2: #226644;
- --ek3: #339955;
- --ek4: #44AA66;
- --ek5: #55BB77;
- --ek6: #66CC88;
- --ek7: #77DD99;
- --ek8: #88EEAA;
- --ek9: #99FFAA;
+ --bg: white;
+ --fg: var(--wk5);
+ --f2: var(--wk6);
+ --f3: var(--wk7);
+ --f4: var(--wk8);
+ --f5: var(--wk9);
+ --ic: var(--c05);
+ --ix: var(--c05);
+ --iz: var(--c13);
}
/* fonts from monaspace.githubnext.com */
@@ -181,7 +58,11 @@
}
html {
- background: white;
+ background-color: var(--bg);
+}
+
+* {
+ transition: all .4s linear;
}
body {
@@ -199,6 +80,24 @@ main {
background-color: var(--xgg);
}
+html.dark {
+
+ --bg: var(--wk0);
+ --fg: var(--wk9);
+ --f2: var(--c03);
+ --f3: var(--cy4);
+ --f4: var(--c06);
+ --f5: var(--xgg);
+ --ic: var(--cy4);
+ --ix: var(--pk2);
+ --iz: var(--pk1);
+
+ #scheme-toggle {
+ --fg: var(--cy3);
+ --bg: var(--c01);
+ }
+}
+
div.line-pattern {
height: 16px;
display: block;
@@ -276,6 +175,44 @@ section {
font-family: AR-M, system-ui, sans-serif;
}
+
+#scheme-toggle {
+ --fg: var(--cc6);
+ --bg: var(--wk4);
+
+ &button {
+ z-index: 1;
+ display: grid;
+ position: fixed;
+ bottom: 20px;
+ right: 20px;
+ padding: 10px;
+ background: blue;
+ border-radius: 42%;
+ outline: solid 12px var(--xgg);
+ background-color: var(--bg);
+ box-shadow: 0 0 40px 10px var(--fg);
+ outline-offset: -12px;
+ opacity: .8;
+ border: solid 6px var(--fg);
+
+ &:hover {
+ opacity: 1;
+ box-shadow: 0 0 30px 10px var(--fg);
+ }
+
+ &>span {
+ color: var(--fg);
+ width: 26px;
+ height: 26px;
+ }
+ }
+
+ .hidden {
+ display: none;
+ }
+}
+
@media (max-width: 600px) {
html,
@@ -332,3 +269,9 @@ section {
size: A4;
margin: 0;
}
+
+@media print {
+ #scheme-toggle * {
+ display: none;
+ }
+}
diff --git a/vite.config.js b/vite.config.js
index 1fdc826..c6650b6 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -15,7 +15,15 @@ const { ICONS, TITLES } = readdirSync('./src/pages').reduce(
TITLES: { ...acc.TITLES, ...sectionTitles },
}
},
- { ICONS: {}, TITLES: {} }
+ {
+ ICONS: {
+ // dark: 'mage:moon-fill',
+ // light: 'mage:sun-fill',
+ dark: 'line-md:sunny-filled-loop-to-moon-filled-alt-loop-transition',
+ light: 'line-md:moon-filled-alt-to-sunny-filled-loop-transition',
+ },
+ TITLES: {},
+ }
)
const getIcon = x => `icon-[${ICONS[x.toLowerCase()] || ICONS.na}]`.replace(':', '--')