OHAUL: Completely new figma design, made about section.
This commit is contained in:
MajorDroolz
537
home/index.css
537
home/index.css
@@ -1,504 +1,165 @@
|
||||
@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;
|
||||
}
|
||||
|
||||
.nav12 > p {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-aspect-ratio: 3 / 4) {
|
||||
.nav1, .nav2, .nav12 {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
/*----------------------------------------------------------------------------*/
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
width: 100vw;
|
||||
padding: 100vh 0;
|
||||
color: white;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
body {
|
||||
position: relative;
|
||||
padding: 0 10vmin;
|
||||
--max-width: 1024px;
|
||||
--pad: max(20px, calc((100vw - var(--max-width)) / 2));
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
overflow-x: visible;
|
||||
}
|
||||
|
||||
header {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
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;
|
||||
text-transform: none;
|
||||
font-family: "Source Code Pro";
|
||||
font-weight: normal;
|
||||
font-size: calc(min(6vh, 8vw));
|
||||
line-height: calc(min(5vh, 7vw));
|
||||
top: 0;
|
||||
left: 0;
|
||||
translate: 1vmin -100%;
|
||||
.nav-link {
|
||||
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);
|
||||
text-transform: uppercase;
|
||||
font-size: 15vmin;
|
||||
line-height: 15vmin;
|
||||
font-family: "Open Sans", sans-serif;
|
||||
font-weight: 900;
|
||||
white-space: pre;
|
||||
color: black;
|
||||
}
|
||||
|
||||
#title-name {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
text-transform: uppercase;
|
||||
translate: -50% 0;
|
||||
font-size: 15vmin;
|
||||
line-height: 15vmin;
|
||||
font-family: "Open Sans", sans-serif;
|
||||
font-weight: 900;
|
||||
color: transparent;
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
background-image: var(--grad);
|
||||
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;
|
||||
}
|
||||
|
||||
.button {
|
||||
white-space: nowrap;
|
||||
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;
|
||||
font-weight: 900;
|
||||
font-family: "Open Sans";
|
||||
}
|
||||
|
||||
.icon {
|
||||
font-size: 2.5vh;
|
||||
.shadow {
|
||||
filter: drop-shadow(0 4px 0 #0004);
|
||||
}
|
||||
|
||||
.button:active {
|
||||
transition: transform var(--timing) 0.3s, filter var(--timing) 0.3s;
|
||||
transform: scale(0.9);
|
||||
.icon, .r-icon, .button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.clamp-width {
|
||||
width: 100vw;
|
||||
padding-right: var(--pad);
|
||||
padding-left: var(--pad);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.icon::before {
|
||||
font-family: 'Material Symbols Outlined';
|
||||
content: attr(data-i);
|
||||
font-family: "Material Symbols Outlined";
|
||||
font-size: 4vh;
|
||||
font-size: 36px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.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;
|
||||
.r-icon::after {
|
||||
font-family: 'Material Symbols Outlined';
|
||||
content: attr(data-i);
|
||||
font-size: 1.5rem;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.button:hover::after {
|
||||
filter: opacity(0.25);
|
||||
transform: scale(1);
|
||||
.scroll-opacity {
|
||||
opacity: calc(1 - var(--scroll));
|
||||
}
|
||||
|
||||
@media (hover: none) {
|
||||
.button:hover::after {
|
||||
filter: opacity(0);
|
||||
transform: scale(0.9);
|
||||
}
|
||||
}
|
||||
|
||||
.button:active::after {
|
||||
filter: opacity(0.5);
|
||||
}
|
||||
|
||||
/*----------------------------------------------------------------------------*/
|
||||
|
||||
#menu-modal::backdrop {
|
||||
background-color: #0008;
|
||||
}
|
||||
|
||||
#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);
|
||||
}
|
||||
|
||||
/*----------------------------------------------------------------------------*/
|
||||
|
||||
h2 {
|
||||
font-family: "Open Sans", sans-serif;
|
||||
h1 {
|
||||
font-size: 40px;
|
||||
font-family: "Open Sans";
|
||||
font-weight: 900;
|
||||
font-size: 15vmin;
|
||||
text-transform: uppercase;
|
||||
line-height: 15vmin;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-family: "Open Sans", sans-serif;
|
||||
font-weight: 900;
|
||||
font-size: 10vmin;
|
||||
text-transform: uppercase;
|
||||
position: relative;
|
||||
i {
|
||||
font-size: 20px;
|
||||
font-size: "Source Serif Pro";
|
||||
}
|
||||
|
||||
p {
|
||||
font-family: "Source Code Pro", monospace;
|
||||
font-size: 5vmin;
|
||||
font-size: 20px;
|
||||
font-family: "Open Sans";
|
||||
font-weight: 100;
|
||||
}
|
||||
|
||||
.p2 {
|
||||
font-family: "Source Code Pro", monospace;
|
||||
font-size: 3vmin;
|
||||
.lighter {
|
||||
background: #fff4;
|
||||
}
|
||||
|
||||
.card {
|
||||
margin: 20vmin 0;
|
||||
.darker {
|
||||
background: #0004;
|
||||
}
|
||||
|
||||
a {
|
||||
font-size: 3.5vmin;
|
||||
font-family: "Open Sans", sans-serif;
|
||||
font-weight: 900;
|
||||
color: white;
|
||||
hr {
|
||||
height: 1px;
|
||||
}
|
||||
|
||||
.card-back {
|
||||
.button {
|
||||
color: var(--color);
|
||||
position: relative;
|
||||
padding: 10px 40px;
|
||||
}
|
||||
|
||||
.button::before {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%) rotate(var(--rotate));
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 10vmin 20vmin;
|
||||
background-color: var(--color);
|
||||
box-shadow: var(--shadow);
|
||||
overflow: hidden;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.card-back-inner {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transform: rotate(calc(-1 * var(--rotate)));
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.fade-horizontal::before {
|
||||
position: absolute;
|
||||
content: attr(data-t) " " attr(data-t) " " attr(data-t) " " attr(data-t) " " attr(data-t) " " attr(data-t) " " attr(data-t) " ";
|
||||
white-space: pre;
|
||||
color: #0002;
|
||||
z-index: -1;
|
||||
left: 0;
|
||||
mask: linear-gradient(to right, black 0%, transparent 50%);
|
||||
background: var(--color);
|
||||
opacity: 50%;
|
||||
content: "";
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
/*----------------------------------------------------------------------------*/
|
||||
|
||||
#about-me {
|
||||
header {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: 40px;
|
||||
font-size: 25px;
|
||||
padding: 20px;
|
||||
font-family: "Open Sans";
|
||||
font-weight: bolder;
|
||||
color: var(--dark);
|
||||
align-items: center;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
#about-me__title {
|
||||
text-align: right;
|
||||
margin-right: 10vmin;
|
||||
#header-back {
|
||||
background: var(--light);
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 84px;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#about-me__text {
|
||||
width: 80vmin;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#about-me__back {
|
||||
--rotate: 5deg;
|
||||
--color: var(--red);
|
||||
}
|
||||
|
||||
#about-me-inner {
|
||||
#about {
|
||||
height: 90vh;
|
||||
background: var(--light);
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
flex-direction: column;
|
||||
transform: rotate(calc(-1 * var(--rotate))) translateY(10%);
|
||||
gap: 30px;
|
||||
padding-bottom: 30px;
|
||||
color: var(--dark);
|
||||
}
|
||||
|
||||
#about-me-icon1 {
|
||||
#avatar {
|
||||
filter: grayscale(1) opacity(0.2);
|
||||
position: absolute;
|
||||
left: -10vmin;
|
||||
top: -10vmin;
|
||||
transform: rotate(5deg);
|
||||
width: 900px;
|
||||
height: 900px;
|
||||
left: 70%;
|
||||
top: 35%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
#about-me-icon1::before {
|
||||
font-size: 10vmin;
|
||||
nav {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
#about-hr {
|
||||
max-width: 600px;
|
||||
}
|
||||
|
||||
#about-me {
|
||||
max-width: 600px;
|
||||
}
|
||||
|
||||
/*----------------------------------------------------------------------------*/
|
||||
|
||||
#projects {
|
||||
max-width: 200vmin;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#projects__back {
|
||||
--rotate: -5deg;
|
||||
--color: var(--yellow);
|
||||
padding: 10vmin 40vmin;
|
||||
}
|
||||
|
||||
#projects__text {
|
||||
position: relative;
|
||||
padding-top: 5vmin;
|
||||
}
|
||||
|
||||
.project-section {
|
||||
margin: 10vmin 0;
|
||||
}
|
||||
|
||||
.project__description {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
gap: 10vmin;
|
||||
}
|
||||
|
||||
.project-desc__text {
|
||||
min-width: 70vmin;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.project-desc__img {
|
||||
flex: 1;
|
||||
min-width: 50vmin;
|
||||
height: 50vmin;
|
||||
box-shadow: var(--shadow);
|
||||
border-radius: 2vmin;
|
||||
background: white;
|
||||
}
|
||||
|
||||
#projects-inner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
flex-direction: column;
|
||||
transform: rotate(calc(-1 * var(--rotate))) translateY(20vmin);
|
||||
}
|
||||
|
||||
#view-projects-button {
|
||||
margin-top: 20vmin;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#view-projects-button-inner {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#view-all-button {
|
||||
user-select: none;
|
||||
position: absolute;
|
||||
top: -4vmin;
|
||||
left: 1vmin;
|
||||
font-size: 5vmin;
|
||||
}
|
||||
|
||||
#view-projects-icon {
|
||||
user-select: none;
|
||||
position: absolute;
|
||||
top: -6vmin;
|
||||
right: 1vmin;
|
||||
}
|
||||
|
||||
#view-projects-icon::before {
|
||||
font-size: 8vmin;
|
||||
}
|
||||
|
||||
#projects-icon1 {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: -10vmin;
|
||||
transform: rotate(-5deg);
|
||||
}
|
||||
|
||||
#projects-icon1::before {
|
||||
font-size: 10vmin;
|
||||
}
|
||||
|
||||
/*----------------------------------------------------------------------------*/
|
||||
|
||||
#my-experience {
|
||||
max-width: 200vmin;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#my-experience__title {
|
||||
margin-bottom: 5vmin;
|
||||
font-size: 13vmin;
|
||||
}
|
||||
|
||||
#my-experience__text-outer {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
max-width: 100vw;
|
||||
gap: 30vmin;
|
||||
}
|
||||
|
||||
#my-experience__text {
|
||||
position: relative;
|
||||
width: 50vmin;
|
||||
}
|
||||
|
||||
#my-experience__back {
|
||||
--rotate: 5deg;
|
||||
--color: var(--green);
|
||||
padding: 10vmin 15vmin;
|
||||
}
|
||||
|
||||
#my-experience-inner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
flex-direction: column;
|
||||
transform: rotate(calc(-1 * var(--rotate))) translateY(10%);
|
||||
}
|
||||
|
||||
#my-experience__resume {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 5vmin;
|
||||
}
|
||||
|
||||
#my-experience__resume-img {
|
||||
width: 40vmin;
|
||||
height: 60vmin;
|
||||
background-color: white;
|
||||
border-radius: 2vmin;
|
||||
box-shadow: var(--shadow);
|
||||
height: 100vh;
|
||||
}
|
||||
187
home/index.html
187
home/index.html
@@ -15,172 +15,37 @@
|
||||
|
||||
<link rel="stylesheet" href="/styles.css">
|
||||
<link rel="stylesheet" href="index.css">
|
||||
|
||||
<script src="index.js"></script>
|
||||
<title>Max's Place</title>
|
||||
<title>Max Hutz</title>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<nav class="navbar">
|
||||
<a href="#" class="button" data-i="home">Max's Place</a>
|
||||
<div class="flex-space"></div>
|
||||
<a href="#about-me" class="red icon nav12 button" data-i="accessibility_new">About</a>
|
||||
<a href="#projects" class="yellow icon nav12 button" data-i="design_services">Projects</a>
|
||||
<a href="/resume" class="green icon nav12 button" data-i="draft">Resume</a>
|
||||
<a href="#contact-me" class="blue icon nav12 button" data-i="push_pin">Contact</a>
|
||||
<button class="icon button nav3" data-i="menu" onclick="openMenu()"></button>
|
||||
</nav>
|
||||
<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>
|
||||
<div id="header-back" class="shadow"></div>
|
||||
<header class="clamp-width">
|
||||
<a href="#" class="nav-link">MAX HUTZ</a>
|
||||
<div class="flex-space"></div>
|
||||
<a href="#" class="nav-link icon" data-i="work">Experience</a>
|
||||
<a href="#" class="nav-link icon" data-i="clinical_notes">Resume</a>
|
||||
<a href="#" class="nav-link icon" data-i="mail">Contact</a>
|
||||
</header>
|
||||
|
||||
<section id="about-me" class="card">
|
||||
<h2 id="about-me__title">About<br>Me</h2>
|
||||
<div id="about-me__text">
|
||||
<p id="about-me-icon1" class="white icon" data-i="accessibility_new"></p>
|
||||
|
||||
<div id="about-me__back" class="card-back">
|
||||
<div id="about-me-inner" class="card-back-inner">
|
||||
<div class="fade-text fade1" data-t="About Me"></div>
|
||||
<div class="fade-text fade2" data-t="About Me"></div>
|
||||
<div class="fade-text fade3" data-t="About Me"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
Passionate computer science student skilled in building
|
||||
<b>responsive, full-stack applications</b>.
|
||||
|
||||
Motivated to learn from colleagues and
|
||||
<b>teach future developers</b>.
|
||||
|
||||
Seeks role to fashion software solutions, focused on
|
||||
<b>teamwork and creativity</b>.
|
||||
</p>
|
||||
<section id="about" class="clamp-width">
|
||||
<img src="/res/avatar.svg" id="avatar" class="scroll-opacity">
|
||||
<div class="scroll-opacity">
|
||||
<h1>Hey! 👋 I'm Max Hutz.</h1>
|
||||
<i>Software engineer in New York.</i>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="projects" class="card">
|
||||
<h2 id="projects__title">Projects</h2>
|
||||
<div id="projects__text">
|
||||
<p id="projects-icon1" class="white icon" data-i="design_services"></p>
|
||||
|
||||
<div id="projects__back" class="card-back">
|
||||
<div id="projects-inner" class="card-back-inner">
|
||||
<div class="fade-text fade1" data-t="Projects"></div>
|
||||
<div class="fade-text fade2" data-t="Projects"></div>
|
||||
<div class="fade-text fade3" data-t="Projects"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
A selection of applications worked on as a computer scientist, from
|
||||
flexible web solutions to REST-ful mobile apps.
|
||||
</p>
|
||||
|
||||
<section class="project-section">
|
||||
<h3 class="fade-horizontal" data-t="Malung">Malung</h3>
|
||||
<div class="project__description">
|
||||
<p class="p2 project-desc__text">
|
||||
A cloud-based COVID-19 classifier incorporating AI deep learning.
|
||||
Using MariaDB and Microsoft Azure, users can store...<br><br>
|
||||
<a href="/projects/malung">Learn more →</a>
|
||||
</p>
|
||||
<img class="project-desc__img" src="/res/malung.svg" width="300" height="300">
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="project-section">
|
||||
<h3 class="fade-horizontal" data-t="Fresh-Manual">Fresh-Manual</h3>
|
||||
<div class="project__description">
|
||||
<p class="p2 project-desc__text">
|
||||
A mobile companion to Fresh Manuals website to find, save and
|
||||
organize product manuals. UI built with React, React-Native, and
|
||||
SwiftUI...<br><br>
|
||||
<a href="/projects/freshmanual">Learn more →</a>
|
||||
</p>
|
||||
<img class="project-desc__img" src="/res/freshmanual.svg" width="300" height="300">
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<a href="/projects" id="view-projects-button">
|
||||
<div id="view-projects-button-inner">
|
||||
<h2>Projects</h2>
|
||||
<h3 id="view-all-button">View All</h3>
|
||||
<p id="view-projects-icon" class="white icon" data-i="visibility"></p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="my-experience" class="card">
|
||||
<h2 id="my-experience__title">My<br>Experience</h2>
|
||||
<div id="my-experience__text-outer">
|
||||
<div id="my-experience__text">
|
||||
<div id="my-experience__back" class="card-back">
|
||||
<div id="my-experience-inner" class="card-back-inner">
|
||||
<div class="fade-text fade1" data-t="My Experience"></div>
|
||||
<div class="fade-text fade2" data-t="My Experience"></div>
|
||||
<div class="fade-text fade3" data-t="My Experience"></div>
|
||||
</div>
|
||||
</div>
|
||||
<p>
|
||||
I've had varied experiences: from <strong>mentoring fellow undergrads
|
||||
</strong> to performing in fast-paced settings where <strong>communication
|
||||
and innovation</strong> are key.
|
||||
</p>
|
||||
</div>
|
||||
<div id="my-experience__resume">
|
||||
<img id="my-experience__resume-img" src="/res/avatar.svg" width="300" height="300">
|
||||
<a id="my-experience__resume-button" href="/projects/freshmanual">View Resume →</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer id="contact-me" class="card">
|
||||
<h2>Contact Me!</h2>
|
||||
<nav>
|
||||
<a href="mailto:maximhutz@gmail.com">maximhutz@gmail.com</a>
|
||||
<a href="tel:+19142165972">914.216.5972</a>
|
||||
<a href="#">New York City or Tri-State Area Preferred</a>
|
||||
<p id="about-me" class="scroll-opacity">
|
||||
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.
|
||||
</p>
|
||||
<hr class="darker scroll-opacity" id="about-hr">
|
||||
<nav class="scroll-opacity">
|
||||
<a href="mailto:maximhutz@gmail.com" class="nav-link blue button">maximhutz@gmail.com</a>
|
||||
<a href="/resume" class="nav-link red button r-icon" data-i="arrow_right" target="_blank">View Resume</a>
|
||||
</nav>
|
||||
<form action="#" method="post">
|
||||
<div>
|
||||
<label for="fullname">Full Name</label>
|
||||
<input type="text" name="fullname" id="fullname">
|
||||
</div>
|
||||
<div>
|
||||
<label for="email">Email</label>
|
||||
<input type="text" name="email" id="email">
|
||||
</div>
|
||||
<div>
|
||||
<label for="message">Your Message</label>
|
||||
<textarea name="message" id="message" cols="30" rows="10"></textarea>
|
||||
</div>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</footer>
|
||||
|
||||
<!----------------------------------------------------------------------------->
|
||||
|
||||
<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>
|
||||
</section>
|
||||
<section id="projects" class="clamp-width"></section>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,39 +1,10 @@
|
||||
window.onload = main;
|
||||
|
||||
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;
|
||||
menu.showModal();
|
||||
}
|
||||
|
||||
function closeMenu() {
|
||||
const menu = document.getElementById("menu-modal");
|
||||
if (menu == null) return;
|
||||
menu.close();
|
||||
document.body.style.setProperty("--scroll", window.scrollY / (0.7 * window.innerHeight));
|
||||
}
|
||||
|
||||
function main() {
|
||||
window.addEventListener("scroll", () => requestAnimationFrame(calcScroll));
|
||||
|
||||
const menu = document.getElementById("menu-modal");
|
||||
if (menu == null) return;
|
||||
menu.addEventListener("click", clickMenuModal);
|
||||
menu.addEventListener("touchstart", clickMenuModal);
|
||||
|
||||
window.addEventListener("scroll", calcScroll);
|
||||
calcScroll();
|
||||
}
|
||||
|
||||
function clickMenuModal(e) {
|
||||
const menu = document.getElementById("menu-modal");
|
||||
if (menu == null || e.target != menu) return;
|
||||
closeMenu();
|
||||
}
|
||||
|
||||
window.onload = main;
|
||||
}
|
||||
Reference in New Issue
Block a user