diff --git a/_includes/footer.html b/_includes/footer.html
index 57cc041..315e032 100644
--- a/_includes/footer.html
+++ b/_includes/footer.html
@@ -1 +1,13 @@
-© 2022
{{ page.title }} ā Max Hutz {% include header.html %} {{ content }} {% include footer.html %}
\ No newline at end of file
+
+
+
+ {{ page.title }} ā Max Hutz
+
+
+ {% include header.html %}
+
+ {{ content }}
+
+ {% include footer.html %}
+
+
\ No newline at end of file
diff --git a/index.html b/index.html
index be6ccdd..404340c 100644
--- a/index.html
+++ b/index.html
@@ -1 +1,52 @@
---- title: Home description: This is the home page of Maxim Voldman Hutz's personal website. layout: default ---
Hey! š I'm Max Hutz. Software engineer in New York. Iām a passionate computer science student skilled in building responsive, full-stack applications. I love learning from colleagues and teaching future developers. I thrive where teamwork and creativity are key.
+
+
+
+
Hey! š I'm Max Hutz.
+ Software engineer in New York.
+
+
+ Iām a passionate computer science student skilled in building responsive,
+ full-stack applications. I love learning from colleagues and teaching future
+ developers. I thrive where teamwork and creativity are key.
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/resume.html b/resume.html
index 0d8806b..2c473b3 100644
--- a/resume.html
+++ b/resume.html
@@ -1 +1,178 @@
-Resume of Maxim Voldman Hutz Created mobile companion to Fresh Manuals website.
Built user interface using React/React-Native Used Firestore/Firebase to store and access user account data Used Fetch API to request user manual data from website API endpoints Integrated paid yahoo search results into mobile search results Software developer in project team developing a user manual aggregator site Fresh Manuals .
Used PHP to extract data on user manuals from individual websites and aggregators Over 20 individual web scrapers developed and customized to individual websites Created PDF viewer using Javascript, HTML, and CSS to upload/print files JAVASCRIPT TYPESCRIPT PYTHON JAVA HTML CSS C C++ PHP OBJECTIVE-C REACT REACT-NATIVE Introduction to Information Technology & Web Science Foundations of Human Computer Interactions Rensselaer Center for Open Source Multivariate Calculus and Matrix Algebra Introductions to Algorithms Freshman Year (4.0 GPA, Dean's List Fall & Spring) Foundations of Computer Science Rensselaer Center for Open Source Physics I Calculus I Calculus II Introduction to Logic Language and Power Data Structures Resume of Maxim Voldman Hutz
+
+
+
+
+
+
+
+
+
+
+
+ Created mobile companion to
+ Fresh Manuals
+ website.
+
+ Built user interface using React/React-Native
+ Used Firestore/Firebase to store and access user account data
+ Used Fetch API to request user manual data from website API endpoints
+ Integrated paid yahoo search results into mobile search results
+
+
+
+
+ Software developer in project team developing a user manual aggregator site
+ Fresh Manuals .
+
+
+ Used PHP to extract data on user manuals from individual websites and aggregators
+ Over 20 individual web scrapers developed and customized to individual websites
+ Created PDF viewer using Javascript, HTML, and CSS to upload/print files
+
+
+
+
+
+
+
+ JAVASCRIPT
+ TYPESCRIPT
+ PYTHON
+ JAVA
+ HTML
+ CSS
+ C
+ C++
+ PHP
+ OBJECTIVE-C
+ REACT
+ REACT-NATIVE
+
+
+
+
+
+
+
+
+
+ Introduction to Information Technology & Web Science
+ Foundations of Human Computer Interactions
+ Rensselaer Center for Open Source
+ Multivariate Calculus and Matrix Algebra
+ Introductions to Algorithms
+
+
+
+
+ Freshman Year (4.0 GPA, Dean's List Fall & Spring)
+
+
+
+ Foundations of Computer Science
+ Rensselaer Center for Open Source
+ Physics I
+ Calculus I
+ Calculus II
+ Introduction to Logic
+ Language and Power
+ Data Structures
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/styles/404.css b/styles/404.css
index 839d302..24a0ed0 100644
--- a/styles/404.css
+++ b/styles/404.css
@@ -1 +1,30 @@
-#notfound{--color:var(--dark) linear-gradient(#0000, #0003);flex:1;display:flex;justify-content:center;align-items:center;color:#fff;flex-direction:column;gap:20px}#notfound>*{max-width:300px}#text-outer>i{font-size:30px}#text-outer{display:inline-flex;flex-direction:column;align-items:center;font-size:25px}#text-404{font-size:160px;line-height:1}
\ No newline at end of file
+#notfound {
+ --color: var(--dark) linear-gradient(#0000, #0003);
+ flex: 1;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ color: white;
+ flex-direction: column;
+ gap: 20px;
+}
+
+#notfound > * {
+ max-width: 300px;
+}
+
+#text-outer > i {
+ font-size: 30px;
+}
+
+#text-outer {
+ display: inline-flex;
+ flex-direction: column;
+ align-items: center;
+ font-size: 25px;
+}
+
+#text-404 {
+ font-size: 160px;
+ line-height: 1;
+}
\ No newline at end of file
diff --git a/styles/default.css b/styles/default.css
index 3b264dc..54b66dc 100644
--- a/styles/default.css
+++ b/styles/default.css
@@ -1 +1,252 @@
-html{scroll-behavior:smooth}body{flex-direction:column;min-height:100vh;width:min(100vw,1024px);box-sizing:border-box;margin:auto}*{text-decoration:none}button{background-color:transparent}.pre{all:unset;white-space:pre}.nav-link,h1,h2,p{font-family:"Open Sans";font-weight:900}.nav-link{color:var(--color);text-decoration:none}.shadow{filter:drop-shadow(0 4px 0#0004)}.button,.icon,.r-icon{display:inline-flex;align-items:center;justify-content:center}.icon::before,.r-icon::after{font-family:"Material Symbols Outlined";content:attr(data-i)}.icon::before{font-size:36px;margin-right:5px}.r-icon::after{margin-left:5px}h1,h2,p{font-size:40px}h2,p{font-size:30px}i{font-size:"Source Serif Pro"}p{font-size:20px;font-weight:100}.lighter{background:#fff4}.darker{background:#0004}hr{height:1px;width:100%}.button{color:var(--color);position:relative;padding:10px 30px;font-size:20px;cursor:pointer}.button::before{position:absolute;width:100%;height:100%;top:0;left:0;background:var(--color);opacity:25%;content:"";border-radius:10px}.width-pad{width:100vw;background-color:var(--color);padding:10px 20px;box-sizing:border-box}.png-icon{filter:brightness(0) invert(1)}#about,body,nav{display:flex}#about{position:relative;margin:auto;flex-direction:column;justify-content:center;align-items:flex-start;max-width:1024px;min-height:85vh;color:var(--dark);box-sizing:border-box;gap:30px}#about>*{max-width:600px}nav{flex-wrap:wrap;width:100%}#inner-nav{display:inline-flex;flex-grow:1;gap:20px;flex-wrap:wrap}#projects{margin:30px auto;position:relative;display:flex;flex-direction:column;align-items:flex-start;max-width:1024px;min-height:100vh;color:#fff;box-sizing:border-box;gap:30px}#project-list,.project-item{overflow:visible;display:flex}#project-list{flex-wrap:wrap;width:100%;gap:20px}.project-item{min-width:max(40%,300px);flex:1;height:300px;background-color:var(--color);border-radius:10px;flex-direction:column}.project-link{color:#fff;background-color:#0005;padding:10px;border-radius:0 0 10px 10px}#experience-button{align-self:center}#menu{top:0;left:0;max-width:none;max-height:none;position:fixed;background-color:var(--light);color:var(--dark);width:100vw;font-size:25px;overflow:visible}#menu-top{display:flex;align-items:center;transform:translateY(-1.5px)}#menu-inner{max-width:1024px;display:flex;flex-direction:column;gap:30px;margin:auto auto 50px}@media (max-width:464px){.nav2,.nav3{display:none}}@media (max-width:813px) and (min-width:465px){.nav1,.nav3{display:none}}@media (min-width:814px){.nav1,.nav2{display:none}}
\ No newline at end of file
+html {
+ scroll-behavior: smooth;
+}
+
+body {
+ display: flex;
+ flex-direction: column;
+ min-height: 100vh;
+ width: min(100vw, 1024px);
+ box-sizing: border-box;
+ margin: auto;
+}
+
+/*----------------------------------------------------------------------------*/
+
+* {
+ text-decoration: none;
+}
+
+button {
+ background-color: transparent;
+}
+
+.pre {
+ all: unset;
+ white-space: pre;
+}
+
+.nav-link {
+ color: var(--color);
+ text-decoration: none;
+ font-weight: 900;
+ font-family: "Open Sans";
+}
+
+.shadow {
+ filter: drop-shadow(0 4px 0 #0004);
+}
+
+.icon, .r-icon, .button {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.icon::before {
+ font-family: 'Material Symbols Outlined';
+ content: attr(data-i);
+ font-size: 36px;
+ margin-right: 5px;
+}
+
+.r-icon::after {
+ font-family: 'Material Symbols Outlined';
+ content: attr(data-i);
+ margin-left: 5px;
+}
+
+h1 {
+ font-size: 40px;
+ font-family: "Open Sans";
+ font-weight: 900;
+}
+
+h2 {
+ font-size: 30px;
+ font-family: "Open Sans";
+ font-weight: 900;
+}
+
+i {
+ font-size: 20px;
+ font-size: "Source Serif Pro";
+}
+
+p {
+ font-size: 20px;
+ font-family: "Open Sans";
+ font-weight: 100;
+}
+
+.lighter {
+ background: #fff4;
+}
+
+.darker {
+ background: #0004;
+}
+
+hr {
+ height: 1px;
+ width: 100%;
+}
+
+.button {
+ color: var(--color);
+ position: relative;
+ padding: 10px 30px;
+ font-size: 20px;
+ cursor: pointer;
+}
+
+.button::before {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ top: 0;
+ left: 0;
+ background: var(--color);
+ opacity: 25%;
+ content: "";
+ border-radius: 10px;
+}
+
+.width-pad {
+ width: 100vw;
+ background-color: var(--color);
+ padding: 10px 20px;
+ box-sizing: border-box;
+}
+
+.png-icon {
+ filter: brightness(0) invert(1);
+}
+
+/*----------------------------------------------------------------------------*/
+
+#about {
+ position: relative;
+ margin: auto;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: flex-start;
+ max-width: 1024px;
+ min-height: 85vh;
+ color: var(--dark);
+ box-sizing: border-box;
+ gap: 30px;
+}
+
+#about > * {
+ max-width: 600px;
+}
+
+nav {
+ display: flex;
+ flex-wrap: wrap;
+ width: 100%;
+}
+
+#inner-nav {
+ display: inline-flex;
+ flex-grow: 1;
+ gap: 20px;
+ flex-wrap: wrap;
+}
+
+/*----------------------------------------------------------------------------*/
+
+#projects {
+ margin: 30px auto;
+ position: relative;
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ max-width: 1024px;
+ min-height: 100vh;
+ color: white;
+ box-sizing: border-box;
+ gap: 30px;
+}
+
+#project-list {
+ overflow: visible;
+ display: flex;
+ flex-wrap: wrap;
+ width: 100%;
+ gap: 20px;
+}
+
+.project-item {
+ min-width: max(40%, 300px);
+ flex: 1;
+ height: 300px;
+ background-color: var(--color);
+ border-radius: 10px;
+ overflow: visible;
+ display: flex;
+ flex-direction: column;
+}
+
+.project-link {
+ color: white;
+ background-color: #0005;
+ padding: 10px;
+ border-radius: 0 0 10px 10px;
+}
+
+#experience-button {
+ align-self: center;
+}
+
+/*----------------------------------------------------------------------------*/
+
+#menu {
+ top: 0;
+ left: 0;
+ max-width: none;
+ max-height: none;
+ position: fixed;
+ background-color: var(--light);
+ color: var(--dark);
+ width: 100vw;
+ font-size: 25px;
+ overflow: visible;
+}
+
+#menu-top {
+ display: flex;
+ align-items: center;
+ transform: translateY(-1.5px);
+}
+
+#menu-inner {
+ max-width: 1024px;
+ display: flex;
+ flex-direction: column;
+ gap: 30px;
+ margin: auto;
+ margin-bottom: 50px;
+}
+
+/*----------------------------------------------------------------------------*/
+
+@media (max-width: 464px) {
+ .nav2, .nav3 {
+ display: none;
+ }
+}
+
+@media (max-width: 813px) and (min-width: 465px) {
+ .nav1, .nav3 {
+ display: none;
+ }
+}
+
+@media (min-width: 814px) {
+ .nav1, .nav2 {
+ display: none;
+ }
+}
\ No newline at end of file
diff --git a/styles/footer.css b/styles/footer.css
index a405696..f9e94d1 100644
--- a/styles/footer.css
+++ b/styles/footer.css
@@ -1 +1,12 @@
-footer{display:flex;align-items:center;color:#fff;max-width:1024px;margin:auto;gap:10px}footer::before{filter:brightness(.8)}
\ No newline at end of file
+footer {
+ display: flex;
+ align-items: center;
+ color: white;
+ max-width: 1024px;
+ margin: auto;
+ gap: 10px;
+}
+
+footer::before {
+ filter: brightness(0.8);
+}
\ No newline at end of file
diff --git a/styles/global.css b/styles/global.css
index 042f141..4616d26 100644
--- a/styles/global.css
+++ b/styles/global.css
@@ -1 +1,67 @@
-*{padding:0;border:0;margin:0;outline:0}:root{--light:#FEFADC;--dark:#504B43;--red:#EC1B24;--yellow:#E19200;--green:#4CB753;--blue:#2B9EB3;--timing:cubic-bezier(0.2, 1, 0, 1);--start-timing:cubic-bezier(0,.5,0,.9);--grad:linear-gradient(45deg, #F008, #00F8);--shadow:0px 10px 50px 0 #0008;--width:1024px}.light{--color:var(--light)}.dark{--color:var(--dark)}.red{--color:var(--red)}.yellow{--color:var(--yellow)}.green{--color:var(--green)}.blue{--color:var(--blue)}.white{--color:white}.flex,.flex-space,br{flex-grow:1}.space{flex:1000}html{background-color:var(--dark)}.back{position:relative;padding:10px 20px;width:min(100vw,1024px);box-sizing:border-box}.back::before{background:var(--color);width:100vw;height:100%;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);content:"";z-index:-1}.dark-back::before{filter:brightness(.8)}
\ No newline at end of file
+* {
+ padding: 0;
+ border: 0;
+ margin: 0;
+ outline: 0;
+}
+
+:root {
+ --light: #FEFADC;
+ --dark: #504B43;
+ --red: #EC1B24;
+ --yellow: #E19200;
+ --green: #4CB753;
+ --blue: #2B9EB3;
+
+ --timing: cubic-bezier(0.2, 1, 0, 1);
+ --start-timing: cubic-bezier(0,.5,0,.9);
+
+ --grad: linear-gradient(45deg, #F008, #00F8);
+ --shadow: 0px 10px 50px 0 #0008;
+
+ --width: 1024px;
+}
+
+.light { --color: var(--light) }
+.dark { --color: var(--dark) }
+.red { --color: var(--red) }
+.yellow { --color: var(--yellow) }
+.green { --color: var(--green) }
+.blue { --color: var(--blue) }
+.white { --color: white }
+
+.flex-space, .flex, br { flex-grow: 1 }
+.space { flex: 1000 }
+
+/*----------------------------------------------------------------------------*/
+
+html {
+ background-color: var(--dark);
+}
+
+/*----------------------------------------------------------------------------*/
+
+.back {
+ position: relative;
+ padding: 10px 20px;
+ width: min(100vw, 1024px);
+ box-sizing: border-box;
+}
+
+.back::before {
+ background: var(--color);
+ width: 100vw;
+ height: 100%;
+ position: absolute;
+ left: 50%;
+ top: 50%;
+ transform: translate(-50%, -50%);
+ content: "";
+ z-index: -1;
+}
+
+.dark-back::before {
+ filter: brightness(0.8);
+}
+
+/*----------------------------------------------------------------------------*/
\ No newline at end of file
diff --git a/styles/header.css b/styles/header.css
index 6551bfb..d813256 100644
--- a/styles/header.css
+++ b/styles/header.css
@@ -1 +1,13 @@
-header{position:sticky!important;top:0;z-index:10000;display:flex;gap:40px;font-size:25px;font-family:"Open Sans";font-weight:bolder;color:var(--dark);align-items:center}
\ No newline at end of file
+header {
+ position: sticky !important;
+ top: 0;
+ z-index: 10000;
+
+ display: flex;
+ gap: 40px;
+ font-size: 25px;
+ font-family: "Open Sans";
+ font-weight: bolder;
+ color: var(--dark);
+ align-items: center;
+}
\ No newline at end of file
diff --git a/styles/resume.css b/styles/resume.css
index baf2b06..815d86c 100644
--- a/styles/resume.css
+++ b/styles/resume.css
@@ -1 +1,383 @@
-@keyframes page-enter{0%{transform:scale(.9) translateY(10%)}to{transform:scale(1) translateY(0)}}@keyframes title-enter{0%{transform:scale(2) translateY(-50%)}to{transform:scale(1) translateY(0)}}@keyframes footer-enter{0%{transform:scale(2) translateY(50%)}to{transform:scale(1) translateY(0)}}@keyframes scene-enter{0%{filter:brightness(0)}to{filter:brightness(1)}}:root{font-family:sans-serif;--timing:cubic-bezier(.2,1,0,1);--enter:2s var(--timing) 0.2s both;--blue:#3F75A2;--darkblue:#2E5476;--grey:#575757;--link-r:#D13800;--link-g:#006B00;--link-b:#006EDB}*{margin:0;padding:0;border:0}html{font-size:1vw;animation:var(--enter) scene-enter}@media print{html{font-size:.7rem}}main{display:contents}h1{font-size:3em}h2{font-size:2em}h3{font-size:1.5em}h4{font-size:1.15em}h5{font-size:.75em}ul{padding-inline-start:2em;margin:.5em 0;list-style-type:"ā "}.navbar{position:fixed;height:18em;width:100%;left:0;z-index:-1;display:flex;justify-content:center;align-items:center}nav.navbar{top:0}.resume-header{position:absolute;color:#fff;filter:opacity(.5);font:800 8em Poppins;animation:var(--enter) title-enter;user-select:none}footer.navbar{bottom:0}.resume-footer,.resume-header,article{will-change:transform,filter}.resume-footer{font:700 8em monospace;animation:var(--enter) footer-enter;user-select:none;display:flex;justify-content:space-between;width:3em}.footer-icon{text-decoration:none;opacity:.5;color:#fff;font-size:.2em;font-family:Verdana;font-weight:600;display:inline-flex;flex-direction:column;align-items:center;transition:transform .3s,opacity .3s}.footer-img{display:inline-block;font-size:4em!important;user-select:none;filter:brightness(0) invert(1);width:1em;height:1.2em;transform:scale(1)}.footer-icon:hover{opacity:1}article{background:#f5f5f5;border:2px solid #dcdcdc;padding:3em;margin:18em 16em;border-radius:1em;animation:page-enter var(--enter);box-shadow:0 2.5em 5em 0#0004,inset 1.5em 1.5em 5em 2.5em #fff}body::before{background:lightsteelblue var(--grad);width:100vw;height:100vh;content:"";display:inline-block;position:fixed;top:0;left:0;z-index:-2}.contact-details{display:flex;justify-content:space-between;font-style:normal;font-weight:700;margin-top:1em}.contact-detail{display:flex;align-items:center;white-space:nowrap}.email{color:var(--link-b)}.phone{color:var(--link-r)}.location{color:var(--link-g)}.topic-title{padding-bottom:3px;border-bottom:2px solid #6495ed;display:block}.topic{margin-top:2em;page-break-inside:avoid}.topic-icon{width:1em;height:1em;display:inline-block}.experience{margin-top:2em;margin-bottom:.5em}.skill-list>li,.title{font-weight:700;font-family:Verdana;color:var(--blue)}.title>i{font-weight:400}.date{font-style:italic}.place{font-weight:400;display:block;color:var(--grey);text-transform:uppercase}.classes-list,.skill-list{list-style:none;padding-inline-start:0}.skill-list>li{border:1px solid #dcdcdc;display:inline-flex;padding:.5em 1em;border-radius:.5em;background:#f5f5f5;font-family:monospace;white-space:nowrap;overflow:hidden;align-items:center;user-select:none;margin:.5em;box-shadow:0 .25em .25em 0#0004,inset .15em .15em .5em .25em #fff;transform:scale(1);transition:transform var(--timing) 1s}.skill-list>li img{height:1.5em}.footer-icon:hover,.skill-list>li:hover{transform:scale(1.1)}.classes-list>li::before{content:"ā "}.classes-list>li{width:calc(50% - 3ch);display:inline-block}.hflex{display:flex;justify-content:space-between;align-items:center}.icon{margin-right:.5em;width:1em;height:1em;user-select:none;display:inline-block}.freshmanuals{color:var(--darkblue)}@media print{article{margin:0;border-radius:0;border:0;padding:0;background:#fff}article,main{box-shadow:none}body,html,main{overflow:auto;background:#fff;height:auto}.skill-list>li{box-shadow:none;background-color:#fff}article *{-webkit-print-color-adjust:exact;print-color-adjust:exact}}
\ No newline at end of file
+/*---- Base ------------------------------------------------------------------*/
+
+:root {
+ font-family: sans-serif;
+ --timing: cubic-bezier(.2,1,0,1);
+ --enter: 2s var(--timing) 0.2s both;
+
+ --blue: #3F75A2;
+ --darkblue: #2E5476;
+ --grey: #575757;
+
+ --link-r: #D13800;
+ --link-g: #006B00;
+ --link-b: #006EDB;
+}
+
+* {
+ margin: 0;
+ padding: 0;
+ border: 0;
+}
+
+html {
+ font-size: 1vw;
+ animation: var(--enter) scene-enter;
+}
+
+@media print {
+ html {
+ font-size: 0.7rem;
+ }
+}
+
+main {
+ display: contents;
+}
+
+/*---- Generic Styles --------------------------------------------------------*/
+
+h1 {
+ font-size: 3em;
+}
+
+h2 {
+ font-size: 2em;
+}
+
+h3 {
+ font-size: 1.5em;
+}
+
+h4 {
+ font-size: 1.15em;
+}
+
+h5 {
+ font-size: 0.75em;
+}
+
+ul {
+ padding-inline-start: 2em;
+ margin: 0.5em 0;
+ list-style-type: 'ā ';
+}
+
+/*---- Navbar ----------------------------------------------------------------*/
+
+.navbar {
+ position: fixed;
+ height: 18em;
+ width: 100%;
+ left: 0;
+ z-index: -1;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+nav.navbar {
+ top: 0;
+}
+
+.resume-header {
+ position: absolute;
+ color: white;
+ filter: opacity(0.5);
+ font: 800 8em Poppins;
+ animation: var(--enter) title-enter;
+ will-change: transform, filter;
+ user-select: none;
+}
+
+footer.navbar {
+ bottom: 0;
+}
+
+.resume-footer {
+ font: bold 8em monospace;
+ animation: var(--enter) footer-enter;
+ will-change: transform, filter;
+ user-select: none;
+ display: flex;
+ justify-content: space-between;
+ width: 3em;
+}
+
+.footer-icon {
+ text-decoration: none;
+ opacity: 0.5;
+ color: white;
+ font-size: 0.2em;
+ font-family: Verdana;
+ font-weight: 600;
+ display: inline-flex;
+ flex-direction: column;
+ align-items: center;
+ transition: transform 0.3s, opacity 0.3s;
+}
+
+.footer-img {
+ display: inline-block;
+ font-size: 4em !important;
+ user-select: none;
+ filter: brightness(0) invert(1);
+ width: 1em;
+ height: 1.2em;
+ transform: scale(1);
+}
+
+.footer-icon:hover {
+ transform: scale(1.1);
+ opacity: 1;
+}
+
+/*---- Page ------------------------------------------------------------------*/
+
+article {
+ background: whitesmoke;
+ border: 2px solid gainsboro;
+ padding: 3em;
+ margin: 18em 16em;
+ border-radius: 1em;
+ animation: page-enter var(--enter);
+ will-change: transform, filter;
+ box-shadow: 0 2.5em 5em 0 #0004,
+ inset 1.5em 1.5em 5em 2.5em white;
+}
+
+body::before {
+ background: lightsteelblue var(--grad);
+ width: 100vw;
+ height: 100vh;
+ content: "";
+ display: inline-block;
+ position: fixed;
+ top: 0;
+ left: 0;
+ z-index: -2;
+}
+
+/*---- Header ----------------------------------------------------------------*/
+
+.contact-details {
+ display: flex;
+ justify-content: space-between;
+ font-style: normal;
+ font-weight: bold;
+ margin-top: 1em;
+}
+
+.contact-detail {
+ display: flex;
+ align-items: center;
+ white-space: nowrap;
+}
+
+.email {
+ color: var(--link-b);
+}
+
+.phone {
+ color: var(--link-r);
+}
+
+.location {
+ color: var(--link-g);
+}
+
+/*---- Sectioning ------------------------------------------------------------*/
+
+.topic-title {
+ padding-bottom: 3px;
+ border-bottom: 2px solid cornflowerblue;
+ display: block;
+}
+
+.topic {
+ margin-top: 2em;
+ page-break-inside: avoid;
+}
+
+.topic-icon {
+ width: 1em;
+ height: 1em;
+ display: inline-block;
+}
+
+/*---- Experience Title ------------------------------------------------------*/
+
+.experience {
+ margin-top: 2em;
+ margin-bottom: 0.5em;
+}
+
+.title {
+ font-weight: bold;
+ font-family: Verdana;
+ color: var(--blue);
+}
+
+.title > i {
+ font-weight: normal;
+}
+
+.date {
+ font-style: italic;
+}
+
+.place {
+ font-weight: normal;
+ display: block;
+ color: var(--grey);
+ text-transform: uppercase;
+}
+
+/*---- Skill List ------------------------------------------------------------*/
+
+.skill-list {
+ list-style: none;
+ padding-inline-start: 0;
+}
+
+.skill-list > li {
+ border: 1px solid gainsboro;
+ display: inline-flex;
+ padding: 0.5em 1em;
+ border-radius: 0.5em;
+ color: var(--blue);
+ background: whitesmoke;
+ font-family: monospace;
+ white-space: nowrap;
+ overflow: hidden;
+ align-items: center;
+ font-weight: bold;
+ user-select: none;
+ margin: 0.5em;
+ box-shadow: 0 0.25em 0.25em 0 #0004,
+ inset 0.15em 0.15em 0.5em 0.25em white;
+ transform: scale(1);
+ transition: transform var(--timing) 1s;
+}
+
+.skill-list > li img {
+ height: 1.5em;
+}
+
+.skill-list > li:hover {
+ transform: scale(1.1);
+}
+
+/*---- Classes List ----------------------------------------------------------*/
+
+.classes-list {
+ list-style: none;
+ padding-inline-start: 0;
+}
+
+.classes-list > li::before {
+ content: 'ā ';
+}
+
+.classes-list > li {
+ width: calc(50% - 3ch);
+ display: inline-block;
+}
+
+/*---- Miscellaneous ---------------------------------------------------------*/
+
+.hflex {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.icon {
+ margin-right: 0.5em;
+ width: 1em;
+ height: 1em;
+ user-select: none;
+ display: inline-block;
+}
+
+.freshmanuals {
+ color: var(--darkblue);
+}
+
+/*---- Animations ------------------------------------------------------------*/
+
+@keyframes page-enter {
+ from {
+ transform: scale(0.9) translateY(10%);
+ }
+
+ to {
+ transform: scale(1) translateY(0%);
+ }
+}
+
+@keyframes title-enter {
+ 0% {
+ transform: scale(2) translateY(-50%);
+ }
+
+ 100% {
+ transform: scale(1) translateY(0%);
+ }
+}
+
+@keyframes footer-enter {
+ 0% {
+ transform: scale(2) translateY(50%);
+ }
+
+ 100% {
+ transform: scale(1) translateY(0%);
+ }
+}
+
+@keyframes scene-enter {
+ from {
+ filter: brightness(0);
+ }
+
+ to {
+ filter: brightness(1);
+ }
+}
+
+/*---- Print Styles ----------------------------------------------------------*/
+
+@media print {
+ article {
+ margin: 0;
+ border-radius: 0;
+ border: 0;
+ padding: 0;
+ background: white;
+ box-shadow: none;
+ }
+
+ main {
+ overflow: auto;
+ height: auto;
+ background: white;
+ box-shadow: none;
+ }
+
+ html, body {
+ overflow: auto;
+ background: white;
+ height: auto;
+ }
+
+ .skill-list > li {
+ box-shadow: none;
+ background-color: white;
+ }
+
+ article * {
+ -webkit-print-color-adjust: exact;
+ print-color-adjust: exact;
+ }
+}
\ No newline at end of file