-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
executable file
·116 lines (104 loc) · 5.53 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta name="author" content="dante,saggin">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<meta name="mobile-web-app-capable" content="yes">
<title>Dante Saggin Resume</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link href="css/style.css" rel="stylesheet">
<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/helper.js"></script>
<script src="js/mapBuilder.js"></script>
<script src="js/personalData.js"></script>
<meta name="viewport" content="width=device-width">
</head>
<body>
<div id="main" class="container">
<div id="header" class="center-content clear-fix row">
<ul id="topContacts" class="flex-box"></ul>
</div>
<div style="clear: both;"></div>
<div id="workExperience" class="gray row">
<h2>Work Experience</h2>
</div>
<div id="projects" class="row">
<h2>Projects</h2>
</div>
<div id="education" class="gray row">
<h2>Education</h2>
</div>
<div id="mapDiv" class="row">
<h2>Where I've Lived and Worked</h2>
</div>
<div id="lets-connect" class="dark-gray row">
<h2 class="orange center-text">Let's Connect</h2>
<ul id="footerContacts" class="flex-box">
</ul>
</div>
</div>
<!-- "HTML is loaded by the browser in the order it appears in the file. If the JavaScript is loaded first and it is supposed to affect the HTML below it, it might not work, as the JavaScript would be loaded before the HTML it is supposed to work on. Therefore, putting JavaScript near the bottom of the HTML page is often the best strategy."
https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/JavaScript_basics -->
<!-- "Javascript assets, by default, tend to block any other parallel downloads from occurring. So, you can imagine if you have plenty of <script> tags in the head, calling on multiple external scripts will block the HTML from loading, thus greeting the user with a blank white screen, because no other content on your page will load until the JS files have completely loaded."
http://stackoverflow.com/questions/4396849/does-the-script-tag-position-in-html-affects-performance-of-the-webpage -->
<!--
jQuery is a common JavaScript library for reading and making changes to the
Document Object Model (DOM). The DOM is a tree that contains information
about what is actually visible on a website.
While HTML is a static document, the browser converts HTML to the
DOM and the DOM can change. In fact, JavaScript's power comes from
its ability to manipulate the DOM, which is essentially a JavaScript
object. When JavaScript makes something interesting happen on a
website, it's likely the action happened because JavaScript changed
the DOM. jQuery is fast and easy to use, but it doesn't do anything
you can't accomplish with vanilla (regular) JavaScript.
-->
<!--
The next line tells the browser where to download the JavaScript file you'll be
writing. In resumeBuilder.js, you'll be writing code that builds the resume
dynamically when this website, index.html, is opened.
-->
<script src="js/resumeBuilder.js"></script>
<!--
These scripts are written in JavaScript. You'll be breaking them down as part of
a quiz. Essentially, the next few lines are checking to see if you have not
changed each section of the resume. If you have not made any changes to a section
of the resume, then that part of the resume does not show up. More on this in the
course.
-->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBZ-kZI0S-CL9_sUVqje5wxtWz4jnbrfis&callback=initMap"></script>
<script >
// Notice how all of a sudden there's JavaScript inside this HTML
// document? You can write JavaScript between <script> tags. At the end of your
// JavaScript, don't forget the closing script tag with the slash (/).
// Also, this is a JavaScript style comment. You can comment in JavaScript with:
// two slashes for all following characters on a single line, or
/*
an opening and closing set of slash asterisks for block comments.
*/
if (document.getElementsByClassName('flex-item').length === 0) {
document.getElementById('topContacts').style.display = 'none';
}
if (document.getElementsByTagName('h1').length === 0) {
document.getElementById('header').style.display = 'none';
}
if (document.getElementsByClassName('work-entry').length === 0) {
document.getElementById('workExperience').style.display = 'none';
}
if (document.getElementsByClassName('project-entry').length === 0) {
document.getElementById('projects').style.display = 'none';
}
if (document.getElementsByClassName('education-entry').length === 0) {
document.getElementById('education').style.display = 'none';
}
if (document.getElementsByClassName('flex-item').length === 0) {
document.getElementById('lets-connect').style.display = 'none';
}
if (document.getElementById('map') === null) {
document.getElementById('mapDiv').style.display = 'none';
}
</script>
</body>
</html>