Skip to content

Commit fd5dd85

Browse files
jerrycantcodejerrycantcode
authored
Add files via upload
1 parent 099c0ad commit fd5dd85

5 files changed

Lines changed: 175 additions & 88 deletions

File tree

‎index.html‎

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
<head>
44
<title>Jerry Codes Stuff</title>
55
<link rel="stylesheet" type="text/css" href="styles/styles.css">
6+
<link rel="stylesheet" type="text/css" href="styles/snow.css">
67
<meta name="viewport" content="width=device-width, initial-scale=1">
78
<meta name="description" content="Welcome to JerryCodes! I am a frontend web developer, and this is where I infrequently post everything from updates to projects. Have a look around if you like.">
89
<meta name="robots" content="index, follow">
@@ -13,6 +14,8 @@
1314
<script src="https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.11.1/sass.sync.min.js"></script>
1415
<link rel="icon" type="image/png" href="assets/icon.png">
1516
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
17+
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
18+
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
1619
</head>
1720
<body>
1821
<div class="header">
@@ -98,6 +101,7 @@ <h1>Search</h1>
98101
<div id="SearchPosts"></div>
99102
</div>
100103
<div class="container" id="homeBody">
104+
<div class="home-front">
101105
<div class="front">
102106
<div class="front-left">
103107
<img src="assets/cover.jpg">
@@ -107,15 +111,26 @@ <h1>Search</h1>
107111
<p>I'm Jerry, a 15 year old frontend web dev. If you want to learn more about me, you can go to my about page. If you want to check out what I'm doing, you can look at my blog. I post all of my coding projects on the Projects page, if you want to check that out.</p>
108112
</div>
109113
</div>
114+
</div>
115+
<div class="divider"></div>
116+
<div class="userMap">
117+
<h1>The world watches Jerry Code!</h1>
118+
<p>Enjoy this map of global users.</p>
119+
<div id="map"></div>
120+
</div>
110121
</div>
111122

112123
</div>
113124
<div id="overlay">
114125
<div class="loader"></div>
115126
<p>Fetching Content...</p>
116127
</div>
128+
<div id="bg">
129+
<img id="bgimg1" src="">
130+
<img id="bgimg2" src="">
131+
</div>
117132
<script type="text/javascript" src="scripts/script.js"></script>
118133
<script type="text/javascript" src="scripts/analytics.js"></script>
119-
<script type="text/javascript" src="scripts/page.js"></script>
134+
<script type="text/javascript" src="scripts/map.js"></script>
120135
</body>
121136
</html>

‎scripts/analytics.js‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,6 @@ async function getPublicIP() {
1818
try {
1919
const response = await fetch('https://api.ipify.org?format=json');
2020
const data = await response.json();
21-
console.log("IP address: " + data.ip)
2221
ip = data.ip
2322
getGeoLocation(ip);
2423
} catch (error) {
@@ -35,7 +34,7 @@ async function sendAnalytics(p) {
3534
const formData = new FormData();
3635
formData.append("data", JSON.stringify(log));
3736

38-
fetch('https://script.google.com/macros/s/AKfycbyjf6pKC8fpgh_8Ee081286tvSxpSQve2rKgUv4x5GeTTwFuIZQkOSz0eMg6lxE2JU/exec', {
37+
fetch('https://script.google.com/macros/s/AKfycbw4iHog2R5oQndN1qBpjBmXguzunABFGeMoZkFM89FaTABWNX6Gq1J7YktZ6QmXLZpr/exec', {
3938
method: 'POST',
4039
body: formData
4140
})

‎scripts/map.js‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
var pinData = [];
2+
var completedURLS = [];
3+
var places = [];
4+
5+
fetch('https://script.google.com/macros/s/AKfycbw9ztYFLV_Fl8_UAsj2joF26XAQgw5CND4fo2JlKQgbHY7pnAzAeW_J2A3rzwKWiNoG/exec')
6+
.then(res => res.json())
7+
.then(data => {
8+
places = data.columnH;
9+
pinData = data.columnL;
10+
11+
addPins();
12+
})
13+
.catch(error => alert(error))
14+
15+
var southWest = L.latLng(-180, 180); // South-west corner
16+
var northEast = L.latLng(180, -180); // North-east corner
17+
var bounds = L.latLngBounds(southWest, northEast);
18+
19+
var map = L.map('map', {
20+
maxBounds: bounds, // Set the max bounds
21+
maxBoundsViscosity: 1.0, // Optional: makes the bounds more "sticky"
22+
minZoom: 1.09,
23+
}).setView([40,0], 1.1);
24+
25+
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
26+
maxZoom: 19,
27+
attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
28+
}).addTo(map);
29+
30+
function addPins() {
31+
for(i = 0; i < pinData.length; i++) {
32+
if(!completedURLS.includes(pinData[i])) {
33+
completedURLS.push(pinData[i])
34+
35+
let coords = pinData[i].split('=')[1];
36+
let lat = coords.split(',')[0];
37+
let long = coords.split(',')[1];
38+
39+
L.marker([lat, long])
40+
.bindPopup(places[i])
41+
.addTo(map)
42+
}
43+
}
44+
45+
}

‎scripts/script.js‎

Lines changed: 40 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,10 @@ function updateNavbarSize() {
6060

6161
window.addEventListener('scroll', updateNavbarSize);
6262

63+
window.addEventListener('scroll', function() {
64+
document.getElementById("bg").style.scale = 1 + (window.scrollY / 2000)
65+
})
66+
6367
updateNavbarSize();
6468

6569
function nav(id){
@@ -154,12 +158,12 @@ function postPreview(html) {
154158

155159

156160
function initData() {
157-
158-
fetch('https://script.google.com/macros/s/AKfycbwuhE9ocPBrDPqiQ-eBUug3F1GUWxStrr7hawxaV3FBYIvwi7AmeMVnNvvVZELQzfZr/exec')
161+
fetch('https://script.google.com/macros/s/AKfycbwgAhOcLoOm7JnWpUutKZgqdied2S96IE4bbbI2HsXLUFOypi5S36lQ9V_l5rMwYBqh/exec')
159162
.then(res => res.json())
160163
.then(data => {
161164
postData = data.columnA;
162165
projectData = data.columnB;
166+
bgData = data.columnC;
163167

164168
document.getElementById("BlogPosts").innerHTML = ``
165169
for(let i = postData.length - 1; i >= 0; i--) {
@@ -171,6 +175,7 @@ function initData() {
171175
document.getElementById("ProjectPosts").innerHTML += generatePostPreview('projects', JSON.parse(projectData[i]), i)
172176
}
173177

178+
BGINIT();
174179
load();
175180
})
176181
.catch(error => {
@@ -191,6 +196,33 @@ function initData() {
191196
})
192197
}
193198

199+
function BGINIT() {
200+
let rand1 = Math.floor(Math.random() * bgData.length);
201+
let rand2 = Math.floor(Math.random() * bgData.length);
202+
while(rand2 === rand1) {
203+
rand2 = Math.floor(Math.random() * bgData.length);
204+
}
205+
206+
document.getElementById('bgimg1').src = bgData[rand1]
207+
document.getElementById('bgimg2').src = bgData[rand2]
208+
setInterval(changeBG, 10000);
209+
}
210+
211+
function changeBG() {
212+
let rand = Math.floor(Math.random() * bgData.length);
213+
while(rand === document.getElementById('bgimg2').src) {
214+
rand = Math.floor(Math.random() * bgData.length);
215+
}
216+
document.getElementById('bgimg1').style.transition = '1s'
217+
document.getElementById('bgimg1').style.opacity = '0'
218+
setTimeout(function(){
219+
document.getElementById('bgimg1').src = document.getElementById('bgimg2').src;
220+
document.getElementById('bgimg2').src = bgData[Math.floor(Math.random() * bgData.length)]
221+
document.getElementById('bgimg1').style.transition = '0s'
222+
document.getElementById('bgimg1').style.opacity = '1'
223+
}, 500)
224+
}
225+
194226
function search(input){
195227
let output = document.getElementById("SearchPosts");
196228
output.innerHTML = ``
@@ -227,75 +259,6 @@ function generatePostPreview(type, data, i) {
227259
<p>Posted on ${data.date}</p><p>${countWords(data.body)} words</p></div><div class="postPreviewParagraph">${postPreview(data.body)}...</div></div>`
228260
}
229261

230-
function LoadVFX() {
231-
const scss_to_compile = `
232-
#snow {
233-
position: fixed;
234-
bottom: 0;
235-
overflow: hidden;
236-
height: 100vh;
237-
width: 99vw;
238-
}
239-
240-
@function random_range($min, $max) {
241-
$rand: random();
242-
$random_range: $min + floor($rand * (($max - $min) + 1));
243-
@return $random_range;
244-
}
245-
246-
.snow {
247-
$total: 1000;
248-
position: absolute;
249-
width: 10px;
250-
height: 10px;
251-
background: white;
252-
border-radius: 50%;
253-
254-
@for $i from 1 through $total {
255-
$random-x: random_range(0, 100vw);
256-
$random-offset: random_range(-10, 10);
257-
$random-x-end: $random-x + $random-offset;
258-
$random-x-end-yoyo: $random-x + ($random-offset / 2);
259-
$random-yoyo-time: random_range(30, 80) / 95;
260-
$random-yoyo-y: $random-yoyo-time * 100vh;
261-
$random-scale: random(10000) * 0.0001;
262-
$fall-duration: random_range(10, 30) * 1s;
263-
$fall-delay: random(30) * -1s;
264-
265-
&:nth-child(#{$i}) {
266-
opacity: random(10000) * 0.0001;
267-
transform: translate($random-x, -10px) scale($random-scale);
268-
animation: fall-#{$i} $fall-duration $fall-delay linear infinite;
269-
}
270-
271-
@keyframes fall-#{$i} {
272-
#{percentage($random-yoyo-time)} {
273-
transform: translate($random-x-end, $random-yoyo-y) scale($random-scale);
274-
}
275-
276-
to {
277-
transform: translate($random-x-end-yoyo, 100vh) scale($random-scale);
278-
}
279-
}
280-
}
281-
}
282-
283-
284-
`;
285-
286-
Sass.compile(scss_to_compile, (result) => {
287-
var s = document.createElement("style");
288-
s.innerHTML = result.text;
289-
document.body.append(s);
290-
});
291-
292-
293-
for (let i = 0; i < 200; i++) {
294-
document.getElementById("snow").innerHTML += `<div class="snow"></div>`
295-
}
296-
297-
}
298-
299262
function getURLParameters() {
300263
let currentUrl = window.location.href;
301264

@@ -348,14 +311,15 @@ function load() {
348311
} else {
349312
nav('home');
350313
}
351-
document.getElementById("overlay").style.display = `none`
352314

353-
LoadVFX()
315+
setTimeout(function(){
316+
window.dispatchEvent(new Event('resize'));
317+
},100);
318+
319+
document.getElementById("overlay").style.display = `none`
354320
};
355321

356-
window.onload = function(){
357-
initData();
358-
}
322+
initData();
359323

360324
document.getElementById("overlay").style.display = `flex`
361325
document.getElementById("BlogPosts").innerHTML = `<h2>Loading Posts...</h2>`

0 commit comments

Comments
 (0)