FEAT: Home page now operational, but yet complete.
This commit is contained in:
MajorDroolz
234
home/index.css
234
home/index.css
@@ -1,15 +1,32 @@
|
|||||||
body {
|
* {
|
||||||
--max-width: 1024px;
|
overflow: hidden;
|
||||||
--pad: max(20px, calc((100vw - var(--max-width)) / 2));
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
justify-content: flex-start;
|
||||||
width: 100vw;
|
width: 100vw;
|
||||||
|
overflow-y: scroll;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
overflow-y: scroll;
|
||||||
|
scroll-behavior: smooth;
|
||||||
|
}
|
||||||
|
|
||||||
|
pre {
|
||||||
|
all: unset;
|
||||||
|
white-space: pre;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-link {
|
.nav-link {
|
||||||
color: var(--dark);
|
color: var(--color);
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
font-weight: 900;
|
font-weight: 900;
|
||||||
font-family: "Open Sans";
|
font-family: "Open Sans";
|
||||||
@@ -22,13 +39,7 @@ body {
|
|||||||
.icon, .r-icon, .button {
|
.icon, .r-icon, .button {
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
justify-content: center;
|
||||||
|
|
||||||
.clamp-width {
|
|
||||||
width: 100vw;
|
|
||||||
padding-right: var(--pad);
|
|
||||||
padding-left: var(--pad);
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon::before {
|
.icon::before {
|
||||||
@@ -41,20 +52,21 @@ body {
|
|||||||
.r-icon::after {
|
.r-icon::after {
|
||||||
font-family: 'Material Symbols Outlined';
|
font-family: 'Material Symbols Outlined';
|
||||||
content: attr(data-i);
|
content: attr(data-i);
|
||||||
font-size: 1.5rem;
|
|
||||||
margin-left: 5px;
|
margin-left: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.scroll-opacity {
|
|
||||||
opacity: calc(1 - var(--scroll));
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
font-size: 40px;
|
font-size: 40px;
|
||||||
font-family: "Open Sans";
|
font-family: "Open Sans";
|
||||||
font-weight: 900;
|
font-weight: 900;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-size: 30px;
|
||||||
|
font-family: "Open Sans";
|
||||||
|
font-weight: 900;
|
||||||
|
}
|
||||||
|
|
||||||
i {
|
i {
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
font-size: "Source Serif Pro";
|
font-size: "Source Serif Pro";
|
||||||
@@ -76,12 +88,13 @@ p {
|
|||||||
|
|
||||||
hr {
|
hr {
|
||||||
height: 1px;
|
height: 1px;
|
||||||
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.button {
|
.button {
|
||||||
color: var(--color);
|
color: var(--color);
|
||||||
position: relative;
|
position: relative;
|
||||||
padding: 10px 40px;
|
padding: 10px 30px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.button::before {
|
.button::before {
|
||||||
@@ -91,75 +104,180 @@ hr {
|
|||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
background: var(--color);
|
background: var(--color);
|
||||||
opacity: 50%;
|
opacity: 25%;
|
||||||
content: "";
|
content: "";
|
||||||
border-radius: 10px;
|
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);
|
||||||
|
}
|
||||||
|
|
||||||
/*----------------------------------------------------------------------------*/
|
/*----------------------------------------------------------------------------*/
|
||||||
|
|
||||||
header {
|
#header-outer {
|
||||||
display: flex;
|
|
||||||
gap: 40px;
|
|
||||||
font-size: 25px;
|
|
||||||
padding: 20px;
|
|
||||||
font-family: "Open Sans";
|
|
||||||
font-weight: bolder;
|
|
||||||
color: var(--dark);
|
|
||||||
align-items: center;
|
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
z-index: 100;
|
z-index: 100;
|
||||||
}
|
}
|
||||||
|
|
||||||
#header-back {
|
header {
|
||||||
background: var(--light);
|
margin: auto;
|
||||||
position: fixed;
|
max-width: 1024px;
|
||||||
top: 0;
|
display: flex;
|
||||||
left: 0;
|
gap: 40px;
|
||||||
width: 100vw;
|
font-size: 25px;
|
||||||
height: 84px;
|
font-family: "Open Sans";
|
||||||
z-index: -1;
|
font-weight: bolder;
|
||||||
|
color: var(--dark);
|
||||||
|
align-items: center;
|
||||||
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
#about {
|
#about {
|
||||||
height: 90vh;
|
position: relative;
|
||||||
background: var(--light);
|
margin: auto;
|
||||||
overflow: hidden;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: flex-end;
|
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 30px;
|
justify-content: center;
|
||||||
padding-bottom: 30px;
|
align-items: flex-start;
|
||||||
|
max-width: 1024px;
|
||||||
|
min-height: 90vh;
|
||||||
color: var(--dark);
|
color: var(--dark);
|
||||||
|
padding-top: 30px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
gap: 30px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#avatar {
|
#about > * {
|
||||||
filter: grayscale(1) opacity(0.2);
|
max-width: 600px;
|
||||||
position: absolute;
|
|
||||||
width: 900px;
|
|
||||||
height: 900px;
|
|
||||||
left: 70%;
|
|
||||||
top: 35%;
|
|
||||||
transform: translate(-50%, -50%);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
nav {
|
nav {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#inner-nav {
|
||||||
|
display: inline-flex;
|
||||||
|
flex-grow: 1;
|
||||||
gap: 20px;
|
gap: 20px;
|
||||||
}
|
flex-wrap: wrap;
|
||||||
|
|
||||||
#about-hr {
|
|
||||||
max-width: 600px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#about-me {
|
|
||||||
max-width: 600px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/*----------------------------------------------------------------------------*/
|
/*----------------------------------------------------------------------------*/
|
||||||
|
|
||||||
#projects {
|
#projects {
|
||||||
height: 100vh;
|
margin: 30px auto;
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
max-width: 1024px;
|
||||||
|
min-height: 100vh;
|
||||||
|
color: white;
|
||||||
|
box-sizing: border-box;
|
||||||
|
gap: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#project-list {
|
||||||
|
overflow: visible;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
width: 100%;
|
||||||
|
gap: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-item {
|
||||||
|
min-width: max(40%, 300px);
|
||||||
|
flex: 1;
|
||||||
|
height: 300px;
|
||||||
|
background-color: var(--color);
|
||||||
|
border-radius: 10px;
|
||||||
|
overflow: visible;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-link {
|
||||||
|
color: white;
|
||||||
|
background-color: #0005;
|
||||||
|
padding: 10px;
|
||||||
|
border-radius: 0 0 10px 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#experience-button {
|
||||||
|
align-self: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#footer-pad {
|
||||||
|
background: var(--dark) linear-gradient(#0002, #0002);
|
||||||
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
color: white;
|
||||||
|
max-width: 1024px;
|
||||||
|
margin: auto;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*----------------------------------------------------------------------------*/
|
||||||
|
|
||||||
|
#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;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
125
home/index.html
125
home/index.html
@@ -4,6 +4,8 @@
|
|||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<meta name="description" content="This is the home page of Maxim Voldman Hutz's personal website.">
|
||||||
|
|
||||||
<link rel="icon" type="image/x-icon" href="/res/favicon.ico">
|
<link rel="icon" type="image/x-icon" href="/res/favicon.ico">
|
||||||
|
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
@@ -15,37 +17,104 @@
|
|||||||
|
|
||||||
<link rel="stylesheet" href="/styles.css">
|
<link rel="stylesheet" href="/styles.css">
|
||||||
<link rel="stylesheet" href="index.css">
|
<link rel="stylesheet" href="index.css">
|
||||||
|
|
||||||
<script src="index.js"></script>
|
|
||||||
<title>Max Hutz</title>
|
<title>Max Hutz</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="header-back" class="shadow"></div>
|
<div id="header-outer" class="light width-pad shadow">
|
||||||
<header class="clamp-width">
|
<header>
|
||||||
<a href="#" class="nav-link">MAX HUTZ</a>
|
<a href="#" class="nav-link dark">MAX HUTZ</a>
|
||||||
<div class="flex-space"></div>
|
<div class="flex"></div>
|
||||||
<a href="#" class="nav-link icon" data-i="work">Experience</a>
|
<a href="/experience" class="nav-link dark icon nav3" data-i="work">Experience</a>
|
||||||
<a href="#" class="nav-link icon" data-i="clinical_notes">Resume</a>
|
<a href="/resume" class="nav-link dark icon nav3" data-i="clinical_notes">Resume</a>
|
||||||
<a href="#" class="nav-link icon" data-i="mail">Contact</a>
|
<a href="mailto:maximhutz@gmail.com" class="nav-link dark icon nav3" data-i="mail">Contact</a>
|
||||||
</header>
|
<a href="/experience" class="nav-link dark icon nav2" data-i="work" role="img" aria-label="Experience"></a>
|
||||||
<section id="about" class="clamp-width">
|
<a href="/resume" class="nav-link dark icon nav2" data-i="clinical_notes" role="img" aria-label="Resume"></a>
|
||||||
<img src="/res/avatar.svg" id="avatar" class="scroll-opacity">
|
<a href="mailto:maximhutz@gmail.com" class="nav-link dark icon nav2" data-i="mail" role="img" aria-label="Contact"></a>
|
||||||
<div class="scroll-opacity">
|
<button class="nav-link dark icon nav1" data-i="menu" role="img" aria-label="Menu" onclick="document.getElementById('menu')?.showModal()"></button>
|
||||||
<h1>Hey! 👋 I'm Max Hutz.</h1>
|
</header>
|
||||||
<i>Software engineer in New York.</i>
|
</div>
|
||||||
|
|
||||||
|
<div class="light width-pad">
|
||||||
|
<section id="about">
|
||||||
|
<div class="flex"></div>
|
||||||
|
<div class="flex"></div>
|
||||||
|
<div>
|
||||||
|
<h1>Hey! 👋 <pre>I'm Max Hutz.</pre></h1>
|
||||||
|
<i>Software engineer in New York.</i>
|
||||||
|
</div>
|
||||||
|
<p id="about-me">
|
||||||
|
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" id="about-hr">
|
||||||
|
<nav>
|
||||||
|
<div id="inner-nav">
|
||||||
|
<a href="mailto:maximhutz@gmail.com" class="nav-link blue button flex">maximhutz@gmail.com</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>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="dark width-pad">
|
||||||
|
<section id="projects">
|
||||||
|
<h2>Worked on:</h2>
|
||||||
|
<div id="project-list">
|
||||||
|
<div class="yellow project-item shadow">
|
||||||
|
<div class="space"></div>
|
||||||
|
<a href="/experience/malung" class="nav-link project-link r-icon" data-i="arrow_right">Malung: COVID-19 Classifier</a>
|
||||||
|
</div>
|
||||||
|
<div class="blue project-item shadow">
|
||||||
|
<div class="space"></div>
|
||||||
|
<a href="/experience/freshmanual" class="nav-link project-link r-icon" data-i="arrow_right">Freshmanual: Mobile App</a>
|
||||||
|
</div>
|
||||||
|
<div class="green project-item shadow">
|
||||||
|
<div class="space"></div>
|
||||||
|
<a href="/experience/pollbuddy" class="nav-link project-link r-icon" data-i="arrow_right">Poll Buddy</a>
|
||||||
|
</div>
|
||||||
|
<div class="red project-item shadow">
|
||||||
|
<div class="space"></div>
|
||||||
|
<a href="/experience/rpi-crisis" class="nav-link project-link r-icon" data-i="arrow_right">CRISIS</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<hr class="lighter" id="about-hr">
|
||||||
|
<a href="/experience" id="experience-button" class="nav-link white button">View all experiences.</a>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="footer-pad" class="dark width-pad">
|
||||||
|
<footer>
|
||||||
|
<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" role="img" aria-label="Contact" target="_blank"></a>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<dialog id="menu">
|
||||||
|
<div class="light width-pad shadow">
|
||||||
|
<section 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" role="img" aria-label="Close"></button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
<a href="/experience" 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>
|
||||||
|
</section>
|
||||||
</div>
|
</div>
|
||||||
<p id="about-me" class="scroll-opacity">
|
</dialog>
|
||||||
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>
|
|
||||||
</section>
|
|
||||||
<section id="projects" class="clamp-width"></section>
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
@@ -1,10 +0,0 @@
|
|||||||
window.onload = main;
|
|
||||||
|
|
||||||
function calcScroll() {
|
|
||||||
document.body.style.setProperty("--scroll", window.scrollY / (0.7 * window.innerHeight));
|
|
||||||
}
|
|
||||||
|
|
||||||
function main() {
|
|
||||||
window.addEventListener("scroll", calcScroll);
|
|
||||||
calcScroll();
|
|
||||||
}
|
|
||||||
BIN
res/.DS_Store
vendored
BIN
res/.DS_Store
vendored
Binary file not shown.
@@ -9,8 +9,8 @@
|
|||||||
--light: #FEFADC;
|
--light: #FEFADC;
|
||||||
--dark: #504B43;
|
--dark: #504B43;
|
||||||
--red: #EC1B24;
|
--red: #EC1B24;
|
||||||
--yellow: #F29F00;
|
--yellow: #E19200;
|
||||||
--green: #62C869;
|
--green: #4CB753;
|
||||||
--blue: #2B9EB3;
|
--blue: #2B9EB3;
|
||||||
|
|
||||||
--timing: cubic-bezier(0.2, 1, 0, 1);
|
--timing: cubic-bezier(0.2, 1, 0, 1);
|
||||||
@@ -26,9 +26,10 @@
|
|||||||
.yellow { --color: var(--yellow) }
|
.yellow { --color: var(--yellow) }
|
||||||
.green { --color: var(--green) }
|
.green { --color: var(--green) }
|
||||||
.blue { --color: var(--blue) }
|
.blue { --color: var(--blue) }
|
||||||
.white { --color: var(--white) }
|
.white { --color: white }
|
||||||
|
|
||||||
.flex-space { flex: 1 }
|
.flex-space, .flex { flex-grow: 1 }
|
||||||
|
.space { flex: 1000 }
|
||||||
|
|
||||||
/*----------------------------------------------------------------------------*/
|
/*----------------------------------------------------------------------------*/
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user