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

FEAT: Added project section, reworked about me section.

Browse Source
This commit is contained in:
MajorDroolz
2022-12-24 22:22:38 -05:00
parent 011c58f69a
commit 30f3c69d32
3 changed files with 270 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files

257
home/index.css
View File

@@ -27,13 +27,19 @@ html {
-webkit-overflow-scrolling: touch;
overflow-y: scroll;
overflow-x: hidden;
width: 100vw;
padding: 100vh 0;
color: white;
position: relative;
}
html, body {
body {
position: relative;
overflow-x: hidden;
padding: 0 10vmin;
display: flex;
align-items: center;
flex-direction: column;
overflow-x: visible;
}
header {
@@ -98,8 +104,8 @@ header {
.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-size: 15vmin;
line-height: 15vmin;
font-family: "Open Sans", sans-serif;
font-weight: 900;
white-space: pre;
@@ -112,8 +118,8 @@ header {
left: 50%;
text-transform: uppercase;
translate: -50% 0;
font-size: calc(min(12vh, 16vw));
line-height: calc(min(11vh, 14vw));
font-size: 15vmin;
line-height: 15vmin;
font-family: "Open Sans", sans-serif;
font-weight: 900;
color: transparent;
@@ -156,7 +162,7 @@ header {
transition: transform var(--timing) 1s, filter var(--timing) 1s;
}
.button.icon {
.icon {
font-size: 2.5vh;
}
@@ -165,7 +171,7 @@ header {
transform: scale(0.9);
}
.button.icon::before {
.icon::before {
content: attr(data-i);
font-family: "Material Symbols Outlined";
font-size: 4vh;
@@ -231,87 +237,210 @@ header {
/*----------------------------------------------------------------------------*/
.body {
font-family: "Source Code Pro", monospace;
}
.head {
h2 {
font-family: "Open Sans", sans-serif;
font-weight: 900;
font-size: 15vmin;
text-transform: uppercase;
}
h3 {
font-family: "Open Sans", sans-serif;
font-weight: 900;
font-size: 10vmin;
text-transform: uppercase;
position: relative;
}
p {
font-family: "Source Code Pro", monospace;
font-size: 5vmin;
}
.p2 {
font-family: "Source Code Pro", monospace;
font-size: 3vmin;
}
.card {
margin: 20vmin 0;
}
a {
font-size: 3.5vmin;
font-family: "Open Sans", sans-serif;
font-weight: 900;
color: white;
}
.card-back {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(var(--rotate));
width: 100%;
height: 100%;
padding: 10vmin 20vmin;
background-color: var(--color);
box-shadow: 0px 10px 50px 0 #000;
overflow: hidden;
z-index: -1;
}
.card-back-inner {
position: absolute;
top: 0;
left: 0;
transform: rotate(calc(-1 * var(--rotate)));
width: 100%;
height: 100%;
}
.fade-horizontal::before {
position: absolute;
content: attr(data-t) " " attr(data-t) " " attr(data-t) " " attr(data-t) " " attr(data-t) " " attr(data-t) " " attr(data-t) " ";
white-space: pre;
color: #0002;
z-index: -1;
left: 0;
mask: linear-gradient(to right, black 0%, transparent 50%);
}
/*----------------------------------------------------------------------------*/
#about-me {
width: 100vw;
overflow-x: hidden;
min-height: 100vh;
margin: 10vh 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
align-content: center;
flex-wrap: wrap;
}
#about-me__title {
text-align: right;
font-size: 15vmin;
width: 60vmin;
z-index: 100;
line-height: 15vmin;
margin-right: 10vmin;
}
#about-me__text-holder {
width: 80vmin;
height: 70vmin;
display: inline-flex;
justify-content: center;
align-items: center;
}
#about-me__text-outer {
position: absolute;
background: var(--red);
box-shadow: 0px 10px 50px 0 #000;
padding: 20vh;
width: 81vmin;
overflow: hidden;
transform: rotate(5deg);
}
#about-me__text {
font-size: 4vmin;
width: 80vmin;
position: relative;
transform: rotate(-5deg);
}
.back-text {
position: absolute;
bottom: -60%;
left: 50%;
transform: translateX(-50%);
#about-me__back {
--rotate: 5deg;
--color: var(--red);
}
.icon::before {
content: attr(data-i);
font-family: "Material Symbols Outlined";
font-size: 10vh;
z-index: 1000;
color: var(--color);
#about-me-inner {
display: flex;
align-items: center;
justify-content: flex-end;
flex-direction: column;
transform: rotate(calc(-1 * var(--rotate))) translateY(10%);
}
#about-me-icon1 {
position: absolute;
top: 5vh;
left: 15vh;
color: white;
z-index: 100;
left: -10vmin;
top: -10vmin;
transform: rotate(5deg);
}
#about-me-icon2 {
position: absolute;
bottom: 10vh;
right: 15vh;
color: white;
z-index: 100;
#about-me-icon1::before {
font-size: 10vmin;
}
/*----------------------------------------------------------------------------*/
#projects {
max-width: 200vmin;
display: flex;
flex-direction: column;
}
#projects__back {
--rotate: -5deg;
--color: var(--yellow);
padding: 10vmin 40vmin;
}
#projects__text {
position: relative;
padding-top: 5vmin;
}
.project-section {
margin: 10vmin 0;
}
.project__description {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 10vmin;
}
.project-desc__text {
min-width: 70vmin;
flex: 1;
}
.project-desc__img {
flex: 1;
min-width: 70vmin;
height: 50vmin;
box-shadow: 0px 10px 50px 0 #0008;
border-radius: 2vmin;
box-sizing: border-box;
}
#projects-inner {
display: flex;
align-items: center;
justify-content: flex-end;
flex-direction: column;
transform: rotate(calc(-1 * var(--rotate))) translateY(17vmin);
}
#view-projects-button {
margin-top: 20vmin;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
}
#view-projects-button-inner {
position: relative;
}
#view-all-button {
user-select: none;
position: absolute;
top: -1vmin;
left: 1vmin;
font-size: 5vmin;
}
#view-projects-icon {
user-select: none;
position: absolute;
top: -4vmin;
right: 1vmin;
}
#view-projects-icon::before {
font-size: 8vmin;
}
#projects-icon1 {
position: absolute;
right: 0;
top: -10vmin;
transform: rotate(-5deg);
}
#projects-icon1::before {
font-size: 10vmin;
}
/*----------------------------------------------------------------------------*/

109
home/index.html
View File

@@ -23,10 +23,10 @@
<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"><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-me" class="blue icon nav12 button" data-i="push_pin"><p>Contact</p></a>
<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">
@@ -42,59 +42,86 @@
</div>
</header>
<section id="about-me">
<h2 id="about-me__title" class="head">About<br>Me</h2>
<div id="about-me__text-holder">
<div id="about-me__text-outer">
<div id="about-me-icon1" class="white icon" data-i="accessibility_new"></div>
<div id="about-me-icon2" class="white icon" data-i="rocket_launch"></div>
<section id="about-me" class="card">
<h2 id="about-me__title">About<br>Me</h2>
<div id="about-me__text">
<div class="back-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>
<p class="body">
Passionate computer science student skilled in building <strong>
responsive, full-stack applications</strong>. Motivated to learn from
colleagues and <strong>teach future developers</strong>. Seeks role to
fashion software solutions, focused on <strong>teamwork and
creativity</strong>.
</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>
</div>
</div>
</section>
<section id="projects">
<div id="projects-me-back"></div>
<h2>Projects</h2>
<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>
<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>
<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>
</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>
<img class="project-desc__img" src="/res/malung.svg" width="300" height="300">
</div>
</section>
<section id="my-experience">
<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">
<div id="my-experience-back"></div>
<h2>My Experience</h2>
<p>
@@ -108,7 +135,7 @@
</div>
</section>
<footer id="contact-me">
<footer id="contact-me" class="card">
<h2>Contact Me!</h2>
<nav>
<a href="mailto:maximhutz@gmail.com">maximhutz@gmail.com</a>

2
styles.css
View File

@@ -9,7 +9,7 @@
--light: #FEFADC;
--dark: #504B43;
--red: #EC1B24;
--yellow: #FCAB10;
--yellow: #F29F00;
--green: #62C869;
--blue: #2B9EB3;