-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
162 lines (156 loc) · 6.96 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
<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">
<title>Lynn Makowski | Portfolio</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header class="hero">
<span
class="dummy">L</span><span>y</span><span>n</span><span>n</span><br /><span>M</span><span>a</span><span>k</span><span>o</span><span>w</span><span>s</span><span>k</span><span>i</span><br />
<span class="subtitle">Web Designer</span><span class="subtitle"> · </span><span
class="subtitle">Front-End Developer</span><span class="subtitle"> · </span><span
class="subtitle">Digital Creative</span>
</header>
<h2>Websites</h2>
<section id="websites" class="row">
<div class="column">
<h3>Seymour Library</h3>
<p>Wordpress, Gutenberg, PHP, CSS, HTML, Bootstrap, Custom Post Types, Advanced Custom Fields</p>
<a href="https://seymourlibrary.org/" class="ripple" target="_blank"><img src="home_seymour_library.jpg"/></a>
<script type="text/javascript" src="ripple.js"></script>
<script type="text/javascript">
addRippleEffectToElements('.ripple');
</script>
</div>
<div class="column">
<h3>Data Description, Inc.</h3>
<p>Divi</p>
<a href="https://datadescription.com/" class="ripple" target="_blank"><img src="home_data_description.png"/></a>
<script type="text/javascript" src="ripple.js"></script>
<script type="text/javascript">
addRippleEffectToElements('.ripple');
</script>
</div>
<div class="column">
<h3>Activstats Tools</h3>
<p>Gutenberg, HTML, CSS</p>
<a class="ripple" href="https://astools.datadescription.com/" target="_blank"><img src="home_as_tools.png" /></a>
<script type="text/javascript" src="ripple.js"></script>
<script type="text/javascript">
addRippleEffectToElements('.ripple');
</script>
</div>
<div class="column">
<h3>Northstar Network</h3>
<p>Gutenberg, HTML, CSS, Advanced Custom Fields</p>
<a class="ripple" href="https://northstarnetwork.org/" target="_blank"><img src="home_northstar_network.png" /></a>
<script type="text/javascript" src="ripple.js"></script>
<script type="text/javascript">
addRippleEffectToElements('.ripple');
</script>
</div>
<div class="column">
<h3>The Muldrow Group</h3>
<p>Gutenberg, Bootstrap, CSS</p>
<a class="ripple" href="https://themuldrowgroup.com/" target="_blank"><img src="home_the_muldrow_group.png" /></a>
<script type="text/javascript" src="ripple.js"></script>
<script type="text/javascript">
addRippleEffectToElements('.ripple');
</script>
</div>
<div class="column">
<h3>Affordable Advancment Analytics</h3>
<p>Divi</p>
<a class="ripple" href="https://a3giving.org/" target="_blank"><img src="home_a3.png" /></a>
<script type="text/javascript" src="ripple.js"></script>
<script type="text/javascript">
addRippleEffectToElements('.ripple');
</script>
</div>
</section>
<h2>Image Gallery</h2>
<section id="image_gallery" class="row">
<div class="column">
<img src="ast_banner_done.svg" class="thumbnail" onclick="showLightbox(this);" />
<div class="lightbox hide" onclick="hideLightbox(this);">
<img src="ast_banner_done.svg" />
</div>
</div>
<div class="column">
<img src="ast_page_banner.svg" class="thumbnail" onclick="showLightbox(this);" />
<div class="lightbox hide" onclick="hideLightbox(this);">
<img src="ast_page_banner.svg" />
</div>
</div>
<div class="column">
<img src="dd_banner_homepage.svg" class="thumbnail" onclick="showLightbox(this);" />
<div class="lightbox hide" onclick="hideLightbox(this);">
<img src="dd_banner_homepage.svg" />
</div>
</div>
<div class="column">
<img src="dd_banners_background_more_gradientsthicc.svg" class="thumbnail" onclick="showLightbox(this);" />
<div class="lightbox hide" onclick="hideLightbox(this);">
<img src="dd_banners_background_more_gradientsthicc.svg" />
</div>
</div>
<div class="column">
<img src="3d_ddrp.png" class="thumbnail" onclick="showLightbox(this);" />
<div class="lightbox hide" onclick="hideLightbox(this);">
<img src="3d_ddrp.png" />
</div>
</div>
</section>
<h2>Audio & Video</h2>
<section id="audio_and_video" class="row">
<div class="column">
<h3>Interstellar Roudabout</h3>
<p>All music, credited as sparrow-lynn: <br>GarageBand iOS</p>
<a class="ripple" href="https://elastic-clarke-7537d4.netlify.app/" target="_blank"><img
src="interstellar_roundabout.png" /></a>
<script type="text/javascript" src="ripple.js"></script>
<script type="text/javascript">
addRippleEffectToElements('.ripple');
</script>
</div>
<div class="column">
<h3>Introduction to DASL</h3>
<p>Video creation and editing, music: <br>Adobe Premiere Pro, Garageband iOS</p>
<a class="ripple" href="https://youtu.be/PefMzitikKU" target="_blank"><img src="bedazzled_screencap.jpg" /></a>
</div>
<script type="text/javascript" src="ripple.js"></script>
<script type="text/javascript">
addRippleEffectToElements('.ripple');
</script>
</section>
<footer>
<h2>Contact</h2>
<form name="contact" method="POST" data-netlify-recaptcha="true" data-netlify="true">
<p>
<label>Name <input type="text" name="name" required></label>
</p>
<p>
<label>Email <input type="email" name="email" required></label>
</p>
<p>
<label>Message <textarea name="message" form="contact" rows="5" cols="50"></textarea></label>
</p>
<div data-netlify-recaptcha="true"></div>
<p>
<button type="submit">Send</button>
</p>
</form>
</footer>
<script>
function showLightbox(element) {
element.nextElementSibling.classList.remove('hide');
}
function hideLightbox(element) {
element.classList.add('hide');
}
</script>
</body>
</html>