-
Notifications
You must be signed in to change notification settings - Fork 4
/
Copy pathportfolio.html
executable file
·116 lines (106 loc) · 5.7 KB
/
portfolio.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
<!doctype html>
<html class="no-js" lang="">
<head>
<title>Randall Porter - I am a UI and UX problem solver.</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='http://fonts.googleapis.com/css?family=Lato:400,700,400italic|Architects+Daughter' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="assets/css/normalize.css/normalize.css">
<!--
<link rel="stylesheet" href="assets/css/global.css">
<link rel="stylesheet" href="assets/css/portfolio.css">
<link rel="stylesheet" href="assets/css/portfolio-flexbox.css">
-->
<!--
<link rel="stylesheet" href="assets/css/debug.css">
-->
</head>
<body>
<header>
<h1>Randall Porter</h1>
<span>I am a UI and UX problem solver.</span>
</header>
<div class="nav-wrapper">
<nav>
<ul>
<li><a href="#what-i-do">What I Do</a></li>
<li><a href="#skills">Skills</a></li>
<li><a href="#social">Social</a></li>
</ul>
</nav>
</div>
<main>
<article class="what-i-do">
<a name="what-i-do"></a>
<h2>What I Do</h2>
<div>
<section style="flex: 2">
<h3>User Interface Development</h3>
<p>
My passion is the creation of powerful single-page web applications targeted to your marketing goals. I eat JavaScript frameworks for breakfast and breathe CSS. I will create your site with cutting-edge technologies while retaining backwards compatibility with browsers are aren't so cutting edge. This strategy will also include integration with your choice of content management system in the technology stack of your choosing. All code follow will well-established architectural patterns, encouraging maintainability over a longer, more valuable software lifecycle. For example, I ensure that all sites use common Responsive Design frameworks to maximize device compatibility. Additionally, all site functionality will be fully documented to minimize the cost of user training.
</p>
</section>
<section style="flex: 1">
<h3>UX Design</h3>
<p>My goal is to design a better way of doing important things. I will transform your marketing goals into compelling interactive strategies to capture, compel, and grow your target market. This will be achieved by shaping strategic insights into memorable brand experiences. Through careful data collection and analysis, these designs will succeed both in the present and the unknown future.</p>
</section>
<section style="flex: 1">
<h3>SEO</h3>
<p>I build highly structured content strategies that form-fit the most recent trends in successful search ratings. This is a combination of carefully crafted information architecture and ad-strategy execution through key social channels. My objective is to match your company to key target demographics to generate consistently increased revenue.
</p>
</section>
</div>
</article>
<article class="skills">
<a name="skills"></a>
<h2>Skills</h2>
<section>
<ul>
<h3>UI</h3>
<li>HTML5</li>
<li>CSS3</li>
<li>JavaScript</li>
</ul>
<ul>
<h3>UX</h3>
<li>User Research</li>
<li>A/B & Multivariate Testing</li>
<li>Wireframes & Prototyping</li>
</ul>
<ul>
<h3>SEO & SEM</h3>
<li>Content Strategy</li>
<li>Social Integration</li>
<li>Google Adwords</li>
</ul>
</section>
</article>
<article>
<a name="social"></a>
<h2>Social</h2>
<section class="flex-container social">
<a href="#social"><img class="social-icon" src="assets/img/behance.png" alt="Behance" title="Behance" /></a>
<a href="#social"><img class="social-icon" src="assets/img/facebook.png" alt="Facebook" title="Facebook" /></a>
<a href="#social"><img class="social-icon" src="assets/img/github.png" alt="Github" title="Github" /></a>
<a href="#social"><img class="social-icon" src="assets/img/google-plus.png" alt="Google+" title="Google+" /></a>
<a href="#social"><img class="social-icon" src="assets/img/linked-in.png" alt="LinkedIn" title="LinkedIn" /></a>
<a href="#social"><img class="social-icon" src="assets/img/pinterest.png" alt="Pinterest" title="Pinterest" /></a>
<a href="#social"><img class="social-icon" src="assets/img/rss.png" alt="RSS Feed" title="RSS Feed" /></a>
<a href="#social"><img class="social-icon" src="assets/img/slide-share.png" alt="SlideShare" title="SlideShare" /></a>
<a href="#social"><img class="social-icon" src="assets/img/sound-cloud.png" alt="SoundCloud" title="SoundCloud" /></a>
<a href="#social"><img class="social-icon" src="assets/img/stack-exchange.png" alt="Stack Exchange" title="Stack Exchange" /></a>
<a href="#social"><img class="social-icon" src="assets/img/tumblr.png" alt="Tumblr" title="Tumblr" /></a>
<a href="#social"><img class="social-icon" src="assets/img/twitter.png" alt="Twitter" title="Twitter" /></a>
</section>
</article>
</main>
<footer>
© 2015 Randall Stevens, All Rights Reserved
</footer>
</body>
</html>
<!-- Stay out of divland - allows us to be semantic (but we still use divs as containers or specialized containers) -->
<!-- Divs are now just for additional formatting not pertaining to content -->
<!-- Div - generic container -->