Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit aa58efd

Browse files
authored
Split JS
1 parent 841010e commit aa58efd

File tree

4 files changed

+216
-212
lines changed

4 files changed

+216
-212
lines changed

‎js/behance.js‎

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
$(document).ready(function() {
2+
3+
function outputProjects(projects) {
4+
5+
projects.forEach(function(i) {
6+
7+
var col = $('<div>').addClass('col col-12 col-sm-6 col-lg-4');
8+
var a = $('<a>').attr('target', '_blank').attr('href', i.url);
9+
10+
var card = $('<div>').addClass('project-card');
11+
card.attr('style', 'background-image: url("' + i.covers.original + '");');
12+
13+
var cover = $('<div>').addClass('cover d-flex').attr('data-aos', 'fade');
14+
var info = $('<div>').addClass('info align-self-end');
15+
16+
var fields = $('<p>').addClass('fields').attr('data-aos', 'fade-down').attr('data-aos-duration', '300');
17+
var title = $('<p>').addClass('title').attr('data-aos', 'fade-down').attr('data-aos-duration', '250');
18+
var button = $('<div>').addClass('btn-outline').attr('data-aos', 'fade').attr('data-aos-duration', '250');
19+
button.attr('style', 'padding: 10px 24px;');
20+
21+
info.append(fields, title, button);
22+
cover.append(info);
23+
24+
card.append(cover);
25+
26+
a.append(card);
27+
col.append(a);
28+
$('section.projects .row').append(col);
29+
30+
card.on('mouseover', function(e) {
31+
e.preventDefault();
32+
cover.attr('style', 'background: linear-gradient(0deg, ' + '#186577 32%' + ', transparent);').attr('data-aos', '');
33+
fields.text('// ' + i.fields.join(', ')).attr('data-aos', '');
34+
title.text(i.name).attr('data-aos', '');
35+
button.addClass('btn-outline').html('View Project').attr('data-aos', '');
36+
button.attr('style', 'padding: 10px 24px;');
37+
});
38+
card.on('mouseout', function() {
39+
cover.attr('style', 'background: transparent;').attr('data-aos', 'fade');
40+
fields.text('').attr('data-aos', 'fade-down').attr('data-aos-duration', '300');
41+
title.text('').attr('data-aos', 'fade-down').attr('data-aos-duration', '250');
42+
button.removeClass('btn-outline').html('').attr('data-aos', 'fade').attr('data-aos-duration', '250');
43+
button.attr('style', 'padding: 10px 24px;');
44+
});
45+
});
46+
};
47+
48+
var projects = [];
49+
50+
var userID = 'larguar';
51+
var apiKey = 'v8SNqxsyD70hgx1EXIQPjmjiQVe9K7HQ';
52+
var queryURL = 'https://api.behance.net/v2/users/' + userID + '/projects?api_key=' + apiKey;
53+
54+
$.ajax({
55+
url: queryURL,
56+
method: "GET",
57+
dataType: 'jsonp'
58+
}).then(function(response) {
59+
60+
// limit number of projects being pulled
61+
for (var i = 0; i < 30; i++) {
62+
projects.push(response.projects[i]);
63+
}
64+
65+
outputProjects(projects);
66+
67+
}).catch(function(error) {
68+
69+
var message404 = $('<div>').addClass('container m-auto');
70+
$('.projects .row').append(message404);
71+
message404.html('<div class="row"><div class="col"><h3>Oops, Behance API isn\'t loading.</h3><p class="lead">Have no fear! You can still view my Portfolio <a href="https://www.behance.net/larguar" target="_blank">here</a>.</p></div></div>');
72+
$('.projects').addClass('error');
73+
74+
});
75+
76+
$('.menu-toggle').on('click', function(event) {
77+
event.preventDefault();
78+
79+
if ($(this).hasClass('closed')) {
80+
81+
$(this).removeClass('closed');
82+
$(this).addClass('open');
83+
$('header').attr('style', 'background: rgba(255,255,255,0.9); z-index: 1;').attr('data-aos', '').attr('data-aos-duration', '50');
84+
$('ul.nav').attr('style', 'opacity: 1;').attr('data-aos', '').attr('data-aos-duration', '1000');
85+
86+
} else {
87+
88+
$(this).removeClass('open');
89+
$(this).addClass('closed');
90+
$('header').attr('style', 'background: rgba(255,255,255,0); z-index: -1;').attr('data-aos', 'fade');
91+
$('ul.nav').attr('style', 'opacity: 0;').attr('data-aos', 'fade').attr('data-aos-duration', '50');
92+
93+
}
94+
});
95+
96+
});

‎js/facts.js‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
$(document).ready(()=> {
2+
3+
let facts = {
4+
0: {
5+
fact: 'I’m not afraid to use open source fonts.',
6+
image: 'https://media.giphy.com/media/5nrWPububC3XRg30ir/giphy.gif'
7+
},
8+
1: {
9+
fact: 'I made an Instagram for my dog and I’m not ashamed => <a href="https://www.instagram.com/rengstagram/" target="_blank">@rengstagram</a>.',
10+
image: 'https://media.giphy.com/media/ZZf4oUBf0bBvNNmaDF/giphy.gif'
11+
},
12+
2: {
13+
fact: 'My favorite color is #222.',
14+
image: 'https://media.giphy.com/media/ToMjGpvx0uOlm6H9RqU/giphy.gif'
15+
},
16+
3: {
17+
fact: 'I’m a Virgo so I like it when things are perfect.',
18+
image: 'https://media.giphy.com/media/AF2BK0kTirsHsbLeqQ/giphy.gif'
19+
},
20+
4: {
21+
fact: 'I’m a Self Preservation Enneagram Type 3.',
22+
image: 'https://media.giphy.com/media/7JTpNYu7oYGX98KJkL/giphy.gif'
23+
},
24+
5: {
25+
fact: 'I definitely prefer Sketch (sorry Adobe).',
26+
image: 'https://media.giphy.com/media/2vrGD7BtskWD8HB5BK/giphy.gif'
27+
},
28+
6: {
29+
fact: 'Google Spreadsheets are my real passion.',
30+
image: 'https://media.giphy.com/media/QnbnVPVWhzbCE/giphy.gif'
31+
},
32+
7: {
33+
fact: 'I drink my coffee black.',
34+
image: 'https://media.giphy.com/media/DQ9bqFm7hBTJS/giphy.gif'
35+
},
36+
8: {
37+
fact: 'I’m vegan for the animals.',
38+
image: 'https://media.giphy.com/media/bympeqWadSL3G/giphy.gif'
39+
},
40+
9: {
41+
fact: 'My favorite weather is warm thunderstorms.',
42+
image: 'https://media.giphy.com/media/2wX1ZDx4ddj4zupWAQ/giphy.gif'
43+
},
44+
10: {
45+
fact: 'If I could have any superpower, I’d slow down time like they do in <a href="https://www.imdb.com/title/tt0157472/" target="_blank">Clockstoppers</a> so I could take more naps/breaks.',
46+
image: 'https://media.giphy.com/media/HwmDZaI4YEeZ2/giphy.gif'
47+
},
48+
11: {
49+
fact: 'I started learning how to code in 7th grade so I could have a cooler Myspace page than all of my friends.',
50+
image: 'https://media.giphy.com/media/LmNwrBhejkK9EFP504/giphy.gif'
51+
},
52+
12: {
53+
fact: 'I find it odd that some people *don’t* treat their dogs like children.',
54+
image: 'https://media.giphy.com/media/2Y7kJKvzLFnNFPqd5u/giphy.gif'
55+
},
56+
13: {
57+
fact: 'I would love to learn sign language one day.',
58+
image: 'https://media.giphy.com/media/xTiTnDQ4eawSG7WB6o/giphy.gif'
59+
},
60+
14: {
61+
fact: 'I’m currently re-watching SVU.',
62+
image: 'https://media.giphy.com/media/3o752fFQRQh0YW4EVi/giphy.gif'
63+
}
64+
};
65+
66+
67+
let i = Math.floor(Math.random() * Object.keys(facts).length);
68+
if (i >= 0) {
69+
let p = $('<p>').addClass('comment').html('// conversation starter: ' + facts[i].fact);
70+
let tooltip = $('<div>').attr('id', 'tooltip');
71+
$('#main .col').append(p.append(tooltip));
72+
p.on('mouseover', () => tooltip.html('<img src="' + facts[i].image + '">'));
73+
p.on('mouseout', () => tooltip.html(''));
74+
}
75+
76+
});

‎js/logo.js‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
// get logo asterisk to spin - convert this to jquery
2+
(function(){
3+
var throttle = function(type, name, obj){
4+
var obj = obj || window;
5+
var running = false;
6+
var func = function(){
7+
if (running){ return; }
8+
running = true;
9+
requestAnimationFrame(function(){
10+
obj.dispatchEvent(new CustomEvent(name));
11+
running = false;
12+
});
13+
};
14+
obj.addEventListener(type, func);
15+
};
16+
throttle("scroll", "optimizedScroll");
17+
})();
18+
window.addEventListener('optimizedScroll', function(){
19+
document.getElementById('asterisk').style.transform = 'rotate(-' + window.pageYOffset + 'deg)';
20+
});

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /