-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
232 lines (203 loc) · 10 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
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>CMF Portfolio</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.tailwindcss.com"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=EB+Garamond&display=swap" rel="stylesheet">
<link rel="stylesheet" href="assets/style.css">
<link rel="icon" href="images/c.png">
</head>
<!-- Body of page -->
<body class="bg-gradient-to-b from-[#c4cdc1] to-[#b4d4a9]">
<!-- Header bar -->
<header class="bg-gradient-to-b from-[#99aead] to-[#78b1ae]/70">
<!--Page title-->
<h1 class="text-5xl underline decoration-double text-center pt-5">
Courtney M Foster
</h1>
<div>
<!-- Header grid layout -->
<div class="grid grid-cols-1 lg:grid-cols-3 h-1/3 py-20">
<!-- Grid section 1 (bio)-->
<article class="my-20 lg:my-0 flex justify-center items-center bg-[#2f575d]/50 rounded-full px-20 ml-20">
<div class="text-center text-slate-200 text-xl">
UCB Full Stack Coding bootcamp student with a background in biology and medicine. <br><br> 2018
Sonoma State University graduate with Bachelor of Science in Biology (Physiology)
</div>
</article>
<!--Grid section 2 (photo)-->
<div class="flex justify-center items-center">
<img src="images/self.png" class="max-w-md max-h-md px-20 self-center">
</div>
<!--Grid section 3 (reswume)-->
<div class="my-20 lg:my-0 flex justify-center items-center bg-[#2f575d]/50 rounded-full px-20 mr-20">
<div class="align-middle">
<div class="text-4xl text-slate-200 text-center underline">Resume</div>
<br>
<a href="documents/Resume.pdf.zip" target="blank" download>
<img src="images/cv.png" class="hover:scale-125 invert-[.90] h-40 w-40">
</a>
</div>
</div>
</div>
</header>
<br>
<br>
<br>
<!--Main section of page-->
<main class="border-t-2 border-[#5a5050] relative">
<!--Projects section divider and title-->
<article class="grid place-items-center pb-5">
<h1 class="text-center text-2xl absolute bg-[#dee1dd] border-2 border-[#2c1d1d] text-black -top-5 w-24 rounded-md">
Projects
</h1>
</article>
<br>
<br>
<!-- Projects grid layout-->
<section class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-20 px-20 pt-5">
<!--Project 1 - Weather Dashboard-->
<article class="container bg-[#7a6b6b] hover:ring-4 ring-sky-800 rounded-md shadow-md relative">
<!--GitHub Icon linked to repository-->
<button type="button" class="hover:scale-125 border border-black bg-white p-1 absolute rounded-full -top-6 -left-6 h-12 w-12">
<a href="https://github.com/cfoster121/weather-dashboard" target="blank">
<img src="images/github.png">
</a>
</button>
<!--Image linked to deployed page-->
<button class="w-full h-60 pt-4 pb-8 object-cover">
<a href="https://cfoster121.github.io/weather-dashboard/" target="blank">
<img src="images/weather.png">
</a>
</button>
<!--Title-->
<div
class="text-center absolute bg-[#dee1dd] border-2 border-[#2c1d1d] text-black py-1 px-2 inset-x-10 bottom-4 rounded-md">
Weather Dashboard
</div>
</article>
<!--Project 2 - Quiz-->
<article class="container bg-[#7a6b6b] hover:ring-4 ring-sky-800 rounded-md shadow-md relative">
<!--GitHub Icon linked to repository-->
<button type="button" class="hover:scale-125 border border-black bg-white p-1 absolute rounded-full -top-6 -left-6 h-12 w-12">
<a href="https://github.com/cfoster121/timed-code-quiz" target="blank">
<img src="images/github.png">
</a>
</button>
<!--Image linked to deployed page-->
<button class="w-full h-60 pt-4 pb-8 object-cover">
<a href="https://cfoster121.github.io/timed-code-quiz/" target="blank">
<img src="images/quiz.png">
</a>
</button>
<!--Title-->
<div
class="text-center absolute bg-[#dee1dd] border-2 border-[#2c1d1d] text-black py-1 px-2 inset-x-10 bottom-4 rounded-md">
Timed Quiz
</div>
</article>
<!--Project 3 - Password Generator-->
<article class="bg-[#7a6b6b] hover:ring-4 ring-sky-800 rounded-md shadow-md relative">
<!--GitHub Icon linked to repository-->
<button type="button" class="hover:scale-125 border border-black bg-white p-1 absolute rounded-full -top-6 -left-6 h-12 w-12">
<a href="https://github.com/cfoster121/password-generator" target="blank">
<img src="images/github.png">
</a>
</button>
<!--Image linked to deployed page-->
<button class="w-full h-60 pt-4 pb-8 object-cover">
<a href="https://cfoster121.github.io/password-generator/" target="blank">
<img src="images/pwd.png">
</a>
</button>
<!--Title-->
<div
class="text-center absolute bg-[#dee1dd] border-2 border-[#2c1d1d] text-black py-1 px-2 inset-x-10 bottom-4 rounded-md">
Password Generator
</div>
</article>
<!--Project 4 - Weather Dashboard-->
<article class="bg-[#7a6b6b] hover:ring-4 ring-sky-800 rounded-md shadow-md relative">
<!--GitHub Icon linked to repository-->
<button type="button" class="hover:scale-125 border border-black bg-white p-1 absolute rounded-full -top-6 -left-6 h-12 w-12">
<a href="https://github.com/cfoster121/daily-planner" target="blank">
<img src="images/github.png">
</a>
</button>
<!--Image linked to deployed page-->
<button class="w-full h-60 pt-4 pb-8 object-cover">
<a href="https://cfoster121.github.io/daily-planner/" target="blank">
<img src="images/planner.png">
</a>
</button>
<!--Title-->
<div
class="text-center absolute bg-[#dee1dd] border-2 border-[#2c1d1d] text-black py-1 px-2 inset-x-10 bottom-4 rounded-md">
Daily Planner
</div>
</article>
</section>
<br>
<br>
<br>
<!--Collaborative Projects section divider and title-->
<section class="border-t-2 border-[#5a5050] relative">
<article class="grid place-items-center pb-5">
<h1
class="text-center text-2xl absolute bg-[#dee1dd] border-2 border-[#2c1d1d] text-black -top-5 w-60 rounded-md">
Collaborative Projects
</h1>
</article>
</section>
<!--Collaborative Project 1 - Astronomy Dashboard-->
<article class="flex justify-center py-10">
<div class="bg-[#7a6b6b] hover:ring-4 ring-sky-800 rounded-md shadow-md relative w-2/3 md:w-1/3 lg:w-1/4">
<!--GitHub Icon linked to repository-->
<button type="button" class="hover:scale-125 border border-black bg-white p-1 absolute rounded-full -top-6 -left-6 h-12 w-12">
<a href="https://github.com/cfoster121/astronomy-dashboard" target="blank">
<img src="images/github.png">
</a>
</button>
<!--Image linked to deployed page-->
<button>
<a href="https://dazedchou.github.io/Astronomy-Dashboard/" target="blank">
<img src="images/astronomy.png" class="w-full pt-4 pb-8 object-cover">
</a>
</button>
<!--Title-->
<div
class="text-center absolute bg-[#dee1dd] border-2 border-[#2c1d1d] text-black py-1 px-2 inset-x-10 bottom-4 rounded-md">
Astronomy Dashboard
</div>
</div>
</article>
</main>
<br>
<br>
<!--Footer containing contact info-->
<footer class="border-t-2 border-[#5a5050] relative flex justify-center items-center space-x-5 py-20 font-bold text-lg">
<!--Email-->
<a href="mailto: cfoster649@gmail.com">
<img src="images/email.png" class="hover:scale-125 h-10 w-10">
</a>
<!--GitHub-->
<a href="https://github.com/cfoster121" target="blank">
<img src="images/github.png" class="hover:scale-125 h-10 w-10">
</a>
<!--LinkedIn-->
<a href="https://www.linkedin.com/in/courtney-foster-0b364575/" target="blank">
<img src="images/linkedin.png" class="hover:scale-125 h-10 w-10">
</a>
<!--Phone-->
<a href="tel:41513750605">
<img src="images/phone.png" class="hover:scale-125 h-10 w-10">
</a>
</footer>
<script src="script.js"></script>
</body>
</html>