-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
148 lines (146 loc) · 15.3 KB
/
index.html
File metadata and controls
148 lines (146 loc) · 15.3 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://use.fontawesome.com/f463dd1603.js"></script>
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<script src="js/app.js" charset="utf-8"></script>
<link href="./images/favicon.ico" rel="icon" type="image/x-icon" />
<link rel="stylesheet" href="css/style.css">
<title>cwithac</title>
</head>
<body>
<section class="container">
<nav>
<div id="name">
<h1 class="logo">CWITHAC</h1>
<!-- <img src="images/headshot.png" class="photo"></img></br> -->
<h1>CATHLEEN WRIGHT</h1>
</div>
<div id="text-bio">
<span class="bio">New York City</span>
<div class="social">
<a href="mailto:cwithac.webdev@gmail.com"><i class="fa fa-envelope-open fa-2x" aria-hidden="true"></i></a>
<a target="_blank" href="https://www.linkedin.com/in/cathleenmwright/"><i class="fa fa-linkedin-square fa-2x" aria-hidden="true"></i></a>
<a target="_blank" href="https://github.com/cwithac"><i class="fa fa-github fa-2x" aria-hidden="true"></i></a>
</div>
</div>
</nav>
<main>
<section class="body-box index-bb">
<div id="professional-launch"></div>
<div id="educational-launch">Educational</div>
</section>
<section id="professional-section">
<main>
<section class="body-box">
<i class="fa fa-reply fa-lg" aria-hidden="true"></i>
<div class="project">
<a target="_blank" href="http://rogers-wordpress.xyz/"><h1 id="rogers-header"> Mister Roger's Neighborhood</h1></a>
<p class="description" id="rogers-description">Fred Roger's Fan Page</br> <img class="preview" src="https://i.imgur.com/ucImSXw.png" alt="mrrogers"> </p>
<p class="tag-box"><span class="tag">Wordpress</span></p>
</div>
</section>
</main>
</section>
<section id="educational-section">
<main>
<section class="body-box">
<i class="fa fa-reply fa-lg" aria-hidden="true"></i>
<p id="education-note">Projects created for educational purposes may contain incomplete or historic code and not be up to production standard. </p>
<div class="project">
<a target="_blank" href="https://hamiltonlyrics.herokuapp.com/"><h1 id="lyrics-header"> Lyrics</h1></a>
<p class="description" id="lyrics-description">Two player trivia game with multiple choice answers. Five level options for number of rounds (P1 and P2 turn per round) including default Level 2. Game database and styling dedicated to Hamilton: An American Musical.</br> <img class="preview" src="https://i.imgur.com/y8Bvtb5.png" alt="lyrics"></p>
<p class="tag-box"><span class="tag"><a target="_blank" href="https://github.com/cwithac/lyrics"><i class="fa fa-github fa-lg" aria-hidden="true"></i></a></span><span class="tag">HTML</span><span class="tag">jQuery</span><span class="tag">JavaScript ES5</span></p>
</div>
<div class="project">
<a target="_blank" href="https://classic-connectfour.herokuapp.com/"><h1 id="connectfour-header"> Connect Four</h1></a>
<p class="description" id="connectfour-description">Two players alternate turns playing a red chip or a black chip by clicking on an empty space. Plays must be made from the bottom of the game board upward, as if chips would fall due to gravity. </br> <img class="preview" src="http://i.imgur.com/owlLJe0.png" alt="connectfour"> </p>
<p class="tag-box"><span class="tag"><a target="_blank" href="https://github.com/cwithac/connectfour"><i class="fa fa-github fa-lg" aria-hidden="true"></i></a></span><span class="tag">HTML</span><span class="tag">jQuery</span><span class="tag">JavaScript ES6</span></p>
</div>
<div class="project">
<a target="_blank" href="https://thelandscaper.herokuapp.com/"><h1 id="landscaper-header"> Landscaper</h1></a>
<p class="description" id="landscaper-description">Single player click game. You are starting a landscaping business - use your tools to earn more money!</br> <img class="preview" src="https://i.imgur.com/CsI9kyt.png" alt="landscaper"></p>
<p class="tag-box"><span class="tag"><a target="_blank" href="https://github.com/cwithac/landscaper"><i class="fa fa-github fa-lg" aria-hidden="true"></i></a></span><span class="tag">HTML</span><span class="tag">jQuery</span><span class="tag">JavaScript ES6</span></p>
</div>
<div class="project">
<a target="_blank" href="https://thedisneyvault.herokuapp.com/"><h1 id="disneyvault-header"> The Disney Vault</h1></a>
<p class="description" id="disneyvault-description">Build and explore the world of Disney's animated films and characters with The Disney Vault. Sessions, REST and CRUD.</br> <img class="preview" src="http://i.imgur.com/WoZrLZI.png" alt="disneyvault"></p>
<p class="tag-box"><span class="tag"><a target="_blank" href="https://github.com/cwithac/thedisneyvault"><i class="fa fa-github fa-lg" aria-hidden="true"></i></a></span><span class="tag">API</span><span class="tag">MongoDB</span><span class="tag">Express/EJS</span><span class="tag">Node.js</span></p>
</div>
<div class="project">
<a target="_blank" href="https://colorthesaurus.herokuapp.com/"><h1 id="colorthes-header"> The Color Thesaurus</h1></a>
<p class="description" id="colorthes-description">Paint a more evocative image in a reader’s mind - describe a character’s hair as the color of rust or carrot-squash, rather than red. Open access to data, REST and CRUD.</br> <img class="preview" src="https://i.imgur.com/K8Xzo9W.png" alt="colorthesaurus"> </p>
<p class="tag-box"><span class="tag"><a target="_blank" href="https://github.com/cwithac/colorful"><i class="fa fa-github fa-lg" aria-hidden="true"></i></a></span><span class="tag">MongoDB</span><span class="tag">Express/EJS</span><span class="tag">Node.js</span></p>
</div>
<div class="project">
<a target="_blank" href="https://infinite-springs-32065.herokuapp.com/"><h1 id="yelpcamp-header"> Yelp Camp</h1></a>
<p class="description" id="yelpcamp-description">User driven campsite review app with comments and ratings. Sessions, REST and CRUD.</br> <img class="preview" src="https://i.imgur.com/RfyWPQf.png" alt="yelpcamp"></p>
<p class="tag-box"><span class="tag"><a target="_blank" href="https://github.com/cwithac/yelp_camp"><i class="fa fa-github fa-lg" aria-hidden="true"></i></a></span><span class="tag">MongoDB</span><span class="tag">Express/EJS</span><span class="tag">Bootstrap</span></p>
</div>
<div class="project">
<a target="_blank" href="https://beerswall99.herokuapp.com/"><h1 id="beerswall-header"> 99 Bottles of Beer</h1></a>
<p class="description" id="beerswall-description">Discover recommendations of beer styles based on your preferences! Use the sliders to set ranges for IBU, ABV and SRM to filter the list, faorite styles to your wall. Sessions, REST and CRUD. </br> <img class="preview" src="http://i.imgur.com/jx84yq7.png" alt="99bottlesofbeer"></p>
<p class="tag-box"><span class="tag"><a target="_blank" href="https://github.com/cwithac/99bottlesofbeer"><i class="fa fa-github fa-lg" aria-hidden="true"></i></a></span><span class="tag">MongoDB</span><span class="tag">Express</span><span class="tag">AngularJS</span><span class="tag">Node.js</span></p>
</div>
<div class="project">
<a target="_blank" href="https://notablenote.herokuapp.com/"><h1 id="notable-header"> Notable</h1></a>
<p class="description" id="notable-description">Virtual cork board for a quick post-it note. Log in to view your private board, create, update and delete old notes. Sessions, REST and CRUD.</br> <img class="preview" src="https://i.imgur.com/lWnHzLV.png" alt="notable"> </p>
<p class="tag-box"><span class="tag"><a target="_blank" href="https://github.com/cwithac/notable"><i class="fa fa-github fa-lg" aria-hidden="true"></i></a></span><span class="tag">MongoDB</span><span class="tag">Express</span><span class="tag">AngularJS</span><span class="tag">Node.js</span></p>
</div>
<div class="project">
<a target="_blank" href="https://find-the-perfect-excuse.herokuapp.com/"><h1 id="perfectexcuse-header"> The Perfect Excuse</h1></a>
<p class="description" id="perfectexcuse-description">Screwed up? We've got you covered. Search through a list of excuses for several occasions and vote the most popular ones to the top. Sessions, REST and CRUD.</br> <img class="preview" src="http://i.imgur.com/BjeP50t.png" alt="perfectexcuse"> </p>
<p class="tag-box"><span class="tag"><a target="_blank" href="https://github.com/cwithac/excuses_app_frontend"><i class="fa fa-github fa-lg" aria-hidden="true"></i></a></span><span class="tag">Ruby on Rails</span><span class="tag">AngularJS</span><span class="tag">PostgreSQL</span></p>
</div>
<div class="project">
<a target="_blank" href="https://creative-juices.herokuapp.com/"><h1 id="creativejuices-header"> Creative Juices</h1></a>
<p class="description" id="creativejuices-description">A little help for a lot a health! Search through the database of juices to fit your personal taste. Filter the options to narrow down the list and explore a database of juicing recipes. Register for an account for full access including management of your personally curated list. Sessions, REST and CRUD.</br> <img class="preview" src="http://i.imgur.com/nQqMTyn.png" alt="creativejuices"> </p>
<p class="tag-box"><span class="tag"><a target="_blank" href="https://github.com/cwithac/creativejuices_app_frontend"><i class="fa fa-github fa-lg" aria-hidden="true"></i></a></span><span class="tag">Ruby on Rails</span><span class="tag">AngularJS</span><span class="tag">PostgreSQL</span></p>
</div>
<div class="project">
<a target="_blank" href="https://game-rgb.herokuapp.com/"><h1 id="rgb-header"> RGB Color Challenge</h1></a>
<p class="description" id="rgb-description">Single player color picker game based on randomized RGB values. Vanilla DOM manipulation.</br> <img class="preview" src="https://i.imgur.com/OiGb8xo.png" alt="rgb"></p>
<p class="tag-box"><span class="tag"><a target="_blank" href="https://github.com/cwithac/vanilla_colors"><i class="fa fa-github fa-lg" aria-hidden="true"></i></a></span><span class="tag">HTML</span><span class="tag">JavaScript ES5/6</span><span class="tag">CSS</span></p>
</div>
<div class="project">
<a target="_blank" href="https://patatap-mini-clone.herokuapp.com/"><h1 id="patatap-header"> Patatap Mini Clone</h1></a>
<p class="description" id="patatap-description">Play sounds upon keypress (letter keys only) with animations, featuring PaperJS and HowlerJS.</br> <img class="preview" src="https://i.imgur.com/n6gJUMl.png" alt="patatap"></p>
<p class="tag-box"><span class="tag"><a target="_blank" href="https://github.com/cwithac/patatap-clone"><i class="fa fa-github fa-lg" aria-hidden="true"></i></a></span><span class="tag">Express</span></p>
</div>
<div class="project">
<a target="_blank" href="https://github.com/cwithac/spotify_clone"><h1 id="slotify-header"> Slotify</h1></a>
<p class="description" id="slotify-description">Spotify Clone: Music player with user profiles and playlist functionality. Live hosting pending. Sessions, REST and CRUD.</br> <img class="preview" src="https://i.imgur.com/8thZHmj.jpg" alt="slotify"></p>
<p class="tag-box"><span class="tag"><a target="_blank" href="https://github.com/cwithac/spotify_clone"><i class="fa fa-github fa-lg" aria-hidden="true"></i></a></span><span class="tag">PHP</span><span class="tag">JavaScript</span><span class="tag">XAMPP</span></p>
</div>
<div class="project">
<a target="_blank" href="https://github.com/cwithac/social_clone"><h1 id="social-header"> Social</h1></a>
<p class="description" id="social-description">Social Media Clone: Write on your newsfeed and interact with friends via public and private messages. Live hosting pending. Sessions, REST and CRUD.</br> <img class="preview" src="https://i.imgur.com/qCNRAoA.jpg" alt="social"></p>
<p class="tag-box"><span class="tag"><a target="_blank" href="https://github.com/cwithac/social_clone"><i class="fa fa-github fa-lg" aria-hidden="true"></i></a></span><span class="tag">PHP</span><span class="tag">JavaScript</span><span class="tag">XAMPP</span></p>
</div>
<div class="project">
<a target="_blank" href="https://github.com/cwithac/twitter_clone_FE"><h1 id="warbler-header"> Warbler</h1></a>
<p class="description" id="warbler-description">Twitter Clone: Post public messages to universal timeline. Live hosting pending. Sessions, REST and CRUD.</br> <img class="preview" src="https://i.imgur.com/q9pUnUM.png" alt="warbler"></p>
<p class="tag-box"><span class="tag"><a target="_blank" href="https://github.com/cwithac/twitter_clone_FE"><i class="fa fa-github fa-lg" aria-hidden="true"></i></a></span><span class="tag">React</span><span class="tag">MongoDB</span><span class="tag">Express</span></p>
</div>
<div class="project">
<a target="_blank" href="https://octogon-challenge.herokuapp.com/"><h1 id="loremroses-header"> Lorem Ipsum Roses</h1></a>
<p class="description" id="loremroses-description">Design challenge, Lorem Ipsum with RegEx validation.</br> <img class="preview" src="https://i.imgur.com/4FjZjzw.png" alt="loremroses"> </p>
<p class="tag-box"><span class="tag"><a target="_blank" href="https://github.com/cwithac/lorem_ipsum_roses"><i class="fa fa-github fa-lg" aria-hidden="true"></i></a></span><span class="tag">MongoDB</span><span class="tag">AngularJS</span><span class="tag">SASS</span></p>
</div>
<div class="project">
<a target="_blank" href="https://vvdc.herokuapp.com/"><h1 id="vvdc-header"> Lundqvist & Svestrom</h1></a>
<p class="description" id="vvdc-description">Design Challenge, copy and images provided.</br> <img class="preview" src="https://i.imgur.com/Qm9PJEp.png" alt="vvdc"> </p>
<p class="tag-box"><span class="tag"><a target="_blank" href="https://github.com/cwithac/verbal_visual_designchallenge"><i class="fa fa-github fa-lg" aria-hidden="true"></i></a></span><span class="tag">HTML</span><span class="tag">SASS</span><span class="tag">Express</span></p>
</div>
</section>
</main>
</section>
</section>
</main>
</body>
</html>