-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
197 lines (182 loc) · 11.1 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
190
191
192
193
194
195
196
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Michael Winter | Graphic Designer | Developing Developer | Digital Nomad</title>
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
<meta name="theme-color" content="#ffffff">
<link rel="stylesheet" href="/assets/css/styles.css"><script async src="./assets/js/index.js"></script>
<!-- Facebook Pixel Code -->
<script>
!function(f,b,e,v,n,t,s)
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t,s)}(window, document,'script',
'https://connect.facebook.net/en_US/fbevents.js');
fbq('init', '449422069449798');
fbq('track', 'PageView');
</script>
<noscript><img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=449422069449798&ev=PageView&noscript=1"
/></noscript>
<!-- End Facebook Pixel Code -->
</head>
<body>
<!-------------------------------
Navigation
---------------------------------->
<header class="nav-container">
<input id="nav-toggle" class="nav-toggle" type="checkbox" name="hamburger">
<nav>
<ul id="nav-link-container">
<li><a class="nav-link" href="#home">Home</a></li>
<li><a class="nav-link" href="#about">About</a></li>
<li><a class="nav-link" href="#projects">Projects</a></li>
<li><a class="nav-link" href="#skills">Skills</a></li>
<li><a class="nav-link" href="#contact">Contact</a></li>
</ul>
</nav>
<label for="nav-toggle" class="nav-toggle-label">
<div class="nav-icon-front">
<img src="./assets/icons/nav-icon-match.svg">
</div>
<div class="nav-icon-back">
<img src="./assets/icons/nav-icon-fire.svg">
</div>
</label>
</header>
<!-------------------------------
Landing
---------------------------------->
<main class="site-wrapper">
<section id="home" class="landing page-section">
<div class="landing-content-container">
<object class="logo-icon" alt="Hi my name's Michael Winter and I pleased to welcome you to my online folio. You are currently selecting my logo icon, an image inspired by the nomadic lifestyle of digital developers in the modern age." type="image/svg+xml" data="./assets/logo/logo.svg" ></object>
<h2 class="moto">make ideas, <br>move mountains</h2>
<div class="landing-button">
<label for="nav-down-landing">
<input type="checkbox" class="landing-checkbox" name="nav-down-landing" id="nav-down-landing">
<div class="pulse-button"></div>
</label>
</div>
</div>
</section>
<!-------------------------------
about
---------------------------------->
<section id="about" class="about page-section">
<div class="about-content-container">
<h1 class="about-title">Hi, hello, welcome!</h1>
<div class="about-slider">
<div class="about-slide">
<p>My name is Michael Winter, a digital designer turned developer with a passion for innovative design, a love of alliteration, and an eagerness to fall head first into full-stack development.</p>
</div>
<div class="about-slide">
<p>With an eclectic background in design, marketing and now, development, I have assertained a diverse array of skill to help me adapt to any creative challange.</p>
</div>
<div class="about-slide">
<p>You'll find below a short summary of my skills, tech stack and personal porfolio, containing my most recent and relevant body of work from design and marketing sectors.</p>
</div>
</div>
<ul class="slider-nav" id="about-nav-container">
</ul>
</div>
<footer class="about-footer">
<img src="/assets/dividers/about-projects.svg" alt="An isometric image dipicting a small camp site with coral red tent and burning flame.">
</footer>
</section>
<!-------------------------------
Projects
---------------------------------->
<section id="projects" class="projects page-section">
<div class="projects-text-container">
<h1 class="projects-title">Projects</h1>
<p class="projects-body">From design to development, kick off your shoes, get comfy and take a sneak peak at some if my most recent projects. Settle in for the full preivew of swipe right to see the best bits</p>
</div>
<footer class="projects-footer">
<div class="project-slider-container">
<div class="project-slider">
<div class="project-slide">
<object class="project-media play-button" alt="a custom play button" type="image/svg+xml" data="./assets/media/play-button.svg"></object>
<video poster="./assets/media/placeholder-nocover.jpg" class="project-media" id="intro-animation" alt="A hand drawn animation made using the adobe creative suite" src="./assets/media/intro-reel-480.mp4" type="video/mp4"class="project-media" width="100%" height="100%">
Your browser does not support the video tag. For optimal viewing experience, please update or use an alternative browser.
</video>
</div>
<div class="project-slide" id="chicken-in" href="http://www.chicken-in.com/">
<a target="_blank" class="project-media" alt="Link to Chicken-in, a scheduling and shift tracking app made using the MERN Stack for Red Rocks CHarcoal Chicken" href="http://www.chicken-in.com/">
<object alt="chicken-in logo" type="image/svg+xml" data="./assets/media/chickenin-icon-logo.svg"></object></a>
</div>
<div class="project-slide" id="pitchr">
<a target="_blank" class="project-media" href="https://github.com/mcwinter07/pitchr-this" alt="This is the icon for Pitchr, a collaborative network app for professionals working in the fashion industry.">
<object class="project-media" alt="Pitchr workmark" type="image/svg+xml" data="./assets/media/pitchr-icon-lettermark.svg"></object>
</a>
</div>
<div class="project-slide" id="design-folio" >
<h3 class="slide-text">Need More</br>eggsamples?</h3>
<object class="project-media placeholder" alt="More examples coming soon placeholder" type="image/svg+xml" data="./assets/media/pun-slide.svg"></object>
</div>
<div class="project-slide" id="end-of-slide" background-image="./assets/media/404-pun">
<h3 class="slide-text">Check back</br>soon!</h3>
<object class="project-media placeholder-2" alt="More examples coming soon placeholder" type="image/svg+xml" data="./assets/media/pun-slide-2.svg"></object>
</div>
</div>
<ul class="slider-nav" id="project-nav-container"></ul>
</div>
<img class="project-cinema" src="/assets/dividers/project-projector.svg" alt="A brief depiction of my latest body of work, displayed within a moonlight cinema">
<img class="projects-divider" src="assets/dividers/project-skills.svg" alt="A geometric depiction of a native nomad">
</footer>
</section>
<section id="skills" class="skill-stack page-section">
<div class="tech-text-container">
<h1 class="stack-title">Skills Stack</h1>
<p class="stack-body">From creative tools to frontend frameworks, see some of the lastest skills and tech stacks I use to create immersive and engaging experiences online. </p>
</div>
<section class="stack-wrapper">
<div class="badge-container">
<img src="assets/svg/badgeruby.svg" alt="a badge denoting the Ruby">
<img src="assets/svg/badgerails.svg" alt="a badge denoting the Ruby on Rails">
<img src="assets/svg/badgenodejs.svg" alt="a badge denoting the NodeJS">
<img src="assets/svg/badgereact.svg" alt="a badge denoting the React">
<img src="assets/svg/badgehtml.svg" alt="a badge denoting the HTML 5">
<img src="assets/svg/badgecss.svg" alt="a badge denoting the CSS 3">
</div>
</section>
</section>
<!-- Section 6: Contact -->
<section id="contact" class="contact-page page-section">
<div class="contact-text-container">
<h1 class="contact-title">Get in Touch</h1>
<p class="contact-body">Whether you're looking for a contractor who can hit the ground running, or are on the hunt for a full stack develper with a design focus, drop me a message and I'll get back as soon as I'm able.</p>
</div>
<div class="contact-form-container">
<form class="contact-form" action="[email protected]" target="_blank" method="post" netlify>
<input type="text" name="user-name" id="user-name" placeholder="Please enter your name..." required>
<input type="email" name="email-address" placeholder="Please enter your email..." id="email-address">
<input type="tel" name="phone" placeholder="Please enter your number..." id="phone">
<textarea rows="4" name="message" placeholder="Please enter your message..." id="message" maxlength="500"></textarea>
<button>Submit</button>
</form>
</div>
</section>
<footer class="page-footer">
<section class="contact-icons">
<a class="github" href=https://github.com/mcwinter07><img src="assets/svg/githubicon.svg" alt="image icon for github"></a>
<a class="codepen" href=https://codepen.io/mcwinter07/><img src="assets/svg/codepenicon.svg" alt="image icon for Codepen"></a>
<a class="linkedin" href=https://www.linkedin.com/in/mcwinter><img src="assets/svg/linkedinicon.svg" alt="image icon for linkedin"></a>
<a class="cv" href=https://drive.google.com/file/d/1y684Y0Ml6FclHndwX7DIUrVTkD-84Am9/view?usp=sharing><img src="assets/svg/cvicon.svg" alt="image icon for Michael Winters CV"></a>
</section>
</footer>
<!-- end -->
</main>
<script>
if('serviceWorker' in navigator) {
navigator.serviceWorker
.register('/sw.js')
}
</script>
</body>