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;
|
||||
--pad: max(20px, calc((100vw - var(--max-width)) / 2));
|
||||
* {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
button {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
body {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
width: 100vw;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
html {
|
||||
overflow-y: scroll;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
pre {
|
||||
all: unset;
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
color: var(--dark);
|
||||
color: var(--color);
|
||||
text-decoration: none;
|
||||
font-weight: 900;
|
||||
font-family: "Open Sans";
|
||||
@@ -22,13 +39,7 @@ body {
|
||||
.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;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.icon::before {
|
||||
@@ -41,20 +52,21 @@ body {
|
||||
.r-icon::after {
|
||||
font-family: 'Material Symbols Outlined';
|
||||
content: attr(data-i);
|
||||
font-size: 1.5rem;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.scroll-opacity {
|
||||
opacity: calc(1 - var(--scroll));
|
||||
}
|
||||
|
||||
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-size: "Source Serif Pro";
|
||||
@@ -76,12 +88,13 @@ p {
|
||||
|
||||
hr {
|
||||
height: 1px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.button {
|
||||
color: var(--color);
|
||||
position: relative;
|
||||
padding: 10px 40px;
|
||||
padding: 10px 30px;
|
||||
}
|
||||
|
||||
.button::before {
|
||||
@@ -91,75 +104,180 @@ hr {
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: var(--color);
|
||||
opacity: 50%;
|
||||
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);
|
||||
}
|
||||
|
||||
/*----------------------------------------------------------------------------*/
|
||||
|
||||
header {
|
||||
display: flex;
|
||||
gap: 40px;
|
||||
font-size: 25px;
|
||||
padding: 20px;
|
||||
font-family: "Open Sans";
|
||||
font-weight: bolder;
|
||||
color: var(--dark);
|
||||
align-items: center;
|
||||
#header-outer {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
#header-back {
|
||||
background: var(--light);
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 84px;
|
||||
z-index: -1;
|
||||
header {
|
||||
margin: auto;
|
||||
max-width: 1024px;
|
||||
display: flex;
|
||||
gap: 40px;
|
||||
font-size: 25px;
|
||||
font-family: "Open Sans";
|
||||
font-weight: bolder;
|
||||
color: var(--dark);
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
#about {
|
||||
height: 90vh;
|
||||
background: var(--light);
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
flex-direction: column;
|
||||
gap: 30px;
|
||||
padding-bottom: 30px;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
max-width: 1024px;
|
||||
min-height: 90vh;
|
||||
color: var(--dark);
|
||||
padding-top: 30px;
|
||||
box-sizing: border-box;
|
||||
gap: 30px;
|
||||
}
|
||||
|
||||
#avatar {
|
||||
filter: grayscale(1) opacity(0.2);
|
||||
position: absolute;
|
||||
width: 900px;
|
||||
height: 900px;
|
||||
left: 70%;
|
||||
top: 35%;
|
||||
transform: translate(-50%, -50%);
|
||||
#about > * {
|
||||
max-width: 600px;
|
||||
}
|
||||
|
||||
nav {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#inner-nav {
|
||||
display: inline-flex;
|
||||
flex-grow: 1;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
#about-hr {
|
||||
max-width: 600px;
|
||||
}
|
||||
|
||||
#about-me {
|
||||
max-width: 600px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
/*----------------------------------------------------------------------------*/
|
||||
|
||||
#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
107
home/index.html
@@ -4,6 +4,8 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="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="preconnect" href="https://fonts.googleapis.com">
|
||||
@@ -15,37 +17,104 @@
|
||||
|
||||
<link rel="stylesheet" href="/styles.css">
|
||||
<link rel="stylesheet" href="index.css">
|
||||
|
||||
<script src="index.js"></script>
|
||||
<title>Max Hutz</title>
|
||||
</head>
|
||||
<body>
|
||||
<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>
|
||||
<div id="header-outer" class="light width-pad shadow">
|
||||
<header>
|
||||
<a href="#" class="nav-link dark">MAX HUTZ</a>
|
||||
<div class="flex"></div>
|
||||
<a href="/experience" 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="/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>
|
||||
<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>
|
||||
</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" class="scroll-opacity">
|
||||
<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 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>
|
||||
<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>
|
||||
<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>© 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>
|
||||
</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;
|
||||
--dark: #504B43;
|
||||
--red: #EC1B24;
|
||||
--yellow: #F29F00;
|
||||
--green: #62C869;
|
||||
--yellow: #E19200;
|
||||
--green: #4CB753;
|
||||
--blue: #2B9EB3;
|
||||
|
||||
--timing: cubic-bezier(0.2, 1, 0, 1);
|
||||
@@ -26,9 +26,10 @@
|
||||
.yellow { --color: var(--yellow) }
|
||||
.green { --color: var(--green) }
|
||||
.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