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

FEAT: Added rest of unstyled HTML content. Temporarily removed animations.

Browse Source
This commit is contained in:
MajorDroolz
2022-12-22 16:51:59 -05:00
parent 4199536932
commit cf6a5ef910
3 changed files with 113 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
home/index.css
View File

@@ -1,6 +1,6 @@
@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');
@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@400;900&display=swap');
/*----------------------------------------------------------------------------*/
@@ -12,9 +12,9 @@
--light: #FEFADC;
--dark: #504B43;
--red: #F8333C;
--red: #EC1B24;
--yellow: #FCAB10;
--green: #8FD694;
--green: #62C869;
--blue: #2B9EB3;
--timing: cubic-bezier(0.2, 1, 0, 1);
@@ -30,13 +30,6 @@
.flex-space { flex: 1 }
.pos-center {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
/*----------------------------------------------------------------------------*/
@media (min-aspect-ratio: 6 / 5) {
@@ -49,10 +42,14 @@
.nav1, .nav3 {
display: none !important;
}
.nav12 > p {
display: none;
}
}
@media (max-aspect-ratio: 3 / 4) {
.nav1, .nav2 {
.nav1, .nav2, .nav12 {
display: none !important;
}
}
@@ -64,10 +61,13 @@ html {
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
overflow-y: scroll;
padding: 100vh 0;
}
nav {
header {
position: fixed;
top: 0;
left: 0;
z-index: 1000;
filter: drop-shadow(0px 0px 100px #000);
}
@@ -111,8 +111,9 @@ nav {
#title-name::before {
content: "Hi! I'm";
position: absolute;
font-family: "Source Serif Pro", serif;
font-style: italic;
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;
@@ -123,6 +124,7 @@ nav {
.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: calc(min(12vh, 16vw));
line-height: calc(min(11vh, 14vw));
font-family: "Open Sans", sans-serif;
@@ -135,6 +137,7 @@ nav {
position: absolute;
top: 0;
left: 50%;
text-transform: uppercase;
translate: -50% 0;
font-size: calc(min(12vh, 16vw));
line-height: calc(min(11vh, 14vw));
@@ -148,13 +151,9 @@ nav {
}
.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 {
@@ -167,27 +166,8 @@ nav {
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 {
white-space: nowrap;
position: relative;
font-style: normal;
display: flex;
@@ -249,11 +229,6 @@ nav a:nth-child(7) { animation: nav-enter 2s 600ms var(--timing) backwards; }
/*----------------------------------------------------------------------------*/
article {
margin-bottom: 200vh;
background-color: var(--color, transparent);
}
#about-section {
height: 60vmin;
}
@@ -267,7 +242,6 @@ article {
#menu-modal::backdrop {
background-color: #0008;
animation: 0.5s ease menu-back-enter;
}
#menu-modal {
@@ -291,28 +265,4 @@ article {
-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);
}
}

121
home/index.html
View File

@@ -10,41 +10,104 @@
<title>Max's Place</title>
</head>
<body>
<nav>
<header class="navbar nav1">
<a href="#" class="button" data-i="home">Max's&nbsp;Place</a>
<header>
<nav class="navbar">
<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&nbsp;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&nbsp;Place</a>
<div class="flex-space"></div>
<button class="icon button" data-i="menu" onclick="openMenu()"></button>
</header>
<a href="/about" class="red icon nav12 button" data-i="accessibility_new"><p>About</p></a>
<a href="/projects" class="yellow icon nav12 button" data-i="design_services"><p>Projects</p></a>
<a href="/resume" class="green icon nav12 button" data-i="draft"><p>Resume</p></a>
<a href="/contact" class="blue icon nav12 button" data-i="push_pin"><p>Contact</p></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 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>
</header>
<section>
<h2>About Me</h2>
<p>
Passionate computer science student skilled in building <strong>
responsive, full-stack applications</strong>. Motivated to learn from
colleagues and <strong>future developers</strong>. Seeks role to fashion
software solutions, focused on <strong>teamwork and creativity</strong>.
</p>
</section>
<section>
<h2>Projects</h2>
<p>
A selection of applications worked on as a computer scientist, from
flexible web solutions to REST-ful mobile apps.
</p>
<section>
<h3>Malung</h3>
<img src="/res/avatar.svg" width="300" height="300">
<p>
A cloud-based COVID-19 classifier incorporating AI deep learning. Using
MariaDB and Microsoft Azure, users can store...
</p>
<a href="/projects/malung">Learn more →</a>
</section>
<section>
<h3>Fresh-Manual</h3>
<img src="/res/avatar.svg" width="300" height="300">
<p>
A mobile companion to Fresh Manuals website to find, save and organize
product manuals. UI built with React, React-Native, and SwiftUI...
</p>
<a href="/projects/freshmanual">Learn more →</a>
</section>
<a href="/projects">View all Projects</a>
</section>
<section>
<h2>My Experience</h2>
<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>
<img src="/res/avatar.svg" width="300" height="300">
<a href="/projects/freshmanual">View Resume →</a>
</div>
</section>
<footer>
<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>
</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">

21
home/index.js
View File

@@ -1,5 +1,3 @@
let menuOpen = true;
function calcScroll() {
const scroll = window.scrollY;
const vh = window.innerHeight / 100;
@@ -12,28 +10,22 @@ function calcScroll() {
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);
}
if (menu == null) return;
menu.addEventListener("click", clickMenuModal);
menu.addEventListener("touchstart", clickMenuModal);
}
function clickMenuModal(e) {
@@ -42,11 +34,4 @@ function clickMenuModal(e) {
closeMenu();
}
function preventScroll(e) {
if (menuOpen) return;
e.preventDefault();
e.stopPropagation();
return false;
}
window.onload = main;