Skip to content

Commit 0eeb744

Browse files
author
Mike Wales
committed
Initial project commit.
1 parent 4ae9740 commit 0eeb744

File tree

8 files changed

+9433
-2
lines changed

8 files changed

+9433
-2
lines changed

‎README.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,2 @@
1-
frontend-nanodegree-resume
2-
==========================
1+
udresume
2+
========

‎css/style.css

+219
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,219 @@
1+
*{
2+
padding:0;
3+
margin:0;
4+
font-family: 'Roboto', sans-serif;
5+
}
6+
7+
8+
9+
.education-entry, .work-entry, .project-entry {
10+
padding-left: 5%;
11+
padding-right: 5%;
12+
}
13+
14+
15+
h1 {
16+
17+
font-size: 40px;
18+
color: #F5A623;
19+
line-height: 48px;
20+
display: inline;
21+
}
22+
23+
h2 {
24+
font-style: bold;
25+
font-size: 24px;
26+
color: #999999;
27+
line-height: 29px;
28+
padding: 10px;
29+
}
30+
31+
h3 {
32+
font-style: italic;
33+
font-size: 20px;
34+
color: #000000;
35+
line-height: 22px;
36+
}
37+
38+
h4 {
39+
font-style: bold;
40+
font-size: 14px;
41+
color: #4A4A4A;
42+
line-height: 17px;
43+
}
44+
45+
h2, h3, h4, h5 {
46+
padding:10px;
47+
padding-left: 5%;
48+
padding-right: 5%;
49+
}
50+
51+
52+
.date-text {
53+
font-style: italic;
54+
font-size: 14px;
55+
color: #999999;
56+
line-height: 16px;
57+
float: left;
58+
}
59+
60+
.location-text {
61+
font-style: italic;
62+
font-size: 14px;
63+
color: #999999;
64+
line-height: 16px;
65+
float: right;
66+
67+
}
68+
69+
p {
70+
font-size: 14px;
71+
color: #333333;
72+
line-height: 21px;
73+
}
74+
75+
a {
76+
color: #1199C3;
77+
text-decoration: none;
78+
margin-top: 10px;
79+
display: block;
80+
}
81+
82+
.welcome-message {
83+
font-style: italic;
84+
font-size: 18px;
85+
color: #F3F3F3;
86+
line-height: 28px;
87+
}
88+
89+
#skillsH3 {
90+
color: #F5AE23;
91+
display: none;
92+
}
93+
94+
#skills {
95+
display: none;
96+
}
97+
98+
.orange {
99+
background-color: #F5AE23;
100+
}
101+
102+
.orange-text {
103+
color: #F5AE23;
104+
}
105+
106+
.white-text {
107+
font-weight: bold;
108+
color: #FFFFFF;
109+
}
110+
111+
.gray {
112+
background-color: #F3F3F3;
113+
padding-bottom: 10px;
114+
clear:both;
115+
}
116+
117+
.dark-gray {
118+
background-color: #4A4A4A;
119+
}
120+
121+
/* TODO: Replace with image later */
122+
#header {
123+
background-color: #484848;
124+
}
125+
126+
.flex-box {
127+
display: -webkit-flex;
128+
display: flex;
129+
flex-direction: row;
130+
flex-wrap: wrap;
131+
justify-content: space-around;
132+
padding: 10px;
133+
}
134+
135+
.center-content {
136+
padding: 5%;
137+
}
138+
139+
ul {
140+
list-style-type: none;
141+
}
142+
143+
144+
.biopic {
145+
float: left;
146+
padding: 10px;
147+
width: 200px;
148+
display: none;
149+
}
150+
151+
img {
152+
padding: 10px;
153+
}
154+
155+
156+
/* Bar chart stuff */
157+
.chart div {
158+
font: 10px sans-serif;
159+
background-color: #4A4A4A;
160+
text-align: right;
161+
padding: 3px;
162+
margin: 1px;
163+
height: 12px;
164+
color: white;
165+
display: inline-block;
166+
}
167+
168+
span {
169+
padding: 5px;
170+
}
171+
172+
#letsConnect {
173+
text-align: center;
174+
}
175+
176+
@media only screen and (max-width: 1024px) {
177+
#letsConnect {
178+
margin-top: 5%;
179+
}
180+
}
181+
182+
@media only screen and (max-width:900px) {
183+
.biopic {
184+
width: 175px;
185+
}
186+
}
187+
188+
@media only screen and (max-width: 750px) {
189+
#letsConnect {
190+
margin-top: 10%;
191+
}
192+
.biopic {
193+
width: 150px;
194+
}
195+
.welcome-message {
196+
display: none;
197+
}
198+
}
199+
200+
#map {
201+
display: block;
202+
height: 100%;
203+
margin-left: 5%;
204+
margin-right: 5%;
205+
}
206+
207+
#mapDiv {
208+
height: 400px;
209+
width: 100%;
210+
padding-bottom: 5%;
211+
}
212+
213+
@media only screen and (min-width: 750px) {
214+
#skillsH3,
215+
#skills,
216+
.biopic {
217+
display: block;
218+
}
219+
}

‎images/197x148.gif

645 Bytes
Loading

‎images/fry.jpg

11.4 KB
Loading

‎index.html

+138
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,138 @@
1+
<!DOCTYPE html>
2+
3+
<!--
4+
This is an HTML document. It contains information about how elements in the website
5+
are arranged. In other words, it describes the layout of a website.
6+
7+
I can't wait to see the resumes you put together!
8+
9+
Cameron Pittman, Udacity Course Developer
10+
-->
11+
12+
<!--
13+
The <head> of a website generally links to important resources the page will
14+
need to load. You'll see a lot of <link>s to CSS files for styles and
15+
<scripts> for JavaScript files to build interactions.
16+
-->
17+
<head>
18+
<link href="css/style.css" rel="stylesheet" type="text/css"></link>
19+
20+
<!--
21+
jQuery is a common JavaScript library for reading and making changes to the
22+
Document Object Model (DOM). The DOM is a tree that contains information
23+
about what is actually visible on a website.
24+
25+
While HTML is a static document, the browser converts HTML to the
26+
DOM and the DOM can change. In fact, JavaScript's power comes from
27+
its ability to manipulate the DOM, which is essentially a JavaScript
28+
object. When JavaScript makes something interesting happen on a
29+
website, it's likely the action happened because JavaScript changed
30+
the DOM. jQuery is fast and easy to use, but it doesn't do anything
31+
you can't accomplish with vanilla (regular) JavaScript.
32+
-->
33+
<script src="js/jQuery.js"></script>
34+
35+
<!-- More on helper.js in the class -->
36+
<script src="js/helper.js"></script>
37+
38+
<!--
39+
Uncomment the <script> tag below when you're ready to add an interactive
40+
Google Map to your resume!
41+
-->
42+
<!-- <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places"></script> -->
43+
44+
<meta name="viewport" content="width=device-width">
45+
</head>
46+
<body unresolved>
47+
<div id="main">
48+
Hello world! <!-- You'll be deleting this line in the course -->
49+
50+
<!--
51+
Everything from here to the <script> tag below is the skeleton of your
52+
website. Your code will add information to each of the sections of the
53+
resume below. You can pretty easily figure out what each section will
54+
display by looking at the id or at what's written between the <h2> tags.
55+
-->
56+
<div id="header" class="center-content">
57+
<ul id="topContacts" class='flex-box'></ul>
58+
</div>
59+
<div style='clear: both;'></div>
60+
<div id="workExperience" class='gray'>
61+
<h2>Work Experience</h2>
62+
</div>
63+
<div id="projects">
64+
<h2>Projects</h2>
65+
</div>
66+
<div id="education" class='gray'>
67+
<h2>Education</h2>
68+
</div>
69+
<div id="skillsChart">
70+
<h2>Skills Chart</h2>
71+
</div>
72+
<div id="mapDiv">
73+
<h2>Where I've Lived and Worked</h2>
74+
</div>
75+
<div id="letsConnect" class='dark-gray'>
76+
<h2 class='orange center-text'>Let's Connect</h2>
77+
<ul id="footerContacts" class="flex-box">
78+
</ul>
79+
</div>
80+
</div>
81+
82+
<!--
83+
The next line tells the browser where to download the JavaScript file you'll be
84+
writing. In resumeBuilder.js, you'll be writing code that builds the resume
85+
dynamically when this website, index.html, is opened.
86+
-->
87+
<script src="js/resumeBuilder.js"></script>
88+
89+
90+
<!--
91+
These scripts are written in JavaScript. You'll be breaking them down as part of
92+
a quiz. Essentially, the next few lines are checking to see if you have not
93+
changed each section of the resume. If you have not made any changes to a section
94+
of the resume, then that part of the resume does not show up. More on this in the
95+
course.
96+
-->
97+
98+
<script type="text/javascript">
99+
// Notice how all of a sudden there's JavaScript inside this HTML
100+
// document? You can write JavaScript between <script> tags. At the end of your
101+
// JavaScript, don't forget the closing script tag with the slash (/).
102+
103+
104+
// Also, this is a JavaScript style comment. You can comment in JavaScript with:
105+
106+
// two slashes for all following characters on a single line, or
107+
108+
/*
109+
an opening and closing set of slash asterisks for block comments.
110+
*/
111+
112+
113+
if(document.getElementsByClassName("flex-item").length === 0) {
114+
document.getElementById("topContacts").style.display = "none";
115+
}
116+
if(document.getElementsByTagName("h1").length === 0) {
117+
document.getElementById("header").style.display = "none";
118+
}
119+
if(document.getElementsByClassName("work-entry").length === 0) {
120+
document.getElementById("workExperience").style.display = "none";
121+
}
122+
if(document.getElementsByClassName("project-entry").length === 0) {
123+
document.getElementById("projects").style.display = "none";
124+
}
125+
if(document.getElementsByClassName("education-entry").length === 0) {
126+
document.getElementById("education").style.display = "none";
127+
}
128+
if(document.getElementsByClassName("skills-entry").length === 0) {
129+
document.getElementById("skillsChart").style.display = "none";
130+
}
131+
if(document.getElementsByClassName("flex-item").length === 0) {
132+
document.getElementById("letsConnect").style.display = "none";
133+
}
134+
if(document.getElementById("map") == undefined) {
135+
document.getElementById("mapDiv").style.display = "none";
136+
}
137+
</script>
138+
</body>

0 commit comments

Comments
 (0)