Skip to content

Commit 3f4dfdf

Browse files
TheRealGeekTheRealGeek
committed
v.1.0
Fixed the last bit of info.
1 parent 5db387c commit 3f4dfdf

File tree

4 files changed

+150
-82
lines changed

4 files changed

+150
-82
lines changed

‎.DS_Store

0 Bytes
Binary file not shown.

‎Final_Project/index.html

+27-33
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,13 @@
44
<meta charset="utf-8">
55
<title>Michael Parnell</title>
66
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
7-
<link rel="stylesheet" href="/Users/michaelparnell/Desktop/BethelTech/2 Module - Front End Foundations/Final Project/style.css">
8-
<!-- This stylesheet is the only one that needs the address changed if the file is moved. All others are relative. -->
7+
<link rel="stylesheet" href="/Users/michaelparnell/Documents/BethelTech/Repositories/Module2_final_project/Final_Project/style.css">
8+
<!-- This stylesheet is the only one that needs the address changed if the file is moved. All others are independent. -->
99
<link href = "https://github.com/TheRealGeek?tab=repositories">
1010
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
1111
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
1212
<!-- the above link adds jquery to my code -->
13+
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
1314
</head>
1415

1516
<body>
@@ -18,55 +19,48 @@
1819
<h1 class="myName">Michael Parnell</h1>
1920
<h2 class="myTitle">Full Stack Web Developer</h2>
2021
</div>
21-
2222
<section class="main">
23-
2423
<div class="imageContainer">
25-
<img class = "picOfMe" src="../Final Project/Resources/Profile Picture.jpg" alt="">
24+
<img class = "picOfMe" src="https://scontent-sjc3-1.xx.fbcdn.net/v/t1.0-9/23795156_10212467057049798_3213352818560975808_n.jpg?oh=8e06497e78a1ffcd6f36a4a0c043d3c3&oe=5B0E8A26" alt="Profile.Picture.">
2625
</div>
2726

2827
<div class="linkContainer">
29-
<div class="iconGitHub">
30-
31-
<a href="https://github.com/TheRealGeek" id= "gitHub">
32-
<img class ="icon" src="../Final Project/Resources/glyphicons_free/glyphicons-social/png/glyphicons-social-22-github.png" alt="">
33-
</a>
34-
35-
<a href="https://www.linkedin.com/in/michaelcparnell/" id="linkedIn">
36-
<img class="icon" src="../Final Project/Resources/glyphicons_free/glyphicons-social/png/glyphicons-social-18-linked-in.png" alt="Linked In profile">
37-
</a>
3828

39-
</div>
29+
<a href="https://github.com/TheRealGeek" target="_blank">
30+
<i class='fab fa-github social'></i></a>
31+
<a href="https://www.linkedin.com/in/michaelcparnell/"target="_blank">
32+
<i class="fab fa-linkedin-in social"></i></a>
33+
4034
</div>
4135

4236
<div class="techSkillsContainer">
4337
<ul class="techSkills">
44-
<li>Create a web document from scratch in less than 12 hours</li>
45-
<li>fillertwo</li>
46-
<li>fillerthree</li>
47-
<li>fillerfour</li>
48-
<li>fillerfive</li>
49-
<li>fillersix</li>
38+
<h4>My Tech Skills:</h4>
39+
<li>HTML Proficiency</li>
40+
<li>JavaScript Proficiency</li>
41+
<li>Bootstrap knowledge</li>
42+
<li>FlexBox Proficiency</li>
43+
<li>Masterful Google searching abilities</li>
44+
<li>Persistance</li>
5045
</ul>
5146
</div>
52-
53-
<button></button>
54-
55-
56-
47+
<div class="buttonContainer">
48+
<button class='btn' onclick="loadRepo('https://api.github.com/users/TheRealGeek/repos', loadRepoCallback)">Click for a list of my Repos</button>
49+
</div>
50+
<div class="repoContainer">
51+
<ul id="gitList"></ul>
52+
</div>
5753
</section>
58-
</div>
59-
54+
</div>
6055
<div class="contactContainer">
61-
<footer class=contact>
62-
<div class="email">
63-
[email protected]
64-
</div>
56+
<footer>
57+
<p class=email><i class="far fa-envelope email"></i> [email protected]</p>
6558
</footer>
59+
</div>
6660

6761

6862

69-
<script src="../Final Project/script.js" charset="utf-8"></script>
63+
<script src="/Users/michaelparnell/Documents/BethelTech/Repositories/Module2_final_project/Final_Project/script.js" type="application/javascript" charset="utf-8"></script>
7064
<!-- <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> -->
7165
</body>
7266
</html>

‎Final_Project/script.js

+58-28
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,62 @@
1+
function loadRepo(repo_url, callback) {
2+
const gitHubRequest = new XMLHttpRequest();
3+
gitHubRequest.onreadystatechange = function(){
4+
if(this.readyState == 4 && this.status == 200) {
5+
callback(this);
6+
}
7+
}
8+
gitHubRequest.open('GET', repo_url, true);
9+
gitHubRequest.send();
10+
}
11+
12+
13+
function loadRepoCallback(gitHubRequest) {
14+
let repos = JSON.parse(gitHubRequest.responseText);
15+
// console.log(repos);
16+
let listStarter = document.getElementById('gitList');
17+
listStarter.innerHTML = "";
18+
for(i=0; i<repos.length;i++){
19+
// console.log(repos[i].name);
20+
//console.log(repos[i].html_url);
21+
let listItems = document.createElement('li');
22+
listItems.innerHTML = " <a href= " + repos[i].html_url + "' target =_blank '>" + repos[i].name + "<a>";
23+
listStarter.appendChild(listItems);
24+
} //console.log(document.getElementsByClassName('listItems').innerHTML);
25+
}
26+
27+
// document.ready(loadRepo);
128
// alert("testing");
2-
$(document).ready(function(){
3-
$( "#linkedIn" ).hover(
4-
function()
5-
{
6-
$( this ).css("height","2em");
7-
$( this ).css("width","2em");
8-
}, function()
9-
{
10-
$( this ).css( "height","1em" );
11-
$( this ).css( "width","1em" );
12-
})
13-
});
29+
// $(document).ready(function(){
30+
// $( '#icon' ).hover(
31+
// function(){
32+
// $(this).css('font-size','125%');
33+
// }, function(){
34+
// $(this).css( 'font-size','100%' );
35+
// })
36+
// })
37+
// $(document).ready(function(){
38+
// $('#icon').hover(function(){
39+
// $(this).css('font-size', '125%')
40+
// }, function(){
41+
// $(this).css('font-size', '100%')
42+
// })
43+
// });
1444

15-
$(document).ready(function(){
16-
$( "#gitHub" ).hover(
17-
function() {
18-
$( this ).css("height","2em");
19-
$( this ).css("width","2em");
20-
}, function() {
21-
$( this ).css( "height","1em" );
22-
$( this ).css( "width","1em" );
23-
})
24-
});
45+
// $(document).ready(function(){
46+
// $( "#gitHubIcon" ).hover(
47+
// function() {
48+
// $( this ).css("height","3em");
49+
// $( this ).css("width","3em");
50+
// }, function() {
51+
// $( this ).css( "height","2em" );
52+
// $( this ).css( "width","2em" );
53+
// })
54+
// });
2555

26-
$("#linkedIn").hover(function(){
27-
$(this.linkedIn).onmouseout({
56+
// $("#linkedIn").hover(function(){
57+
// $(this.linkedIn).onmouseout({
2858

29-
height: '+=1em',
30-
width: '+=1em'
31-
});
32-
});
59+
// height: '+=1em',
60+
// width: '+=1em'
61+
// });
62+
// });

‎Final_Project/style.css

+65-21
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,9 @@
33
padding:0;
44
}
55
body{
6-
background-color: lightgrey;
6+
height: auto;
7+
background-color: #cccccc;
8+
background-image: linear-gradient(black,lightblue,white);
79
display: flex;
810
min-height: 100vh;
911
flex-direction: column;
@@ -13,7 +15,7 @@ body{
1315
}
1416

1517
.headerContainer{
16-
background-color: lightblue;
18+
/* background-color: lightblue; */
1719
/* justify: center; */
1820
display: flex;
1921
flex-direction: column;
@@ -22,14 +24,15 @@ body{
2224
.myName,
2325
.myTitle{
2426
/* background-color: yellow; */
27+
color: #cccccc;
2528
display: flex;
2629
justify-content: center;
2730
align-content:stretch;
2831
}
2932

3033
.imageContainer{
3134
width:auto;
32-
margin: 20px;
35+
margin-top: 1.25em;
3336
/* padding: 20px; */
3437
display: flex;
3538
align-items: center;
@@ -38,43 +41,84 @@ body{
3841

3942
}
4043
.picOfMe{
41-
height: 300px;
42-
width: 300px;
44+
height: 20em;
45+
width: 20em;
4346

4447
}
4548
.linkContainer{
49+
height: auto;
50+
width: auto;
4651
display: flex;
52+
justify-content: center;
4753
align-items: center;
48-
flex-flow: column;
4954
}
5055

51-
.icon.gitHub,
52-
.icon.linkedIn{
56+
.social{
57+
color: black;
5358
background-color: inherit;
54-
height: 1em;
55-
width: 1em;
59+
font-size: 2em;
60+
margin:1em 0.25em;
5661
display: flex;
62+
align-self: auto;
5763
}
58-
.icon.gitHub:hover {
59-
height: 2em;
60-
width: 2em;
61-
}
62-
.icon.linkedIn:hover {
63-
height: 2em;
64-
width: 2em;
64+
.social:hover{
65+
font-size: 3em;
66+
margin:0 0.25em;
67+
display:flex;
68+
align-self: auto;
6569
}
6670
.techSkillsContainer{
6771
display: flex;
6872
align-items: center;
6973
flex-flow: column;
7074
}
75+
.buttonContainer{
76+
display: flex;
77+
align-items: center;
78+
flex-flow:column;
79+
}
7180
.contactContainer{
72-
background-color: lightblue;
81+
/* background-color: lightblue; */
82+
margin:2em 0;
7383
position: sticky;
7484
display:flex;
75-
flex-direction: column;
76-
77-
85+
justify-content: center;
86+
align-content: center;
87+
}
88+
.repoContainer{
89+
display: flex;
90+
align-items: center;
91+
flex-flow:column;
92+
margin: 2em;
93+
padding:0;
94+
}
95+
li{
96+
list-style-type:none;
97+
color: black;
98+
99+
}
100+
a{
101+
font-size: 1em;
102+
font-family: 'Montserrat', sans-serif;
103+
font-style: italic
104+
}
105+
.contact{
106+
display:flex;
107+
justify-content: center;
108+
align-content: center;
109+
}
110+
.contactContainer{
111+
position: sticky;
112+
display:flex;
113+
justify-content:center;
114+
}
115+
.email{
116+
color: black;
117+
background-color: inherit;
118+
font-size: 100%
119+
}
120+
.email:hover{
121+
font-size:125%;
78122
}
79123
.footer{
80124
display: flex;

0 commit comments

Comments
 (0)