-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
163 lines (139 loc) · 9.52 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="apple-touch-icon" sizes="180x180" href="./apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="./favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="./favicon-16x16.png">
<link rel="manifest" href="./site.webmanifest">
<link rel="stylesheet" href="./assets/css/styles.css">
<link rel="stylesheet" href="./assets/css/nav.css">
<script src="https://kit.fontawesome.com/30ce29a000.js" crossorigin="anonymous"></script>
<title>Charles Fisher</title>
</head>
<body>
<!-- Begin Grid -->
<!-- Header -->
<header>
<h1>Charles Fisher</h1>
<p class='tagline'>Full Stack Web Development</p>
<!-- This code is borrowed from: 3 Steps Simple Responsive Hamburger Menu In Pure CSS -->
<!-- by W.S. Toh -->
<!-- https://code-boxx.com/simple-responsive-pure-css-hamburger-menu/ -->
<!-- Navigation -->
<nav id="hamnav">
<!-- THE HAMBURGER -->
<label for="hamburger">☰</label>
<input type="checkbox" id="hamburger"/>
<!-- MENU ITEMS -->
<div id="hamitems">
<a href="/" class='ham-links'>Home</a>
<a href="#aboutMe" class='ham-links'>About</a>
<a href="#portfolio" class='ham-links'>Portfolio</a>
<a href="#skills" class='ham-links'>Skills</a>
<a href="#contact" class='ham-links'>Contact</a>
</div>
</nav>
</header>
<!-- Bio -->
<main id='aboutMe'>
<div class='bio borders'>
<!-- <img src="./assets/images/headshot.png" alt="Charles Fisher"> -->
<h2>About Charles</h2>
<p>I'm a Software Engineer specializing in HTML/CSS, JavaScript, Node.js, and MySQL; I graduated from Northwestern University’s Bootcamp where I earned a Certificate in Full Stack Web Development. I'm able to leverage previous experience as a librarian and philosophy instructor to think logically about structuring code, understand workflow in teams, and to formulate precise questions to secure resources needed to finish projects.</p>
<p>My expertise includes collaborating with clients who have an information need, but are unsure as to how to fulfill said need. I know how to help clients understand what they want, and to deliver that to them. I am passionate about creating web applications that clients can’t resist. I want to help your company create these irresistible apps, and to learn as much as I can to help deliver that vision.</p>
<p>In the past I've taught philosophy and worked in libraries. In the present I practice Tae Kwon Do, and nurture 2 cats and one D&D game.</p>
</div>
</main>
<!-- Project Cards -->
<section class='card-section projects'>
<h2 id='portfolio' class='bold'>Portfolio</h2>
<div class='card-wrapper'>
<section class='borders cards'>
<h3><a href="https://github.com/cdfishe1/nanny-now" aria-label='GitHub' target="_blank" rel="noopener"><i aria-hidden="true" class="fab fa-github fa-2x"></i></a><a href="https://murmuring-stream-65661.herokuapp.com/" target="_blank" rel="noopener">Nanny Now</a></h3>
<p>Nanny Now allows parents who need to find a nanny to connect with people who offer their nanny services. Parents make a profile that describes their needs and search for nannies in their area.</p>
<figure>
<a href="https://murmuring-stream-65661.herokuapp.com/" target="_blank" rel="noopener"><img src="./assets/images/nannynow.png" alt="Demo for Nanny Now App"></a>
</figure>
<p>HTML, CSS, JavaScript, Bootstrap, Node.js, MySQL</p>
</section>
<section class='borders cards'>
<h3><a href="https://github.com/cdfishe1/show-match" aria-label='GitHub' target="_blank" rel="noopener"><i aria-hidden="true" class="fab fa-github fa-2x"></i></a><a href='https://cdfishe1.github.io/show-match/' target="_blank" rel="noopener">Show Match</a></h3>
<p>Show Match lets a user search for movies and tv shows, retrieve a list of results, and click a View Now button to see a YouTube trailer for that show.</p>
<figure>
<a href='https://cdfishe1.github.io/show-match/' target="_blank" rel="noopener"><img src="./assets/images/showmatch.png" alt="Demo for Show Match App"></a>
</figure>
<p>HTML, CSS, JavaScript, Bootstrap TMDB api, YouTube api</p>
</section>
<section class='borders cards'>
<h3><a href="https://github.com/cdfishe1/dollar-sense" aria-label='GitHub' target="_blank" rel="noopener"><i aria-hidden="true" class="fab fa-github fa-2x"></i></a><a href='https://dollar-sense.herokuapp.com/' target="_blank" rel="noopener">dollarSense</a></h3>
<p>dollarSense is a financial literacy app that educates users and practices budgeting.</p>
<figure>
<a href='https://dollar-sense.herokuapp.com/' target="_blank" rel="noopener"><img src="./assets/images/dollarSense.png" alt="Demo for eCommerce App"></a>
</figure>
<p>HTML, CSS, Bootstrap, React.js, MongoDB, Mongoose</p>
</section>
</div>
</section>
<!-- Skill Cards -->
<section class='card-section skills'>
<h2 id='skills' class='bold'>Skills</h2>
<div class='card-wrapper'>
<section class='borders cards skill-cards'>
<h3>Front End</h3>
<ul class="fa-ul">
<li><span class="fa-li"><i class="fas fa-check-square"></i></span>HTML</li>
<li><span class="fa-li"><i class="fas fa-check-square"></i></span>CSS</li>
<li><span class="fa-li"><i class="fas fa-check-square"></i></span>JavaScript</li>
<li><span class="fa-li"><i class="fas fa-check-square"></i></span>React</li>
<li><span class="fa-li"><i class="fas fa-check-square"></i></span>Bootstrap</li>
<li><span class="fa-li"><i class="fas fa-check-square"></i></span>Flex Box and Grid</li>
<li><span class="fa-li"><i class="fas fa-check-square"></i></span>Responsive Design</li>
</ul>
</section>
<section class='borders cards skill-cards'>
<h3>Back End</h3>
<ul class="fa-ul">
<li><span class="fa-li"><i class="fas fa-check-square"></i></span>NodeJs</li>
<li><span class="fa-li"><i class="fas fa-check-square"></i></span>Express</li>
<li><span class="fa-li"><i class="fas fa-check-square"></i></span>MySQL</li>
<li><span class="fa-li"><i class="fas fa-check-square"></i></span>MongoDB</li>
<li><span class="fa-li"><i class="fas fa-check-square"></i></span>ORM</li>
</ul>
</section>
<section class='borders cards skill-cards'>
<h3>Concepts</h3>
<ul class="fa-ul">
<li><span class="fa-li"><i class="fas fa-check-square"></i></span>Agile</li>
<li><span class="fa-li"><i class="fas fa-check-square"></i></span>Object Oriented Programming</li>
<li><span class="fa-li"><i class="fas fa-check-square"></i></span>MVC</li>
<li><span class="fa-li"><i class="fas fa-check-square"></i></span>Unit Testing</li>
<li><span class="fa-li"><i class="fas fa-check-square"></i></span>RESTful</li>
</ul>
</section>
</div>
</section>
<!-- Footer -->
<footer id='contact'>
<!-- Contact -->
<address>
<div>
<h3>Connect with me</h3>
<a href="https://github.com/cdfishe1" aria-label='GitHub' target="_blank" rel="noopener"><i aria-hidden="true" class="fab fa-github fa-2x"></i></a>
<a href="https://www.linkedin.com/in/cdfishe1/" aria-label='LinkedIn' target="_blank" rel="noopener"><i aria-hidden="true" class="fab fa-linkedin fa-2x"></i></a>
</div>
<div>
<h3>Contact me</h3>
<a href="mailto:[email protected]" aria-label='email' rel="noopener"><i aria-hidden="true" class="far fa-envelope fa-2x"></i></a>
<a href="tel:+1-312-339-3108" aria-label='telephone' rel="noopener"><i aria-hidden="true" class="fas fa-phone fa-2x"></i></a>
</div>
<div>
<h3>Resume</h3>
<a href="./assets/files/charles-fisher.pdf" aria-label='pdf of resume' target="_blank" rel="noopener"><i aria-hidden="true" class="far fa-file-pdf fa-2x"></i></a>
</div>
</address>
</footer>
</body>
</html>