Skip to content

Commit

Permalink
adding final styles and fixing accessibility issues
Browse files Browse the repository at this point in the history
  • Loading branch information
@jhoude5
jhoude5 committed Apr 15, 2024
1 parent 80872ba commit 4535a42
Show file tree
Hide file tree
Showing 15 changed files with 202 additions and 98 deletions.
1 change: 1 addition & 0 deletions CNAME
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
jenniferhoude.ca
21 changes: 13 additions & 8 deletions _includes/footer.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,21 +6,26 @@ <h2 class="h1">Want to Work?</h2>
</div>


<div class="col-md-6">
<div class="col-md-6 pt-2 footer-info">

<div>
<p>If you need a modern and powerful website for your business, startup or yourself, I am available for work. You can email me directly at <a class="contact-email" href="mailto:[email protected]">[email protected]</a></p>
</div>
<div class="social-icons">
<a class="social" href="https://www.linkedin.com/in/jennifer-houde-81119a91/">
<i class="fa-brands fa-linkedin fa-2xl"></i></a>
<a class="social" href="https://github.com/jhoude5">
<i class="fa-brands fa-github fa-2xl"></i></a>
</div>



</div>
<p class="copyright">© All rights reserved – Jennifer Houde</p>
<div class="col-md-6"></div>
<div class="social-icons col-md-6">
<a class="social" href="https://www.linkedin.com/in/jennifer-houde-81119a91/" aria-label="linkedin link">
<i class="fa-brands fa-linkedin fa-2xl"></i></a>
<a class="social" href="https://github.com/jhoude5" aria-label="github link">
<i class="fa-brands fa-github fa-2xl"></i></a>
</div>
<div class="copyright-wrapper">
<p class="copyright">© All rights reserved – Jennifer Houde</p>
</div>

</div>
</div>
</footer>
2 changes: 1 addition & 1 deletion _includes/navbar.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<a class="site-title" rel="author" href="/">Jennifer Houde.</a>
<nav class="site-nav">
<input type="checkbox" id="nav-trigger" class="nav-trigger" />
<label for="nav-trigger">
<label class="nav-trigger-label" for="nav-trigger" aria-label="menu">
<span class="menu-icon">
<svg viewBox="0 0 18 15" width="18px" height="15px">
<path d="M18,1.484c0,0.82-0.665,1.484-1.484,1.484H1.484C0.665,2.969,0,2.304,0,1.484l0,0C0,0.665,0.665,0,1.484,0 h15.032C17.335,0,18,0.665,18,1.484L18,1.484z M18,7.516C18,8.335,17.335,9,16.516,9H1.484C0.665,9,0,8.335,0,7.516l0,0 c0-0.82,0.665-1.484,1.484-1.484h15.032C17.335,6.031,18,6.696,18,7.516L18,7.516z M18,13.516C18,14.335,17.335,15,16.516,15H1.484 C0.665,15,0,14.335,0,13.516l0,0c0-0.82,0.665-1.483,1.484-1.483h15.032C17.335,12.031,18,12.695,18,13.516L18,13.516z"/>
Expand Down
126 changes: 100 additions & 26 deletions _sass/base.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,20 +3,29 @@

}
header {
.nav-wrapper {
padding-bottom: 115px;
}
border: 0 !important;
background-color: #F9EFE7;
margin: 20px;
padding: 20px 20px 140px;
padding: 20px 20px 60px;
@media(min-width: 900px) {
padding: 20px 20px 140px;

}
.nav-wrapper {
padding-bottom: 60px;
@media(min-width: 760px) {
padding-bottom: 115px;
}

}
.site-title {
font-weight: 900;
font-size: 20px;
color: black !important;
}
.site-nav {
display: flex;
border: none;
top: 25px;
.trigger {
display: flex;
padding-top: 15px;
Expand All @@ -28,10 +37,18 @@ header {
}
}
}
.nav-trigger-label {
background-color: #F9EFE7;
border: none;
}
.hero-cta.row {
padding: 0;
h1 {
line-height: 80px;
line-height: 60px;
@media(min-width: 900px) {
line-height: 80px;
}

}
.highlight {
border-bottom: 14px solid yellow;
Expand Down Expand Up @@ -70,12 +87,30 @@ header {
}
}
}
header.resume-wrapper {
h1{
text-align: center;
}
}
main.resume-wrapper {
text-align: center;
max-width: 900px;
margin: 0 auto;
ul li {
list-style-position: inside;
}

}
h1, h2, h3, h4, h5, h6 {
font-family: Abril Fatface;
font-weight: 700 !important;
}
h1, .h1 {
font-size: 56px;
font-size: 38px;
@media(min-width: 760px) {
font-size: 56px;
}

}
h2, .h2 {
font-size: 40px;
Expand Down Expand Up @@ -106,6 +141,8 @@ a.btn {
}
}
main {
max-width: none;

.project-image {
margin-top: -125px;
box-shadow: 0px 0px 30px 0px;
Expand All @@ -115,15 +152,23 @@ main {

.work-wrapper {
.row {
margin-bottom: 260px;
margin-bottom: 80px;
@media (min-width: 900px) {
margin-bottom: 260px;
}

}

.latest-work-title {
text-transform: uppercase;
color: #716F73;
margin-bottom: 60px;
margin-top: 160px;
margin-bottom: 30px;
margin-top: 60px;
font-size: 26px;
@media(min-width: 900px) {
margin-top: 160px;
margin-bottom: 60px;
}

}
.latest-title {
Expand All @@ -136,17 +181,24 @@ main {
padding: 6px 10px;
margin-right: 16px;
font-weight: 700;
margin-bottom: 10px;
display: inline-block;
}
}
a.btn {
margin-top: 64px;
margin-bottom: 40px;
}
}
.what-ido {
h2 {
margin-bottom: 40px;
}
.exp-title {
font-weight: 700;
font-size: 26px;
padding-bottom: 9px;
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"
}
.pb-80 {
padding-bottom: 80px;
Expand All @@ -159,10 +211,16 @@ main {
.exp-title {
font-weight: 700;
font-size: 24px;
padding-bottom: 0;
margin-bottom: 0;
}
.exp-company {
color:#716F73;
font-size: 14px;
margin-bottom: 15px;
}
ul {
padding-bottom: 40px;
}
}
}
Expand All @@ -172,14 +230,22 @@ main {
}
footer {
background-color: #F9EFE7;
margin: 20px;
padding: 50px 20px 140px;
padding: 30px 20px 20px;
position: relative;
@media (min-width: 760px) {
padding: 50px 20px 20px;
}
.container {
padding: 0;
max-width: 1320px;
position: relative;
.row {
padding: 0;
}
}
.social-icons {
float: right;
position: absolute;
bottom: 40px;
right: 230px;
margin-top: 75px;

.social {
width: 35px;
height: 35px;
Expand All @@ -188,22 +254,30 @@ footer {
&:focus {
fill: black;
}
@media (min-width: 760px) {
position: absolute;
bottom: 0;
right: 0;
}
}
.linkedin:hover,
.linkedin:focus {
background:url('/assets/pictures/black-linkedin') no-repeat 0 0;
.social:nth-child(2) {
@media (min-width: 760px) {
right: 50px;
}
}
}
.footer-info {
padding: 5px;
}
.contact-email {
color: black !important;
font-weight: 700;

font-weight: 700;
}
.copyright {
position: absolute;
bottom: 20px;
left: 230px;
color:#716F73;
color:#6E6B70;
margin-top: 20px;
font-size: 14px;
width: auto;

}

}
21 changes: 13 additions & 8 deletions _site/404.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,21 +70,26 @@ <h2 class="h1">Want to Work?</h2>
</div>


<div class="col-md-6">
<div class="col-md-6 pt-2 footer-info">

<div>
<p>If you need a modern and powerful website for your business, startup or yourself, I am available for work. You can email me directly at <a class="contact-email" href="mailto:[email protected]">[email protected]</a></p>
</div>
<div class="social-icons">
<a class="social" href="https://www.linkedin.com/in/jennifer-houde-81119a91/">
<i class="fa-brands fa-linkedin fa-2xl"></i></a>
<a class="social" href="https://github.com/jhoude5">
<i class="fa-brands fa-github fa-2xl"></i></a>
</div>



</div>
<p class="copyright">© All rights reserved – Jennifer Houde</p>
<div class="col-md-6"></div>
<div class="social-icons col-md-6">
<a class="social" href="https://www.linkedin.com/in/jennifer-houde-81119a91/" aria-label="linkedin link">
<i class="fa-brands fa-linkedin fa-2xl"></i></a>
<a class="social" href="https://github.com/jhoude5" aria-label="github link">
<i class="fa-brands fa-github fa-2xl"></i></a>
</div>
<div class="copyright-wrapper">
<p class="copyright">© All rights reserved – Jennifer Houde</p>
</div>

</div>
</div>
</footer></body>
Expand Down
2 changes: 1 addition & 1 deletion _site/feed.xml
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<?xml version="1.0" encoding="utf-8"?><feed xmlns="http://www.w3.org/2005/Atom" ><generator uri="https://jekyllrb.com/" version="4.3.3">Jekyll</generator><link href="http://localhost:4000/feed.xml" rel="self" type="application/atom+xml" /><link href="http://localhost:4000/" rel="alternate" type="text/html" /><updated>2024-04-11T16:40:02-04:00</updated><id>http://localhost:4000/feed.xml</id><title type="html">Jennifer Houde</title><subtitle>Portfolio</subtitle><entry><title type="html">Welcome to Jekyll!</title><link href="http://localhost:4000/jekyll/update/2024/04/04/welcome-to-jekyll.html" rel="alternate" type="text/html" title="Welcome to Jekyll!" /><published>2024-04-04T15:39:36-04:00</published><updated>2024-04-04T15:39:36-04:00</updated><id>http://localhost:4000/jekyll/update/2024/04/04/welcome-to-jekyll</id><content type="html" xml:base="http://localhost:4000/jekyll/update/2024/04/04/welcome-to-jekyll.html"><![CDATA[<p>You’ll find this post in your <code class="language-plaintext highlighter-rouge">_posts</code> directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run <code class="language-plaintext highlighter-rouge">jekyll serve</code>, which launches a web server and auto-regenerates your site when a file is updated.</p>
<?xml version="1.0" encoding="utf-8"?><feed xmlns="http://www.w3.org/2005/Atom" ><generator uri="https://jekyllrb.com/" version="4.3.3">Jekyll</generator><link href="http://localhost:4000/feed.xml" rel="self" type="application/atom+xml" /><link href="http://localhost:4000/" rel="alternate" type="text/html" /><updated>2024-04-15T16:04:08-04:00</updated><id>http://localhost:4000/feed.xml</id><title type="html">Jennifer Houde</title><subtitle>Portfolio</subtitle><entry><title type="html">Welcome to Jekyll!</title><link href="http://localhost:4000/jekyll/update/2024/04/04/welcome-to-jekyll.html" rel="alternate" type="text/html" title="Welcome to Jekyll!" /><published>2024-04-04T15:39:36-04:00</published><updated>2024-04-04T15:39:36-04:00</updated><id>http://localhost:4000/jekyll/update/2024/04/04/welcome-to-jekyll</id><content type="html" xml:base="http://localhost:4000/jekyll/update/2024/04/04/welcome-to-jekyll.html"><![CDATA[<p>You’ll find this post in your <code class="language-plaintext highlighter-rouge">_posts</code> directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run <code class="language-plaintext highlighter-rouge">jekyll serve</code>, which launches a web server and auto-regenerates your site when a file is updated.</p>

<p>Jekyll requires blog post files to be named according to the following format:</p>

Expand Down
Loading

0 comments on commit 4535a42

Please sign in to comment.