Skip to content
This repository has been archived by the owner on Jan 20, 2024. It is now read-only.

Commit

Permalink
Adjusted styling
Browse files Browse the repository at this point in the history
  • Loading branch information
@stephenjacobsio
stephenjacobsio committed Jan 29, 2019
1 parent 53c575d commit 12da194
Show file tree
Hide file tree
Showing 4 changed files with 167 additions and 115 deletions.
Binary file added images/briefcase.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/grapevine.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
165 changes: 105 additions & 60 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
<!-- 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">
<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">
Expand All @@ -25,7 +25,7 @@
<p id="logo">Stephen Jacobs</p>
</a>
<ul>
<li><a href="#contact">Contact</a></li>
<li><a href="#contact">Portfolio</a></li>
<li><a href="#tech">Technology</a></li>
<li><a href="#resume">Resume</a></li>
<li><a href="#about">About</li></a>
Expand All @@ -34,70 +34,115 @@
</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>Core Competencies</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" />
<img src="images/profile.jpg" alt="profile image" class="profile-image">
<section>
<div id="about" class="container">
<div class="circle-icon">
<img src="images/avatar.png" alt="avatar" width="200" class="avatar">
</div>
<h1>About</h1>
<section id="about-content">
<p>Hi my name is Stephen Jacobs, I am a software engineer/web developer. I have over six years of
industry experience as a software engineer and web developer. My skills range from front-end
JavaScript, such as React and Angular, to the backend with REST APIs and SQL database
management. I
have experience with a variety of programming languages, development tools and agile
development. I
am passionate about programming and emerging web technologies, and am always trying to develop
skills relevant to the industy.</p>
<p>I currently reside in Los Angeles, California with my wife and daughter. Outside of programming
I
mostly like to spend time with my family. I enjoy hiking the many trails we have here in Los
Angeles, as well as spending time at the beach. I have a passion for basketball and play
pick-up
games at the park or rec-center. Cooking, reading and watching a good movie round out my
hobbies. I
have also taken up meditation and yoga as a means to relax, uwind and calm the mind.</p>
</section>
</div>
</section>
<section>
<div id="resume" class="container">
<div class="circle-icon">
<img src="images/resume.png" alt="resume avatar" class="avatar">
</div>
<h1>Resume</h1>
<div class="resume-content">
<p>
<h2>Software Engineer</h2>
<span><strong>Nuance Communications</strong></span>
<span><strong>August 2016 to Present</strong></span>

<ul class="resume-list">
<li>Implement business logic for client chat service</li>
<li>Debug issues with chat service using chrome dev tools</li>
<li>Communicate timelines, expectations and potential issues with client and project
managers -
Create internal productivity tools</li>
<li>Manage client chat service configurations in an internal web portal</li>
</ul>
<h2>Web Developer</h2>
<span><strong>OmniUpdate</strong></span>
<span><strong>September 2015 to August 2016</strong></span>

<ul class="resume-list">
<li>Lead developer on several projects for higher education institutions</li>
<li>Provide detailed project documentation of all work completed</li>
<li>Work cohesively with team members in completing projects on time and under budget</li>
<li>Facilitate the onboarding process of new customers to the company's proprietary Content
Management System</li>
</ul>
<h2>Software Engineer I</h2>
<span><strong>Datex Property Solutions</strong></span>
<span><strong>June 2013 to September 2015</strong></span>

<ul class="resume-list">
<li>Lead developer on multi-module Angular application for large scale health care company</li>
<li>Programming new features and product enhancements using C#, JavaScript, Angular and
jQuery.
- Produced multi-layered financial reports in HTML/CSS/JavaScript</li>
<li>Generate dynamic PDF Reports using C# and Active Reports 8</li>
<li>Data consumption with REST API calls and CRUD operations</li>
</ul>
</p>
</div>
</div>
<div class="stack">
<img src="images/C-Sharp-01.png" width="200"/>
<img src="images/MySQL-01.png" width="300"/>
<img src="images/JQuery-01.png" width="350"/>
<img src="images/PHP-01.png" width="310"/>
</section>
<section>
<div id="tech" class="container">
<div class="circle-icon">
<img src="images/technology.png" alt="technolgy preferences avatar" class="avatar">
</div>
<h1>Core Competencies</h1>
<div class="stack">
<img src="images/react.png" alt="React" />
<img src="images/node.png" alt="node" />
<img src="images/javascript.png" alt="JavaScript" />
<img src="images/html5-css3.png" alt="html5 and css3" />
</div>
</div>
</div>
</section>
<section>
<div id="portfolio" class="container">
<div class="circle-icon">
<img src="images/briefcase.png" alt="technolgy preferences avatar" class="avatar">
</div>
<h1>Portfolio</h1>
<div class="grapevine-container">
<h3>Grapevine News</h3>
<img src="images/grapevine.jpg" alt="" id="grapevine-img">
</div>
</div>
</section>
</main>

<footer>
<div class="footer">
<div class="footer-contact">
<p>Contact</p>
<p>[email protected]</p>
<p>@stephja</p>
</div>
<div class="social-links">
<a href="https://github.com/stephja" title="github"><i class="fab fa-github"></i></a>
<a href="https://www.linkedin.com/in/stephen-jacobs-215284bb/" title="linkedin"><i class="fab fa-linkedin"></i></a>
Expand Down
117 changes: 62 additions & 55 deletions main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,17 @@
box-sizing: border-box;
font-family: 'Raleway', sans-serif;
}
body{
overflow-x: hidden;
overflow-y: auto;
}
main{
padding-top: 68px;
}
footer{
background-color:#0277bd;
color: #fff;
height: 100px;
height: 150px;
opacity: .9;
}
a{
Expand Down Expand Up @@ -83,7 +87,7 @@ a{
align-content: flex-start;
flex-flow: column;
line-height: 2;
padding: 85px;
padding: 50px;
color: #00000078;
}
.container img{
Expand All @@ -92,39 +96,43 @@ a{
.container h1{
text-align: center;
flex-direction: column;
margin-bottom:100px;
margin-bottom:45px;
}
#resume{
background-color: #fff !important;
padding:50px;
}
#tech{
background-color:whitesmoke;
}
#profile-img{
.profile-image{
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-right:20px;
margin-bottom:50px;
opacity: 0.7;
height:100%;
width:300px;
vertical-align: middle;
}
.stack img:hover{
opacity: 1;
}
.footer{
line-height:2;
}
.footer-contact{
float:left;
margin:20px;
}
.footer-contact p{
text-align:center;
}
.social-links{
float: right;
line-height:3;
line-height:4.5;
font-size: 2rem;
margin-right:20px;
}
Expand All @@ -144,50 +152,49 @@ a{
margin-left: auto;
margin-right: auto;
width: 150px;

}
.circle-icon {
background: rgba(0, 0, 255, 0.466);
padding:40px;
width:150px;
border-radius: 50%;
box-sizing: content-box;
margin-left: auto;
margin-right: auto;
}
.footer{
line-height: 2;
.profile-image{
width:100%;
}

/* Image Zoom */
#logo-link span{
display:none;
}
.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.1);
}
.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;
background-color:gray;
opacity:.5;
.resume-list{
margin-left:5%;
}
#about-content p{
margin-bottom:30px;
}
#resume ul{
margin-bottom: 30px;
}
#portfolio{
background-color: #fff;
}
.parent:hover span,
.parent:focus span {
display: block;
.grapevine-container{
width:50%;
margin:auto;
}
.grapevine-container h2{
text-align: center;
}
#grapevine-img{
opacity: .8;
width:100%;
}
#grapevine-img:hover{
opacity: 1;
}
@media screen and (max-width: 1000px){
.column-weather{
display:none;
}
}

0 comments on commit 12da194

Please sign in to comment.