186 lines
7.8 KiB
HTML
186 lines
7.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<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.gstatic.com" crossorigin>
|
|
|
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,500,1,200">
|
|
<link rel="stylesheet" href="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">
|
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@400;900&display=swap">
|
|
|
|
<link rel="stylesheet" href="/styles.css">
|
|
<link rel="stylesheet" href="index.css">
|
|
<script src="index.js"></script>
|
|
<title>Max's Place</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>
|
|
</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>
|
|
</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>
|
|
</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>
|
|
</body>
|
|
</html> |