jason/Jnf.me
jason/Jnf.me
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Staging final changes before removing bootstrap and switching to HTML5 boilerplate

Browse Source
This commit is contained in:
Jason Williams 2022-11-19 09:32:48 -07:00
parent 5a0427d601
commit c0066b5a99
2 changed files with 21 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
www/img/splash-jason.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 572 KiB

After

Width:  |  Height:  |  Size: 301 KiB

25
www/index.html
View File

@ -9,6 +9,7 @@
/* Variables */
:root {
--jason-bg-color: #F2EDEA;
--flo-bg-color: #601F22;
--title-font: 'Cinzel', serif;
--body-font: 'Raleway', sans-serif;
}
@ -19,15 +20,19 @@
@media ( min-width: 992px ) {
.row { width: 200vw; position: relative; left: -50vw; }
.col { min-height: 100vh; }
.col { min-height: 100vh; flex-direction: column; }
}
/* .info { text-align: center; } */
.splash { width: 100%; height: 100%; }
.splash img { width: 100%; height: 100%; border-radius: 1rem; object-fit: cover; }
.banner, .details { width: 100%; }
.banner img {max-width: 20vw; max-height: 20vh; }
.details { width: 80%; }
.details ul { padding: 0; }
.details li { list-style: none; height: 3rem; background-color: #FFF000; margin-bottom: 1rem; border-radius: 0.5rem; }
.bg-jason { background-color: var(--jason-bg-color); }
#info-flo { background-color: #00FF00; }
.bg-flo { background-color: var(--flo-bg-color); }
#back { position: fixed; top: -3rem; right: -3rem; z-index: 200; height: 3rem; width: 3rem; font-size: 3rem; }
#back a { color: #FF0000; }
</style>
@ -140,15 +145,27 @@
<a href="/jason" class="openlink" data-person="jason" data-pos="0vw"><img src="./img/profile-jason.png"></a>
<h1><a href="/jason" class="openlink" data-person="jason" data-pos="0vw">Jason Williams</a></h1>
</div>
<div class="text-center details">
<ul>
<li><a href="#">Website</a></li>
<li><a href="#">Resume</a></li>
<li><a href="#">LinkedIn</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">Instagram</a></li>
<li><a href="#">Mastodon</a></li>
<li><a href="#">Code Repository</a></li>
<li><a href="#">Contact Me</a></li>
</ul>
</div>
</div>
<div id="info-flo" class="col col-12 col-lg-3 d-flex align-items-center justify-content-center info">
<div id="info-flo" class="col col-12 col-lg-3 d-flex align-items-center justify-content-center info bg-flo">
<div class="text-center banner">
<a href="/flo" class="openlink" data-person="flo" data-pos="-100vw"><img src="./img/profile-flo.jpg"></a>
<h1><a href="/flo" class="openlink" data-person="flo" data-pos="-100vw">Flo de Guzman</a></h1>
</div>
</div>
<div id="bigimage-flo" class="col col-lg-3 d-none d-lg-block">
<div id="bigimage-flo" class="col col-lg-3 d-none d-lg-block bg-flo">
Flo Image
</div>
</div>