From 86434d5248470ee983fc1fc10ef1ff71a8b1ea4e Mon Sep 17 00:00:00 2001 From: MajorDroolz Date: Tue, 3 Jan 2023 22:18:13 -0500 Subject: [PATCH] Revert "Preparing changes for deployment." This reverts commit 03c19781e9ab821a41040433c05be67f2c10b665. --- _includes/footer.html | 14 +- _includes/header.html | 31 +++- _layouts/default.html | 31 +++- index.html | 53 +++++- resume.html | 179 +++++++++++++++++++- styles/404.css | 31 +++- styles/default.css | 253 +++++++++++++++++++++++++++- styles/footer.css | 13 +- styles/global.css | 68 +++++++- styles/header.css | 14 +- styles/resume.css | 384 +++++++++++++++++++++++++++++++++++++++++- 11 files changed, 1060 insertions(+), 11 deletions(-) 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 @@ - \ No newline at end of file + + + \ No newline at end of file diff --git a/_includes/header.html b/_includes/header.html index 957f16b..8801f18 100644 --- a/_includes/header.html +++ b/_includes/header.html @@ -1 +1,30 @@ -
MAX HUTZ
Experience Resume Contact
\ No newline at end of file + + +
+ MAX HUTZ +
+ Experience + Resume + Contact + + + + +
+ + +
+ +
+ \ No newline at end of file diff --git a/_layouts/default.html b/_layouts/default.html index 0dc1406..64b954e 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -1 +1,30 @@ -{{ 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.

Worked on:

View all experiences.
\ No newline at end of file +--- +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. +

+
+ +
+
+ +
+

Worked on:

+ +
+ View all experiences. +
\ 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 

Maxim Voldman Hutz

914.216.5972 New York City or Tri-State Area Preferred

Experience

Tightrope Interactive, Cold Spring, NY

Software Engineer Internship

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

Tightrope Interactive, Cold Spring, NY

Junior Software Engineer Internship

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

Skills

  • JAVASCRIPT
  • TYPESCRIPT
  • PYTHON
  • JAVA
  • HTML
  • CSS
  • C
  • C++
  • PHP
  • OBJECTIVE-C
  • REACT
  • REACT-NATIVE

Education

Rensselaer Polytehnic Institute, Troy, NY

BS Computer Science, BS Information Technology & Web Science

Sophomore Year

  • 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 + + + + Resume of Maxim Voldman Hutz + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +   + +
+
+

Maxim Voldman Hutz

+
+ + + + 914.216.5972 + + + + New York City or Tri-State Area Preferred + +
+
+
+

+ + Experience +

+
+
+
+

Tightrope Interactive, Cold Spring, NY

+ +
+

Software Engineer Internship

+
+

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
    • +
+
+
+
+
+

Tightrope Interactive, Cold Spring, NY

+ +
+

Junior Software Engineer Internship

+
+

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
    • +
+
+
+
+

+ + Skills +

+
    +
  • JAVASCRIPT
    • +
  • TYPESCRIPT
    • +
  • PYTHON
    • +
  • JAVA
    • +
  • HTML
    • +
  • CSS
    • +
  • C
    • +
  • C++
    • +
  • PHP
    • +
  • OBJECTIVE-C
    • +
  • REACT
    • +
  • REACT-NATIVE
    • +
+
+
+

+ + Education +

+
+
+

Rensselaer Polytehnic Institute, Troy, NY

+ +
+

BS Computer Science, BS Information Technology & Web Science

+
+
+
+

Sophomore Year

+ +
+
    +
  • 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