This repository has been archived by the owner on Jan 20, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
22d2af4
commit 447915c
Showing
10 changed files
with
282 additions
and
0 deletions.
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,104 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
|
|
||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <meta http-equiv="X-UA-Compatible" content="ie=edge"> | ||
| <meta name="keywords" content="Stephen Jacobs, Web Development, Software Development, Resume, Javascript"> | ||
| <meta name="description" content="Stephen Jacobs' Software Engineer Resume Page"> | ||
| <meta name="author" content="Stephen Jacobs"> | ||
| <!-- CSS --> | ||
| <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" | ||
| crossorigin="anonymous"> | ||
| <link rel="stylesheet" href="/main.css"> | ||
| <!-- Fonts --> | ||
| <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet"> | ||
| <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet"> | ||
| <title>Stephen Jacobs | Web Developer & Software Engineer</title> | ||
| </head> | ||
|
|
||
| <body> | ||
| <header> | ||
| <div class="navbar"> | ||
| <a href="#" id="logo-link"> | ||
| <p id="logo">Stephen Jacobs</p> | ||
| </a> | ||
| <ul> | ||
| <li><a href="#contact">Contact</a></li> | ||
| <li><a href="#tech">Technology</a></li> | ||
| <li><a href="#resume">Resume</a></li> | ||
| <li><a href="#about">About</li></a> | ||
| </ul> | ||
| </div> | ||
| </header> | ||
|
|
||
| <main> | ||
| <div class="parent"> | ||
| <div class="child"></div> | ||
| </div> | ||
| <div id="about" class="container"> | ||
| <img src="/images/avatar.png" alt="avatar" width="200" class="about me avatar"> | ||
| <h1>About</h1> | ||
| <section id="about-content"> | ||
| <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quidem et dolorum vitae exercitationem, | ||
| quas | ||
| similique commodi saepe. Architecto magni unde autem libero voluptatibus cum voluptatum praesentium | ||
| consequuntur corrupti illo sunt fugiat dicta, itaque tenetur ullam alias. Accusantium nisi impedit | ||
| nobis similique quis neque cupiditate dolor tenetur expedita vitae animi dolorum, iusto et ullam | ||
| aut | ||
| recusandae magnam temporibus nihil tempore obcaecati aliquam odit aliquid voluptas. Culpa ullam | ||
| labore | ||
| perferendis nobis reprehenderit illo a, eos, at praesentium, possimus totam nesciunt asperiores | ||
| alias | ||
| similique. Ipsa necessitatibus eveniet consequuntur quia tempora sit quas fugit. Blanditiis ipsa | ||
| fuga | ||
| at deleniti doloribus laudantium, quaerat eveniet necessitatibus?</p> | ||
| <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nesciunt optio facilis quisquam iure iste | ||
| officiis dicta porro assumenda. Similique alias nemo veniam molestiae impedit tempore, nostrum | ||
| ducimus | ||
| ratione laboriosam reprehenderit quas facilis beatae eveniet illum enim repellendus? Accusantium | ||
| suscipit odit deserunt repudiandae praesentium incidunt dolore inventore tempora quam. Sint, | ||
| dolorem!</p> | ||
| </section> | ||
| </div> | ||
| <div id="resume" class="container"> | ||
| <img src="/images/resume.png" alt="resume avatar" class="avatar"> | ||
| <h1>Resume</h1> | ||
| <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quidem et dolorum vitae exercitationem, quas | ||
| similique commodi saepe. Architecto magni unde autem libero voluptatibus cum voluptatum praesentium | ||
| consequuntur corrupti illo sunt fugiat dicta, itaque tenetur ullam alias. Accusantium nisi impedit | ||
| nobis similique quis neque cupiditate dolor tenetur expedita vitae animi dolorum, iusto et ullam aut | ||
| recusandae magnam temporibus nihil tempore obcaecati aliquam odit aliquid voluptas. Culpa ullam labore | ||
| perferendis nobis reprehenderit illo a, eos, at praesentium, possimus totam nesciunt asperiores alias | ||
| similique. Ipsa necessitatibus eveniet consequuntur quia tempora sit quas fugit. Blanditiis ipsa fuga | ||
| at deleniti doloribus laudantium, quaerat eveniet necessitatibus?</p> | ||
| <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nesciunt optio facilis quisquam iure iste | ||
| officiis dicta porro assumenda. Similique alias nemo veniam molestiae impedit tempore, nostrum ducimus | ||
| ratione laboriosam reprehenderit quas facilis beatae eveniet illum enim repellendus? Accusantium | ||
| suscipit odit deserunt repudiandae praesentium incidunt dolore inventore tempora quam. Sint, dolorem!</p> | ||
| </div> | ||
| <div id="tech" class="container"> | ||
| <img src="/images/technology.png" alt="technolgy preferences avatar" class="avatar"> | ||
| <h1>Technology Preferences</h1> | ||
| <div class="stack"> | ||
| <img src="images/react.png" /> | ||
| <img src="images/node.png" /> | ||
| <img src="images/javascript.png" /> | ||
| <img src="images/html5-css3.png" /> | ||
| </div> | ||
| </div> | ||
| </main> | ||
|
|
||
| <footer> | ||
| <div class="footer"> | ||
| <div class="social-links"> | ||
| <i class="fab fa-github"></i> | ||
| <i class="fab fa-linkedin"></i> | ||
| <i class="fab fa-twitter"></i> | ||
| </div> | ||
| </div> | ||
| </footer> | ||
| </body> | ||
|
|
||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,178 @@ | ||
| *{ | ||
| margin:0; | ||
| padding: 0; | ||
| box-sizing: border-box; | ||
| font-family: 'Raleway', sans-serif; | ||
| } | ||
| main{ | ||
| padding-top: 68px; | ||
| } | ||
| footer{ | ||
| background-color:#0277bd; | ||
| color: #fff; | ||
| height: 100px; | ||
| opacity: .9; | ||
| } | ||
| a{ | ||
| cursor: default; | ||
| } | ||
| .navbar ul{ | ||
| list-style-type: none; | ||
| display: inline; | ||
| } | ||
| .navbar ul li{ | ||
| padding-left:20px; | ||
| padding-right:20px; | ||
| float: right; | ||
| text-align: center; | ||
| line-height:4.2; | ||
| -o-transition:.5s; | ||
| -ms-transition:.5s; | ||
| -moz-transition:.5s; | ||
| -webkit-transition:.5s; | ||
| /* ...and now for the proper property */ | ||
| transition:.5s; | ||
| } | ||
| .navbar ul li:hover{ | ||
| background-color: #004c8c; | ||
| } | ||
| .navbar ul li a{ | ||
| text-decoration:none; | ||
| color: #fff; | ||
| display: inline-block; | ||
| width: 100%; | ||
| height: 100%; | ||
| } | ||
| .navbar{ | ||
| background-color:#0277bd; | ||
| height: 68px; | ||
| padding:0px 15px 0px 15px; | ||
| z-index: 1; | ||
| position:fixed; | ||
| width:100%; | ||
| opacity: 0.90; | ||
| } | ||
| .navbar #logo{ | ||
| margin-left:20px; | ||
| line-height:2; | ||
| -o-transition:.5s; | ||
| -ms-transition:.5s; | ||
| -moz-transition:.5s; | ||
| -webkit-transition:.5s; | ||
| /* ...and now for the proper property */ | ||
| transition:.5s; | ||
| } | ||
| .navbar #logo-link{ | ||
| text-decoration: none; | ||
| } | ||
| .navbar #logo-link:hover{ | ||
| font-size: 1.05rem; | ||
| } | ||
| .navbar #logo{ | ||
| font-family: 'Lobster', cursive; | ||
| color:#fff; | ||
| display: inline; | ||
| font-size: 2em; | ||
| } | ||
| .container{ | ||
| width:100%; | ||
| margin: auto; | ||
| background-color:whitesmoke; | ||
| display: flex; | ||
| flex-wrap: wrap; | ||
| align-content: flex-start; | ||
| flex-flow: column; | ||
| line-height: 2; | ||
| padding: 85px; | ||
| color: #00000078; | ||
| } | ||
| .container img{ | ||
| flex-direction: column; | ||
| } | ||
| .container h1{ | ||
| text-align: center; | ||
| flex-direction: column; | ||
| } | ||
| #resume{ | ||
| background-color: #fff !important; | ||
| } | ||
| #profile-img{ | ||
| width: 100%; | ||
| opacity: 0.85; | ||
| filter: alpha(opacity=50); /* For IE8 and earlier */ | ||
| -o-transition:.5s; | ||
| -ms-transition:.5s; | ||
| -moz-transition:.5s; | ||
| -webkit-transition:.5s; | ||
| /* ...and now for the proper property */ | ||
| transition:.5s; | ||
| } | ||
| .stack img{ | ||
| flex: 1; | ||
| margin:100px 15px 100px 15px; | ||
| opacity: 0.8; | ||
| height:100%; | ||
| vertical-align: middle; | ||
| } | ||
| .stack img:hover{ | ||
| opacity: 1; | ||
| } | ||
| .social-links{ | ||
| float: right; | ||
| line-height:3; | ||
| font-size: 2rem; | ||
| margin-right:20px; | ||
| } | ||
| .social-links i{ | ||
| padding: 5px; | ||
| margin-right: 10px | ||
| } | ||
| .avatar{ | ||
| display: block; | ||
| margin-left: auto; | ||
| margin-right: auto; | ||
| width: 150px; | ||
| } | ||
| .footer{ | ||
| line-height: 2; | ||
| } | ||
|
|
||
| /* Image Zoom */ | ||
| .parent { | ||
| width: 100%; | ||
| height: 700px; | ||
| overflow: hidden; | ||
| } | ||
| .child { | ||
| width: 100%; | ||
| height: 100%; | ||
| background-color: black; /* fallback color */ | ||
| background-image: url("images/profile.jpg"); | ||
| background-position: center; | ||
| background-size: cover; | ||
| transition: all .5s; | ||
| } | ||
| .parent:hover .child, | ||
| .parent:focus .child { | ||
| transform: scale(1.2); | ||
| } | ||
| .child::before { | ||
| content: ""; | ||
| display: none; | ||
| height: 100%; | ||
| width: 100%; | ||
| position: absolute; | ||
| top: 0; | ||
| left: 0; | ||
| } | ||
|
|
||
| .parent:hover .child:before, | ||
| .parent:focus .child:before { | ||
| display: block; | ||
| } | ||
|
|
||
| .parent:hover span, | ||
| .parent:focus span { | ||
| display: block; | ||
| } | ||
|
|