-
Notifications
You must be signed in to change notification settings - Fork 19
/
index.html
159 lines (151 loc) · 7.83 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
<!DOCTYPE html>
<html>
<head profile="http://www.w3.org/2005/10/profile">
<meta name="viewport" content="width=device-width">
<meta charset="utf-8">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="http://fonts.googleapis.com/css?family=Pacifico|Open+Sans:400,700" rel="stylesheet" type="text/css">
<link href="css/all.min.css" rel="stylesheet" type="text/css">
<title>Imogen Wentworth | portfolio</title>
</head>
<body>
<header id="header">
<canvas id="header-canvas"></canvas>
<h1>Imogen Wentworth</h1>
<h2>UI & JavaScript<br>Engineer</h2>
<div class="header-links">
<a href="https://github.com/negomi/" class="header-link" target="_blank"><i class="fa fa-github fa-2x"></i></a>
<a href="https://twitter.com/imogenwentworth" class="header-link" target="_blank"><i class="fa fa-twitter fa-2x"></i></a>
<a href="http://www.linkedin.com/in/imogenwentworth/" class="header-link" target="_blank"><i class="fa fa-linkedin fa-2x"></i></a>
<a href="mailto:imogen.wentworth@gmail.com" class="header-link"><i class="fa fa-at fa-2x"></i></a>
</div>
</header>
<section class="project" id="html5-canvas-backgrounds">
<div class="project-description">
<h3>html5-canvas-backgrounds</h3>
<p>Geometric repeating patterns for the HTML5 Canvas.</p>
<p><span class="tech">Tech:</span> ClojureScript, Fabric.js</p>
<a href="http://negomi.github.io/html5-canvas-backgrounds/" target="_blank" class="project-button">Demo</a>
<a href="https://github.com/negomi/html5-canvas-backgrounds" target="_blank" class="project-button">Code</a>
</div>
<div class="project-image-container">
<a href="http://negomi.github.io/html5-canvas-backgrounds/" target="_blank" tabindex="-1">
<div class="project-image md-imac md-glare">
<div class="md-body">
<div class="md-top">
<div class="md-camera"></div>
<div class="md-screen">
<img src="img/html5-canvas-backgrounds.png" alt="html5-canvas-backgrounds screenshot" />
</div>
</div>
</div>
<div class="md-base">
<div class="md-stand"></div>
<div class="md-foot"></div>
</div>
</div>
</a>
</div>
</section>
<section class="project" id="react-burger-menu">
<div class="project-description">
<h3>react-burger-menu</h3>
<p>An off-canvas sidebar React component with a collection of effects and styles using CSS transitions and SVG path animations.</p>
<p><span class="tech">Tech:</span> React, CSS3, Snap.svg</p>
<a href="http://negomi.github.io/react-burger-menu/" target="_blank" class="project-button">Demo</a>
<a href="https://github.com/negomi/react-burger-menu" target="_blank" class="project-button">Code</a>
</div>
<div class="project-image-container">
<a href="http://negomi.github.io/react-burger-menu/" target="_blank" tabindex="-1">
<div class="project-image md-macbook-pro md-glare">
<div class="md-lid">
<div class="md-camera"></div>
<div class="md-screen">
<img src="img/react-burger-menu.png" alt="react-burger-menu screenshot" />
</div>
</div>
<div class="md-base"></div>
</div>
</a>
</div>
</section>
<section class="project" id="bikestash">
<div class="project-description">
<h3>BikeStash</h3>
<p>A visualization of public bike parking facilities in San Francisco.</p>
<p><span class="tech">Tech:</span> Leaflet, ES6</p>
<a href="http://negomi.github.io/bikestash/" target="_blank" class="project-button">Project</a>
<a href="https://github.com/negomi/bikestash" target="_blank" class="project-button">Code</a>
</div>
<div class="project-image-container">
<a href="http://negomi.github.io/bikestash/" target="_blank" tabindex="-1">
<div class="project-image md-imac md-glare">
<div class="md-body">
<div class="md-top">
<div class="md-camera"></div>
<div class="md-screen">
<img src="img/bikestash.png" alt="BikeStash screenshot" />
</div>
</div>
</div>
<div class="md-base">
<div class="md-stand"></div>
<div class="md-foot"></div>
</div>
</div>
</a>
</div>
</section>
<section class="project" id="scrollaway">
<div class="project-description">
<h3>scrollAway.js</h3>
<p>A simple jQuery plugin that hides elements on scroll down, and reveals them on scroll up.</p>
<p><span class="tech">Tech:</span> jQuery, QUnit</p>
<a href="http://negomi.github.io/scrollaway/" target="_blank" class="project-button">Demo</a>
<a href="https://github.com/negomi/scrollaway" target="_blank" class="project-button">Code</a>
</div>
<div class="project-image-container">
<div class="project-image md-iphone-5 md-black-device md-glare">
<a href="http://negomi.github.io/scrollaway/" target="_blank" tabindex="-1">
<div class="md-body">
<div class="md-buttons"></div>
<div class="md-front-camera"></div>
<div class="md-top-speaker"></div>
<div class="md-screen">
<img src="img/scrollaway.png" alt="ScrollAway screenshot" />
</div>
<button class="md-home-button" tabindex="-1"></button>
</div>
</a>
</div>
</div>
</section>
<section class="project" id="sassy-inputs">
<div class="project-description">
<h3>Sassy Inputs</h3>
<p>A Sass mixin library of minimal CSS3 <span style="white-space: nowrap">cross-browser</span> form input styles.</p>
<p><span class="tech">Tech:</span> Sass</p>
<a href="http://negomi.github.io/sassy-inputs/" target="_blank" class="project-button">Demo</a>
<a href="https://github.com/negomi/sassy-inputs" target="_blank" class="project-button">Code</a>
</div>
<div class="project-image-container">
<a href="http://negomi.github.io/sassy-inputs/" target="_blank" class="project-image project-logo--sassy-inputs" tabindex="-1">Sassy Inputs</a>
</div>
</section>
<section class="writing">
<div class="blogposts-wrapper">
<div class="blogposts-heading"><i class="fa fa-pencil"></i><h3>Writing</h3></div>
<ul class="blogposts">
<li><a href="http://imogenation.net/technology/2015/08/15/ems-rems-or-pixels/" class="blogpost">Ems, rems or pixels?</a></li>
<li><a href="http://imogenation.net/technology/2015/06/07/optimizing-for-faster-page-loads/" class="blogpost">Optimizing for faster page loads</a></li>
<li><a href="http://imogenation.net/technology/2015/04/01/understanding-css-transforms-transitions-and-animations/" class="blogpost">Understanding CSS transforms, transitions and animations</a></li>
<li><a href="http://imogenation.net/technology/2015/02/24/tips-for-cleaning-up-spaghetti-javascript/" class="blogpost">Tips for cleaning up spaghetti JavaScript</a></li>
<li><a href="http://imogenation.net/technology/2015/01/25/minimal-responsive-grid-frameworks/" class="blogpost">Minimal responsive grid frameworks</a></li>
</ul>
<a href="http://imogenation.net" target="_blank" class="blog-button">More ➝</a>
</div>
</section>
<footer>Code for this page @ <a href="https://github.com/negomi/portfolio/">github.com/negomi/portfolio</a></footer>
<script src="js/all.min.js" type="text/javascript"></script>
</body>
</html>