Compare commits
31 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
810ede3202 | ||
|
|
a4a4e04ab2 | ||
|
|
219a7543de | ||
|
|
87a3c3d2b4 | ||
|
|
34e75a3748 | ||
|
|
f0b2bc0474 | ||
|
|
28e1dcc5d5 | ||
|
|
e011480ad1 | ||
|
|
77991356f4 | ||
|
|
875a80488c | ||
|
|
86434d5248 | ||
|
|
128c97900c | ||
|
|
fe013e056b | ||
|
|
03c19781e9 | ||
|
|
e264abd558 | ||
|
|
c1c1c664a3 | ||
|
|
f8b282c042 | ||
|
|
151f01c335 | ||
|
|
6fd537104e | ||
|
|
f7136af88e | ||
|
|
7e10a6e664 | ||
|
|
de831dbea3 | ||
|
|
30f3c69d32 | ||
|
|
011c58f69a | ||
|
|
beb2776c85 | ||
|
|
5e8ff650be | ||
|
|
2fc2271221 | ||
|
|
b7c7e0dd9c | ||
|
|
cf6a5ef910 | ||
|
|
4199536932 | ||
|
|
b63bebcebf |
11
.github/workflows/prepare.yml
vendored
11
.github/workflows/prepare.yml
vendored
@@ -26,15 +26,14 @@ jobs:
|
||||
|
||||
- name: Minify files.
|
||||
run: |
|
||||
for i in `find . -name "*.js" -type f`; do terser $i --compress -o $i; done
|
||||
for i in `find . -name "*.css" -type f`; do csso $i -o $i; done
|
||||
for i in `find . -name "*.html" -type f`; do html-minifier --remove-comments --collapse-whitespace $i -o $i; done
|
||||
find . -name "*.js" -type f -exec terser {} -c -o {} \;
|
||||
find . -name "*.css" -type f -exec csso {} -o {} \;
|
||||
|
||||
- name: "Commiting changes."
|
||||
run: |
|
||||
git config user.email "noreply@github.com"
|
||||
git config user.name "github-actions"
|
||||
git config user.name github-actions
|
||||
git config user.email noreply@github.com
|
||||
git commit -am "Preparing changes for deployment."
|
||||
|
||||
- name: "Pushing changes."
|
||||
run: git push -f --set-upstream origin build
|
||||
run: git push -uf origin build
|
||||
|
||||
5
.gitignore
vendored
Normal file
5
.gitignore
vendored
Normal file
@@ -0,0 +1,5 @@
|
||||
_site
|
||||
.bundle
|
||||
.jekyll-cache
|
||||
vendor
|
||||
.vscode
|
||||
16
404.html
Normal file
16
404.html
Normal file
@@ -0,0 +1,16 @@
|
||||
---
|
||||
title: 404
|
||||
description: Oops! The page you wanted does not exist.
|
||||
layout: default
|
||||
---
|
||||
|
||||
<link rel="stylesheet" href="/styles/404.css">
|
||||
|
||||
<section id="notfound" class="back">
|
||||
<div id="text-outer">
|
||||
<i>Looks like your lost!</i>
|
||||
<h1 id="text-404" class="shadow">404</h1>
|
||||
</div>
|
||||
<hr class="lighter">
|
||||
<button type="button" class="nav-link white button" onclick="history.back(-1)">Go Back.</button>
|
||||
</section>
|
||||
3
Gemfile
Normal file
3
Gemfile
Normal file
@@ -0,0 +1,3 @@
|
||||
source "https://rubygems.org"
|
||||
gem "jekyll", "~> 4.3"
|
||||
gem "jekyll-datapage-generator"
|
||||
72
Gemfile.lock
Normal file
72
Gemfile.lock
Normal file
@@ -0,0 +1,72 @@
|
||||
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
|
||||
12
_config.yml
Normal file
12
_config.yml
Normal file
@@ -0,0 +1,12 @@
|
||||
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
|
||||
16
_data/home.yml
Normal file
16
_data/home.yml
Normal file
@@ -0,0 +1,16 @@
|
||||
welcome:
|
||||
Hey! 👋 I'm Max Hutz.
|
||||
|
||||
status:
|
||||
Software developer in New York.
|
||||
|
||||
about:
|
||||
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.
|
||||
|
||||
email:
|
||||
maximhutz@gmail.com
|
||||
|
||||
featured:
|
||||
[ malung, freshmanual, pollbuddy, rpi-crisis ]
|
||||
47
_data/techs.yml
Normal file
47
_data/techs.yml
Normal file
@@ -0,0 +1,47 @@
|
||||
html:
|
||||
name: HTML
|
||||
fore: '#FFFFFF'
|
||||
back: '#E44D26'
|
||||
link: https://html.spec.whatwg.org/multipage/
|
||||
|
||||
css:
|
||||
name: CSS
|
||||
fore: '#FFFFFF'
|
||||
back: '#2965F1'
|
||||
link: https://www.w3.org/Style/CSS/Overview.en.html
|
||||
|
||||
js:
|
||||
name: JavaScript
|
||||
fore: '#323330'
|
||||
back: '#F0DB4F'
|
||||
link: https://en.wikipedia.org/wiki/JavaScript
|
||||
|
||||
php:
|
||||
name: PHP
|
||||
fore: '#242434'
|
||||
back: '#8B93BB'
|
||||
link: https://www.php.net
|
||||
|
||||
docker:
|
||||
name: Docker
|
||||
fore: '#2494EC'
|
||||
back: '#FFFFFF'
|
||||
link: https://www.docker.com
|
||||
|
||||
azure:
|
||||
name: Azure
|
||||
fore: '#EEEEEE'
|
||||
back: '#0962B0'
|
||||
link: https://azure.microsoft.com/en-us/
|
||||
|
||||
mariadb:
|
||||
name: MariaDB
|
||||
fore: '#1C335C'
|
||||
back: '#C4745C'
|
||||
link: https://mariadb.org
|
||||
|
||||
react:
|
||||
name: React
|
||||
fore: '#04D8F8'
|
||||
back: '#242323'
|
||||
link: https://reactjs.org
|
||||
113
_data/work.yml
Normal file
113
_data/work.yml
Normal file
@@ -0,0 +1,113 @@
|
||||
malung:
|
||||
id: malung
|
||||
title: Malung
|
||||
subtitle: COVID-19 Classifier
|
||||
stack: [ html, css, js, php, docker, mariadb, azure ]
|
||||
link: /404
|
||||
color: yellow
|
||||
|
||||
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.
|
||||
|
||||
outcomes:
|
||||
- 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.
|
||||
|
||||
#*----------------------------------------------------------------------------*#
|
||||
|
||||
freshmanual:
|
||||
id: freshmanual
|
||||
title: FreshManual
|
||||
subtitle: Mobile App
|
||||
stack: [ html, css, js, php, docker, mariadb, azure ]
|
||||
link: /404
|
||||
color: blue
|
||||
|
||||
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.
|
||||
|
||||
outcomes:
|
||||
- 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.
|
||||
|
||||
#*----------------------------------------------------------------------------*#
|
||||
|
||||
pollbuddy:
|
||||
id: pollbuddy
|
||||
title: Poll Buddy
|
||||
stack: [ html, css, js, php, docker, mariadb, azure ]
|
||||
link: /404
|
||||
color: green
|
||||
|
||||
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.
|
||||
|
||||
outcomes:
|
||||
- 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.
|
||||
|
||||
#*----------------------------------------------------------------------------*#
|
||||
|
||||
rpi-crisis:
|
||||
id: rpi-crisis
|
||||
title: CRISIS
|
||||
stack: [ html, css, js, php, docker, mariadb, azure ]
|
||||
link: /404
|
||||
color: red
|
||||
|
||||
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.
|
||||
|
||||
outcomes:
|
||||
- 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.
|
||||
|
||||
#*----------------------------------------------------------------------------*#
|
||||
13
_includes/footer.html
Normal file
13
_includes/footer.html
Normal file
@@ -0,0 +1,13 @@
|
||||
<link rel="stylesheet" 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">
|
||||
</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">
|
||||
</a>
|
||||
<a href="mailto:maximhutz@gmail.com" class="nav-link white icon" data-i="mail" aria-label="Contact" target="_blank"></a>
|
||||
</footer>
|
||||
30
_includes/header.html
Normal file
30
_includes/header.html
Normal file
@@ -0,0 +1,30 @@
|
||||
<link rel="stylesheet" href="/styles/header.css">
|
||||
|
||||
<header class="light back shadow">
|
||||
<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="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="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>
|
||||
|
||||
<dialog id="menu">
|
||||
<div class="light width-pad shadow">
|
||||
<div id="menu-inner">
|
||||
<div id="menu-top">
|
||||
<a href="/home" class="nav-link dark">MAX HUTZ</a>
|
||||
<div class="flex"></div>
|
||||
<form method="dialog">
|
||||
<button class="nav-link dark icon" data-i="close" aria-label="Close"></button>
|
||||
</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="mailto:maximhutz@gmail.com" class="nav-link dark icon" data-i="mail">Contact</a>
|
||||
</div>
|
||||
</div>
|
||||
</dialog>
|
||||
1
_includes/style.html
Normal file
1
_includes/style.html
Normal file
@@ -0,0 +1 @@
|
||||
<link rel="stylesheet" href="/styles/{{ include.name }}.css">
|
||||
36
_layouts/default.html
Normal file
36
_layouts/default.html
Normal file
@@ -0,0 +1,36 @@
|
||||
<!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>
|
||||
52
_layouts/experience.html
Normal file
52
_layouts/experience.html
Normal file
@@ -0,0 +1,52 @@
|
||||
---
|
||||
title: Example
|
||||
desc_type: project
|
||||
layout: default
|
||||
---
|
||||
|
||||
{% assign malung = site.data.work[page.data.id] %}
|
||||
{% assign techs = site.data.techs %}
|
||||
|
||||
<link rel="stylesheet" href="/styles/experience.css">
|
||||
<link rel="stylesheet" href="/styles/tech.css">
|
||||
|
||||
<section id="experience" class="dark back">
|
||||
<section id="banner" class="{{malung.color}} back">
|
||||
<div>
|
||||
<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>
|
||||
</section>
|
||||
<div id="content">
|
||||
<div id="description">
|
||||
<p>
|
||||
{{malung.description}}
|
||||
</p>
|
||||
<hr class="lighter">
|
||||
<ul>
|
||||
{% for outcome in malung.outcomes %}
|
||||
<li>{{outcome}}</li>
|
||||
{% 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>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div id="image-side">
|
||||
<div id="image" class="shadow">
|
||||
{% if malung.image %}
|
||||
<img id="image-inner" src="{{malung.image}}" alt="Image of {{malung.title}}">
|
||||
{% else %}
|
||||
<h1 aria-hidden="true">Image Not Available</h1>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div id="stack">
|
||||
{% for tech in malung.stack %}
|
||||
{% assign data = techs[tech] %}
|
||||
<a class="chip {{tech}} shadow" href="{{data.link}}" target="_blank">{{data.name}}</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
36
experiences.html
Normal file
36
experiences.html
Normal file
@@ -0,0 +1,36 @@
|
||||
---
|
||||
title: Experiences
|
||||
description: A list of past and current work and projects from Maxim Voldman Hutz.
|
||||
layout: default
|
||||
---
|
||||
|
||||
{% assign work = site.data.work %}
|
||||
|
||||
<section id="projects" class="dark back">
|
||||
<h2>My experiences.</h2>
|
||||
<div id="project-list">
|
||||
{% for item in work %}
|
||||
{% assign id = item[0] %}
|
||||
{% assign data = item[1] %}
|
||||
|
||||
<a class="{{ data.color }} project-item shadow" href="/experience/{{ id }}">
|
||||
{% if data.image %}
|
||||
<div class="space project-image-outer">
|
||||
<img src="{{data.image}}" alt="{{data.title}}" class="project-image">
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="project-noimage" aria-hidden="true">Image Not Available</div>
|
||||
{% endif %}
|
||||
<div class="nav-link project-link r-icon" data-i="arrow_right">
|
||||
{{ data.title }}
|
||||
<!-- Add the subtitle, if it exists. -->
|
||||
{% if data.subtitle %}
|
||||
<span>:</span>
|
||||
|
||||
<p>{{ data.subtitle }}</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</section>
|
||||
318
home/index.css
318
home/index.css
@@ -1,318 +0,0 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,500,1,200');
|
||||
@import url('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');
|
||||
@import url('https://fonts.googleapis.com/css2?family=Source+Serif+Pro:ital@1&display=swap');
|
||||
|
||||
/*----------------------------------------------------------------------------*/
|
||||
|
||||
* {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
margin: 0;
|
||||
outline: 0;
|
||||
|
||||
--light: #FEFADC;
|
||||
--dark: #504B43;
|
||||
--red: #F8333C;
|
||||
--yellow: #FCAB10;
|
||||
--green: #8FD694;
|
||||
--blue: #2B9EB3;
|
||||
|
||||
--timing: cubic-bezier(0.2, 1, 0, 1);
|
||||
--start-timing: cubic-bezier(0,.5,0,.9);
|
||||
}
|
||||
|
||||
.light { --color: var(--light) }
|
||||
.dark { --color: var(--dark) }
|
||||
.red { --color: var(--red) }
|
||||
.yellow { --color: var(--yellow) }
|
||||
.green { --color: var(--green) }
|
||||
.blue { --color: var(--blue) }
|
||||
|
||||
.flex-space { flex: 1 }
|
||||
|
||||
.pos-center {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
/*----------------------------------------------------------------------------*/
|
||||
|
||||
@media (min-aspect-ratio: 6 / 5) {
|
||||
.nav2, .nav3 {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-aspect-ratio: 3 / 4) and (max-aspect-ratio: 6 / 5) {
|
||||
.nav1, .nav3 {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-aspect-ratio: 3 / 4) {
|
||||
.nav1, .nav2 {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
/*----------------------------------------------------------------------------*/
|
||||
|
||||
html {
|
||||
background: var(--dark);
|
||||
scroll-behavior: smooth;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
nav {
|
||||
position: fixed;
|
||||
z-index: 1000;
|
||||
filter: drop-shadow(0px 0px 100px #000);
|
||||
}
|
||||
|
||||
#title-page > * {
|
||||
opacity: calc(1 - 1.25 * var(--scroll, 0));
|
||||
-webkit-backface-visibility: hidden;
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
|
||||
#title-page {
|
||||
position: fixed;
|
||||
width: 100vw;
|
||||
background-color: var(--light);
|
||||
-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 80%, 0% 100%);
|
||||
clip-path: polygon(0% 0%, 100% 0%, 100% 80%, 0% 100%);
|
||||
height: calc(90vh - 77.5vh * var(--scroll, 0));
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#title-bottom {
|
||||
position: absolute;
|
||||
top: 65%;
|
||||
}
|
||||
|
||||
#avatar {
|
||||
position: fixed;
|
||||
top: 50vh;
|
||||
translate: 0 calc(-70% - 35% * var(--scroll, 0));
|
||||
filter: grayscale(1) opacity(0.3);
|
||||
z-index: -1;
|
||||
width: max(90vmin, 60vh);
|
||||
height: max(90vmin, 60vh);
|
||||
image-rendering: crisp-edges;
|
||||
image-rendering: -webkit-optimize-contrast;
|
||||
}
|
||||
|
||||
#title-name::before {
|
||||
content: "Hi! I'm";
|
||||
position: absolute;
|
||||
font-family: "Source Serif Pro", serif;
|
||||
font-style: italic;
|
||||
font-size: calc(min(6vh, 8vw));
|
||||
line-height: calc(min(5vh, 7vw));
|
||||
top: 0;
|
||||
left: 0;
|
||||
translate: 1vmin -100%;
|
||||
color: var(--dark);
|
||||
}
|
||||
|
||||
.fade-text::before {
|
||||
content: attr(data-t) " " attr(data-t) " " attr(data-t) " " attr(data-t) " " attr(data-t) " " attr(data-t) " " attr(data-t);
|
||||
font-size: calc(min(12vh, 16vw));
|
||||
line-height: calc(min(11vh, 14vw));
|
||||
font-family: "Open Sans", sans-serif;
|
||||
font-weight: 900;
|
||||
white-space: pre;
|
||||
color: black;
|
||||
}
|
||||
|
||||
#title-name {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
translate: -50% 0;
|
||||
font-size: calc(min(12vh, 16vw));
|
||||
line-height: calc(min(11vh, 14vw));
|
||||
font-family: "Open Sans", sans-serif;
|
||||
font-weight: 900;
|
||||
color: transparent;
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
background-image: linear-gradient(45deg, #F008, #00F8);
|
||||
transform: translateZ(0);
|
||||
}
|
||||
|
||||
.fade1 { opacity: 05%; translate: 0 0; }
|
||||
|
||||
.fade2 { opacity: 10%; translate: -5% 0; }
|
||||
|
||||
.fade3 { opacity: 20%; translate: 5% 0; }
|
||||
|
||||
.fade4 { opacity: 25%; translate: -10% 0; }
|
||||
|
||||
.fade5 { opacity: 30%; translate: 10% 0; }
|
||||
|
||||
.navbar {
|
||||
padding: 2vmin 3vmin;
|
||||
width: 100vw;
|
||||
position: absolute;
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
align-items: flex-start;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
nav a:nth-child(1) { animation: nav-enter 2s 000ms var(--timing) backwards; }
|
||||
nav a:nth-child(2) { animation: nav-enter 2s 100ms var(--timing) backwards; }
|
||||
nav a:nth-child(3) { animation: nav-enter 2s 200ms var(--timing) backwards; }
|
||||
nav a:nth-child(4) { animation: nav-enter 2s 300ms var(--timing) backwards; }
|
||||
nav a:nth-child(5) { animation: nav-enter 2s 400ms var(--timing) backwards; }
|
||||
nav a:nth-child(6) { animation: nav-enter 2s 500ms var(--timing) backwards; }
|
||||
nav a:nth-child(7) { animation: nav-enter 2s 600ms var(--timing) backwards; }
|
||||
|
||||
@keyframes nav-enter {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateX(-7%);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateX(0%);
|
||||
}
|
||||
}
|
||||
|
||||
.button {
|
||||
position: relative;
|
||||
font-style: normal;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 4vh;
|
||||
font-family: "Open Sans", sans-serif;
|
||||
font-weight: 900;
|
||||
padding: 1vh 3vh;
|
||||
color: var(--color, var(--dark));
|
||||
background: transparent;
|
||||
text-decoration: none;
|
||||
transition: transform var(--timing) 1s, filter var(--timing) 1s;
|
||||
}
|
||||
|
||||
.button.icon {
|
||||
font-size: 2.5vh;
|
||||
}
|
||||
|
||||
.button:active {
|
||||
transition: transform var(--timing) 0.3s, filter var(--timing) 0.3s;
|
||||
transform: scale(0.9);
|
||||
}
|
||||
|
||||
.button.icon::before {
|
||||
content: attr(data-i);
|
||||
font-family: "Material Symbols Outlined";
|
||||
font-size: 4vh;
|
||||
}
|
||||
|
||||
.button::after {
|
||||
content: "";
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
background-color: var(--color, var(--dark));
|
||||
filter: opacity(0);
|
||||
transform: scale(0.9);
|
||||
z-index: -1;
|
||||
border-radius: 1vh;
|
||||
transition: transform var(--timing) 1s, filter var(--timing) 1s;
|
||||
}
|
||||
|
||||
.button:hover::after {
|
||||
filter: opacity(0.25);
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
@media (hover: none) {
|
||||
.button:hover::after {
|
||||
filter: opacity(0);
|
||||
transform: scale(0.9);
|
||||
}
|
||||
}
|
||||
|
||||
.button:active::after {
|
||||
filter: opacity(0.5);
|
||||
}
|
||||
|
||||
/*----------------------------------------------------------------------------*/
|
||||
|
||||
article {
|
||||
margin-bottom: 200vh;
|
||||
background-color: var(--color, transparent);
|
||||
}
|
||||
|
||||
#about-section {
|
||||
height: 60vmin;
|
||||
}
|
||||
|
||||
#title-section {
|
||||
height: 90vmin;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
/*----------------------------------------------------------------------------*/
|
||||
|
||||
#menu-modal::backdrop {
|
||||
background-color: #0008;
|
||||
animation: 0.5s ease menu-back-enter;
|
||||
}
|
||||
|
||||
#menu-modal {
|
||||
position: fixed;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
max-height: 100vh;
|
||||
max-width: 100vw;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
#menu-inner {
|
||||
padding: 2vmin 3vmin;
|
||||
position: fixed;
|
||||
height: 100vh;
|
||||
width: 75vw;
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
-webkit-clip-path: polygon(0% 0%, 100% 0%, 90% 100%, 0% 100%);
|
||||
clip-path: polygon(0% 0%, 100% 0%, 90% 100%, 0% 100%);
|
||||
background-color: var(--light);
|
||||
}
|
||||
|
||||
#menu-modal[open] {
|
||||
animation: 0.5s ease menu-enter;
|
||||
}
|
||||
|
||||
@keyframes menu-enter {
|
||||
from {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translateX(0%);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes menu-back-enter {
|
||||
from {
|
||||
filter: opacity(0);
|
||||
}
|
||||
|
||||
to {
|
||||
filter: opacity(1);
|
||||
}
|
||||
}
|
||||
@@ -1,61 +0,0 @@
|
||||
<!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">
|
||||
<link rel="icon" type="image/x-icon" href="/res/favicon.ico">
|
||||
<link rel="stylesheet" href="index.css">
|
||||
<script src="index.js"></script>
|
||||
<title>Max's Place</title>
|
||||
</head>
|
||||
<body>
|
||||
<nav>
|
||||
<header class="navbar nav1">
|
||||
<a href="#" class="button" data-i="home">Max's Place</a>
|
||||
<div class="flex-space"></div>
|
||||
<a href="/about" class="red icon button" data-i="accessibility_new">About</a>
|
||||
<a href="/projects" class="yellow icon button" data-i="design_services">Projects</a>
|
||||
<a href="/resume" class="green icon button" data-i="draft">Resume</a>
|
||||
<a href="/contact" class="blue icon button" data-i="push_pin">Contact</a>
|
||||
</header>
|
||||
<header class="navbar nav2">
|
||||
<a href="#" class="button" data-i="home">Max's Place</a>
|
||||
<div class="flex-space"></div>
|
||||
<a href="/about" class="red icon button" data-i="accessibility_new"></a>
|
||||
<a href="/projects" class="yellow icon button" data-i="design_services"></a>
|
||||
<a href="/resume" class="green icon button" data-i="draft"></a>
|
||||
<a href="/contact" class="blue icon button" data-i="push_pin"></a>
|
||||
</header>
|
||||
<header class="navbar nav3">
|
||||
<a href="#" class="button" data-i="home">Max's Place</a>
|
||||
<div class="flex-space"></div>
|
||||
<button class="icon button" data-i="menu" onclick="openMenu()"></button>
|
||||
</header>
|
||||
<div id="title-page">
|
||||
<img src="/res/avatar.svg" alt="Avatar" id="avatar">
|
||||
<div id="title-bottom">
|
||||
<div id="title-name">MAX HUTZ</div>
|
||||
<div class="fade-text fade1" data-t="MAX HUTZ"></div>
|
||||
<div class="fade-text fade2" data-t="MAX HUTZ"></div>
|
||||
<div class="fade-text fade3" data-t="MAX HUTZ"></div>
|
||||
<div class="fade-text fade4" data-t="MAX HUTZ"></div>
|
||||
<div class="fade-text fade5" data-t="MAX HUTZ"></div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<article id="title-section"></article>
|
||||
|
||||
<dialog id="menu-modal">
|
||||
<div id="menu-inner">
|
||||
<a href="#" class="button" data-i="home" onclick="closeMenu()">Max's Place</a>
|
||||
<div class="flex-space"></div>
|
||||
<a href="/about" class="red icon button" data-i="accessibility_new" onclick="closeMenu()">About</a>
|
||||
<a href="/projects" class="yellow icon button" data-i="design_services" onclick="closeMenu()">Projects</a>
|
||||
<a href="/resume" class="green icon button" data-i="draft" onclick="closeMenu()">Resume</a>
|
||||
<a href="/contact" class="blue icon button" data-i="push_pin" onclick="closeMenu()">Contact</a>
|
||||
<div class="flex-space"></div>
|
||||
</div>
|
||||
</dialog>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,52 +0,0 @@
|
||||
let menuOpen = true;
|
||||
|
||||
function calcScroll() {
|
||||
const scroll = window.scrollY;
|
||||
const vh = window.innerHeight / 100;
|
||||
const title = document.getElementById("title-page");
|
||||
if (title == null) return;
|
||||
|
||||
title.style.setProperty("--scroll", Math.min(1, scroll / (77.5 * vh)));
|
||||
}
|
||||
|
||||
function openMenu() {
|
||||
const menu = document.getElementById("menu-modal");
|
||||
if (menu == null) return;
|
||||
requestAnimationFrame(() => menuOpen = false);
|
||||
menu.showModal();
|
||||
}
|
||||
|
||||
function closeMenu() {
|
||||
const menu = document.getElementById("menu-modal");
|
||||
if (menu == null) return;
|
||||
requestAnimationFrame(() => menuOpen = true);
|
||||
menu.close();
|
||||
}
|
||||
|
||||
function main() {
|
||||
document.body.addEventListener('wheel', preventScroll, { passive: false });
|
||||
document.body.addEventListener('touchmove', preventScroll, { passive: false });
|
||||
window.addEventListener("scroll", () => requestAnimationFrame(calcScroll));
|
||||
|
||||
const menu = document.getElementById("menu-modal");
|
||||
|
||||
if (menu) {
|
||||
menu.addEventListener("click", clickMenuModal);
|
||||
menu.addEventListener("touchstart", clickMenuModal);
|
||||
}
|
||||
}
|
||||
|
||||
function clickMenuModal(e) {
|
||||
const menu = document.getElementById("menu-modal");
|
||||
if (menu == null || e.target != menu) return;
|
||||
closeMenu();
|
||||
}
|
||||
|
||||
function preventScroll(e) {
|
||||
if (menuOpen) return;
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
return false;
|
||||
}
|
||||
|
||||
window.onload = main;
|
||||
62
index.html
62
index.html
@@ -1,7 +1,55 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Refresh" content="0; url=home"/>
|
||||
</head>
|
||||
<body bgcolor="black"></body>
|
||||
</html>
|
||||
---
|
||||
title: Home
|
||||
description: This is the home page of Maxim Voldman Hutz's personal website.
|
||||
layout: default
|
||||
---
|
||||
|
||||
{% assign home = site.data.home %}
|
||||
{% assign work = site.data.work %}
|
||||
|
||||
<section id="about" class="light back">
|
||||
<div class="flex"></div>
|
||||
<div class="flex"></div>
|
||||
<div>
|
||||
<h1>{{ home.welcome }}</h1>
|
||||
<i>{{ home.status }}</i>
|
||||
</div>
|
||||
<p id="about-me">{{ home.about }}</p>
|
||||
<hr class="darker">
|
||||
<nav>
|
||||
<div id="inner-nav">
|
||||
<a href="mailto:{{ home.email }}" class="nav-link blue button flex">{{ home.email }}</a>
|
||||
<a href="/resume" class="nav-link red button r-icon flex" data-i="arrow_right" target="_blank">View Resume</a>
|
||||
</div>
|
||||
<div class="space"></div>
|
||||
</nav>
|
||||
<div class="flex"></div>
|
||||
</section>
|
||||
|
||||
<section id="projects" class="dark back">
|
||||
<h2>Worked on:</h2>
|
||||
<div id="project-list">
|
||||
{% for project in home.featured %}
|
||||
<a class="{{ work[project].color }} project-item shadow" href="/experience/{{ project }}">
|
||||
{% if work[project].image %}
|
||||
<div class="space project-image-outer">
|
||||
<img src="{{work[project].image}}" alt="{{work[project].title}}" class="project-image">
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="project-noimage" aria-hidden="true">Image Not Available</div>
|
||||
{% endif %}
|
||||
<div class="nav-link project-link r-icon" data-i="arrow_right">
|
||||
{{ work[project].title }}
|
||||
<!-- Add the subtitle, if it exists. -->
|
||||
{% if work[project].subtitle %}
|
||||
<span>:</span>
|
||||
|
||||
<p>{{ work[project].subtitle }}</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<hr class="lighter">
|
||||
<a href="/experiences" id="experience-button" class="nav-link white button">View all experiences.</a>
|
||||
</section>
|
||||
BIN
res/.DS_Store
vendored
BIN
res/.DS_Store
vendored
Binary file not shown.
|
Before Width: | Height: | Size: 20 KiB After Width: | Height: | Size: 20 KiB |
BIN
res/icons/.DS_Store
vendored
Normal file
BIN
res/icons/.DS_Store
vendored
Normal file
Binary file not shown.
BIN
res/icons/github.png
Normal file
BIN
res/icons/github.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.5 KiB |
BIN
res/icons/linkedin.png
Normal file
BIN
res/icons/linkedin.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.6 KiB |
@@ -16,7 +16,8 @@
|
||||
">
|
||||
|
||||
<!-- Resume styling. -->
|
||||
<link rel="preload stylesheet" as="style" href="index.css">
|
||||
<link rel="preload stylesheet" as="style" href="/styles/global.css">
|
||||
<link rel="preload stylesheet" as="style" href="/styles/resume.css">
|
||||
|
||||
<!-- Site's Icon -->
|
||||
<link rel="icon" type="image/png" href="/res/favicon.ico">
|
||||
30
styles/404.css
Normal file
30
styles/404.css
Normal file
@@ -0,0 +1,30 @@
|
||||
#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;
|
||||
}
|
||||
286
styles/default.css
Normal file
286
styles/default.css
Normal file
@@ -0,0 +1,286 @@
|
||||
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%;
|
||||
}
|
||||
81
styles/experience.css
Normal file
81
styles/experience.css
Normal file
@@ -0,0 +1,81 @@
|
||||
#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%;
|
||||
}
|
||||
12
styles/footer.css
Normal file
12
styles/footer.css
Normal file
@@ -0,0 +1,12 @@
|
||||
footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: white;
|
||||
max-width: 1024px;
|
||||
margin: auto;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
footer::before {
|
||||
filter: brightness(0.8);
|
||||
}
|
||||
67
styles/global.css
Normal file
67
styles/global.css
Normal file
@@ -0,0 +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-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);
|
||||
}
|
||||
13
styles/header.css
Normal file
13
styles/header.css
Normal file
@@ -0,0 +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;
|
||||
}
|
||||
@@ -22,7 +22,6 @@
|
||||
|
||||
html {
|
||||
font-size: 1vw;
|
||||
background: black;
|
||||
animation: var(--enter) scene-enter;
|
||||
}
|
||||
|
||||
@@ -148,7 +147,7 @@ article {
|
||||
}
|
||||
|
||||
body::before {
|
||||
background: lightsteelblue linear-gradient(45deg, #F008, #00F8);
|
||||
background: lightsteelblue var(--grad);
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
content: "";
|
||||
24
styles/tech.scss
Normal file
24
styles/tech.scss
Normal file
@@ -0,0 +1,24 @@
|
||||
---
|
||||
---
|
||||
|
||||
.chip {
|
||||
font-size: 15px;
|
||||
font-family: "Open Sans";
|
||||
font-weight: 900;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 5px 20px;
|
||||
border-radius: 10px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
{% for tech in site.data.techs %}
|
||||
{% assign id = tech[0] %}
|
||||
{% assign data = tech[1] %}
|
||||
|
||||
.chip.{{id}} {
|
||||
background-color: {{data.back}};
|
||||
color: {{data.fore}};
|
||||
}
|
||||
{% endfor %}
|
||||
Reference in New Issue
Block a user