/
index.html
197 lines (196 loc) · 12.3 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
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Font Awesome Icons -->
<script src="https://kit.fontawesome.com/e8a2e170d0.js" crossorigin="anonymous"></script>
<!-- Reset Style Sheet -> see file for more info -->
<link rel="stylesheet" href="assets/css/reset.css">
<!-- Custom Style Sheet -> see file for more info -->
<link rel="stylesheet" href="assets/css/style.css">
<!-- The most popular encoding scheme for it's compatibility, compact storing, flexibility, and efficiency -->
<meta charset="UTF-8">
<!-- Viewport controls how a web page is displayed on a mobile device. The tag tells the browser how to render the page on different screen sizes, such as desktop, tablet, and mobile. -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Meta description helps with SEO -->
<meta name="description" content="All the awesome work of Janet Webster, the amazing software engineer in training!">
<!-- The meta robots tag tells search engines how to crawl and index parts of a website. The "content" attribute contains instructions for the crawler. The values "INDEX" and "FOLLOW" are used to instruct the crawler to include the page in their index and follow all links on the page. -->
<meta name="robots" content="index, follow">
<!-- Title for SEO and displaying in the browser window/tab -->
<title>Janet Webster's Portfolio</title>
</head>
<body>
<header>
<section class="logo">
<!-- Font Awesome robot icon -->
<i class="fa-solid fa-robot"></i>
</section>
<nav>
<!-- navigation list items, #linked to their corresponding sections, aira-label to provide additional information about the element's purpose and functionality to assistive technologies, such as screen readers -->
<ul class="menu" id="nav-list">
<li><a href="#about" aria-label="Read more about me">About</a></li>
<li><a href="#skills" aria-label="Peruse my skills">Skills</a></li>
<li><a href="#work" aria-label="View my work">Work</a></li>
<li><a href="#contact" aria-label="Contact me">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section class="intro">
<div class="intro-titles">
<h1>Janet Webster</h1>
<!-- pop-up bubble when hovering that says "in training" -->
<h2><span class="in-training">Full Stack MERN Software Engineer</span></h2>
</div>
<!-- hidden code element to display on screens wider than 640px -->
<p class="hidden-code">Coding Stats: <br /><a href="https://wakatime.com/@Twixmixy" target="_blank"><img src="https://wakatime.com/badge/user/5829d3fb-d499-4e31-bed0-2d4b3e092db3.svg" alt="Total time coded since Jun 15 2023" /></a><br />
<a href="https://github.com/TwixmixyJanet" target="_blank" aria-label="Follow me on github"><i class="fa-brands fa-square-github"></i></a>
</p>
</section>
<section class="about" id="about">
<h2>About Me</h2>
<div class="info">
<h3>Greetings, <br />I'm Janet Webster.</h3>
<p>
<!-- pop-up bubble when hovering that says "in training" -->
<span class="in-training">I'm a Full Stack MERN Software Engineer.</span>
</p>
<p class="bio-info">
<!-- emojis added for some flair -->
📅📝👩💼 My background is in project management. I've been working in operations for over 8 years.
<!-- -Who I am professionally -->
</p>
<p class="bio-info">
👩🏻💻🛠️🚀I got into coding when I was a teenager and am now returning to my roots in all things nerdy.
<!-- -What led me to this career -->
</p>
<p class="bio-info">
🛼✌️🗳️Outside of work I like to play roller derby with Charlotte Roller Derby, coach women and girls with Foundation For Girls, and contribute to my local community by getting out the vote.
<!-- -What I like to do outside of work -->
</p>
</div>
<div class="headshot-container">
<img class="headshot" src="assets/img/coloradoheadshot.jpg" alt="Headshot - Janet smiling in an art exhibit" />
</div>
</section>
<section class="skills" id="skills">
<h2>Skills</h2>
<h3>Developer Skills</h3>
<div class="devskills">
<!-- Skills I have learned through self-teaching and front end dev track at Skillcrush -->
<p class="skill">HTML5</p>
<p class="skill">CSS3</p>
<p class="skill">Version Control</p>
<p class="skill">Flexbox</p>
<p class="skill">Media Queries</p>
<p class="skill">Responsive Typography</p>
<p class="skill">APIs</p>
<p class="skill">Manipulate the DOM</p>
<p class="skill">Vanilla JavaScript</p>
<p class="skill">ES6</p>
<p class="skill">JSX</p>
<p class="skill">Managing Data Flow</p>
<p class="skill">JS React</p>
<p class="skill">PHP</p>
</div>
<h3>Tech Stack</h3>
<div class="techskills">
<!-- Technologies I utilize for coding -->
<p class="tech">GIT/GitHub</p>
<p class="tech">Chrome/Firefox DevTools</p>
<p class="tech">Photoshop</p>
<p class="tech">CodeSandbox</p>
<p class="tech">Visual Studio Code</p>
<p class="tech">Cyberduck</p>
<p class="tech">WordPress</p>
</div>
</section>
<section class="work" id="work">
<!-- work cards grow/shrink and the first(main) project is larger than the rest -->
<h2>Work</h2>
<div class="work-container">
<!-- work-card used to apply visual changes to all projects -->
<!-- card1, etc. used to specify changes for individual projects as needed -->
<div class="work-card" id="card1">
<a href="https://twixmixyjanet.github.io/horiSEOn-accessibility-refactor/" target="_blank" rel="noopener noreferrer">
<h3>
<!-- Pop up description of projects for more information -->
<span card1-descr="This project was to take an existing site and refactor it to apply accessibility standards">
Accessibility Refactor
</span>
</h3>
<!-- project-screenshot used to apply styles to all project images -->
<img class="project-screenshot" src="assets/img/work-card1.png" alt="Refactor Project" />
</a>
</div>
<!-- project-list utilized to separate the the other 4 from the first main project -->
<section class="project-list">
<div class="work-card" id="card2">
<a href="https://github.com/TwixmixyJanet/Qif-Generator" target="_blank" rel="noopener noreferrer">
<h3>
<span card2-descr="This is a quote and giphy generator app based off an input keyword">
Qif - Quote & Giphy Generator
</span>
</h3>
<img class="project-screenshot" src="assets/img/work-card2.png" alt="Qif - Quote & Giphy Generator" />
</a>
</div>
<div class="work-card" id="card3">
<a href="https://critter-clicker-c6c973aed451.herokuapp.com/" target="_blank" rel="noopener noreferrer">
<h3>
<span card3-descr="A social media site to share pictures of your pets">
Critter Clicker
</span>
</h3>
<img class="project-screenshot" src="assets/img/work-card3.png" alt="Critter Clicker" />
</a>
</div>
<div class="work-card" id="card4">
<a href="https://twixmixy.com/github-repo-gallery-main/" target="_blank" rel="noopener noreferrer">
<h3>
<span card4-descr="This github repo gallery UI app was created to illustrate APIs and JS">
GitHub Repo Gallery
</span>
</h3>
<img class="project-screenshot" src="assets/img/work-card4.png" alt="GITHUB REPO GALLERY" />
</a>
</div>
<div class="work-card" id="card5">
<a href="https://0cntbd.csb.app/" target="_blank" rel="noopener noreferrer">
<h3>
<span card4-descr="This name tag generator app was created to illustrate JS/React utilizing local cache">
Name Tag Generator
</span>
</h3>
<img class="project-screenshot" src="assets/img/work-card5.png" alt="Name Tag Generator" />
</a>
</div>
</section>
</div>
</section>
</main>
<footer id="contact">
<h2>Contact</h2>
<address>
<!-- preference to not have activated/linked contact info to deter potential spam -->
<p>(sevenFourZero) 236-2879<br>
twixmixy [AT] gmail.com</p>
</address>
<!-- social added to apply specific settings that wouldn't affect the whole footer -->
<div class="social">
<h2>Social</h2>
<div class="social-icons">
<p class="icon"><a href="https://github.com/TwixmixyJanet" target="_blank" aria-label="Follow me on github"><i class="fa-brands fa-square-github"></i></a></p>
<p class="icon"><a href="https://www.instagram.com/pigletskates/" target="_blank" aria-label="Follow me on insta"><i class="fa-brands fa-square-instagram"></i></a></p>
<p class="icon"><a href="https://www.linkedin.com/in/twixmixy" target="_blank" aria-label="Follow me on linkedin"><i class="fa-brands fa-linkedin"></i></a></p>
<p class="icon"><a href="https://twitter.com/Twixmixy" target="_blank" aria-label="Follow me on twitter"><i class="fa-brands fa-square-twitter"></i></a></p>
<p class="icon"><a href="https://www.goodreads.com/user/show/36880494-janet-webster" target="_blank" aria-label="Follow me on goodreads"><i class="fa-brands fa-goodreads"></i></a></p>
<p class="icon"><a href="https://twixmixy.substack.com/" target="_blank" aria-label="Follow me on substack"><i class="fa-solid fa-pen-to-square"></i></a></p>
<p class="icon"><a href="https://discordapp.com/users/Janet#8842" target="_blank" aria-label="Connect with me on discord"><i class="fa-brands fa-discord"></i></a></p>
</div>
</div>
<div class="copyright">
<p>Copyright Ⓒ 2023 | Janet Webster</p>
</div>
</footer>
</body>
</html>