Compare commits
19 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
f5ccefc61c | ||
|
|
c1377d50a0 | ||
|
|
d2f424a7c9 | ||
|
|
9697866181 | ||
|
|
a793d7ce4b | ||
|
|
aa4fdaf435 | ||
|
|
8f6d45ca53 | ||
|
|
de2506ad9d | ||
|
|
cc4b87d9c5 | ||
|
|
81f467e16a | ||
|
|
9ac21fac1e | ||
|
|
662bc0a2ed | ||
|
|
1452840240 | ||
|
|
ec2e17cee1 | ||
|
|
a554ca8fa6 | ||
|
|
9611cde594 | ||
|
|
7edafd8677 | ||
|
|
7463c1927a | ||
|
|
fed3479ed1 |
2
.github/workflows/prepare.yml
vendored
@@ -19,7 +19,7 @@ jobs:
|
||||
node-version: '16'
|
||||
|
||||
- name: Install dependencies.
|
||||
run: npm i -g terser csso-cli html-minifier
|
||||
run: npm i -g terser csso-cli
|
||||
|
||||
- name: "Copying changes over to build."
|
||||
run: git checkout -b build
|
||||
|
||||
3
.gitignore
vendored
@@ -3,3 +3,6 @@ _site
|
||||
.jekyll-cache
|
||||
vendor
|
||||
.vscode
|
||||
.DS_Store
|
||||
Gemfile
|
||||
Gemfile.lock
|
||||
3
Gemfile
@@ -1,3 +0,0 @@
|
||||
source "https://rubygems.org"
|
||||
gem "jekyll", "~> 4.3"
|
||||
gem "jekyll-datapage-generator"
|
||||
72
Gemfile.lock
@@ -1,72 +0,0 @@
|
||||
GEM
|
||||
remote: https://rubygems.org/
|
||||
specs:
|
||||
addressable (2.8.1)
|
||||
public_suffix (>= 2.0.2, < 6.0)
|
||||
colorator (1.1.0)
|
||||
concurrent-ruby (1.1.10)
|
||||
em-websocket (0.5.3)
|
||||
eventmachine (>= 0.12.9)
|
||||
http_parser.rb (~> 0)
|
||||
eventmachine (1.2.7)
|
||||
ffi (1.15.5)
|
||||
forwardable-extended (2.6.0)
|
||||
google-protobuf (3.21.12)
|
||||
http_parser.rb (0.8.0)
|
||||
i18n (1.12.0)
|
||||
concurrent-ruby (~> 1.0)
|
||||
jekyll (4.3.1)
|
||||
addressable (~> 2.4)
|
||||
colorator (~> 1.0)
|
||||
em-websocket (~> 0.5)
|
||||
i18n (~> 1.0)
|
||||
jekyll-sass-converter (>= 2.0, < 4.0)
|
||||
jekyll-watch (~> 2.0)
|
||||
kramdown (~> 2.3, >= 2.3.1)
|
||||
kramdown-parser-gfm (~> 1.0)
|
||||
liquid (~> 4.0)
|
||||
mercenary (>= 0.3.6, < 0.5)
|
||||
pathutil (~> 0.9)
|
||||
rouge (>= 3.0, < 5.0)
|
||||
safe_yaml (~> 1.0)
|
||||
terminal-table (>= 1.8, < 4.0)
|
||||
webrick (~> 1.7)
|
||||
jekyll-datapage-generator (1.4.0)
|
||||
jekyll-sass-converter (3.0.0)
|
||||
sass-embedded (~> 1.54)
|
||||
jekyll-watch (2.2.1)
|
||||
listen (~> 3.0)
|
||||
kramdown (2.4.0)
|
||||
rexml
|
||||
kramdown-parser-gfm (1.1.0)
|
||||
kramdown (~> 2.0)
|
||||
liquid (4.0.3)
|
||||
listen (3.7.1)
|
||||
rb-fsevent (~> 0.10, >= 0.10.3)
|
||||
rb-inotify (~> 0.9, >= 0.9.10)
|
||||
mercenary (0.4.0)
|
||||
pathutil (0.16.2)
|
||||
forwardable-extended (~> 2.6)
|
||||
public_suffix (5.0.1)
|
||||
rb-fsevent (0.11.2)
|
||||
rb-inotify (0.10.1)
|
||||
ffi (~> 1.0)
|
||||
rexml (3.2.5)
|
||||
rouge (3.30.0)
|
||||
safe_yaml (1.0.5)
|
||||
sass-embedded (1.57.1-arm64-darwin)
|
||||
google-protobuf (~> 3.21)
|
||||
terminal-table (3.0.2)
|
||||
unicode-display_width (>= 1.1.1, < 3)
|
||||
unicode-display_width (2.4.1)
|
||||
webrick (1.7.0)
|
||||
|
||||
PLATFORMS
|
||||
arm64-darwin-21
|
||||
|
||||
DEPENDENCIES
|
||||
jekyll (~> 4.3)
|
||||
jekyll-datapage-generator
|
||||
|
||||
BUNDLED WITH
|
||||
2.4.2
|
||||
10
README.md
@@ -1,3 +1,7 @@
|
||||
# The Personal Website of Maxim Voldman Hutz
|
||||
This website serves as an exhibit of who I am, what I've done, what I'm doing,
|
||||
and what I plan to do.
|
||||
# 🖼️ Max Hutz's Digital Portfolio
|
||||
### Hey!
|
||||
I'm Max Hutz, and this is my personal website.
|
||||
|
||||
It details who I am, what I've done, and were I'm headed in the field of software engineering. (And it looks cool too!)
|
||||
|
||||
Check it out now at [www.maximhutz.me](https://www.maximhutz.me)!
|
||||
|
||||
12
_config.yml
@@ -1,12 +0,0 @@
|
||||
plugins:
|
||||
- jekyll-datapage-generator
|
||||
|
||||
page_gen:
|
||||
- data: work
|
||||
template: experience
|
||||
dir: experience
|
||||
index_files: false
|
||||
name: id
|
||||
title: title
|
||||
page_data_prefix: data
|
||||
filter: ready
|
||||
@@ -31,7 +31,7 @@ docker:
|
||||
azure:
|
||||
name: Azure
|
||||
fore: '#EEEEEE'
|
||||
back: '#0962B0'
|
||||
back: 'linear-gradient(-45deg, #2892DF, #3CCBF4)'
|
||||
link: https://azure.microsoft.com/en-us/
|
||||
|
||||
mariadb:
|
||||
@@ -40,8 +40,40 @@ mariadb:
|
||||
back: '#C4745C'
|
||||
link: https://mariadb.org
|
||||
|
||||
#*----------------------------------------------------------------------------*#
|
||||
|
||||
react:
|
||||
name: React
|
||||
fore: '#04D8F8'
|
||||
back: '#242323'
|
||||
link: https://reactjs.org
|
||||
|
||||
swift:
|
||||
name: Swift
|
||||
fore: white
|
||||
back: 'linear-gradient(-45deg, #FF3527, #FBAB3F)'
|
||||
link: https://www.swift.org
|
||||
|
||||
objective-c:
|
||||
name: Objective-C
|
||||
fore: '#000000'
|
||||
back: '#EEEEEE'
|
||||
link: https://developer.apple.com/library/archive/documentation/Cocoa/Conceptual/ProgrammingWithObjectiveC/Introduction/Introduction.html
|
||||
|
||||
firebase:
|
||||
name: Firebase
|
||||
fore: '#F57C00'
|
||||
back: '#EEF3F5'
|
||||
link: https://firebase.google.com
|
||||
|
||||
python:
|
||||
name: Python
|
||||
fore: '#FFD94B'
|
||||
back: '#346C94'
|
||||
link: https://www.python.org
|
||||
|
||||
bs:
|
||||
name: Beautiful Soup
|
||||
fore: '#97DACB'
|
||||
back: '#1C4E63'
|
||||
link: https://www.crummy.com/software/BeautifulSoup/bs4/doc/
|
||||
113
_data/work.yml
@@ -3,27 +3,29 @@ malung:
|
||||
title: Malung
|
||||
subtitle: COVID-19 Classifier
|
||||
stack: [ html, css, js, php, docker, mariadb, azure ]
|
||||
link: /404
|
||||
color: yellow
|
||||
color: malung
|
||||
image: /res/projects/malung.webp
|
||||
|
||||
ready: true
|
||||
|
||||
description:
|
||||
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
|
||||
Lorem Ipsum has been the industry's standard dummy text ever since the
|
||||
1500s, when an unknown printer took a galley of type and scrambled it to
|
||||
make a type specimen book. It has survived not only five centuries, but also
|
||||
the leap into electronic typesetting, remaining essentially unchanged.
|
||||
Led a team of 3 to create Malung, an <b>online COVID-19 classifier</b>. With
|
||||
Malung, you can detect COVID-19 in lung scans using machine learning, and
|
||||
<b>manage patient data on the cloud</b>. <br><br> Doubled as the <b>backend
|
||||
/ DevOps lead</b> during development, managing the site and its database.
|
||||
|
||||
|
||||
outcomes:
|
||||
- Lorem Ipsum is simply dummy text of the printing and typesetting industry.
|
||||
- Hosted site through Microsoft Azure.
|
||||
|
||||
- Lorem Ipsum has been the industry's standard dummy text ever since the
|
||||
1500s, when an unknown printer took a galley of type and scrambled it to
|
||||
make a type specimen book.
|
||||
- Managed database with MariaDB; Containerized on Docker instance for local
|
||||
development.
|
||||
|
||||
- It has survived not only five centuries, but also the leap into electronic
|
||||
typesetting, remaining essentially unchanged.
|
||||
- Built account system with PHP, which interfaced with frontend through
|
||||
backend API.
|
||||
|
||||
- Collaboratively designed site’s UI with Figma, focusing on responsive
|
||||
design.
|
||||
|
||||
#*----------------------------------------------------------------------------*#
|
||||
|
||||
@@ -31,83 +33,84 @@ freshmanual:
|
||||
id: freshmanual
|
||||
title: FreshManual
|
||||
subtitle: Mobile App
|
||||
stack: [ html, css, js, php, docker, mariadb, azure ]
|
||||
link: /404
|
||||
color: blue
|
||||
stack: [ react, js, firebase, swift, objective-c ]
|
||||
link: https://apps.apple.com/us/app/freshmanuals/id1627091250
|
||||
color: freshmanual
|
||||
image: /res/projects/freshmanual.webp
|
||||
|
||||
ready: false
|
||||
|
||||
description:
|
||||
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
|
||||
Lorem Ipsum has been the industry's standard dummy text ever since the
|
||||
1500s, when an unknown printer took a galley of type and scrambled it to
|
||||
make a type specimen book. It has survived not only five centuries, but also
|
||||
the leap into electronic typesetting, remaining essentially unchanged.
|
||||
Lead developer during the initial development of the FreshManuals app.
|
||||
Worked with <b>team of 5</b> at Tightrope Interactive to design, build, and
|
||||
test the <b>mobile product manual aggregator</b>.<br><br>FreshManuals is
|
||||
currently available for download on the <b>iPhone app store</b>.
|
||||
|
||||
outcomes:
|
||||
- Lorem Ipsum is simply dummy text of the printing and typesetting industry.
|
||||
- User interface built using React/React-Native, for multiplatform
|
||||
integration.
|
||||
|
||||
- Lorem Ipsum has been the industry's standard dummy text ever since the
|
||||
1500s, when an unknown printer took a galley of type and scrambled it to
|
||||
make a type specimen book.
|
||||
- Used Firestore/Firebase to store and access user account data.
|
||||
|
||||
- It has survived not only five centuries, but also the leap into electronic
|
||||
typesetting, remaining essentially unchanged.
|
||||
- Integrated paid yahoo search results into mobile search results.
|
||||
|
||||
- Used Fetch API to request user manual data from website API endpoints.
|
||||
|
||||
#*----------------------------------------------------------------------------*#
|
||||
|
||||
pollbuddy:
|
||||
id: pollbuddy
|
||||
title: Poll Buddy
|
||||
stack: [ html, css, js, php, docker, mariadb, azure ]
|
||||
link: /404
|
||||
color: green
|
||||
stack: [ react, js, docker ]
|
||||
link: https://pollbuddy.app
|
||||
color: pollbuddy
|
||||
image: /res/projects/pollbuddy.webp
|
||||
|
||||
ready: false
|
||||
|
||||
description:
|
||||
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
|
||||
Lorem Ipsum has been the industry's standard dummy text ever since the
|
||||
1500s, when an unknown printer took a galley of type and scrambled it to
|
||||
make a type specimen book. It has survived not only five centuries, but also
|
||||
the leap into electronic typesetting, remaining essentially unchanged.
|
||||
React developer for Poll Buddy, an <b>online questionnaire service</b> used by
|
||||
hundreds of students and teachers on the Rensselaer Polytechnic Institute
|
||||
campus. Worked on <b>cleaning source code</b>, transitioning from legacy
|
||||
technology, and <b>improving the site’s user experience</b>.
|
||||
|
||||
outcomes:
|
||||
- Lorem Ipsum is simply dummy text of the printing and typesetting industry.
|
||||
- Cut 30% of the front-end codebase by switching to the modern, functional
|
||||
style.
|
||||
|
||||
- Lorem Ipsum has been the industry's standard dummy text ever since the
|
||||
1500s, when an unknown printer took a galley of type and scrambled it to
|
||||
make a type specimen book.
|
||||
- Wrote and refined dozens of front-end tests using Jest for React
|
||||
components.
|
||||
|
||||
- It has survived not only five centuries, but also the leap into electronic
|
||||
typesetting, remaining essentially unchanged.
|
||||
- Ran discount usability study on Poll Buddy’s UI, to isolate and correct
|
||||
flaws that novel users encountered.
|
||||
|
||||
#*----------------------------------------------------------------------------*#
|
||||
|
||||
rpi-crisis:
|
||||
id: rpi-crisis
|
||||
title: CRISIS
|
||||
stack: [ html, css, js, php, docker, mariadb, azure ]
|
||||
link: /404
|
||||
color: red
|
||||
stack: [ python, bs ]
|
||||
link: https://rpicrisis.org
|
||||
color: rpi-crisis
|
||||
image: /res/projects/rpi-crisis.webp
|
||||
|
||||
ready: false
|
||||
|
||||
description:
|
||||
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
|
||||
Lorem Ipsum has been the industry's standard dummy text ever since the
|
||||
1500s, when an unknown printer took a galley of type and scrambled it to
|
||||
make a type specimen book. It has survived not only five centuries, but also
|
||||
the leap into electronic typesetting, remaining essentially unchanged.
|
||||
<b>Backend developer</b> for Correcting Rensselaer’s Insufferable Student
|
||||
Information System (CRISIS), a web-app to help students organize and <b>manage
|
||||
their curriculum</b> at Rensselaer Polytechnic Institute (RPI). Worked to
|
||||
<b>expand data collection</b> system, and decipher information from RPI’s
|
||||
legacy SIS.
|
||||
|
||||
outcomes:
|
||||
- Lorem Ipsum is simply dummy text of the printing and typesetting industry.
|
||||
- Wrote web-scrapers using Beautiful Soup to pull data from QuACS, another
|
||||
well-known course scheduler, jump-starting the site’s backend.
|
||||
|
||||
- Lorem Ipsum has been the industry's standard dummy text ever since the
|
||||
1500s, when an unknown printer took a galley of type and scrambled it to
|
||||
make a type specimen book.
|
||||
- Wrote web-scrapers to extract course templates from RPI’s numerous
|
||||
major-specific websites.
|
||||
|
||||
- It has survived not only five centuries, but also the leap into electronic
|
||||
typesetting, remaining essentially unchanged.
|
||||
- Used Lark to parse course requirements from RPI’s convoluted course
|
||||
catalog.
|
||||
|
||||
#*----------------------------------------------------------------------------*#
|
||||
33
_includes/default.html
Normal file
@@ -0,0 +1,33 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="{{ include.description }}">
|
||||
<meta name="cache-control" content="max-age=31536000">
|
||||
|
||||
<link rel="shortcut icon" type="image/png" href="/res/favicon.png">
|
||||
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com">
|
||||
|
||||
<link rel="preload stylesheet" as="font" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,500,1,200&display=swap">
|
||||
<link rel="preload stylesheet" as="font" href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap">
|
||||
<link rel="preload stylesheet" as="font" href="https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@400;900&display=swap">
|
||||
|
||||
<link rel="preload stylesheet" as="style" href="/styles/global.css">
|
||||
<link rel="preload stylesheet" as="style" href="/styles/default.css">
|
||||
|
||||
<title>{{ include.title }} ─ Max Hutz</title>
|
||||
</head>
|
||||
<body>
|
||||
{% include header.html %}
|
||||
|
||||
{{ include.content }}
|
||||
|
||||
<div class="flex dark back npad"></div>
|
||||
|
||||
{% include footer.html %}
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,13 +1,13 @@
|
||||
<link rel="stylesheet" href="/styles/footer.css">
|
||||
<link rel="preload stylesheet" as="style" href="/styles/footer.css">
|
||||
|
||||
<footer class="dark back">
|
||||
<h2>© 2022</h2>
|
||||
<div class="flex"></div>
|
||||
<a href="https://github.com/MajorDroolz" class="png-icon" target="_blank">
|
||||
<img src="/res/icons/github.png" alt="GitHub" width="30" height="30">
|
||||
<img src="/res/icons/github.webp" alt="GitHub" width="30" height="30">
|
||||
</a>
|
||||
<a href="https://www.linkedin.com/in/maximhutz/" class="png-icon" target="_blank">
|
||||
<img src="/res/icons/linkedin.png" alt="LinkedIn" width="30" height="30">
|
||||
<img src="/res/icons/linkedin.webp" alt="LinkedIn" width="30" height="30">
|
||||
</a>
|
||||
<a href="mailto:maximhutz@gmail.com" class="nav-link white icon" data-i="mail" aria-label="Contact" target="_blank"></a>
|
||||
</footer>
|
||||
@@ -4,10 +4,10 @@
|
||||
<a href="/" class="nav-link dark">MAX HUTZ</a>
|
||||
<div class="flex"></div>
|
||||
<a href="/experiences" class="nav-link dark icon nav3" data-i="work">Experience</a>
|
||||
<a href="/resume" class="nav-link dark icon nav3" data-i="clinical_notes">Resume</a>
|
||||
<a href="/resume" class="nav-link dark icon nav3" data-i="clinical_notes" target="_blank">Resume</a>
|
||||
<a href="mailto:maximhutz@gmail.com" class="nav-link dark icon nav3" data-i="mail">Contact</a>
|
||||
<a href="/experiences" class="nav-link dark icon nav2" data-i="work" aria-label="Experience"></a>
|
||||
<a href="/resume" class="nav-link dark icon nav2" data-i="clinical_notes" aria-label="Resume"></a>
|
||||
<a href="/resume" class="nav-link dark icon nav2" data-i="clinical_notes" aria-label="Resume" target="_blank"></a>
|
||||
<a href="mailto:maximhutz@gmail.com" class="nav-link dark icon nav2" data-i="mail" aria-label="Contact"></a>
|
||||
<button class="nav-link dark icon nav1" data-i="menu" aria-label="Menu" onclick="document.getElementById('menu')?.showModal()"></button>
|
||||
</header>
|
||||
@@ -23,7 +23,7 @@
|
||||
</form>
|
||||
</div>
|
||||
<a href="/experiences" class="nav-link dark icon" data-i="work">Experience</a>
|
||||
<a href="/resume" class="nav-link dark icon" data-i="clinical_notes">Resume</a>
|
||||
<a href="/resume" class="nav-link dark icon" data-i="clinical_notes" target="_blank">Resume</a>
|
||||
<a href="mailto:maximhutz@gmail.com" class="nav-link dark icon" data-i="mail">Contact</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,36 +1 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
{% if page.desc_type == "project" %}
|
||||
<meta name="description" content="A description of work done by Maxim Voldman Hutz for {{page.data.title}}.">
|
||||
{% else %}
|
||||
<meta name="description" content="{{ page.description }}">
|
||||
{% endif %}
|
||||
|
||||
<link rel="shortcut icon" type="image/png" href="/res/favicon.png">
|
||||
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,500,1,200">
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap">
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@400;900&display=swap">
|
||||
|
||||
<link rel="stylesheet" href="/styles/global.css">
|
||||
<link rel="stylesheet" href="/styles/default.css">
|
||||
|
||||
<title>{{ page.title }} ─ Max Hutz</title>
|
||||
</head>
|
||||
<body>
|
||||
{% include header.html %}
|
||||
|
||||
{{ content }}
|
||||
|
||||
<div class="flex dark back npad"></div>
|
||||
|
||||
{% include footer.html %}
|
||||
</body>
|
||||
</html>
|
||||
{% include default.html title=page.title content=content description=page.description %}
|
||||
@@ -1,14 +1,13 @@
|
||||
---
|
||||
title: Example
|
||||
desc_type: project
|
||||
layout: default
|
||||
---
|
||||
{% capture description %}
|
||||
A description of work done by Maxim Voldman Hutz for {{page.title}}.
|
||||
{% endcapture %}
|
||||
|
||||
{% assign malung = site.data.work[page.data.id] %}
|
||||
{% capture inner %}
|
||||
{% assign malung = site.data.work[page.project_id] %}
|
||||
{% assign techs = site.data.techs %}
|
||||
|
||||
<link rel="stylesheet" href="/styles/experience.css">
|
||||
<link rel="stylesheet" href="/styles/tech.css">
|
||||
<link rel="preload stylesheet" href="/styles/experience.css">
|
||||
<link rel="preload stylesheet" href="/styles/tech.css">
|
||||
|
||||
<section id="experience" class="dark back">
|
||||
<section id="banner" class="{{malung.color}} back">
|
||||
@@ -16,7 +15,7 @@ layout: default
|
||||
<h1>{{malung.title}}</h1>
|
||||
<i>{{malung.subtitle}}</i>
|
||||
</div>
|
||||
<button class="nav-link dark icon" data-i="close" aria-label="Exit" type="button" onclick="history.back(-1)"></button>
|
||||
<button id="close-icon" class="nav-link dark icon" data-i="close" aria-label="Exit" type="button" onclick="history.back(-1)"></button>
|
||||
</section>
|
||||
<div id="content">
|
||||
<div id="description">
|
||||
@@ -30,7 +29,7 @@ layout: default
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% if malung.link %}
|
||||
<a href="{{malung.link}}" id="experience-button" class="nav-link white button r-icon" data-i="arrow_right">View {{malung.title}}</a>
|
||||
<a href="{{malung.link}}" id="experience-button" class="nav-link white button r-icon" data-i="arrow_right" target="_blank">View {{malung.title}}</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div id="image-side">
|
||||
@@ -50,3 +49,6 @@ layout: default
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endcapture %}
|
||||
|
||||
{% include default.html content=inner description=description title=page.title %}
|
||||
5
experience/freshmanual.html
Normal file
@@ -0,0 +1,5 @@
|
||||
---
|
||||
layout: experience
|
||||
project_id: freshmanual
|
||||
title: FreshManual
|
||||
---
|
||||
5
experience/malung.html
Normal file
@@ -0,0 +1,5 @@
|
||||
---
|
||||
layout: experience
|
||||
project_id: malung
|
||||
title: Malung
|
||||
---
|
||||
5
experience/pollbuddy.html
Normal file
@@ -0,0 +1,5 @@
|
||||
---
|
||||
layout: experience
|
||||
project_id: pollbuddy
|
||||
title: Poll Buddy
|
||||
---
|
||||
5
experience/rpi-crisis.html
Normal file
@@ -0,0 +1,5 @@
|
||||
---
|
||||
layout: experience
|
||||
project_id: rpi-crisis
|
||||
title: CRISIS
|
||||
---
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
title: Experiences
|
||||
description: A list of past and current work and projects from Maxim Voldman Hutz.
|
||||
description: A list of work and projects done by Maxim Voldman Hutz.
|
||||
layout: default
|
||||
---
|
||||
|
||||
|
||||
BIN
res/.DS_Store
vendored
BIN
res/icons/.DS_Store
vendored
BIN
res/icons/github.webp
Normal file
|
After Width: | Height: | Size: 1.3 KiB |
|
Before Width: | Height: | Size: 8.5 KiB After Width: | Height: | Size: 8.5 KiB |
BIN
res/icons/linkedin.webp
Normal file
|
After Width: | Height: | Size: 1.0 KiB |
|
Before Width: | Height: | Size: 8.6 KiB After Width: | Height: | Size: 8.6 KiB |
BIN
res/projects/freshmanual.webp
Normal file
|
After Width: | Height: | Size: 80 KiB |
BIN
res/projects/full/freshmanual.webp
Normal file
|
After Width: | Height: | Size: 683 KiB |
BIN
res/projects/full/malung.webp
Normal file
|
After Width: | Height: | Size: 550 KiB |
BIN
res/projects/full/pollbuddy.webp
Normal file
|
After Width: | Height: | Size: 351 KiB |
BIN
res/projects/full/rpi-crisis.webp
Normal file
|
After Width: | Height: | Size: 330 KiB |
BIN
res/projects/malung.webp
Normal file
|
After Width: | Height: | Size: 119 KiB |
BIN
res/projects/pollbuddy.webp
Normal file
|
After Width: | Height: | Size: 41 KiB |
BIN
res/projects/rpi-crisis.webp
Normal file
|
After Width: | Height: | Size: 39 KiB |
@@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<title>Resume of Maxim Voldman Hutz</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="This page holds a preview of the resume of Maxim Voldman Hutz.">
|
||||
<meta name="description" content="A preview of the resume of Maxim Voldman Hutz.">
|
||||
|
||||
<!-- Header metadata. -->
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
|
||||
@@ -1,30 +1 @@
|
||||
#notfound {
|
||||
--color: var(--dark) linear-gradient(#0000, #0003);
|
||||
flex: 99999999999999;
|
||||
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;
|
||||
}
|
||||
#notfound{--color:var(--dark) linear-gradient(#0000, #0003);flex:99999999999999;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}
|
||||
@@ -1,286 +1 @@
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
background-image: linear-gradient(#0003 0% 50%, #0000 50% 100%),
|
||||
linear-gradient(var(--dark) 0% 50%, var(--light) 50% 100%);
|
||||
}
|
||||
|
||||
body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
width: min(100vw, 1024px);
|
||||
box-sizing: border-box;
|
||||
margin: auto;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
/*----------------------------------------------------------------------------*/
|
||||
|
||||
* {
|
||||
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;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.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-family: "Source Serif Pro";
|
||||
}
|
||||
|
||||
p, section {
|
||||
font-size: 20px;
|
||||
font-family: "Open Sans";
|
||||
font-weight: 100;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style-type: "- ";
|
||||
padding-left: 2ch;
|
||||
}
|
||||
|
||||
li {
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.lighter {
|
||||
background: #fff4;
|
||||
}
|
||||
|
||||
.darker {
|
||||
background: #0004;
|
||||
}
|
||||
|
||||
hr {
|
||||
height: 1px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.button {
|
||||
color: var(--color);
|
||||
position: relative;
|
||||
padding: 10px 30px;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.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 {
|
||||
padding: 30px 0;
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
.project-noimage {
|
||||
color: #0002;
|
||||
font-size: 40px;
|
||||
font-family: "Open Sans";
|
||||
font-weight: 900;
|
||||
display: flex;
|
||||
flex: 1000;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.project-image-outer {
|
||||
position: relative;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.project-image {
|
||||
position: absolute;
|
||||
max-height: 100%;
|
||||
}
|
||||
html{scroll-behavior:smooth;background-image:linear-gradient(#0003 0% 50%,#0000 50% 100%),linear-gradient(var(--dark) 0% 50%,var(--light) 50% 100%)}body{flex-direction:column;min-height:100vh;width:min(100vw,1024px);box-sizing:border-box;margin:auto;padding:0 20px;line-height:1.2}*{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)}.button,.icon,.r-icon{display:inline-flex;align-items:center;justify-content:center;cursor:pointer}.icon::before,.r-icon::after{font-family:"Material Symbols Outlined";content:attr(data-i);width:1em}.icon::before{font-size:36px;margin-right:5px}.r-icon::after{margin-left:5px}h1,h2{font-size:40px;font-weight:900}h2{font-size:30px}i,p,section{font-size:20px;font-family:"Source Serif Pro"}h1,h2,p,section{font-family:"Open Sans"}p,section{font-weight:100}ul{list-style-type:"- ";padding-left:2ch}li{padding-bottom:20px}.lighter{background:#fff4}.darker{background:#0004}hr{height:1px;width:100%}.button{color:var(--color);position:relative;padding:10px 30px;font-size:20px}.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{padding:30px 0;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:min(max(40%,400px),100%);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}}.project-image-outer,.project-noimage{justify-content:center;align-items:center}.project-noimage{color:#0002;font-size:40px;font-family:"Open Sans";font-weight:900;display:flex;flex:1000;text-align:center;box-sizing:border-box;padding:10px}.project-image-outer{position:relative}.project-image{position:absolute;max-height:100%;max-width:100%;top:50%;left:50%;transform:translate(-50%,-50%)}
|
||||
@@ -1,81 +1 @@
|
||||
#banner {
|
||||
margin-top: 10px;
|
||||
padding: 20px 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
#experience {
|
||||
color: white;
|
||||
gap: 30px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
text-align: justify;
|
||||
-webkit-hyphens: auto;
|
||||
-moz-hyphens: auto;
|
||||
-ms-hyphens: auto;
|
||||
-o-hyphens: auto;
|
||||
hyphens: auto;
|
||||
}
|
||||
|
||||
#content {
|
||||
display: flex;
|
||||
flex-wrap: wrap-reverse;
|
||||
align-items: flex-end;
|
||||
gap: 30px;
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
|
||||
#image {
|
||||
background-color: #ccc;
|
||||
border-radius: 10px;
|
||||
height: 300px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #aaa;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#description {
|
||||
flex: 1;
|
||||
gap: 30px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
min-width: min(300px, 100%);
|
||||
}
|
||||
|
||||
#image-side {
|
||||
flex: 1;
|
||||
gap: 30px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
min-width: min(500px, 100%);
|
||||
}
|
||||
|
||||
#stack {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
flex-flow: row wrap;
|
||||
}
|
||||
|
||||
#stack .chip {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
#stack::after {
|
||||
content: "";
|
||||
flex: 1000000;
|
||||
}
|
||||
|
||||
#image-inner {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
#banner{margin-top:10px;padding:20px 0;display:flex;justify-content:space-between;align-items:center;line-height:1}#experience{color:#fff;gap:30px;display:flex;flex-direction:column;align-items:flex-start}#content{display:flex;flex-wrap:wrap-reverse;align-items:flex-end;gap:30px;padding-bottom:30px}#image{background-color:#ccc;border-radius:10px;height:300px;width:100%;display:flex;align-items:center;justify-content:center;color:#aaa;position:relative;text-align:center;padding:10px;hyphens:manual;box-sizing:border-box}#description,#image-side{flex:1;gap:30px;display:flex;flex-direction:column;align-items:flex-start;min-width:min(300px,100%)}#image-side{gap:20px;min-width:min(500px,100%)}#stack{display:flex;gap:10px;flex-flow:row wrap}#stack .chip{flex-grow:1}#stack::after{content:"";flex:1000000}#image-inner{max-width:100%;max-height:100%}#close-icon{font-size:36px;line-height:1}
|
||||
@@ -1,12 +1 @@
|
||||
footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: white;
|
||||
max-width: 1024px;
|
||||
margin: auto;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
footer::before {
|
||||
filter: brightness(0.8);
|
||||
}
|
||||
footer{display:flex;align-items:center;color:#fff;max-width:1024px;margin:auto;gap:10px}footer::before{filter:brightness(.8)}
|
||||
@@ -1,67 +1 @@
|
||||
* {
|
||||
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 }
|
||||
.flex.dark { background-color: var(--dark) }
|
||||
.space { flex: 1000 }
|
||||
.npad { padding: 0 !important }
|
||||
|
||||
/*----------------------------------------------------------------------------*/
|
||||
|
||||
html {
|
||||
background-color: var(--dark);
|
||||
}
|
||||
|
||||
/*----------------------------------------------------------------------------*/
|
||||
|
||||
.back {
|
||||
position: relative;
|
||||
padding: 10px 0;
|
||||
width: min(100vw, 1024px, 100%);
|
||||
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);
|
||||
}
|
||||
*{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}.malung{--color:#F76F8E}.freshmanual{--color:#3b91db}.pollbuddy{--color:#7f6491}.rpi-crisis{--color:#a06ce4}.flex,.flex-space,br{flex-grow:1}.flex.dark,html{background-color:var(--dark)}.space{flex:1000}.npad{padding:0!important}.back{position:relative;padding:10px 0;width:min(100vw,1024px,100%);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)}
|
||||
@@ -1,13 +1 @@
|
||||
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;
|
||||
}
|
||||
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}
|
||||
@@ -1,383 +1 @@
|
||||
/*---- 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;
|
||||
}
|
||||
}
|
||||
@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}}
|
||||
@@ -18,7 +18,7 @@
|
||||
{% assign data = tech[1] %}
|
||||
|
||||
.chip.{{id}} {
|
||||
background-color: {{data.back}};
|
||||
background: {{data.back}};
|
||||
color: {{data.fore}};
|
||||
}
|
||||
{% endfor %}
|
||||