commit 54c306466e0812b120cdba458dec62703db850e5 Author: Mike Rockwell Date: Fri Jul 18 10:34:44 2025 -0400 first commit diff --git a/fonts/IBMPlexMono.ttf b/fonts/IBMPlexMono.ttf new file mode 100644 index 0000000..81ca3dc Binary files /dev/null and b/fonts/IBMPlexMono.ttf differ diff --git a/img/favicon.ico b/img/favicon.ico new file mode 100644 index 0000000..5949566 Binary files /dev/null and b/img/favicon.ico differ diff --git a/img/hashtagopenweb.png b/img/hashtagopenweb.png new file mode 100644 index 0000000..7538bbd Binary files /dev/null and b/img/hashtagopenweb.png differ diff --git a/img/icon.png b/img/icon.png new file mode 100644 index 0000000..c96733f Binary files /dev/null and b/img/icon.png differ diff --git a/img/initialcharge.png b/img/initialcharge.png new file mode 100644 index 0000000..4b7a917 Binary files /dev/null and b/img/initialcharge.png differ diff --git a/img/instagram.png b/img/instagram.png new file mode 100644 index 0000000..c5887b0 Binary files /dev/null and b/img/instagram.png differ diff --git a/img/mastodon.png b/img/mastodon.png new file mode 100644 index 0000000..b5d7d38 Binary files /dev/null and b/img/mastodon.png differ diff --git a/img/mdrockwell.png b/img/mdrockwell.png new file mode 100644 index 0000000..a90a5a3 Binary files /dev/null and b/img/mdrockwell.png differ diff --git a/img/microblog.png b/img/microblog.png new file mode 100644 index 0000000..8829d84 Binary files /dev/null and b/img/microblog.png differ diff --git a/img/pixelfed.png b/img/pixelfed.png new file mode 100644 index 0000000..08250c3 Binary files /dev/null and b/img/pixelfed.png differ diff --git a/img/portrait.jpeg b/img/portrait.jpeg new file mode 100644 index 0000000..12307b3 Binary files /dev/null and b/img/portrait.jpeg differ diff --git a/img/twitter.png b/img/twitter.png new file mode 100644 index 0000000..aba5e40 Binary files /dev/null and b/img/twitter.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..ea70c59 --- /dev/null +++ b/index.html @@ -0,0 +1,96 @@ + + + + + Mike Rockwell — Résumé + + + + + + +
+ Mike Rockwell +
+

Hi, I'm Mike

+

I make websites.

+
+
+
+
+
+

Based in Upstate New York, I'm a designer that builds clean, responsive websites to help businesses and individuals reach their audience online.

+

I have over seven years of experience working in a distributed work environment, supporting software used by millions of monthly active users.

+
Contact Me
+
+
+
+
+
+ Initial Charge +
+

Initial Charge

+

Built on WordPress using valid HTML and CSS. 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 archive page are displayed using custom loops to keep content organized.

+ +

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.

+
+
+
+ #OpenWeb +
+

#OpenWeb

+

Built on WordPress as a directory of independent web publishers.

+ +

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 Suggest a Site page is built on the Contact Form 7 WordPress plugin.

+
+
+
+ mdrockwell.net +
+

mdrockwell.net/resume

+

This webpage was built using valid HTML and CSS, written entirely in Coda for iOS. It was designed to be small in size, ensuring that it will load quickly on just about any internet connection.

+

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 Formspree — allowing visitors to send notes, comments, and inquiries without the need to host my own code which would provide that functionality.

+
+
+
+
+
+
+

Experience

+ +
+ +
+
+
+

I'd love to work with you on your web projects. If you're interested, feel free to get in touch:

+
+ + + + + + +
+ +
+
+ + + diff --git a/readme.md b/readme.md new file mode 100644 index 0000000..e69de29 diff --git a/style.css b/style.css new file mode 100644 index 0000000..032fc85 --- /dev/null +++ b/style.css @@ -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; + } +} diff --git a/thanks.html b/thanks.html new file mode 100644 index 0000000..2cca8c0 --- /dev/null +++ b/thanks.html @@ -0,0 +1,25 @@ + + + + + Thank you! + + + + + + +
+
+
+

Thank you!

+

Expect a response soon.

+ Return to Résumé +
+
+
+ + +