Skip to content

Commit 8c1caa6

Browse files
billdevcodebilldevcode
committed
Add box around project links and improve UI
1 parent 2639ffd commit 8c1caa6

File tree

3 files changed

+73
-58
lines changed

3 files changed

+73
-58
lines changed

‎index.html‎

Lines changed: 9 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
<body>
1919

2020
<nav id="navbar" class="nav navbar-inverse navbar-fixed-top">
21-
<div class="container">
21+
<div class="container-fluid">
2222
<div class="navbar-header">
2323
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
2424
</button>
@@ -44,72 +44,56 @@ <h1>Web Development Portfolio</h1>
4444
<div class="container-fluid zip-quote">
4545
<div class="box textbox-quote">
4646
<h2>Random Quote Machine</h2>
47-
<p>
48-
<a href="https://github.com/billdevcode/billdevcode.github.io/tree/master/projects/random-quotes" target="_blank" class="buttons" role="button">Learn More ></a>
49-
</p>
47+
<a href="https://github.com/billdevcode/billdevcode.github.io/tree/master/projects/random-quotes" target="_blank" class="buttons" role="button">Learn More <i class="fa fa-chevron-right" aria-hidden="true"></i></a>
5048
</div>
5149
</div>
5250

5351
<div class="container-fluid zip-calculator">
5452
<div class="box textbox-calculator">
5553
<h2>JavaScript Calculator</h2>
56-
<p>
57-
<a href="https://github.com/billdevcode/billdevcode.github.io/tree/master/projects/javascript-calculator" target="_blank" class="buttons" role="button">Learn More ></a>
58-
</p>
54+
<a href="https://github.com/billdevcode/billdevcode.github.io/tree/master/projects/javascript-calculator" target="_blank" class="buttons" role="button">Learn More <i class="fa fa-chevron-right" aria-hidden="true"></i></a>
5955
</div>
6056
</div>
6157

6258
<div class="container-fluid zip-clock">
6359
<div class="box textbox-clock">
6460
<h2>Pomodoro Clock</h2>
65-
<p>
66-
<a href="https://github.com/billdevcode/billdevcode.github.io/tree/master/projects/pomodoro-clock" target="_blank" class="buttons" role="button">Learn More ></a>
67-
</p>
61+
<a href="https://github.com/billdevcode/billdevcode.github.io/tree/master/projects/pomodoro-clock" target="_blank" class="buttons" role="button">Learn More <i class="fa fa-chevron-right" aria-hidden="true"></i></a>
6862
</div>
6963
</div>
7064

7165
<div class="container-fluid zip-twitch">
7266
<div class="box textbox-twitch">
7367
<h2>Twitch.tv JSON API</h2>
74-
<p>
75-
<a href="https://github.com/billdevcode/billdevcode.github.io/tree/master/projects/twitchTV" target="_blank" class="buttons" role="button">Learn More ></a>
76-
</p>
68+
<a href="https://github.com/billdevcode/billdevcode.github.io/tree/master/projects/twitchTV" target="_blank" class="buttons" role="button">Learn More <i class="fa fa-chevron-right" aria-hidden="true"></i></a>
7769
</div>
7870
</div>
7971

8072
<div class="container-fluid react-fcc-leaderboard">
8173
<div class="box textbox-fcc-leaderboard">
8274
<h2>Camper Leaderboard</h2>
83-
<p>
84-
<a href="https://github.com/billdevcode/billdevcode.github.io/tree/master/projects/fcc-leaderboard" target="_blank" class="buttons" role="button">Learn More ></a>
85-
</p>
75+
<a href="https://github.com/billdevcode/billdevcode.github.io/tree/master/projects/fcc-leaderboard" target="_blank" class="buttons" role="button">Learn More <i class="fa fa-chevron-right" aria-hidden="true"></i></a>
8676
</div>
8777
</div>
8878

8979
<div class="container-fluid zip-wiki">
9080
<div class="box textbox-wiki">
9181
<h2>Wikipedia Viewer</h2>
92-
<p>
93-
<a href="https://github.com/billdevcode/billdevcode.github.io/tree/master/projects/wikipedia-viewer" target="_blank" class="buttons" role="button">Learn More ></a>
94-
</p>
82+
<a href="https://github.com/billdevcode/billdevcode.github.io/tree/master/projects/wikipedia-viewer" target="_blank" class="buttons" role="button">Learn More <i class="fa fa-chevron-right" aria-hidden="true"></i></a>
9583
</div>
9684
</div>
9785

9886
<div class="container-fluid zip-tic-tac-toe">
9987
<div class="box textbox-tic-tac-toe">
10088
<h2>Tic-Tac-Toe Game</h2>
101-
<p>
102-
<a href="https://github.com/billdevcode/billdevcode.github.io/tree/master/projects/tic-tac-toe" target="_blank" class="buttons" role="button">Learn More ></a>
103-
</p>
89+
<a href="https://github.com/billdevcode/billdevcode.github.io/tree/master/projects/tic-tac-toe" target="_blank" class="buttons" role="button">Learn More <i class="fa fa-chevron-right" aria-hidden="true"></i></a>
10490
</div>
10591
</div>
10692

10793
<div class="container-fluid zip-simon">
10894
<div class="box textbox-simon">
10995
<h2>Simon Game</h2>
110-
<p>
111-
<a href="https://github.com/billdevcode/billdevcode.github.io/tree/master/projects/simon-game" target="_blank" class="buttons" role="button">Learn More ></a>
112-
</p>
96+
<a href="https://github.com/billdevcode/billdevcode.github.io/tree/master/projects/simon-game" target="_blank" class="buttons" role="button">Learn More <i class="fa fa-chevron-right" aria-hidden="true"></i></a>
11397
</div>
11498
</div>
11599
</div>

‎src/index.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,10 @@ $(document).ready(function() {
55
var scrollPosition = $(window).height() + $(window).scrollTop();
66
var checkPosition = false;
77

8-
if (scrollPosition >= 1520 && !checkPosition) {
9-
$("#navbar").css("background-color", "#222");
8+
if (scrollPosition >= 1000 && !checkPosition) {
9+
$("#navbar").css("background", "#222");
1010
checkPosition = true;
11-
} else if (scrollPosition < 1520) {
11+
} else if (scrollPosition < 1000) {
1212
$("#navbar").css("background-color", "transparent");
1313
checkPosition = false;
1414
}

‎stylesheets/stylesheet.css‎

Lines changed: 61 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -21,8 +21,16 @@ html, body {
2121
transition: all 0.8s ease;
2222
}
2323

24+
.navbar-right a {
25+
font-size: 1.8em;
26+
}
27+
28+
.navbar-right a:hover {
29+
text-decoration: none;
30+
}
31+
2432
.home {
25-
height: 650px;
33+
height: 70vh;
2634
background-image: url('../imgs/bg1.jpg');
2735
background-size: cover;
2836
}
@@ -35,7 +43,7 @@ html, body {
3543

3644
.home>.jumbotron {
3745
height: 260px;
38-
background: rgba(0, 0, 0, 0.5);
46+
/*background: rgba(0, 0, 0, 0.5);*/
3947
background: transparent;
4048
text-align: center;
4149
}
@@ -62,76 +70,83 @@ html, body {
6270
outline: none !important;
6371
}
6472

65-
.buttons:hover,
66-
.buttons:active,
67-
.buttons:visited {
68-
color: orange;
73+
.buttons:hover {
74+
color: #FF4500;
6975
}
7076

7177
.zip-quote {
7278
background-image: url('../imgs/random-quotes.png');
7379
background-size: cover;
7480
max-width: 100%;
75-
height: 450px;
81+
height: 50vh;
7682
}
7783

7884
.textbox-quote {
7985
float: left;
80-
margin-top: 300px;
86+
margin-top: 35vh;
87+
background: rgba(0, 0, 0, 0.5);
88+
border-radius: 8px;
89+
padding-left: 10px;
8190
}
8291

8392
.zip-calculator {
8493
background-image: url('../imgs/javascript-calculator.png');
8594
background-size: cover;
8695
max-width: 100%;
87-
height: 450px;
96+
height: 50vh;
8897
}
8998

9099
.textbox-calculator {
91100
float: right;
92-
margin-top: 300px;
93-
color: black;
101+
margin-top: 35vh;
102+
background: rgba(0, 0, 0, 0.5);
103+
border-radius: 8px;
104+
padding-left: 10px;
94105
}
95106

96107
.zip-clock {
97108
background-image: url('../imgs/pomodoro-clock.png');
98109
background-size: cover;
99110
max-width: 100%;
100-
height: 450px;
111+
height: 50vh;
101112
}
102113

103114
.textbox-clock {
104115
float: left;
105-
margin-top: 300px;
116+
margin-top: 35vh;
117+
background: rgba(0, 0, 0, 0.5);
118+
border-radius: 8px;
119+
padding-left: 10px;
106120
}
107121

108122
.zip-twitch {
109123
background-image: url('../imgs/twitchTV.png');
110124
background-size: cover;
111125
max-width: 100%;
112-
height: 450px;
126+
height: 50vh;
113127
}
114128

115129
.textbox-twitch {
116130
float: right;
117-
margin-top: 300px;
131+
margin-top: 35vh;
132+
background: rgba(0, 0, 0, 0.5);
133+
border-radius: 8px;
134+
padding-left: 10px;
118135
}
119136

120137
.react-fcc-leaderboard {
121138
background-image: url('../imgs/fcc-leaderboard.png');
122139
background-size: cover;
123140
max-width: 100%;
124-
height: 450px;
141+
height: 50vh;
125142
}
126143

127144
.textbox-fcc-leaderboard {
128145
float: left;
129-
margin-top: 300px;
130-
background-color: silver;
131-
color: black;
146+
margin-top: 35vh;
147+
background: rgba(0, 0, 0, 0.5);
132148
border-radius: 8px;
133149
padding-left: 10px;
134-
opacity: 0.9;
135150
}
136151

137152
.react-fcc-leaderboard>.textbox-fcc-leaderboard>p>a {
@@ -142,38 +157,45 @@ html, body {
142157
background-image: url('../imgs/wikipedia-viewer.png');
143158
background-size: cover;
144159
max-width: 100%;
145-
height: 450px;
160+
height: 50vh;
146161
}
147162

148163
.textbox-wiki {
149164
float: right;
150-
margin-top: 300px;
151-
margin-right: -100px;
165+
margin-top: 35vh;
166+
background: rgba(0, 0, 0, 0.5);
167+
border-radius: 8px;
168+
padding-left: 10px;
152169
}
153170

154171
.zip-tic-tac-toe {
155172
background-image: url('../imgs/tic-tac-toe.png');
156173
background-size: cover;
157174
max-width: 100%;
158-
height: 450px;
175+
height: 50vh;
159176
}
160177

161178
.textbox-tic-tac-toe {
162179
float: left;
163-
margin-top: 300px;
180+
margin-top: 35vh;
181+
background: rgba(0, 0, 0, 0.5);
182+
border-radius: 8px;
183+
padding-left: 10px;
164184
}
165185

166186
.zip-simon {
167187
background-image: url('../imgs/simon-game.png');
168188
background-size: cover;
169189
max-width: 100%;
170-
height: 450px;
190+
height: 50vh;
171191
}
172192

173193
.textbox-simon {
174194
float: right;
175-
margin-top: 300px;
176-
margin-right: -100px;
195+
margin-top: 35vh;
196+
background: rgba(0, 0, 0, 0.5);
197+
border-radius: 8px;
198+
padding-left: 10px;
177199
}
178200

179201
#contact h3 {
@@ -182,10 +204,19 @@ html, body {
182204

183205
#contact {
184206
text-align: center;
185-
height: 130px;
186-
background-color: black;
207+
height: 15vh;
208+
background-color: #222;
187209
}
188210

189211
#contact a {
190212
margin: 10px;
213+
text-decoration: none;
214+
}
215+
216+
#contact a:hover {
217+
opacity: 0.7;
191218
}
219+
220+
h2 {
221+
font-size: 1.8em;
222+
}

0 commit comments

Comments
 (0)