-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
189 lines (162 loc) · 6.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
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
<html>
<head>
<title>Eric Firth</title>
<link rel="stylesheet" href="./css/firth.scss" media="screen" charset="utf-8">
<link rel="stylesheet" href="./css/style.css" media="screen" charset="utf-8">
<link href='http://fonts.googleapis.com/css?family=Lato:100,300,300italic|Playfair+Display:400italic|Open+Sans:300,800|Oswald:700|Gentium+Book+Basic' rel='stylesheet' type='text/css'>
</head>
<body>
<header>
<h1 class="header-name">Eric Firth, Web Developer</h1>
<div class="header-image group">
<div class="lines">
<span class="single-line"></span>
<span class="single-line"></span>
<span class="single-line"></span>
<span class="single-line"></span>
<span class="single-line"></span>
</div>
<figure class="self-pic"><img src="./images/pic-of-me.jpg" alt="Me" /></figure>
<div class="lines">
<span class="single-line"></span>
<span class="single-line"></span>
<span class="single-line"></span>
<span class="single-line"></span>
<span class="single-line"></span>
</div>
</div>
<p class="header-text">
<span>Hello.</span>
I am a New York City-based software developer.
</p>
</header>
<div class="about-me">
<h1>About Me</h1>
<p>
I love making things. From beautiful and complex things to something small and simple. The feeling where the world drops away and becomes about all the small decisions and implementations and how they effect the whole is my favorite thing. It's why I'm a web developer.
</p>
<p>
My goal is to make simple, clear and beautiful websites. I have experience in Ruby, JavaScript, HTML/CSS, RESTful APIs and MVC architecture. Before becoming a developer I was a graphic designer for motion and web. I slowly found myself enjoying the coding part more than design part and being jealous of developers who got to solve the fun problems.
</p>
<p>
I am eager to take my love of coding and my passion for building and design and make great software that users love.
</p>
</div>
<div class="skills">
<ul class="skill-list group">
<li>
<img src="./images/Ruby_logo.png" alt="Ruby" />
<span>Ruby</span></li>
<li>
<img src="./images/rails.svg" alt="Rails" />
<span>Rails</span></li>
<li>
<img src="./images/PostgreSQL.svg" alt="postgreSQL" />
<span>PostgreSQL</span></li>
<li>
<img src="./images/js.svg" alt="JavaScript" />
<span>JavaScript</span></li>
<li>
<img src="./images/backbone.png" alt="backbone" />
<span>Backbone</span></li>
<li>
<img src="./images/jquery.svg" alt="JQuery" />
<span>JQuery</span></li>
</ul>
<h1>Skills & technologies</h1>
<ul class="skill-list group">
<li>
<img src="./images/html5.svg" alt="HTML5" />
<span>HTML5</span></li>
<li>
<img src="./images/css3.svg" alt="Css3" />
<span>CSS3</span></li>
<li>
<img src="./images/git.svg" alt="git" />
<span>Git</span></li>
<li>
<img src="./images/photoshop.svg" alt="Photoshop" />
<span>Photoshop</span></li>
<li>
<img src="./images/illustrator.svg" alt="Illustrator" />
<span>Illustrator</span></li>
<li>
<img src="./images/aws.svg" alt="Amazon Web Services" />
<span>AWS</span></li>
</ul>
</div>
<div class="projects">
<h1 class="projects-header">Projects</h1>
<ul class="project-list">
<li class="project quack-app group">
<figure>
<div class="project-links">
<a href="http://www.quack-app.net">Link to Site</a>
<a href="https://github.com/ericfirth/quack-app">Github Repo</a>
</div>
<img src="./images/quack.png" alt="" />
</figure>
<div class="project-text">
<span class="project-title">Quack App</span>
<ul class="project-desc">
<li>Team messaging and file sharing platform based on Slack.</li>
<li>Backbone app with RESTful JSON Rails API</li>
<li>Real-time messaging with Pusher</li>
<li>Single page layout with multiple scrolling windows made in CSS</li>
<li>Last channel visited stored in cookies to ensure continuity between sessions</li>
<li>Custom authentication system with BCrypt & OAuth with Google, Facebook & Twitter</li>
</ul>
</div>
</li>
<li class="project snake group">
<figure>
<div class="project-links">
<a href="http://ericfirth.github.io/Snake">Link to Site</a>
<a href="https://github.com/ericfirth/Snake">Github Repo</a>
</div>
<img src="./images/snake.png" alt="" />
</figure>
<div class="project-text">
<span class="project-title">Snake</span>
<ul class="project-desc">
<li>Classic snake game remade for browser.</li>
<li>Made with JavaScript, CSS & JQuery</li>
</ul>
</div>
</li>
<li class="project active-record-lite group">
<figure>
<div class="project-links">
<a href="https://github.com/ericfirth/ActiveRecordLite">Github Repo</a>
</div>
<img src="./images/activerecordlite.png" alt="" />
</figure>
<div class="project-text">
<span class="project-title">Active Record Lite</span>
<ul class="project-desc">
<li>Custom ORM inspired by ActiveRecord::Base</li>
<li>Generates and executes SQL Queries to replicate Rails associations</li>
<li>Leverages Ruby metaprogramming and reflection capabilities</li>
</ul>
</div>
</li>
</ul>
</div>
<section class="contact">
<div class="contact-pieces group">
<h1>Ways to Contact &</h1>
<h1>Visit Me</h1>
<ul class="social-icons">
<li><a href="mailto:[email protected]"><i class="icon-mail4"></i></a></li>
<li><a href="http://www.linkedin.com/in/ericfirth"><i class="icon-linkedin"></i></a></li>
<li><a href="https://github.com/ericfirth"><i class="icon-github"></i></a></li>
<li><a href="http://twitter.com/firthburger"><i class="icon-twitter"></i></a></li>
<li><a href="https://www.facebook.com/ericluxury/"><i class="icon-facebook2"></i></a></li>
<li><a href="https://vimeo.com/user2053177"><i class="icon-vimeo2"></i></a></li>
</ul>
</div>
</section>
<div class="modal">
</div>
</body>
</html>