first commit
This commit is contained in:
BIN
fonts/IBMPlexMono.ttf
Normal file
BIN
fonts/IBMPlexMono.ttf
Normal file
Binary file not shown.
BIN
img/favicon.ico
Normal file
BIN
img/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
img/hashtagopenweb.png
Normal file
BIN
img/hashtagopenweb.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 80 KiB |
BIN
img/icon.png
Normal file
BIN
img/icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 112 B |
BIN
img/initialcharge.png
Normal file
BIN
img/initialcharge.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 262 KiB |
BIN
img/instagram.png
Normal file
BIN
img/instagram.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
BIN
img/mastodon.png
Normal file
BIN
img/mastodon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
BIN
img/mdrockwell.png
Normal file
BIN
img/mdrockwell.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 237 KiB |
BIN
img/microblog.png
Normal file
BIN
img/microblog.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.8 KiB |
BIN
img/pixelfed.png
Normal file
BIN
img/pixelfed.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
BIN
img/portrait.jpeg
Normal file
BIN
img/portrait.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 527 KiB |
BIN
img/twitter.png
Normal file
BIN
img/twitter.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.2 KiB |
96
index.html
Normal file
96
index.html
Normal file
@@ -0,0 +1,96 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
<title>Mike Rockwell — Résumé</title>
|
||||
<link rel="stylesheet" type="text/css" href="style.css?ver=1.0" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="shortcut icon" href="img/icon.png">
|
||||
<link rel="apple-touch-icon" href="img/icon.png">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<a href="/resume/"><img src="img/portrait.jpeg" alt="Mike Rockwell"></a>
|
||||
<div class="title">
|
||||
<h1>Hi, I'm <span class="bold">Mike</span></h1>
|
||||
<h2>I make <a href="#portfolio">websites</a>.</h2>
|
||||
</div>
|
||||
</header>
|
||||
<div class="divider">
|
||||
</div>
|
||||
<div class="bio">
|
||||
<p>Based in Upstate New York, I'm a designer that builds clean, responsive websites to help businesses and individuals reach their audience online.</p>
|
||||
<p>I have over seven years of <a href="#experience">experience</a> working in a distributed work environment, supporting software used by millions of monthly active users.</p>
|
||||
<div class="callout"><a href="#contact">Contact Me</a></div>
|
||||
</div>
|
||||
<div class="divider">
|
||||
</div>
|
||||
<div id="portfolio">
|
||||
<div class="portfolio-left">
|
||||
<img src="img/initialcharge.png" alt="Initial Charge">
|
||||
<div class="portfolio-description">
|
||||
<h3><a href="https://initialcharge.net" title="Initial Charge">Initial Charge</a></h3>
|
||||
<p>Built on <a href="https://wordpress.org/">WordPress</a> using <a href="https://validator.w3.org/nu/?doc=https%3A%2F%2Finitialcharge.net%2F" title="HTML Validator">valid HTML</a> and <a href="https://jigsaw.w3.org/css-validator/validator?uri=initialcharge.net%2Fwp-content%2Fthemes%2Frecharge%2Fstyle.css&profile=css3svg&usermedium=all&warning=1&vextwarning=&lang=en" title="CSS Validator">CSS</a>. The design is fully responsive — making use of media queries and fluid widths to keep elements looking great on mobile and desktop browsers. The homepage and <a href="https://initialcharge.net/archive/">archive page</a> are displayed using custom loops to keep content organized.</p>
|
||||
|
||||
<p>Images in posts expand beyond their containing element on mobile displays to aid in visibility and create a compelling effect. The sidebar collapses into the site's design when viewed on mobile — placing navigation under the header and the single display ad below the first post on the page.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="portfolio-right">
|
||||
<img src="img/hashtagopenweb.png" alt="#OpenWeb">
|
||||
<div class="portfolio-description">
|
||||
<h3><a href="http://hashtagopenweb.net" title="#OpenWeb">#OpenWeb</a></h3>
|
||||
<p>Built on <a href="https://wordpress.org/">WordPress</a> as a directory of independent web publishers.</p>
|
||||
|
||||
<p>The site’s layout was built in CSS flexbox. On larger displays, each site is displayed in a card-like container using a subtle drop shadow. The mobile-only hamburger menu is built in pure HTML and CSS — no JavaScript necessary — and the <a href="http://hashtagopenweb.net/suggest/">Suggest a Site page</a> is built on the <a href="https://wordpress.org/plugins/contact-form-7/">Contact Form 7</a> WordPress plugin.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="portfolio-left">
|
||||
<img src="img/mdrockwell.png" alt="mdrockwell.net">
|
||||
<div class="portfolio-description">
|
||||
<h3><a href="http://mdrockwell.net/portfolio" title="mdrockwell.net/portfolio">mdrockwell.net/resume</a></h3>
|
||||
<p>This webpage was built using valid HTML and CSS, written entirely in <a href="https://panic.com/coda-ios/" title="Coda by Panic">Coda for iOS</a>. It was designed to be small in size, ensuring that it will load quickly on just about any internet connection.</p>
|
||||
<p>The layout was created using CSS flexbox and the design utilizes transitions to give life to interactive elements. The contact form below is built on <a href="https://formspree.io/" title="Formapree">Formspree</a> — allowing visitors to send notes, comments, and inquiries without the need to host my own code which would provide that functionality.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="divider">
|
||||
</div>
|
||||
<div id="experience">
|
||||
<h3>Experience</h3>
|
||||
<ul>
|
||||
<li><strong>Pocket Casts Product Liaison, <a href="https://automattic.com/">Automattic</a>; 2024 — Present</strong>
|
||||
<p>Collaborated with other Product Liaisons to monitor for <a href="https://www.pocketcasts.com/">Pocket Casts</a> app updates, prepare Happiness Engineers to support new features, provided feedback to development teams, track trends in support tickets, and contribute to internal and public documentation.</p></li>
|
||||
<li><strong>Happiness Engineer, <a href="https://automattic.com/">Automattic</a>; Remote — 2018–Present</strong>
|
||||
<p>Supported users of <a href="https://wordpress.com/">WordPress.com</a>, <a href="https://apps.wordpress.com/mobile/">WordPress Mobile</a>, <a href="https://simplenote.com/">Simplenote</a>, <a href="https://woocommerce.com/mobile/">WooCommerce Mobile</a>, <a href="https://jetpack.com/mobile/">Jetpack Mobile</a>, <a href="https://dayoneapp.com/">Day One</a>, and <a href="https://www.pocketcasts.com/">Pocket Casts</a> through email, live chat, and community forums. Regularly tested software updates and submitted bug reports and feature requests. Assisted in the onboarding of new employees with trainings on support tools, best practices, and offered feedback on support interactions.</p></li>
|
||||
<li><strong>Woo Mobile Product Liaison, <a href="https://automattic.com/">Automattic</a>; Remote — 2023</strong>
|
||||
<p>Collaborated with other Product Liaisons to monitor updates to the <a href="https://woocommerce.com/mobile/">WooCommerce mobile app</a>, prepare Happiness Engineers to support new features, provided timely feedback to development teams, contribute to internal and public documentation, and publish regular reports on support trends.</p></li>
|
||||
<li><strong>Product Ambassador, <a href="https://automattic.com/">Automattic</a>; Remote — 2021–2023</strong>
|
||||
<p>Facilitated communication between the mobile support team and app development teams to prepare for the impact of newly released features and effectively communicated feedback from users after launch.</p></li>
|
||||
<li><strong>Merchandise Manager, <a href="https://www.dollartree.com/">Dollar Tree</a>; Elmira, NY — 2017–2018</strong>
|
||||
<p>Managed freight processing and supervised a team of three to four stockers as they replenish store shelves after hours. Unloaded trucks, received deliveries, made bank deposites and change runs, and assisted the store manager in supervising and managing cashiers.</p></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="divider">
|
||||
</div>
|
||||
<div id="contact">
|
||||
<p>I'd love to work with you on your web projects. If you're interested, feel free to get in touch:</p>
|
||||
<form action="https://formspree.io/mike@initialcharge.net" method="POST" id="contact-form">
|
||||
<input type="text" id="contact-name" class="field" name="name" placeholder="Name" required maxlength="255">
|
||||
<input type="email" id="contact-email" class="field" name="email" placeholder="Email" required maxlength="255">
|
||||
<input type="hidden" name="_subject" value="Message from mdrockwell.net" />
|
||||
<textarea id="contact-message" class="full-field" name="message" placeholder="Message" required spellcheck="true"></textarea>
|
||||
<input type="submit" id="contact-send" value="Send">
|
||||
<input type="hidden" name="_next" value="http://mdrockwell.net/resume/thanks.html" />
|
||||
</form>
|
||||
<!-- <div class="elsewhere">
|
||||
<a href="https://libertynode.net/@mike" rel="me"><img src="img/mastodon.png" alt="Mastodon"></a>
|
||||
<a href="https://libertynode.cam/mike" rel="me"><img src="img/pixelfed.png" alt="Pixelfed"></a>
|
||||
</div> -->
|
||||
</div>
|
||||
<div class="divider"></div>
|
||||
<footer>
|
||||
<p>Copyright © 2018–2025 <a href="https://mdrockwell.net/">Mike Rockwell</a></p>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
297
style.css
Normal file
297
style.css
Normal file
@@ -0,0 +1,297 @@
|
||||
@font-face {
|
||||
font-family: "IBM Plex Mono";
|
||||
src: url(fonts/IBMPlexMono.ttf);
|
||||
}
|
||||
/*
|
||||
Colors:
|
||||
Blue Background: #152638
|
||||
White Text: #f8f9f2
|
||||
Green Links: #00eb39
|
||||
Hover and Accent: #f1ca55
|
||||
Gray Text: #838c95
|
||||
Purple Callout: #6f4ebc
|
||||
*/
|
||||
|
||||
html {
|
||||
background: #152638;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "IBM Plex Mono", monospace;
|
||||
font-weight: 400;
|
||||
width: 90%;
|
||||
margin: 0 auto;
|
||||
color: #f8f9f2;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 1.8em;
|
||||
margin-top: 1em;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.6em;
|
||||
margin-top: 0em;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
margin-top: 3em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
header img {
|
||||
width: 10em;
|
||||
border-radius: 100%;
|
||||
box-shadow: 1px 1px 10px 1px rgba(0,0,0,.5);
|
||||
transition: transform .5s;
|
||||
}
|
||||
|
||||
header img:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.thanks {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.thanks-return {
|
||||
margin-top: 4em;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #00eb39;
|
||||
text-decoration: none;
|
||||
transition: color .5s ease-out;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #f1ca55;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.bold {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.divider {
|
||||
width: 98%;
|
||||
border-bottom: 1px solid rgba(241, 202, 85, .5);
|
||||
margin: 3em auto 3em;
|
||||
}
|
||||
|
||||
.bio, #contact, #questionnaire {
|
||||
max-width: 580px;
|
||||
margin: 0 auto 3em;
|
||||
}
|
||||
|
||||
.bio p {
|
||||
margin-bottom: 1.6em;
|
||||
}
|
||||
|
||||
.callout {
|
||||
background: #6f4ebc;
|
||||
width: 7.5em;
|
||||
height: 1.7em;
|
||||
margin: 0 auto;
|
||||
font-size: 1.1em;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: .25em;
|
||||
box-shadow: 1px 1px 10px rgba(0,0,0,.5);
|
||||
}
|
||||
|
||||
.callout:hover {
|
||||
background: rgba(111, 78, 188, .8);
|
||||
transform: scale(1.1);
|
||||
transition: transform .5s;
|
||||
}
|
||||
|
||||
.callout a {
|
||||
color: #f8f9f2;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.callout:hover a {
|
||||
color: rgba(248, 249, 242, .8);
|
||||
}
|
||||
|
||||
#portfolio img {
|
||||
max-width: 111.11%;
|
||||
margin: 0 -5.55%;
|
||||
}
|
||||
|
||||
.portfolio-left, .portfolio-right {
|
||||
margin-top: 3em;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: square;
|
||||
}
|
||||
|
||||
#experience {
|
||||
max-width: 768px;
|
||||
margin: 0 auto 3em;
|
||||
}
|
||||
|
||||
#contact-form, #questionnaire-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-top: 3em;
|
||||
}
|
||||
|
||||
form input, form textarea {
|
||||
font-family: "IBM Plex Mono", monospace;
|
||||
font-size: 1em;
|
||||
margin-bottom: 1.5em;
|
||||
color: #f8f9f2;
|
||||
border-radius: .25em;
|
||||
}
|
||||
|
||||
.field, .full-field {
|
||||
border: 1px solid #838c95;
|
||||
background: none;
|
||||
-webkit-appearance: none;
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
.field:focus, .full-field:focus {
|
||||
border: 1px solid #f1ca55;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.field {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.full-field {
|
||||
height: 10em;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
#client-address {
|
||||
height: 5em;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
label {
|
||||
margin-bottom: .5em;
|
||||
}
|
||||
|
||||
.fieldset {
|
||||
margin-top: 2em;
|
||||
}
|
||||
|
||||
#contact-send, #client-send {
|
||||
-webkit-appearance: none;
|
||||
width: 7em;
|
||||
height: 1.7em;
|
||||
border-radius: .25em;
|
||||
background: #6f4ebc;
|
||||
font-size: 1.1em;
|
||||
box-shadow: 1px 1px 10px rgba(0,0,0,.5);
|
||||
border: none;
|
||||
}
|
||||
|
||||
#contact-send:hover, #client-send:hover {
|
||||
background: rgba(111, 78, 188, .8);
|
||||
transform: scale(1.1);
|
||||
transition: transform .5s;
|
||||
color: rgba(248, 249, 242, .8);
|
||||
}
|
||||
|
||||
.elsewhere {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 2em;
|
||||
}
|
||||
|
||||
.elsewhere img {
|
||||
height: 2.5em;
|
||||
width: 2.5em;
|
||||
margin: 0 1.5em;
|
||||
filter: invert(1);
|
||||
}
|
||||
|
||||
.elsewhere img:hover {
|
||||
transform: scale(1.1);
|
||||
transition: transform .5s;
|
||||
}
|
||||
|
||||
footer p {
|
||||
text-align: center;
|
||||
color: #838c95;
|
||||
margin-bottom: 3em;
|
||||
font-size: .9em;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 550px) {
|
||||
header {
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin-left: 3em;
|
||||
}
|
||||
|
||||
.divider {
|
||||
margin-top: 3em;
|
||||
width: 485px;
|
||||
}
|
||||
|
||||
#portfolio img {
|
||||
max-width: 100%;
|
||||
margin: 0 0;
|
||||
}
|
||||
|
||||
.field {
|
||||
width: 55%;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 700px) {
|
||||
body {
|
||||
max-width: 1024px;
|
||||
}
|
||||
|
||||
.portfolio-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#portfolio img {
|
||||
width: 45%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.portfolio-left .portfolio-description {
|
||||
margin-left: 2em;
|
||||
}
|
||||
|
||||
.portfolio-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
.portfolio-right .portfolio-description {
|
||||
margin-right: 2em;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 900px) {
|
||||
#portfolio img {
|
||||
width: 52%;
|
||||
}
|
||||
|
||||
.portfolio-right, .portfolio-left {
|
||||
margin-top: 4em;
|
||||
}
|
||||
}
|
||||
25
thanks.html
Normal file
25
thanks.html
Normal file
@@ -0,0 +1,25 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
<title>Thank you!</title>
|
||||
<link rel="stylesheet" type="text/css" href="style.css" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="shortcut icon" href="img/favicon.ico">
|
||||
<link rel="apple-touch-icon" href="img/touch-icon.png">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
</header>
|
||||
<div class="thanks">
|
||||
<h1>Thank you!</h1>
|
||||
<h2>Expect a response soon.</h2>
|
||||
<a href="/resume/" title="Résumé" class="thanks-return">Return to Résumé</a>
|
||||
</div>
|
||||
<div class="divider">
|
||||
</div>
|
||||
<footer>
|
||||
<p>Copyright © 2018–2025 <a href="https://mdrockwell.net/">Mike Rockwell</a></p>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user