web/portfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

FEAT: Home page now operational, but yet complete.

Browse Source
This commit is contained in:
MajorDroolz
2023-01-03 00:33:07 -05:00
parent f7136af88e
commit 6fd537104e
6 changed files with 278 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
.DS_Store vendored
View File

Binary file not shown.

234
home/index.css
View File

@@ -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;
}
} }

107
home/index.html
View File

@@ -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>
<a href="/experience" class="nav-link dark icon nav2" data-i="work" role="img" aria-label="Experience"></a>
<a href="/resume" class="nav-link dark icon nav2" data-i="clinical_notes" role="img" aria-label="Resume"></a>
<a href="mailto:maximhutz@gmail.com" class="nav-link dark icon nav2" data-i="mail" role="img" aria-label="Contact"></a>
<button class="nav-link dark icon nav1" data-i="menu" role="img" aria-label="Menu" onclick="document.getElementById('menu')?.showModal()"></button>
</header> </header>
<section id="about" class="clamp-width"> </div>
<img src="/res/avatar.svg" id="avatar" class="scroll-opacity">
<div class="scroll-opacity"> <div class="light width-pad">
<h1>Hey! 👋 I'm Max Hutz.</h1> <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> <i>Software engineer in New York.</i>
</div> </div>
<p id="about-me" class="scroll-opacity"> <p id="about-me">
I’m a passionate computer science student skilled in building I’m a passionate computer science student skilled in building
responsive, full-stack applications. I love learning from colleagues responsive, full-stack applications. I love learning from colleagues
and teaching future developers. I thrive where teamwork and creativity and teaching future developers. I thrive where teamwork and creativity
are key. are key.
</p> </p>
<hr class="darker scroll-opacity" id="about-hr"> <hr class="darker" id="about-hr">
<nav class="scroll-opacity"> <nav>
<a href="mailto:maximhutz@gmail.com" class="nav-link blue button">maximhutz@gmail.com</a> <div id="inner-nav">
<a href="/resume" class="nav-link red button r-icon" data-i="arrow_right" target="_blank">View Resume</a> <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> </nav>
<div class="flex"></div>
</section> </section>
<section id="projects" class="clamp-width"></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>&copy; 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>
</dialog>
</body> </body>
</html> </html>

10
home/index.js
View File

@@ -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
View File

Binary file not shown.

9
styles.css
View File

@@ -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 }
/*----------------------------------------------------------------------------*/ /*----------------------------------------------------------------------------*/