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

Completed Jason's section

This commit is contained in:
Jason Williams 2022-11-19 14:37:00 -07:00
parent 9efbb3be70
commit 9ebac86bbf
2 changed files with 49 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
www/css/main.css
View File

@ -90,9 +90,16 @@ textarea {
:root {
--jason-bg-color: #F2EDEA;
--jason-accent-color: #302B44;
--jason-hover-bg-color: #913A50;
--jason-hover-fg-color: #FFFFFF;
--flo-bg-color: #601F22;
}
body {
overflow-x: hidden;
}
div {
box-sizing: border-box;
overflow: hidden;
@ -121,7 +128,7 @@ div {
height: 0;
}
.splash-container {
.col-container {
height: 100%;
width: 100%;
padding: 1rem;
@ -129,20 +136,6 @@ div {
.splash img { width: 100%; height: 100%; border-radius: 1rem; object-fit: cover; }
/* .banner {
position: relative;
width: 100%;
height: 100%;
margin: auto 0 auto 0;
/* top: 50%; */
/* -ms-transform: translateY(-50%);
transform: translateY(-50%);
text-align: center;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
transition: all 0.5s ease;
} */
.banner {
flex: 0 0 100%;
text-align: center;
@ -152,7 +145,6 @@ div {
.links {
height: 0;
/* flex: 0 0 100%; */
}
.links ul {
@ -164,16 +156,38 @@ div {
.links li a {
display: block;
background-color: #FF0000;
height: 3rem;
line-height: 3rem;
margin-bottom: 0.5rem;
border-radius: 1rem;
text-align: center;
text-decoration: none;
}
.splash.jason, .main.jason {
background-color: var(--jason-bg-color);
font-family: 'Raleway', sans-serif;
}
.jason h1 {
font-family: 'Cinzel', serif;
font-weight: 400;
word-spacing: -0.15em;
}
.jason h1 a {
text-decoration: none;
color: var(--jason-accent-color);
}
.links.jason li a {
background-color: var(--jason-accent-color);
color: var(--jason-bg-color);
}
.links.jason li a:hover {
background-color: var(--jason-hover-bg-color);
color: var(--jason-hover-fg-color);
}
.splash.flo, .main.flo {

44
www/index.html
View File

@ -14,6 +14,9 @@
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cinzel&family=Raleway&display=swap" rel="stylesheet">
<meta name="theme-color" content="#fafafa">
</head>
@ -21,12 +24,12 @@
<body>
<div id="container">
<div id="splash-jason" class="splash jason notflo">
<div class="splash-container">
<div class="col-container">
<img src="/img/splash-jason.jpg">
</div>
</div>
<div id="main-jason" class="main jason notflo">
<div class="splash-container">
<div class="col-container">
<div id="banner-jason" class="banner jason notflo" data-person="jason">
<a href="/jason" class="openlink" data-person="jason" data-pos="0vw"><img src="/img/profile-jason.png"></a>
<h1><a href="/jason" class="openlink">Jason Williams</a></h1>
@ -37,26 +40,7 @@
<li><a href="https://ja.son-williams.ca/resume"><i class="fa-solid fa-file"></i> Résumé</a></li>
<li><a href="https://www.linkedin.com/in/jaywll/"><i class="fa-brands fa-linkedin-in"></i> LinkedIn</a></li>
<li><a href="https://twitter.com/jaywll"><i class="fa-brands fa-twitter"></i> Twitter</a></li>
<li><a href="/"><i class="fa-brands fa-mastodon"></i> Mastodon</a></li>
<li><a href="https://www.instagram.com/jaywll/"><i class="fa-brands fa-instagram"></i> Instagram</a></li>
<li><a href="https://jaywll.wordpress.com/category/blog/"><i class="fa-brands fa-wordpress"></i> Blog</a></li>
<li><a href="https://code.jaywll.co/explore/repos"><i class="fa-solid fa-code-branch"></i> Code</a></li>
<li><a href="https://ja.son-williams.ca/contact"><i class="fa-solid fa-envelope"></i> Contact Me</a></li>
<li><a href="https://ja.son-williams.ca"><i class="fa-solid fa-user"></i> Website</a></li>
<li><a href="https://ja.son-williams.ca/resume"><i class="fa-solid fa-file"></i> Résumé</a></li>
<li><a href="https://www.linkedin.com/in/jaywll/"><i class="fa-brands fa-linkedin-in"></i> LinkedIn</a></li>
<li><a href="https://twitter.com/jaywll"><i class="fa-brands fa-twitter"></i> Twitter</a></li>
<li><a href="/"><i class="fa-brands fa-mastodon"></i> Mastodon</a></li>
<li><a href="https://www.instagram.com/jaywll/"><i class="fa-brands fa-instagram"></i> Instagram</a></li>
<li><a href="https://jaywll.wordpress.com/category/blog/"><i class="fa-brands fa-wordpress"></i> Blog</a></li>
<li><a href="https://code.jaywll.co/explore/repos"><i class="fa-solid fa-code-branch"></i> Code</a></li>
<li><a href="https://ja.son-williams.ca/contact"><i class="fa-solid fa-envelope"></i> Contact Me</a></li>
<li><a href="https://ja.son-williams.ca"><i class="fa-solid fa-user"></i> Website</a></li>
<li><a href="https://ja.son-williams.ca/resume"><i class="fa-solid fa-file"></i> Résumé</a></li>
<li><a href="https://www.linkedin.com/in/jaywll/"><i class="fa-brands fa-linkedin-in"></i> LinkedIn</a></li>
<li><a href="https://twitter.com/jaywll"><i class="fa-brands fa-twitter"></i> Twitter</a></li>
<li><a href="/"><i class="fa-brands fa-mastodon"></i> Mastodon</a></li>
<li><a href="https://mstdn.ca/@jaywll"><i class="fa-brands fa-mastodon"></i> Mastodon</a></li>
<li><a href="https://www.instagram.com/jaywll/"><i class="fa-brands fa-instagram"></i> Instagram</a></li>
<li><a href="https://jaywll.wordpress.com/category/blog/"><i class="fa-brands fa-wordpress"></i> Blog</a></li>
<li><a href="https://code.jaywll.co/explore/repos"><i class="fa-solid fa-code-branch"></i> Code</a></li>
@ -66,13 +50,21 @@
</div>
</div>
<div id="main-flo" class="main flo notjason">
<div id="banner-flo" class="banner flo notjason" data-person="flo">
<a href="/flo" class="openlink">Flo Banner</a>
<div class="col-container">
<div id="banner-flo" class="banner flo notjason" data-person="flo">
<a href="/flo" class="openlink">Flo Banner</a>
</div>
<div id="links-flo" class="links flo notjason">
<ul>
<li><a href="#"><i class="fa-brands fa-linkedin-in"></i> LinkedIn</a></li>
<li><a href="#"><i class="fa-brands fa-instagram"></i> Instagram</a></li>
<li><a href="#"><i class="fa-brands fa-facebook-f"></i>Facebook</a></li>
</ul>
</div>
</div>
<div id="links-flo" class="links flo notjason"></div>
</div>
<div id="splash-flo" class="splash flo notjason">
<div class="splash-container">
<div class="col-container">
Flo Splash
</div>
</div>