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

Completed Jason's section

Browse Source
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 { :root {
--jason-bg-color: #F2EDEA; --jason-bg-color: #F2EDEA;
--jason-accent-color: #302B44;
--jason-hover-bg-color: #913A50;
--jason-hover-fg-color: #FFFFFF;
--flo-bg-color: #601F22; --flo-bg-color: #601F22;
} }
body {
overflow-x: hidden;
}
div { div {
box-sizing: border-box; box-sizing: border-box;
overflow: hidden; overflow: hidden;
@ -121,7 +128,7 @@ div {
height: 0; height: 0;
} }
.splash-container { .col-container {
height: 100%; height: 100%;
width: 100%; width: 100%;
padding: 1rem; padding: 1rem;
@ -129,20 +136,6 @@ div {
.splash img { width: 100%; height: 100%; border-radius: 1rem; object-fit: cover; } .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 { .banner {
flex: 0 0 100%; flex: 0 0 100%;
text-align: center; text-align: center;
@ -152,7 +145,6 @@ div {
.links { .links {
height: 0; height: 0;
/* flex: 0 0 100%; */
} }
.links ul { .links ul {
@ -164,16 +156,38 @@ div {
.links li a { .links li a {
display: block; display: block;
background-color: #FF0000;
height: 3rem; height: 3rem;
line-height: 3rem; line-height: 3rem;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
border-radius: 1rem; border-radius: 1rem;
text-align: center; text-align: center;
text-decoration: none;
} }
.splash.jason, .main.jason { .splash.jason, .main.jason {
background-color: var(--jason-bg-color); 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 { .splash.flo, .main.flo {

40
www/index.html
View File

@ -14,6 +14,9 @@
<link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.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"> <meta name="theme-color" content="#fafafa">
</head> </head>
@ -21,12 +24,12 @@
<body> <body>
<div id="container"> <div id="container">
<div id="splash-jason" class="splash jason notflo"> <div id="splash-jason" class="splash jason notflo">
<div class="splash-container"> <div class="col-container">
<img src="/img/splash-jason.jpg"> <img src="/img/splash-jason.jpg">
</div> </div>
</div> </div>
<div id="main-jason" class="main jason notflo"> <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"> <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> <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> <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://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://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="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>
<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://www.instagram.com/jaywll/"><i class="fa-brands fa-instagram"></i> Instagram</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://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://code.jaywll.co/explore/repos"><i class="fa-solid fa-code-branch"></i> Code</a></li>
@ -66,13 +50,21 @@
</div> </div>
</div> </div>
<div id="main-flo" class="main flo notjason"> <div id="main-flo" class="main flo notjason">
<div class="col-container">
<div id="banner-flo" class="banner flo notjason" data-person="flo"> <div id="banner-flo" class="banner flo notjason" data-person="flo">
<a href="/flo" class="openlink">Flo Banner</a> <a href="/flo" class="openlink">Flo Banner</a>
</div> </div>
<div id="links-flo" class="links flo notjason"></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> </div>
<div id="splash-flo" class="splash flo notjason"> <div id="splash-flo" class="splash flo notjason">
<div class="splash-container"> <div class="col-container">
Flo Splash Flo Splash
</div> </div>
</div> </div>