Skip to content

Commit

Permalink
restyle footer and header
Browse files Browse the repository at this point in the history
  • Loading branch information
@ryan0
ryan0 committed Oct 25, 2024
1 parent dbe17d2 commit c366d55
Show file tree
Hide file tree
Showing 2 changed files with 72 additions and 38 deletions.
53 changes: 24 additions & 29 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,14 +34,13 @@
<div class="top-nav">
<nav>
<div class="nav-home">
<a href="#">Ryan Miller</a>
<a href="/">Ryan Miller</a>
</div>
<div class="nav-links">
<a href="#about">About</a>
<a href="#experience">Experience</a>
<a href="#projects">Projects</a>
<a href="#skills">Skills</a>
<a href="#contact">Contact</a>
<a class="hide-min" href="#about">About</a>
<a class="hide-min" href="#experience">Experience</a>
<a class="hide-min" href="#projects">Projects</a>
<a class="mail-button" href="mailto:[email protected]">Contact Me</a>
</div>
</nav>
</div>
Expand Down Expand Up @@ -168,7 +167,7 @@ <h3>Block Game <em>&#8599;</em></h3>
</div>
</div>
<div id="skills" class="skills section">
<h2>Skills</h2>
<h2>Favorite Frameworks, Languages and Tools</h2>
<div class="frameworks wrapper">
<img src="/skill-icons/frameworks-libs/angular.svg" alt="Angular" title="Angular">
<img src="/skill-icons/frameworks-libs/react.svg" alt="React" title="React">
Expand Down Expand Up @@ -204,28 +203,24 @@ <h2>Skills</h2>
<div class="contact">
<a id="contact" class="anchor"></a>
<div class="section">
<h2>Contact</h2>
<ul class="contact-info" style="margin-bottom: 20px">
<li><a href="mailto:[email protected]" title="[email protected]">[email protected]</a></li>
<li>
<a class="icon-link" href="https://github.com/ryan0" target="_blank"
rel="noreferrer noopener" aria-label="GitHub (opens in a new tab)" title="GitHub"><span
class="sr-only">GitHub</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="h-6 w-6"
aria-hidden="true">
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path>
</svg>
</a>
<a class="icon-link" href="https://www.linkedin.com/in/ryan-rmiller-dev/" target="_blank"
rel="noreferrer noopener" aria-label="LinkedIn (opens in a new tab)" title="LinkedIn"><span
class="sr-only">LinkedIn</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="h-6 w-6"
aria-hidden="true">
<path d="M20.5 2h-17A1.5 1.5 0 002 3.5v17A1.5 1.5 0 003.5 22h17a1.5 1.5 0 001.5-1.5v-17A1.5 1.5 0 0020.5 2zM8 19H5v-9h3zM6.5 8.25A1.75 1.75 0 118.3 6.5a1.78 1.78 0 01-1.8 1.75zM19 19h-3v-4.74c0-1.42-.6-1.93-1.38-1.93A1.74 1.74 0 0013 14.19a.66.66 0 000 .14V19h-3v-9h2.9v1.3a3.11 3.11 0 012.7-1.4c1.55 0 3.36.86 3.36 3.66z"></path>
</svg>
</a>
</li>
</ul>
<p>© 2024 Ryan Miller.</p>
<p><a href="mailto:[email protected]" title="[email protected]">[email protected]</a></p>
<a class="icon-link" href="https://github.com/ryan0" target="_blank"
rel="noreferrer noopener" aria-label="GitHub (opens in a new tab)" title="GitHub"><span
class="sr-only">GitHub</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="h-6 w-6"
aria-hidden="true">
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path>
</svg>
</a>
<a class="icon-link" href="https://www.linkedin.com/in/ryan-rmiller-dev/" target="_blank"
rel="noreferrer noopener" aria-label="LinkedIn (opens in a new tab)" title="LinkedIn"><span
class="sr-only">LinkedIn</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="h-6 w-6"
aria-hidden="true">
<path d="M20.5 2h-17A1.5 1.5 0 002 3.5v17A1.5 1.5 0 003.5 22h17a1.5 1.5 0 001.5-1.5v-17A1.5 1.5 0 0020.5 2zM8 19H5v-9h3zM6.5 8.25A1.75 1.75 0 118.3 6.5a1.78 1.78 0 01-1.8 1.75zM19 19h-3v-4.74c0-1.42-.6-1.93-1.38-1.93A1.74 1.74 0 0013 14.19a.66.66 0 000 .14V19h-3v-9h2.9v1.3a3.11 3.11 0 012.7-1.4c1.55 0 3.36.86 3.36 3.66z"></path>
</svg>
</a>
</div>
</div>

Expand Down
57 changes: 48 additions & 9 deletions src/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,10 +67,15 @@ h1 {
position: fixed;
top: 0;
left: 0;
width: 100vw;
width: 100%;
background-color: #131313;
z-index: 1;

a {
margin-top: 5px;
display: block;
}

nav {
max-width: 920px;
margin: 0 auto;
Expand All @@ -79,11 +84,19 @@ h1 {
justify-content: space-between;
font-size: 1.2em;

.mail-button {
margin-top: 0;
border: solid 2px;
padding: 4px 8px;
border-radius: 2px;
}

.nav-links {
display: flex;
justify-content: space-between;
gap: 25px;

}
.hide-min {
@media (max-width: 570px){
display: none;
}
Expand Down Expand Up @@ -143,6 +156,10 @@ h1 {
margin-bottom: 2px;
}

li {
margin-bottom: 10px;
}

@media (min-width: 720px) {
border-left: 1px solid white;
padding-left: 44px;
Expand All @@ -153,11 +170,21 @@ h1 {
div.project-section {

max-width: 1020px;
margin: 140px auto;

@media (max-width: 720px) {
margin: 40px auto;
}

h2 {
margin-left: 20px;
max-width: 820px;
margin-bottom: 50px;

@media (max-width: 430px){
margin-left: 0;
font-size: 1.3rem;
}
}

}
Expand Down Expand Up @@ -255,13 +282,25 @@ div.project-section {
.section {
margin-bottom: 0;
background: #131313;
}
display: flex;
gap: 24px;
padding: 8px;
justify-content: center;

ul {
padding: 0;
}
li {
list-style-type: none;
margin: 18px;
.icon-link {
width: 30px;
margin-top: 15px;
margin-left: 0;
}

@media (max-width: 425px) {
gap: 16px;
}
@media (max-width: 400px) {
font-size: .8rem;
.icon-link {
margin-top: 10px;
}
}
}
}

0 comments on commit c366d55

Please sign in to comment.