-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
152 lines (127 loc) · 5.29 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ashley Echols | Web Developer</title>
<meta name="author" content="Ashley Echols">
<meta name="description" content="Front End Web Developer who blurs the line between technology and art.">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='https://fonts.googleapis.com/css?family=Play:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/main.min.css">
<script>
(function(i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r;
i[r] = i[r] || function() {
(i[r].q = i[r].q || []).push(arguments)
}, i[r].l = 1 * new Date();
a = s.createElement(o),
m = s.getElementsByTagName(o)[0];
a.async = 1;
a.src = g;
m.parentNode.insertBefore(a, m)
})(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
ga('create', 'UA-81852801-1', 'auto');
ga('send', 'pageview');
</script>
</head>
<body>
<!-- Header and Navbar -->
<header class="header">
<div class="container">
<a class="logo" href="">Ashley Echols</a>
<nav class="navbar" role="navigation">
<ul>
<li><a href="#about">About</a></li>
<li><a href="#work">Work</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</div>
</header>
<main>
<!-- Intro Section -->
<section class="intro">
<div class="heading">
<span class="greeting">
<h1>Hi, I'm Ashley Echols, <span class="highlight">Front End Developer</span></h1>
<!-- TODO: Make this the resume button instead. Would be better than adding a whole
separate button elsewhere. -->
<a class="btn" href="#contact">Hire Me</a>
</span>
</div>
</section>
<!-- About and Process Section -->
<section id="about" class="about">
<article class="bio">
<div class="container">
<div class="row">
<div class="four columns">
<h2>Who I Am...</h2>
<p>Part video game nerd, part artist, I am a <span class="highlight">Front End Developer</span> based in Chicago, IL who utilizes hobbies as inspiration for my work. When I'm not creating websites or applications, I enjoy reading up on game design
and development or creating pixel art.</p>
</div>
<div class="four columns">
<img src="img/selfie.png" alt="Image of a pixelated version of the author.">
</div>
<div class="four columns">
<h2>What I Do...</h2>
<p>I specialize in <span class="highlight">Front End Development</span>. Using HTML5, CSS3, and a hint of JavaScript, I construct responsive and fluid sites to accomplish a variety of goals. Coding is akin to another form of art to me, so I make it
a priority to incorporate a sizeable helping of creativity in my work.</p>
</div>
</div>
</div>
</article>
<article class="process">
<div class="container">
<div class="row">
<div class="four columns">
<img src="img/plan-icon.gif" alt="Image of an animated, pixelated notpad." class="icon">
<h4> Plan</h4>
<p>Research matters. I brainstorm, sketch wireframes, and scribble down a vast amount of ideas to ensure that my vision, in the spirit of the task at hand, comes to fruition.</p>
</div>
<div class="four columns">
<img src="img/create-icon.gif" alt="Image of an animated, pixelated code bracket." class="icon">
<h4>Create</h4>
<p>I build the skeleton of the site with HTML and dress it up pretty with CSS and a sprinkling of JavaScript. Sharp, simple design is my forte, and my goal is to present that in my work. I'm capable of using frameworks like Bootstrap or Skeleton or
code by hand.</p>
</div>
<div class="four columns">
<img src="img/test-icon.gif" alt="Image of an animated, pixelated wrench." class="icon">
<h4>Test</h4>
<p>Build tools such as Gulp, Webpack, and Parcel make it easy to test my sites across relevant browsers that I support. My testing period does not end until I'm satisfied with the functionality and design of the final product.</p>
</div>
</div>
</div>
</article>
</section>
<!-- Work Section -->
<section id="work" class="work">
</section>
</main>
<!-- Contact Footer -->
<footer id="contact" class="footer">
<div class="container table">
<div class="row">
<div class="contact twelve columns">
<h3>Let's Work Together</h3>
<p>If you're interested in working on a project with me, shoot me an email. I'm available for full-time and part-time positions, or freelance work.</p>
<a href="mailto:ashleyne92@gmail.com" class="btn">Contact Me</a>
</div>
<div class="twelve columns">
<ul class="links">
<li><a href="https://github.com/anechol">GitHub</a></li> |
<li><a href="/AEchols-Resume.pdf">Resume</a></li> |
<li><a href="https://www.linkedin.com/in/ashley-echols-826088106">LinkedIn</a></li> |
<li><a href="http://codepen.io/ashleyne/">CodePen</a></li>
</ul>
</div>
<div class="copy twelve columns">
<p>Crafted With Skeleton Plus</p>
<p id="year"></p>
</div>
</div>
</div>
</footer>
<script src="js/bundle.js"></script>
</body>
</html>