Created
November 24, 2018 20:47
-
-
Save Spesm/9a5ea1e14f710b9d2005b7841874ef5c to your computer and use it in GitHub Desktop.
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
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs'); | |
// Google Map | |
function initMap() { | |
var myLatLng = {lat: 52.4483653, lng: 4.8176345}; | |
var map = new google.maps.Map(document.getElementById('map'), { | |
center: myLatLng, | |
zoom: 14 | |
}); | |
var marker = new google.maps.Marker({ | |
position: myLatLng, | |
map: map, | |
title: 'Here my house lives!' | |
}); | |
} | |
// Works array | |
var works = [ | |
{ | |
title: "Rubik's Website", | |
pic: "img/work1.jpg", | |
url: "#", | |
info: "A website for my roommate, Rubik. This was my very first attempt at making a web page, simply built with plain html and CSS." | |
}, | |
{ | |
title: "Careerfoundry Dashboard", | |
pic: "img/work2.jpg", | |
url: "https://careerfoundry.com/en/dashboards/main", | |
info: "The dashboard of my course at CareerFoundry. Here I can see my progress, communicate with my mentor, tutor and other students and access the exercises for the online structured course." | |
}, | |
{ | |
title: "Previous Portfolio Version", | |
pic: "img/work9.jpg", | |
url: "portfolio1.html", | |
info: "This was the portfolio site as I submitted it at the end of the first achievement. In general it doesn't look very different, but in terms of functionality the current version definitely has a few significant upgrades." | |
}, | |
{ | |
title: "Alternative Portfolio", | |
pic: "img/work10.jpg", | |
url: "portfolio3.html", | |
info: "For the second achievement of the course I've mainly been working in a site consisting of sections drafted up independently. As I grew attached to some of the design features (don't ask why), I made it more coherent and have it here on display." | |
}, | |
{ | |
title: "My Code In Atom", | |
pic: "img/work5.jpg", | |
url: "#", | |
info: "Here's some code as I've been writing it in Atom. Basically what half of my days may look like for the rest of my life :)" | |
}, | |
{ | |
title: "Cute Calculator", | |
pic: "img/work6.jpg", | |
url: "calculator.html", | |
info: "A calculator I designed as a bonus task for the first achievement of the Web Development course. The bonus task of the second achievement will be to also make it interactive and functional through JavaScript." | |
}, | |
{ | |
title: "Alternative Portfolio On Mobile", | |
pic: "img/work7.jpg", | |
url: "portfolio2.html", | |
info: "An earlier version of my portfolio website as seen in Chrome through a mobile viewport. Responsive design has been central to the portfolio project." | |
}, | |
{ | |
title: "Network From Cultural Domain Analysis", | |
pic: "img/work8.jpg", | |
url: "#", | |
info: "This network of musical artists results from research I conducted for my thesis in Cultural Sociology. I applied a technique called Multidimensional Scaling to map artist on the diagram according to how my respondents felt they compare to each other." | |
} | |
]; | |
$(document).ready(function(){ | |
for (var i = 0; i < works.length; ++i){ | |
$("#selected-work").prepend("\ | |
<div class = 'work-item'>\ | |
<a class = 'work-sample' href = '" + works[i].url + "'>\ | |
<div class = 'work-anchor'>\ | |
<img class = 'work-picture' src = '" + works[i].pic + "'>\ | |
<h4 class = 'work-title'>" + works[i].title + "</h4>\ | |
</div>\ | |
</a>\ | |
<div class = 'work-info'>\ | |
<p class = 'desciption'>" + works[i].info + "</p>\ | |
</div>\ | |
<a class = 'btn btn-dark btn-sm work-button' href = '" + works[i].url + "' data-placement = 'right' title = 'Check it out!' role = 'button'>View Doc »</a>\ | |
</div>\ | |
"); | |
}; | |
$(".owl-carousel").owlCarousel({ | |
margin: 30, | |
loop: true, | |
autoplay: true, | |
autoplayHoverPause: true, | |
dotsEach: true, | |
responsiveClass: true, | |
responsive: { | |
0: { | |
items: 1 | |
}, | |
600: { | |
items: 2 | |
}, | |
1200: { | |
items: 3 | |
} | |
} | |
}); | |
$(".work-sample").mouseenter (function(){ | |
$(".work-title", this).show(); | |
}).mouseleave (function(){ | |
$(".work-title", this).hide(); | |
}) | |
}); | |
// Smooth scrolling | |
$(document).ready(function(){ | |
var $root = $('html, body'); | |
$('#navbar-example a').click(function() { | |
var href = $.attr(this, 'href'); | |
if (href != undefined && href != '#') { | |
$root.animate({ | |
scrollTop: $(href).offset().top | |
}, 500, function () { | |
window.location.hash = href; | |
}); | |
} | |
return false; | |
}); | |
$(function () { | |
$('#CareerFoundry').tooltip(); | |
$('#PatternLibrary').tooltip(); | |
$('#Unsplash').tooltip(); | |
$('[data-toggle="modal"]').tooltip(); | |
$('[data-toggle="tooltip"]').tooltip(); | |
$('.work-button').tooltip(); | |
}); | |
$(function () { | |
$("#button").on("click", function() { | |
var name = $("#name").val(); | |
var email = $("#email").val(); | |
var comment = $(".message-box").val(); | |
if (name === "") { | |
$("#name").css("border", "2px solid red"); | |
console.log ("no name entered") | |
return false; | |
} else if (email === "") { | |
$("#name").css("border", "1px solid black"); | |
$("#email").css("border", "2px solid red"); | |
console.log ("no email entered") | |
return false; | |
} else if (comment === "") { | |
$("#email").css("border", "1px solid black"); | |
$(".message-box").css("border", "2px solid red"); | |
console.log ("no message entered") | |
return false; | |
} else { | |
$("#visible-name").html(name); | |
$("#name").hide(); | |
console.log (name) | |
$("#visible-email").html(email); | |
$("#email").hide(); | |
console.log (email) | |
$("#visible-comment").html(comment); | |
$(".message-box").hide(); | |
console.log ("message received") | |
return false; | |
}; | |
}); | |
}); | |
$(function () { | |
$(".message-box").on("keyup", function() { | |
var charCount = $(".message-box").val().length; | |
$("#char-count").html(charCount); | |
if (charCount > 500) { | |
$("#char-count").css("color", "red"); | |
} else { | |
$("#char-count").css("color", "black"); | |
}; | |
}); | |
}); | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment