-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
201 lines (151 loc) · 8.11 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
197
198
199
200
201
<!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 Portfolio</title>
<link href="https://fonts.googleapis.com/css?family=Nunito | Esteban|" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
<meta name="theme-color" content="#ffffff">
<link rel="stylesheet" href="/assets/css/style.css">
</head>
<body>
<!-- navigation -->
<!-------------------------------
Section 1: Landing Page
---------------------------------->
<div class="landing-page">
<div class="logo"><img src="/assets/svg/logo.svg" alt="Michael Winter's brand logo | Welcome to my online folio"></div>
<div class="quote">
<h1>make ideas,<br>move mountains</h1>
</div>
<span> </span>
<div class="button">
</div>
</div>
<!-------------------------------
Section 2: About
---------------------------------->
<div class="about-page">
<div class="about-title">
<h1>Hi, hello and welcome!</h1>
</div>
<!-- slider -->
<div class="about-text">
<p>
My name is Michael Winter, a digital designer turned junior developer with a passion for innovative design, a love of alliteration, and an eagerness to fall head first into full stack development.
</p>
<!-- <p>
From my formal education through the on-the-job training, I have always sought to learn and adapt to the most recent I recieved in various careers, I have garnered a diverse skillset that has given me a solid foundation to build on.
</p>
<p>
I hope you enjoy perusing my folio and I look forward to wokring with you in the future.
</p> -->
</div>
<!-- slider info -->
<footer class="about-footer">
<img src="/assets/svg/Aboutlower.svg" alt="An isometric image dipicting a small camp site with coral red tent and burning flame.">
</footer>
</div>
<!---------------------------------
Section 3: Projects
---------------------------------->
<div class="projects-page">
<header class="projects-header">
<img src=/assets/svg/projectsupper.svg alt="An isometric image dipicticing the moon breaking through a the clouds.">
</header>
<div class="projects-title">
<h1>Projects</h1>
</div>
<div class="projects-text">
<p>
Below you can see my most recent projects...
</p>
</div>
<footer class="projects-footer">
<img src="/assets/svg/projectlower-alt.svg" alt="this image depicts a moonlight cinema, rendered in an isometric design.">
</footer>
</div>
<!--
Section 4: Skills
-->
<div class="skills-page">
<header class="skills-header">
<img src="/assets/svg/skillsavatar.svg" alt="This isometric design depicts an adventurer with a backpack hoisted with mountaineering supplies.">
</header>
<div class="skills-title">
<h1>Skills</h1>
</div>
<div class="skills-text">
<p>
Earned through formal education and on the job training, my diverse skills set in design and full stack development have made me an agile developer that considers all aspects of the creative process. Keep scrolling to see my full tech stack.
</p>
</div>
</div>
<!-- Section 5: Stack Slider -->
<div class="stack-page">
<div class="stack-title">
<h1>Tech Stack</h1>
</header>
</div>
<div class="slider-1">
<img class"badge-1" src="assets/svg/badgeruby.svg" alt="a badge deoting skills for Ruby">
<img class"badge-2" src="assets/svg/badgerails.svg" alt="a badge deoting skills for Ruby on Rails">
<img class"badge-3" src="assets/svg/badgehtml.svg" alt="a badge deoting skills for HTML 5">
<img class"badge-4" src="assets/svg/badgecss.svg" alt="a badge deoting skills for CSS 3">
<img class"badge-5" src="assets/svg/badgereact.svg" alt="a badge deoting skills for React">
<img class"badge-6" src="assets/svg/badgemongo.svg" alt="a badge deoting skills for Mongo DB">
</div>
<!--
<div class="slider-2"
<img class"badge-7" src="assets/svg/badgenodejs.svg" alt="a badge deoting skills for Node JS">
<img class"badge-8" src="assets/svg/badgephotoshop.svg" alt="a badge deoting skills for Adobe Photoshop">
<img class"badge-9" src="assets/svg/badgeindesign.svg" alt="a badge deoting skills for Adobe InDesign">
<img class"badge-10" src="assets/svg/badgelightroom.svg" alt="a badge deoting skills for Adobe Lightroom">
<img class"badge-11" src="assets/svg/badgeillustrator.svg" alt="a badge deoting skills for Adobe Illustrator">
<img class"badge-12" src="assets/svg/badgephotography.svg" alt="a badge deoting skills for photography"> -->
</div>
<div class="slider-icon"></div>
</div>
<p>
</p>
</div>
<!-- Section 6: Contact -->
<div class="contact-page">
<div class="contact-title">
<h1>Get in Touch</h1>
</div>
<div class="contact-text">
<p>Whether you're looking for a contractor who can hit the ground running, or are on the hunt for a full stack dev 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">
<form class="contact" action="[email protected]" target="_blank" method="post">
<div id="contact-details">
<label>Name
<input type="text" name="user-name" id="user-name" placeholder="Please enter your name..." required>
</label>
<label>Email
<input type="email" name="email-address" placeholder="Please enter your email..." id="email-address">
</label>
<label>Phone
<input type="tel" name="phone" placeholder="Please enter your number..." id="phone">
</label>
</div>
<div id="comment-box">
<label>Message
<textarea name="message" placeholder="Please enter your message..." id="message" maxlength="500"></textarea>
</label>
</div>
<button>Submit</button>
</form>
</div>
<div 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>
</div>
</div>
</body>
</html>