-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
181 lines (169 loc) · 8.38 KB
/
index.html
File metadata and controls
181 lines (169 loc) · 8.38 KB
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
<!DOCTYPE HTML>
<html>
<head>
<title>Old Coder Chick</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes" />
<meta name="description" content="old coder chick blog" />
<meta name="keywords" content="jennifer toops blog" />
<meta name="keywords" content="web developer blog" />
<link rel="stylesheet" href="assets/css/main.css" />
<link rel="shortcut icon" href="http://www.oldcoderchick.com/favicon.ico" />
</head>
<body class="is-preload">
<!-- Header -->
<header id="header" class="alt">
<a class="logo" href="index.html"><span></span></a>
<nav>
<a href="#menu"><span class="label">Menu</span></a>
</nav>
</header>
<!-- Nav -->
<nav id="menu">
<ul class="links">
<li><a href="index.html">Home</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="projects.html">Projects</a></li>
<li><a href="http://jennifertoops.com" target="_blank">Portfolio</a></li>
</ul>
</nav>
<!-- Banner -->
<div id="banner">
<div class="wrapper style1">
<div class="inner">
<img src="https://imgur.com/oAMkEhV.png" width="30%" alt="logo of chick">
<p>Just an old chick learning new tricks</p>
<h1 id="h1-colors">Old Coder Chick</h1>
<ul class="actions special">
<li><a href="/blog.html" class="button large primary scrolly">Old Coder Chick Blog</a></li>
</ul>
</div>
</div>
</div>
<!-- Two -->
<div id="two">
<div class="wrapper special">
<div class="inner">
<header class="heading">
<h2>Anyone Can Code!</h2>
<p>In the movie "Ratatouille," the renowned, fictional chef Auguste Gusteau coined the phrase "Anyone Can Cook." My blog--and existence--is proof that anyone <span id="italic">of any age</span> can code.</p>
<p>I wasn't born with a tablet in hand. I didn't even own a cell phone until I was almost 30. I remember when Nintendo 64 consoles came out. We had an Atari on which I played Frogger. My family's first PC came loaded with DOS and not much else. In spite of this--or maybe because of it?--I am fascinated by what mere pulses of electricity can do on a screen.
</p>
<p>So, here I am! Learning to code and sharing the struggle of what it is like to be a single mom, well past her college years, embarking on the fun (and often frustrating) journey to becoming a software engineer and web developer.</p>
</header>
</div>
</div>
<div class="image major" data-position="center">
<img src="https://imgur.com/YTSjsTD.png" width="100%" alt="photo of two daughters and dog" />
</div>
</div>
</div>
</div>
</div>
<!-- Four -->
<div id="four">
<div class="wrapper style2">
<div class="inner">
<header class="heading">
<h2>Family Time</h2>
<p>This old chick has two baby chicks and a crazy rescue pup! When I'm not coding, 99% of the time I am busy "momming" these awesome girls, reading, cooking up gluten-free, vegan goodies, fixing/renewing used furniture finds (thanks, Craigslist!), gardening, walking/hiking, and helping friends with their real estate questions. Did I mention that I'm also a real estate agent?🏠</p>
</header>
<div class="spotlights">
<div class="spotlight">
<div class="image fit">
<img src="https://imgur.com/KwoXLzn.jpg" alt="Pic of author's cluttered workspace" />
</div>
<div class="content">
<h3>Streaming Is 90% What You <span class="italic">DON'T </span>See</h3>
<p>The professionals make it look so easy. I kind of equate it to home staging: instead of the elegant vase overflowing with flowers next to freshly baked cookies on the counter, the scene is set with an expensive microphone at the forefront and a backdrop of everything personal and relevant to the streamer's particular brand... </p>
<ul class="actions">
<li><a href="/blog.html" class="button">Read More</a></li>
</ul>
</div>
</div>
<div class="spotlight">
<div class="content">
<h3>Setting up my workspace</h3>
<p>It took two years for me to figure out that I needed a desktop with two monitors, a webcam, and speakers. Like other coding newbies, I didn't have a ton of money to spend, so I started my foray into coding by watching YouTube tutorials and coding in Notepad (yes, Notepad, not Notepad++) and in the console of the laptop I had bought when I was married.
</p>
<ul class="actions">
<li><a href="/blog.html" class="button">Read More</a></li>
</ul>
</div>
<div class="image fit">
<img src="https://media.giphy.com/media/unQ3IJU2RG7DO/giphy.gif" width="350px" alt="gif of cat typing furiously on laptop">
</div>
</div>
<div class="spotlight">
<div class="image fit">
<img src="https://imgur.com/OdpjkHu.png" alt="Pic of a web page featuring pikachu, a pokeball, and an input field" />
</div>
<div class="content">
<h3>Projects</h3>
<p>Like most web developers, I'm always looking for something interesting to work on. Most projects are always "in progress"--refactoring, debugging, and updating could go on forever!</p>
<ul class="actions">
<li><a href="/projects.html" class="button">See My Projects</a></li>
</ul>
</div>
</div>
<div class="spotlight">
<div class="image fit alt">
<img src="https://imgur.com/ZeHizel.png" alt="Pic of a web page featuring pikachu, a pokeball, and an input field" />
</div>
<div class="content">
<h3>Portfolio</h3>
<p>Some projects are just exercises or fun diversions. Others are just good enough that I feel that they represent a milestone in my path to becoming a pretty darn good software engineer (lofty goals, I know).</p>
<ul class="actions">
<li><a href="https://jennifertoops.com" class="button">See My Portfolio</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- CTA -->
<div id="cta">
<div class="wrapper style1">
<div class="inner">
<header class="heading small">
<h2>Get Updates!</h2>
<p>In addition to my blog, I also stream on Twitch! Get notifications for new blog posts and upcoming streams.</p>
</header>
<form method="post" action="#" class="combined" data-netlify="true" name="notify">
<input type="email" name="email" id="email" placeholder="Your email address" class="invert" />
<input type="submit" class="special" value="Get Notified" />
</form>
<p style="text-align: center">I value privacy and <b>will not</b> share your information with third parties.</p>
</div>
</div>
</div>
<!-- Footer -->
<div id="footer">
<div class="wrapper">
<div class="inner">
<ul class="icons">
<li><a href="https://twitter.com/jennifertoops" target="_blank" class="icon brands fa-twitter"><span class="label">Twitter</span></a></li>
<!-- <li><a href="#" class="icon brands fa-instagram"><span class="label">Instagram</span></a></li> -->
<li><a href="https://facebook.com/jenntoops" target="_blank" class="icon brands fa-facebook-f"><span class="label">Facebook</span></a></li>
<li><a href="https://pinterest.com/jenntoops" target="_blank" class="icon brands fa-pinterest"><span class="label">Pinterest</span></a></li>
<li><a href="mailto: oldcoderchick@gmail.com" target="_blank" class="icon solid fa-envelope"><span class="label">Email</span></a></li>
<li><a href="https://github.com/JenniferToops" target="_blank" class="icon brands fa-github"><span class="label">GitHub</span></a></li>
<li><a href="https://twitch.tv/oldcoderchick" target="_blank" class="icon brands fa-twitch"><span class="label">GitHub</span></a></li>
</ul>
<div class="copyright">
© 2021 Old Coder Chick. All rights reserved.
</div>
</div>
</div>
</div>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jquery.scrollex.min.js"></script>
<script src="assets/js/jquery.scrolly.min.js"></script>
<script src="assets/js/browser.min.js"></script>
<script src="assets/js/breakpoints.min.js"></script>
<script src="assets/js/util.js"></script>
<script src="assets/js/main.js"></script>
</body>
</html>