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

Added a side bar to access the parts of the site for mobile users.

Browse Source
This commit is contained in:
MajorDroolz
2022-12-17 21:36:16 -05:00
parent 41885de1d6
commit 8da4fac381
2 changed files with 31 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
home/index.css
View File

@@ -122,7 +122,7 @@ nav {
}
.fade-text::before {
content: attr(data) " " attr(data) " " attr(data) " " attr(data) " " attr(data) " " attr(data) " " attr(data);
content: attr(data-t) " " attr(data-t) " " attr(data-t) " " attr(data-t) " " attr(data-t) " " attr(data-t) " " attr(data-t);
font-size: calc(min(12vh, 16vw));
line-height: calc(min(11vh, 14vw));
font-family: "Open Sans", sans-serif;
@@ -249,7 +249,7 @@ nav a:nth-child(7) { animation: nav-enter 2s 600ms var(--timing) backwards; }
/*----------------------------------------------------------------------------*/
section {
article {
margin-bottom: 200vh;
background-color: var(--color, transparent);
}

42
home/index.html
View File

@@ -11,46 +11,44 @@
</head>
<body>
<nav>
<menu class="navbar nav1">
<a href="#" class="button" id="homebutton" data-i="home">Max's&nbsp;Place</a>
<header class="navbar nav1">
<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">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>
</menu>
<menu class="navbar nav2">
<a href="#" class="button" id="homebutton" data-i="home">Max's&nbsp;Place</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>
</menu>
<menu class="navbar nav3">
<a href="#" class="button" id="homebutton" data-i="home">Max's&nbsp;Place</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()"></a>
</menu>
<button class="icon button" data-i="menu" onclick="openMenu()"></button>
</header>
<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="MAX HUTZ"></div>
<div class="fade-text fade2" data="MAX HUTZ"></div>
<div class="fade-text fade3" data="MAX HUTZ"></div>
<div class="fade-text fade4" data="MAX HUTZ"></div>
<div class="fade-text fade5" data="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>
<section id="title-section"></section>
</body>
</html>
<article id="title-section"></article>
<dialog id="menu-modal">
<dialog id="menu-modal">
<div id="menu-inner">
<a href="#" class="button" id="homebutton" data-i="home" onclick="closeMenu()">Max's&nbsp;Place</a>
<a href="#" class="button" data-i="home" onclick="closeMenu()">Max's&nbsp;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>
@@ -58,4 +56,6 @@
<a href="/contact" class="blue icon button" data-i="push_pin" onclick="closeMenu()">Contact</a>
<div class="flex-space"></div>
</div>
</dialog>
</dialog>
</body>
</html>