<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
</head>
<body id="page-top">
<nav class="navbar navbar-expand-lg navbar-light fixed-top navbar-default navbar-fixed-top navbar-transparent">
<div class="container-fluid" id="menu">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navitems" aria-expanded="false" id="barmenu">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand smoothScroll" id="name" href="#home">River Murphy</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navitems">
<ul class="nav navbar-nav navbar-right">
<li class="current"><a href="#about" class="smoothScroll">About</a></li>
<li><a href="#portfolio" class="smoothScroll">Portfolio</a></li>
<li><a href="#contact" class="smoothScroll">Contact</a></li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<!-- hello world -->
<div class="bg text-center">
<div class="hello">
<div id="gallery-background"></div>
<h1>><span class="typedelem"><noscript>Hello, world!</noscript></span></h1>
<h5 id=>My name is River and I'm a web and software developer</h5></div>
</div>
<!-- /hello world -->
<section class="bg-primary" id="about">
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 text-center">
<h2 class="section-heading">ABOUT ME</h2>
<hr class="white-hr">
<p class="text-faded">My name is River and I'm an aspiring fullstack developer, passionate about responsive design of UI/UX;</p>
<hr class="bracket-hr">
</div>
</div>
</div>
</section>
<section id="services">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading">Proficiency and Skills</h2>
<hr class="primary pro-hr">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-6 text-center">
<div class="service-box">
<i class="devicon-html5-plain text-primary"></i>
<h3>HTML</h3>
<p class="text-muted">Adept with responsive website development using HTML5, CSS, and Bootstrap.</p>
</div>
</div>
<div class="col-lg-3 col-md-6 text-center">
<div class="service-box">
<i class="devicon-javascript-plain text-primary"></i>
<h3>JavaScript</h3>
<p class="text-muted">Familiar with Javascript and Jquery, currently improving skill level.</p>
</div>
</div>
<div class="col-lg-3 col-md-6 text-center">
<div class="service-box">
<i class="devicon-ruby-plain text-primary"></i>
<h3>Ruby/Rails</h3>
<p class="text-muted">Currently Learning Ruby and Ruby on Rails</p>
</div>
</div>
<div class="col-lg-3 col-md-6 text-center">
<div class="service-box">
<i class="devicon-swift-plain text-primary"></i>
<h3>Swift</h3>
<p class="text-muted">Currently Learning Swift</p>
</div>
</div>
</div>
</div>
</section>
<section class="no-padding" id="portfolio">
<h2 class="section-heading"></h2>
<div class="container-fluid">
<div class="row no-gutter popup-gallery">
<div class="col-lg-4 col-sm-6">
<a href="https://blackrockdigital.github.io/startbootstrap-creative/img/portfolio/fullsize/1.jpg" class="portfolio-box">
<img src="http://hdimages.org/wp-content/uploads/2017/03/placeholder-image5.jpg" class="img-responsive" alt="">
<div class="portfolio-box-caption">
<div class="portfolio-box-caption-content">
<div class="project-category text-faded">
Category
</div>
<div class="project-name">
Project Name
</div>
</div>
</div>
</a>
</div>
<div class="col-lg-4 col-sm-6">
<a href="https://blackrockdigital.github.io/startbootstrap-creative/img/portfolio/fullsize/2.jpg" class="portfolio-box">
<img src="http://hdimages.org/wp-content/uploads/2017/03/placeholder-image5.jpg" class="img-responsive" alt="">
<div class="portfolio-box-caption">
<div class="portfolio-box-caption-content">
<div class="project-category text-faded">
Category
</div>
<div class="project-name">
Project Name
</div>
</div>
</div>
</a>
</div>
<div class="col-lg-4 col-sm-6">
<a href="https://codepen.io/ItsMeOctothorpe/pen/Kqeaxj" target="_blank" class="portfolio-box">
<img src="http://hdimages.org/wp-content/uploads/2017/03/placeholder-image5.jpg" class="img-responsive" alt="Tribute Page Preview">
<div class="portfolio-box-caption">
<div class="portfolio-box-caption-content">
<div class="project-category text-faded"> HTML and CSS
</div>
<div class="project-name">
Tribute Page
</div>
</div>
</div>
</a>
</div>
<div class="col-lg-4 col-sm-6">
<a href="https://blackrockdigital.github.io/startbootstrap-creative/img/portfolio/fullsize/4.jpg" class="portfolio-box">
<img src="http://hdimages.org/wp-content/uploads/2017/03/placeholder-image5.jpg" class="img-responsive" alt="">
<div class="portfolio-box-caption">
<div class="portfolio-box-caption-content">
<div class="project-category text-faded">
Category
</div>
<div class="project-name">
Project Name
</div>
</div>
</div>
</a>
</div>
<div class="col-lg-4 col-sm-6">
<a href="https://blackrockdigital.github.io/startbootstrap-creative/img/portfolio/fullsize/5.jpg" class="portfolio-box">
<img src="http://hdimages.org/wp-content/uploads/2017/03/placeholder-image5.jpg" class="img-responsive" alt="">
<div class="portfolio-box-caption">
<div class="portfolio-box-caption-content">
<div class="project-category text-faded">
Category
</div>
<div class="project-name">
Project Name
</div>
</div>
</div>
</a>
</div>
<div class="col-lg-4 col-sm-6">
<a href="https://blackrockdigital.github.io/startbootstrap-creative/img/portfolio/fullsize/6.jpg" class="portfolio-box">
<img src="http://hdimages.org/wp-content/uploads/2017/03/placeholder-image5.jpg" class="img-responsive" alt="">
<div class="portfolio-box-caption">
<div class="portfolio-box-caption-content">
<div class="project-category text-faded">
Category
</div>
<div class="project-name">
Project Name
</div>
</div>
</div>
</a>
</div>
</div>
</div>
</section>
<section id="contact">
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 text-center">
<h2 class="section-heading">Contact Me</h2>
<hr class="primary pro-hr">
<p>Ready to start your next project with me? Awesome! I look forward to working together! Send me a text or email, give me a call, or reach me on Linkedin and I will get back to you as soon as possible!</p>
</div>
<div class="col-lg-4 text-center">
<i class="fa fa-phone fa-3x sr-contact contact-fa"></i>
<p>951-325-3781</p>
</div>
<div class="col-lg-4 text-center">
<i class="fa fa-envelope-o fa-3x sr-contact contact-fa"></i>
<p><a href="mailto:river.softwaredev.gmail.com">river.softwaredev@gmail.com</a></p>
</div>
<div class="col-lg-4 text-center">
<i class="fa fa-linkedin-square fa-3x sr-contact contact-fa"></i>
<p><a href="https://www.linkedin.com/in/river-softwaredev/">Linkedin</a></p>
</div>
</div>
</div>
</section>
@import url(https://fonts.googleapis.com/css?family=Muli);
html,
body {
width: 100%;
height: 100%;
}
body {
font-family: 'Muli', sans-serif;
}
/* home page */
.headers {
font-family: 'Muli', sans-serif;
font-weight: 700;
}
nav {
transition: padding 0.5s, color 0.5s;
}
.navbar-clr {
background: white;
}
#name{
}
text-transform: none !important;
color: #aaa;
font-weight:400;
}
#menu {
font-family: 'Muli', sans-serif;
text-transform: uppercase;
}
.navbar-transparent {
background: transparent;
padding: 15px 0 15px 0;
border: none;
}
.navbar-transparent a {
color: white !important;
}
#navitems a:hover {
color: black !important;
}
hr {
border-color: black;
}
section {
margin-bottom: 30px;
}
.current {
color: #7C4DFF !important;
}
#barmenu {
border: none;
}
#barmenu:hover, #barmenu:focus {
background-color: white !important;
}
.bg {
position: relative;
top: 0;
background-image: url("http://i64.tinypic.com/4igc41.jpg");
background-position: center;
background-repeat: no-repeat;
min-height: 100%;
min-width: 100%;
background-size: cover;
}
.hello {
font-family: 'Roboto Mono', monospace !important;
color: white;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 50%;
height: 30%;
margin: auto;
}
/** Blinking cursor css **/
.typed-cursor {
opacity: 1;
-webkit-animation: blink 0.7s infinite;
-moz-animation: blink 0.7s infinite;
animation: blink 0.7s infinite;
}
@keyframes blink {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-webkit-keyframes blink {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-moz-keyframes blink {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
/* /home page */
hr.light {
border-color: white; }
a {
color: black;
-webkit-transition: all .2s;
-moz-transition: all .2s;
transition: all .2s; }
a:hover, a:focus {
color: #f05f40;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: font-family: 'Muli', sans-serif;
}
p {
font-size: 16px;
line-height: 1.5;
margin-bottom: 20px;
}
.bg-primary {
background-color: #CED7CC !important;
}
.text-faded {
color: #fff;
font-size: 18px;
}
section {
padding: 100px 0;
}
.section-heading {
margin-top: 0;
}
.no-padding {
padding: 0;
}
::-moz-selection {
color: white;
background: #222222;
text-shadow: none;
}
::selection {
color: white;
background: #222222;
text-shadow: none;
}
img::selection {
color: white;
background: transparent;
}
img::-moz-selection {
color: white;
background: transparent;
}
body {
-webkit-tap-highlight-color: #222222;
}
.service-box {
max-width: 400px;
margin: 50px auto 0; }
@media (min-width: 992px) {
.service-box {
margin: 20px auto 0; } }
.service-box p {
margin-bottom: 0;
}
.pro-hr {
margin:40px auto 30px;
padding:0;
border:0;
border-top:solid 3px;
text-align:center;
color:#CED7CC;
max-width:500px;
}
/* portfolio box looks right in full screen view, looks weird in editor view, fix? -- portfolio box and skills display are now pushing to next line, why? */
.portfolio-box {
position: relative;
display: block;
margin: 0 auto; }
}
.portfolio-box .portfolio-box-caption {
position: absolute;
max-height:315px;
bottom: 0;
display: block;
width: 100%;
height: 100%;
text-align: center;
opacity: 0;
color: white;
background: rgba(206, 215, 204, 0.9);
-webkit-transition: all .2s;
-moz-transition: all .2s;
transition: all .2s; }
.portfolio-box .portfolio-box-caption .portfolio-box-caption-content {
position: absolute;
top: 50%;
width: 100%;
transform: translateY(-50%);
text-align: center; }
.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-category,
.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-name {
padding: 0 15px;
font-family: 'Muli', sans-serif;}
.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-category {
font-size: 14px;
font-weight: 600;
text-transform: uppercase; }
.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-name {
font-size: 18px; }
.portfolio-box:hover .portfolio-box-caption {
opacity: 1; }
.portfolio-box:focus {
outline: none; }
@media (min-width: 768px) {
.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-category {
font-size: 16px; }
.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-name {
font-size: 22px; }
}
.text-primary {
color: #CED7CC !important;
font-size:60px;
}
.no-gutter > [class*='col-'] {
padding-right: 0;
padding-left: 0;
}
.btn-default {
color: #222222;
border-color: white;
background-color: white;
}
.btn-default:focus, .btn-default.focus {
color: #222222;
border-color: #bfbfbf;
background-color: #e6e6e6;
}
.btn-default:hover {
color: #222222;
border-color: #e0e0e0;
background-color: #e6e6e6;
}
.btn-default:active, .btn-default.active,
.open > .btn-default.dropdown-toggle {
color: #222222;
border-color: #e0e0e0;
background-color: #e6e6e6;
}
.btn-default:active:hover, .btn-default:active:focus, .btn-default:active.focus, .btn-default.active:hover, .btn-default.active:focus, .btn-default.active.focus,
.open > .btn-default.dropdown-toggle:hover,
.open > .btn-default.dropdown-toggle:focus,
.open > .btn-default.dropdown-toggle.focus {
color: #222222;
border-color: #bfbfbf;
background-color: #d4d4d4;
}
.btn-default:active, .btn-default.active,
.open > .btn-default.dropdown-toggle {
background-image: none;
}
.btn-default.disabled:hover, .btn-default.disabled:focus, .btn-default.disabled.focus, .btn-default[disabled]:hover, .btn-default[disabled]:focus, .btn-default[disabled].focus,
fieldset[disabled] .btn-default:hover,
fieldset[disabled] .btn-default:focus,
fieldset[disabled] .btn-default.focus {
border-color: white;
background-color: white;
}
.btn-default .badge {
color: white;
background-color: #222222;
}
.btn-primary {
color: white;
border-color: #CED7CC;
background-color: #CED7CC;
}
.btn-primary:focus, .btn-primary.focus {
color: white;
border-color: #a4270d;
background-color: #eb3812;
}
.btn-primary:hover {
color: white;
border-color: #e13612;
background-color: #eb3812;
}
.btn-primary:active, .btn-primary.active,
.open > .btn-primary.dropdown-toggle {
color: white;
border-color: #e13612;
background-color: #eb3812;
}
.btn-primary:active:hover, .btn-primary:active:focus, .btn-primary:active.focus, .btn-primary.active:hover, .btn-primary.active:focus, .btn-primary.active.focus,
.open > .btn-primary.dropdown-toggle:hover,
.open > .btn-primary.dropdown-toggle:focus,
.open > .btn-primary.dropdown-toggle.focus {
color: white;
border-color: #a4270d;
background-color: #c93110;
}
.btn-primary:active, .btn-primary.active,
.open > .btn-primary.dropdown-toggle {
background-image: none;
}
.btn-primary.disabled:hover, .btn-primary.disabled:focus, .btn-primary.disabled.focus, .btn-primary[disabled]:hover, .btn-primary[disabled]:focus, .btn-primary[disabled].focus,
fieldset[disabled] .btn-primary:hover,
fieldset[disabled] .btn-primary:focus,
fieldset[disabled] .btn-primary.focus {
border-color: #CED7CC;
background-color: #CED7CC;
}
.btn-primary .badge {
color: #CED7CC;
background-color: white;
}
.btn {
font-weight: 700;
text-transform: uppercase;
border: none;
border-radius: 300px;
font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif; }
.btn-xl {
padding: 15px 30px;
}
/* home page */
/* hrs */
/* thick white hr */
.white-hr {
margin:40px auto 30px;
padding:0;
border:0;
border-top:solid 3px;
text-align:center;
color:#fff;
max-width:500px;
}
/* thin white hr */
.thin-white-hr {
margin:40px auto 30px;
padding:0;
border:0;
border-top:solid 1px;
text-align:center;
color:#fff;
max-width:700px;
}
/* hr with brackets */
.div1 .div2 {
background:transparent;
color:#fff;text-align:right;
padding:70px 10% 50px;
-webkit-box-align:end;
-webkit-align-items:flex-end;
-ms-flex-align:end;
-ms-grid-row-align:flex-end;
align-items:flex-end;
-webkit-align-content:space-around;
-ms-flex-line-pack:distribute;
align-content:space-around;
}
.div1 .div2 .intro-text {
max-width:675px;
text-align:center;
margin-bottom:30px;
}
hr.bracket-hr, bracket-hr-2 {
margin:40px auto 30px;
padding:0;
max-width:512px;
border:0;
border-top:solid 3px;
text-align:center;
}
hr.bracket-hr:after, bracket-hr-2:after {
content:'\f121';
font-family:FontAwesome;
display:inline-block;
position:relative;
top:-24px;
padding:0 4px;
font-size:32px;
}
hr.bracket-hr {
border-color:#fff;
}
hr.bracket-hr:after {
color:#fff;
background-color:#CED7CC;
}
/*end hr */
.contact-fa {
color: #CED7CC;
}
//hello world
$(function() {
$(".typedelem").typed({
strings: [" Hello, world!"],
typeSpeed: 15
});
});
$(document).ready(function() {
if (window.innerWidth < 767) {
$("nav").removeClass("navbar-transparent");
}
});
$(window).scroll(function() {
if (window.innerWidth > 767) {
if ($(window).scrollTop() > 60) {
$("nav").removeClass("navbar-transparent");
} else {
$("nav").addClass("navbar-transparent");
}
}
});
$(window).resize(function() {
if (window.innerWidth < 767) {
$("nav").removeClass("navbar-transparent");
} else {
if ($(window).scrollTop() < 60) {
$("nav").addClass("navbar-transparent");
}
}
});
// /hello world
(function($) {
"use strict"; // Start of use strict
// Smooth scrolling using jQuery easing
$('a[href*="#"]:not([href="#"])').click(function() {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('html, body').animate({
scrollTop: (target.offset().top - 48)
}, 1000, "easeInOutExpo");
return false;
}
}
});
// Activate scrollspy to add active class to navbar items on scroll
$('body').scrollspy({
target: '#mainNav',
offset: 48
});
// Closes responsive menu when a link is clicked
$('.navbar-collapse>ul>li>a').click(function() {
$('.navbar-collapse').collapse('hide');
});
// Collapse the navbar when page is scrolled
$(window).scroll(function() {
if ($("#mainNav").offset().top > 100) {
$("#mainNav").addClass("navbar-shrink");
} else {
$("#mainNav").removeClass("navbar-shrink");
}
});
// Scroll reveal calls
window.sr = ScrollReveal();
sr.reveal('.sr-icons', {
duration: 600,
scale: 0.3,
distance: '0px'
}, 200);
sr.reveal('.sr-button', {
duration: 1000,
delay: 200
});
sr.reveal('.sr-contact', {
duration: 600,
scale: 0.3,
distance: '0px'
}, 300);
// Magnific popup calls
$('.popup-gallery').magnificPopup({
delegate: 'a',
type: 'image',
tLoading: 'Loading image #%curr%...',
mainClass: 'mfp-img-mobile',
gallery: {
enabled: true,
navigateByImgClick: true,
preload: [0, 1]
},
image: {
tError: '<a href="%url%">The image #%curr%</a> could not be loaded.'
}
});
})(jQuery); // End of use strict
/* hello world */
$(function() {
$(".typedelem").typed({
strings: [" Hello, world!"],
typeSpeed: 15
});
});
$(document).ready(function() {
if (window.innerWidth < 767) {
$("nav").removeClass("navbar-transparent");
}
});
$(window).scroll(function() {
if (window.innerWidth > 767) {
if ($(window).scrollTop() > 60) {
$("nav").removeClass("navbar-transparent");
} else {
$("nav").addClass("navbar-transparent");
}
}
});
$(window).resize(function() {
if (window.innerWidth < 767) {
$("nav").removeClass("navbar-transparent");
} else {
if ($(window).scrollTop() < 60) {
$("nav").addClass("navbar-transparent");
}
}
});
