forked from udacity/frontend-nanodegree-resume
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
executable file
·95 lines (82 loc) · 4.5 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
<!DOCTYPE html>
<html>
<head>
<!-- This tells the browser how to read the document. -->
<meta charset="utf-8">
<!-- Tells the browser what the title of this page should be. -->
<title>Resume</title>
<!-- Load the page styles. -->
<link href="css/style.css" rel="stylesheet">
<!-- open all links in new tabs -->
<base target="_blank">
<script src="https://maps.googleapis.com/maps/api/js?libraries=places&key=AIzaSyAS8ev4BWen-KaQokv5o92IXDrzL5sRYX8"></script>
<!-- Google fonts -->
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700%7CMaven+Pro" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,600,200italic,600italic&subset=latin,vietnamese" rel="stylesheet">
<!-- JQuery -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<!-- The following scripts needed for Skills Bubble Chart animation -->
<script src="bower_components/d3/d3.min.js"></script>
<script src="bower_components/d3-transform/src/d3-transform.js"></script>
<script src="bower_components/cafej/src/ext-array.js"></script>
<script src="bower_components/cafej/src/misc.js"></script>
<script src="bower_components/cafej/src/micro-observer.js"></script>
<script src="bower_components/microplugin/src/microplugin.js"></script>
<script src="bower_components/bubble-chart/src/bubble-chart.js"></script>
<script src="bower_components/bubble-chart/src/plugins/central-click/central-click.js"></script>
<script src="bower_components/bubble-chart/src/plugins/lines/lines.js"></script>
<script src="js/bubbleChart.js"></script>
<meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body>
<div id="main">
<!--
Everything from here to the <script> tag below is the skeleton of your
website. Your code will add information to each of the sections of the
resume below. You can pretty easily figure out what each section will
display by looking at the id or at what's written between the <h2> tags.
-->
<header id="header" class="dark-background center-content clear-fix">
<div class="header-title"></div>
<ul id="topContacts" class="flex-contacts"></ul>
</header>
<section id="workExperience" class="light-background section">
<h2>Work Experience</h2>
</section>
<aside id="bubbleChart" class="light-background">
<h2>Where I got my skills</h2>
</aside>
<section id="projects" class="section">
<h2>Projects</h2>
</section>
<section id="education" class="light-background section">
<h2>Education</h2>
</section>
<section id="mapDiv" class="section">
<h2>Where I've Lived and Worked</h2>
</section>
<footer id="lets-connect" class="dark-background">
<h2 class="lets-connect-title center-text">Let's Connect</h2>
<ul id="footerContacts" class="flex-contacts">
</ul>
</footer>
</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 -->
<!-- More on helper.js in the class -->
<script src="js/helper.js"></script>
<!--
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>
<!--
The following script is used to show sections defined in this page
if they have been populated with data, otherwise they are hidden
-->
<script src="js/showPage.js"></script>
</body>
</html>