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
OmniUpdateSeptember 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 SolutionsJune 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
-
-
+
+
+
-
+
+
+
Core Competencies
-
+
-
+
-
-
+
+
+
-
+
+
+
Portfolio
-
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
- 
+ 
+ 
+ 
+ 
- 
+ 
+ 
+