From a36bd489288eddc62cdff55134c56f68c3dfa00b Mon Sep 17 00:00:00 2001 From: Stephen Jacobs Date: Tue, 29 Jan 2019 17:45:58 -0800 Subject: [PATCH] Added content --- index.html | 135 ++++++++++++++------- main.css | 315 +++++++++++++++++++++++++++++++++++++------------ mobile-menu.js | 9 ++ 3 files changed, 341 insertions(+), 118 deletions(-) create mode 100644 mobile-menu.js diff --git a/index.html b/index.html index a12caf1..4c55ccf 100644 --- a/index.html +++ b/index.html @@ -12,6 +12,8 @@ + + @@ -20,25 +22,53 @@
-
- - - - -
+
- profile image -
-
+
+ profile image +
+ +
+
- avatar +
+ avatar +

About

@@ -61,10 +91,13 @@

About

-
-
+ +
+
- resume avatar +
+ resume avatar +

Resume

@@ -73,7 +106,7 @@

Software Engineer

Nuance Communications August 2016 to Present -
    +
    • Implement business logic for client chat service
    • Debug issues with chat service using chrome dev tools
    • Communicate timelines, expectations and potential issues with client and project @@ -81,22 +114,24 @@

      Software Engineer

      Create internal productivity tools
    • Manage client chat service configurations in an internal web portal
    +

    Web Developer

    OmniUpdate September 2015 to August 2016 -
      +
      • Lead developer on several projects for higher education institutions
      • Provide detailed project documentation of all work completed
      • Work cohesively with team members in completing projects on time and under budget
      • Facilitate the onboarding process of new customers to the company's proprietary Content Management System
      +

      Software Engineer I

      Datex Property Solutions June 2013 to September 2015 -
        +
        • Lead developer on multi-module Angular application for large scale health care company
        • Programming new features and product enhancements using C#, JavaScript, Angular and jQuery. @@ -108,29 +143,41 @@

          Software Engineer I

-
-
+ +
+
- technolgy preferences avatar +
+ technolgy icon +

Core Competencies

- React + react node - JavaScript + javascript html5 and css3
-
-
+ +
+
- technolgy preferences avatar +
+ portfolio icon +

Portfolio

-

Grapevine News

- + Grapevine News +
+
+

Grapevine News

+

A lightweight news application leveraging React, node.js and express. I utilized News API and + Dark Sky API for external requests for news and weather data. For UI I chose to use + Material-UI, a React component library inspired by Google's Material Design.

@@ -138,16 +185,22 @@

Grapevine News

diff --git a/main.css b/main.css index 65cc920..146f96d 100644 --- a/main.css +++ b/main.css @@ -20,33 +20,6 @@ footer{ 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; @@ -78,10 +51,46 @@ a{ display: inline; font-size: 2em; } +.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%; +} +.mobile-menu-button{ + display:none; +} +.profile-image{ + width:100%; +} +.profile-image{ + width: 100%; + opacity: 0.85; +} .container{ width:100%; margin: auto; - background-color:whitesmoke; display: flex; flex-wrap: wrap; align-content: flex-start; @@ -90,6 +99,12 @@ a{ padding: 50px; color: #00000078; } +.white-bg{ + background-color: #fff; +} +.grey-bg{ + background-color: whitesmoke; +} .container img{ flex-direction: column; } @@ -98,20 +113,26 @@ a{ flex-direction: column; margin-bottom:45px; } -#resume{ - background-color: #fff !important; - padding:50px; -} -#tech{ - background-color:whitesmoke; +.avatar{ + display: block; + margin-left: auto; + margin-right: auto; + width: 150px; + } -.profile-image{ - width: 100%; - opacity: 0.85; +.circle-icon { + background: rgba(0, 0, 255, 0.466); + padding:40px; + width:150px; + border-radius: 50%; + box-sizing: content-box; + margin-top:25px; + margin-left: auto; + margin-right: auto; } .stack img{ flex: 1; - margin-right:20px; + margin-right:50px; margin-bottom:50px; opacity: 0.7; width:300px; @@ -120,21 +141,57 @@ a{ .stack img:hover{ opacity: 1; } +.resume-item{ + margin-left:5%; +} +.grapevine-container{ + width: 50%; + margin:auto; +} +.grapevine-container h2{ + text-align: center; +} +#resume{ + background-color: #fff !important; + padding:50px; +} +#technology{ + background-color:whitesmoke; +} +#about-content p{ + margin-bottom:30px; +} +#resume ul{ + margin-bottom: 30px; +} +#portfolio{ + background-color: #fff; +} +#grapevine-img{ + opacity: .8; + width:100%; + border-radius:5px; + border: 1px solid rgba(0, 0, 0, 0.171); +} +#grapevine-img:hover{ + opacity: 1; +} .footer{ line-height:2; } .footer-contact{ float:left; - margin:20px; + margin: 15px 20px; } -.footer-contact p{ +.footer-contact h4{ text-align:center; } .social-links{ float: right; - line-height:4.5; + line-height:6.5; font-size: 2rem; margin-right:20px; + height:0px; } .social-links i{ padding: 5px; @@ -147,54 +204,158 @@ a{ .social-links a:hover{ color: lightgrey; } -.avatar{ - display: block; - margin-left: auto; - margin-right: auto; - width: 150px; - +.contact-links{ + text-align:left; + line-height:1.7; } -.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; +.contact-links a{ + text-decoration: none; + color: #fff; } -.profile-image{ - width:100%; +.contact-links a:hover{ + text-decoration: underline; + color: whitesmoke; } -.resume-list{ - margin-left:5%; +#showedClickable{ + display:none; } -#about-content p{ - margin-bottom:30px; +#showedClickable ul{ + margin:auto; + list-style-type: none;xxx } -#resume ul{ - margin-bottom: 30px; +@media screen and (max-width: 800px){ +footer { + height:282px; } -#portfolio{ - background-color: #fff; +.social-links{ + line-height: 3.5; + font-size: 3rem; } -.grapevine-container{ - width:50%; - margin:auto; +.footer-contact{ + margin: 3% 13%; + font-size: 1.2rem; } -.grapevine-container h2{ - text-align: center; +.grapevine-container { + width: 100%; + margin: auto; } -#grapevine-img{ - opacity: .8; +.navbar ul{ + display: none; +} +.stack-img{ + margin-left:20%; + margin-bottom:50px; +} +.navbar ul{ + display: none; +} +.grapevine-container { + width: 100%; + margin: auto; +} +.mobile-menu-button{ + display:block; + float: right; + color:#fff; + margin-right:30px; + line-height:3; + font-size:1.5rem; + +} +.mobile-menu-button a{ + text-decoration: none; + color:#fff; +} +#showedClickable{ + display:block; + font-size:1.5rem; width:100%; + text-align:center; + padding-top: 9%; + position:relative; + display:flex; +} +#showedClickable ul { + flex:1; + /* padding:10px; */ + margin-top:0px; + background-color:rgba(211, 211, 211, 0.445); + /* border:1px solid gray; */ + border-bottom:1px solid lightgray; +} +#showedClickable ul li{ + padding:10px; + background-color:rgba(211, 211, 211, 0.445); + /* border:1px solid gray; */ + border-bottom:1px solid lightgray; +} +#showedClickable ul li a{ + text-decoration:none; + color:rgb(124, 124, 124); } -#grapevine-img:hover{ - opacity: 1; +#showedClickable ul li:hover{ + background-color:gray; + color:white; +} +main{ + padding-top: 0px; } -@media screen and (max-width: 1000px){ - .column-weather{ - display:none; + /* Add a black background color to the top navigation */ +.topnav { + /* background-color: #333; */ + overflow: hidden; + } + + /* Style the links inside the navigation bar */ + .topnav a { + background-color: #333; + float: left; + display: none; + color: #f2f2f2; + text-align: center; + padding: 14px 16px; + text-decoration: none; + font-size: 17px; + } + + /* Change the color of links on hover */ + .topnav a:hover { + background-color: #ddd; + color: black; + } + + /* Add an active class to highlight the current page */ + .active { + background-color: #4CAF50; + color: white; + } + + /* Hide the link that should open and close the topnav on small screens */ + .topnav .icon { + display: none; + } + + /* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */ +@media screen and (max-width: 600px) { + .topnav a:not(:first-child) {display: none;} + .topnav a.icon { + float: right; + display: block; + } + } + + /* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */ + @media screen and (max-width: 600px) { + .topnav.responsive {position: relative;} + .topnav.responsive a.icon { + position: absolute; + right: 0; + top: 0; + } + .topnav.responsive a { + float: none; + display: block; + text-align: left; } } diff --git a/mobile-menu.js b/mobile-menu.js new file mode 100644 index 0000000..b282d61 --- /dev/null +++ b/mobile-menu.js @@ -0,0 +1,9 @@ +/* Toggle between adding and removing the "responsive" class to topnav when the user clicks on the icon */ +// function myFunction() { +// var x = document.getElementById("myTopnav"); +// if (x.className === "topnav") { +// x.className += " responsive"; +// } else { +// x.className = "topnav"; +// } +// } \ No newline at end of file