-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
175 lines (152 loc) · 6.96 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
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- FontAwesome CDN -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
<title>Nikki Peel</title>
</head>
<body>
<!-- Mobile Nav -->
<nav class="navbar sticky-top d-lg-none navbar-dark bg-dark">
<div class="navbar-brand d-flex-column">Nikki Peel</div>
<button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarText"
aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span id="icon" class="navbar-toggler-icon fas fa-bars">
</span>
</button>
<div class="collapse navbar-collapse text-center" id="navbarText">
<ul class="navbar-nav mx-auto mb-4">
<li class="nav-item active">
<a class="nav-link" href="index.html">About<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="education.html">Education</a>
</li>
<li class="nav-item">
<a class="nav-link" href="works.html">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
</ul>
<img src="img/selfie.jpg" alt="">
<h1 class="pt-4">Nikki Peel</h1>
<p>Front End Developer</p>
<p id="resume-mobile"><a href="nikkipeel.pdf"><i class="fas fa-download"></i> Download Resume</a></p>
<ul class="nav row p-0 mt-4" id="social-mobile">
<li class="col-sm-6 nav-item">
<a class="nav-link" href="mailto:nikkipeel.dev@gmail.com"><i class="fas fa-envelope"></i> Email Me
</a>
</li>
<li class="col-sm-6 nav-item">
<a class="nav-link" href="https://www.linkedin.com/in/nikkipeel"><i class="fab fa-linkedin"></i> LinkedIn
</a>
</li>
<li class="col-sm-6 nav-item">
<a class="nav-link" href="https://www.github.com/nikkipeel"><i class="fab fa-github"></i> Github
</a>
</li>
<li class="col-sm-6 nav-item">
<a class="nav-link" href="https://www.codepen.io/nikki-peel"><i class="fab fa-codepen"></i> Codepen
</a>
</li>
</ul>
</div>
</nav>
<div class="container-fluid">
<div class="row m-0">
<nav class="col-lg-3 d-none d-lg-block p-0 sidebar text-white">
<div class="sidebar-sticky">
<div class="nav-header text-center">
<img id="sidebar-img" src="img/selfie.jpg" alt="">
<h1>Nikki Peel</h1>
<p>Front End Developer</p>
<p id="resume"><a href="nikkipeel.pdf"><i class="fas fa-download"></i> Download Resume</a></p>
</div>
<ul class="nav flex-column mx-auto pb-4 text-center">
<li class="nav-item active">
<a class="nav-link" href="index.html">About
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="education.html">Education
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="works.html">Portfolio
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact
</a>
</li>
</ul>
<p class="text-center p-4">Thank you for visiting my portfolio!</p>
<ul class="nav" id="social">
<li class="nav-item">
<a class="nav-link" href="mailto:nikkipeel.dev@gmail.com"><i class="fas fa-envelope"></i> Email Me
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://www.linkedin.com/in/nikkipeel"><i class="fab fa-linkedin"></i> LinkedIn
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://www.github.com/nikkipeel"><i class="fab fa-github"></i> Github
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://www.codepen.io/nikki-peel"><i class="fab fa-codepen"></i> Codepen
</a>
</li>
</ul>
</div>
</nav>
<main role="main" class="col-md-8 m-auto p-4">
<div id="about" class="p-4 text-right">
<h1>Hi there!</h1>
<p class="pt-4">My name is Nikki and I'm a Web Developer. I love creating responsive, accessible websites using a variety of tools. I'm well-versed in HTML, CSS, Javascript (including React and jQuery), Wordpress, and CSS frameworks such as Tailwind, Bootstrap, and Google's Materialize. I use Adobe products such as XD, Photoshop, and Illustrator for creating wireframes, editing, and image optimization. </p>
<p> As a disabled woman, I strive to design and develop websites with accessibility at the forefront. I utilize automated tools in my workflow to test for accessibility as well as manual testing for compliance with WCAG standards.
</p>
<p>On most days, I can be found working on my current projects, creating new designs on Codepen, adding content to my blogs and learning new technologies. I'm currently seeking remote opportunities to contribute my skills and would love to collaborate with you/your team on your web project(s). Thank you for visiting my portfolio!</p>
<div class="buttons mt-4">
<a href="works.html"><button class="m-2 p-2 btn">View Portfolio</button></a>
<a href="contact.html"><button class="m-2 p-2 btn">Contact Me</button></a>
</div>
</div>
</div>
</div>
</div>
</main>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script
src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"
></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
crossorigin="anonymous"></script>
<script>
let icon = document.getElementById('icon');
icon.addEventListener('click', function(){
icon.classList.toggle('fa-times');
icon.classList.toggle('fa-bars');
});
</script>
</body>
</html>