-
Notifications
You must be signed in to change notification settings - Fork 0
/
about.html
180 lines (171 loc) · 15.2 KB
/
about.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Ro Dixon, About Me</title>
<meta name="description" content="Over a decades worth of designing, leading, and researching user experience.">
<!-- Google / Search Engine Tags -->
<meta itemprop="name" content="Ro Dixon | Director of UX">
<meta itemprop="description" content="Over a decades worth of designing, leading, and researching user experience.">
<meta itemprop="image" content="http://rodixondesigns.com/assets/meta-image.png">
<!-- Facebook Meta Tags -->
<meta property="og:url" content="http://rodixondesigns.com">
<meta property="og:type" content="website">
<meta property="og:title" content="Ro Dixon | Director of UX">
<meta property="og:description" content="Over a decades worth of designing, leading, and researching user experience.">
<meta property="og:image" content="http://rodixondesigns.com/assets/meta-image.png">
<!-- Twitter Meta Tags -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Ro Dixon | Director of UX">
<meta name="twitter:description" content="Over a decades worth of designing, leading, and researching user experience.">
<meta name="twitter:image" content="http://rodixondesigns.com/assets/meta-image.png">
<link rel="icon" href="assets/favicon.ico">
<script src="https://use.fontawesome.com/f766bd3c92.js"></script>
<link href="https://fonts.googleapis.com/css?family=Quicksand|Fira+Sans" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/uikit.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script defer data-domain="rodixondesigns.com" src="https://plausible.io/js/plausible.js"></script>
</head>
<body>
<div class="uk-offcanvas-content">
<header>
<div id="top" class="uk-position-relative"> <img src="assets/marble_background.jpg" width="100%" height="auto" alt="hero image of Ro">
<div class="uk-position-top">
<div uk-sticky="animation: uk-animation-slide-top; sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky; cls-inactive: uk-navbar-transparent; top: 400">
<nav class="uk-navbar-container uk-navbar-transparent" uk-navbar>
<div class="uk-navbar-left uk-margin-left">
<ul class="uk-navbar-nav uk-visible@m">
<li><a class="lobster" href="index.html">Resumé</a></li>
<li><a class="lobster font-dk-blue underline" href="about.html">About</a></li>
<li><a class="lobster" href="work.html">Work</a></li>
</ul>
<div class="uk-navbar-right uk-hidden@m uk-margin-remove-left"> <a class="uk-navbar-toggle" data-uk-toggle data-uk-navbar-toggle-icon href="#offcanvas-nav"></a> </div>
</div>
<div class="uk-navbar-right uk-visible@m uk-margin-large-right"><a href="https://drive.google.com/file/d/1u4UOCdeU8hJIn0t6guTrXeFWVfqW3bgi/view?usp=sharing" target="_blank" class="btn-white font-link-lt lobster"><span uk-icon="icon: print"></span> Resumé </a></div>
</nav>
</div>
<div class="uk-margin-large-top">
<h2 class="uk-text-center font-dk-blue tight uk-animation-slide-right">Let's get to</h2>
<h2 class="uk-text-center font-dk-blue tight uk-animation-slide-left">know each other!</h2>
</div>
<div class="uk-animation-slide-top delay-1s uk-visible@m"><img class="about-photo" src="assets/about-bitmoji.png" alt="Profile circular photo of Ro Dixon"></div>
</div>
</header>
<section id="about">
<div class="uk-grid-divider uk-child-width-expand@s uk-padding uk-text-center" uk-grid>
<div uk-scrollspy="cls: uk-animation-slide-top; repeat: true">
<span class="uk-text-muted" uk-icon="icon: user; ratio: 3"></span>
<h2 class="font-dk-blue">Who am I?</h2>
<h5 class="uk-text-left">I'm a UX leader and designer through and through. Which simply means that while I do have experience designing beautiful apps, I'll always choose substance over style. I am exceptionally good at designing highly functional experiences that people enjoy using- and I've been excelling in this area professionally for the last 13 years. If you're in need of someone to design intricate processes and lead a team who does as well- I'm your person.</h5> </div>
<div uk-scrollspy="cls:uk-animation-slide-bottom; repeat: true">
<span class="uk-text-muted" uk-icon="icon: question; ratio: 3"></span>
<h2 class="font-dk-blue"> Why me?</h2>
<h5 class="uk-text-left">My experience and skillset speak for themselves- but it's my work ethic and integrity that I believe make me an excellent person to work with. <br><br>I genuinely love learning what makes people tick and helping solve their problems. It’s what makes me great at my job, because I have a knack for getting to know both my team and my users intrinsically and providing them the tools they need to succeed.</h5> </div>
</div>
</section>
<section class="lt-gray" id=fun>
<div class="font-dk-blue uk-padding-large"><h1 class="font-dk-blue">Fun Stuff</h1>
<h5>I also have an amazing personal life, with phenomenal friends, family, and adventure!</h5></div>
<div class="uk-grid-small uk-child-width-expand@s uk-padding-large uk-text-center" uk-grid>
<div uk-scrollspy="cls: uk-animation-slide-top; repeat: true">
<img src="assets/family.png" alt="Family Photo Collage">
</div>
<div class="uk-text-left uk-padding-large" uk-scrollspy="cls:uk-animation-slide-bottom; repeat: true">
<h2 class="font-dk-blue">#Family</h2>
<h5>I know we all think our family is special- but I really do have the sweetest husband, son, and fur-babies anyone could ask for. Not to mention the amazing people that raised me, my mom and grandparents.<br><br>They're the reason I work so hard and the ones I celebrate with when I do well.</h5></div>
</div>
<div class="uk-grid-small uk-child-width-expand@s uk-padding uk-text-center" uk-grid>
<div class="uk-text-left uk-padding-large" uk-scrollspy="cls:uk-animation-slide-top; repeat: true">
<h2 class="font-dk-blue">#Friends</h2>
<h5>I'm an only child so my friends are my family. As you can see, my life is definitely better when they're around!</h5></div>
<div class="uk-padding-large" uk-scrollspy="cls: uk-animation-slide-bottom; repeat: true">
<img src="assets/friends.png" alt="Collage of Photos of Friends">
</div>
</div>
<div class=uk-padding-large>
<h2 class="font-dk-blue uk-text-center">#Shenanigans</h2>
<div class="uk-position-relative uk-visible-toggle uk-light uk-width-1-1" uk-slideshow>
<ul class=uk-slideshow-items>
<li><img src=adventures/adventure_1.jpg alt="Horseback Ride in Ireland" uk-cover>
<div class="uk-overlay uk-overlay-primary uk-position-bottom uk-text-center uk-transition-slide-bottom">
<h5 class=uk-margin-remove>Horseback Riding - Ireland</h5>
<p class="uk-margin-remove uk-visible@m">I can't wait to go back! Riding horses on the beach in Dingle was my favorite!</div>
<li><img src=adventures/adventure_2.jpg alt="Halloween 2019">
<div class="uk-overlay uk-overlay-primary uk-position-bottom uk-text-center uk-transition-slide-bottom">
<h5 class=uk-margin-remove>Halloween 2019</h5><p class="uk-margin-remove uk-visible@m">We dressed up like Indiana Jones, Mutt, and Marion!</div>
<li><img src=adventures/adventure_3.jpg alt="Jetpacking - Mexico" uk-cover>
<div class="uk-overlay uk-overlay-primary uk-position-bottom uk-text-center uk-transition-slide-bottom">
<h5 class=uk-margin-remove>Jetpacking - Mexico</h5>
<p class="uk-margin-remove uk-visible@m">I couldn't wait to give jetpacking a try, all I'll say is it's a lot harder than it looks, but so much fun!</div>
<li><img src=adventures/adventure_4.jpg alt="Owl fun in Ireland" uk-cover>
<div class="uk-overlay uk-overlay-primary uk-position-bottom uk-text-center uk-transition-slide-bottom">
<h5 class=uk-margin-remove>Falconry in Ireland</h5>
<p class="uk-margin-remove uk-visible@m">While in Killarney National Park we spent some time with a bad-a** falcon and some adorable owls.</div>
<li><img src=adventures/adventure_8.jpg alt="Local Horse" uk-cover>
<div class="uk-overlay uk-overlay-primary uk-position-bottom uk-text-center uk-transition-slide-bottom">
<h5 class=uk-margin-remove>Local Ride</h5>
<p class="uk-margin-remove uk-visible@m">Here I am with a friend from Sunny Acres Stables near my hometown.</div>
<li><img src=adventures/adventure_9.jpg alt="Shark Wrangling" uk-cover>
<div class="uk-overlay uk-overlay-primary uk-position-bottom uk-text-center uk-transition-slide-bottom">
<h5 class=uk-margin-remove>Shark Wrangling</h5>
<p class="uk-margin-remove uk-visible@m">Finally, here I am wrangling a shark in Mexico. To be honest he was a sweetheart!</div>
</ul>
<a class="uk-position-center-left uk-position-small" href=# uk-slidenav-previous uk-slideshow-item=previous></a>
<a class="uk-position-center-right uk-position-small" href=# uk-slidenav-next uk-slideshow-item=next></a>
</div>
</div>
</section>
<section id="contact">
<div class="uk-background-cover uk-height-large uk-padding" style="background-image: url(assets/contact.jpg);">
<div class="uk-flex-middle uk-flex-wrap" uk-grid>
<div class="uk-width-1-2 uk-visible@m" uk-scrollspy="cls: uk-animation-scale-up; repeat: true">
<h2 class="font-white">Contact Me</h2><a href="tel:812-946-1839" class="font-white font-small"><i class="fa fa-phone-square" aria-hidden="true"></i> (812) 946-1839</a>
<br>
<br><a href="mailto:ro@rodixondesigns.com" class="font-white font-small"><i class="fa fa-envelope-square" aria-hidden="true"></i> ro@rodixondesigns.com</a></div>
<div class="uk-width-1-1 uk-width-1-2@m" uk-scrollspy="cls: uk-animation-scale-down; repeat: true">
<div class="uk-hidden@m uk-text-center" uk-scrollspy="cls: uk-animation-scale-up; repeat: true">
<h2 class="font-white">Contact Me</h2>
<!--<p class="uk-text-small font-white"><a href="tel:812-946-1839" class="font-white font-small"><i class="fa fa-phone-square" aria-hidden="true"></i> (812) 946-1839</a> | <a href="mailto:ro@rodixondesigns.com" class="font-white font-small"><i class="fa fa-envelope-square" aria-hidden="true"></i> ro@rodixondesigns.com</a></p>-->
</div>
<form action="https://formspree.io/ro@rodixondesigns.com" method="POST">
<div class="uk-margin uk-width-1-1">
<br>
<br>
<label class="uk-form-label font-white" for="form-stacked-text"><i class="fa fa-user"></i> Full Name</label>
<input class="uk-input" type="text" name="name" placeholder="Enter name here">
</div>
<div class="uk-margin uk-width-1-1">
<label class="uk-form-label font-white" for="form-stacked-text"><i class="fa fa-at"></i> Email Address</label>
<input class="uk-input" type="email" name="_replyto" placeholder="Enter email here">
</div>
<div class="uk-margin uk-width-1-1">
<label class="uk-form-label font-white" for="form-stacked-text"><i class="fa fa-commenting"></i> Message</label>
<textarea class="uk-textarea" name="message" placeholder="Enter your message here"></textarea>
</div>
<button class="uk-border-rounded uk-align-left uk-button uk-button-default uk-button-small white" type="submit"> Send </button>
</form>
</div>
</div>
</div>
</section>
<section id="social" class="uk-padding uk-text-middle uk-text-center">
<h2 class="font-white uk-margin-right">Find Me Online</h2>
<div><a class="uk-padding" href="https://linkedin.com/in/ro-dixon-ux" target="_blank"><i class="fa fa-linkedin-square fa-3x font-white uk-margin-right" aria-hidden="true"></i></a><a class="uk-padding" href="https://medium.com/@rodixon30" target="_blank"><i class="fa fa-medium fa-3x font-white uk-margin-right" aria-hidden="true" ></i></a><a class="uk-padding" href="https://www.behance.net/ro_dixon" target="_blank"><i class="fa fa-behance-square fa-3x font-white uk-margin-right" aria-hidden="true"></i></a><a class="uk-padding" href="https://dribbble.com/rodixon30" target="_blank"><i class="fa fa-dribbble fa-3x font-white uk-margin-right" aria-hidden="true"></i></a></div>
</section>
<div id="offcanvas-nav" data-uk-offcanvas="flip: true; overlay: true">
<div class="uk-offcanvas-bar uk-offcanvas-bar-animation uk-offcanvas-slide dk-blue">
<button class="uk-offcanvas-close uk-close uk-icon" type="button" data-uk-close></button>
<ul class="uk-nav uk-nav-default">
<h2>Menu </h2>
<li><a class="lobster" href="index.html">Resume</a></li>
<li><a class="lobster" href="about.html">About</a></li>
<li><a class="lobster" href="work.html">Work</a></li></ul>
<div class="padding-50"></div>
<div><a href="https://drive.google.com/file/d/1u4UOCdeU8hJIn0t6guTrXeFWVfqW3bgi/view?usp=sharing" target="_blank" class="btn-white font-link-lt">Print Resume <i class="fa fa-external-link"></i></a></div>
</div>
</div>
</div>
<script src="uikit.min.js"></script><script src="uikit-icons.min.js"></script>
</body>
</html>