diff --git a/css/index.css b/css/index.css index 7dd97920d..844026178 100644 --- a/css/index.css +++ b/css/index.css @@ -1 +1,284 @@ -/* Compile your LESS file! */ \ No newline at end of file +/* http://meyerweb.com/eric/tools/css/reset/ + v2.0 | 20110126 + License: none (public domain) +*/ +html, +body, +div, +span, +applet, +object, +iframe, +h1, +h2, +h3, +h4, +h5, +h6, +p, +blockquote, +pre, +a, +abbr, +acronym, +address, +big, +cite, +code, +del, +dfn, +em, +img, +ins, +kbd, +q, +s, +samp, +small, +strike, +strong, +sub, +sup, +tt, +var, +b, +u, +i, +center, +dl, +dt, +dd, +ol, +ul, +li, +fieldset, +form, +label, +legend, +table, +caption, +tbody, +tfoot, +thead, +tr, +th, +td, +article, +aside, +canvas, +details, +embed, +figure, +figcaption, +footer, +header, +hgroup, +menu, +nav, +output, +ruby, +section, +summary, +time, +mark, +audio, +video { + margin: 0; + padding: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} +/* HTML5 display-role reset for older browsers */ +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +menu, +nav, +section { + display: block; +} +body { + line-height: 1; +} +ol, +ul { + list-style: none; +} +blockquote, +q { + quotes: none; +} +blockquote:before, +blockquote:after, +q:before, +q:after { + content: ''; + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; +} +/* Set every element's box-sizing to border-box */ +* { + box-sizing: border-box; + font-size: 62.5%; +} +html, +body { + height: 100%; +} +@font-face { + font-family: 'Noto Sans TC'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: local('Noto Sans TC Regular'), local('NotoSansTC-Regular'), url(https://fonts.gstatic.com/s/notosanstc/v9/-nF7OG829Oofr2wohFbTp9i1OCEJ.otf) format('opentype'); +} +.Intro-section { + display: flex; + justify-content: center; + align-items: center; + max-width: 85%; + margin: 0 auto; +} +@media (max-width: 500px) { + .Intro-section { + max-width: 90%; + flex-direction: column; + align-items: center; + justify-content: center; + } +} +@media (max-width: 500px) { + .Intro-section .right { + display: flex; + flex-direction: column; + align-items: center; + margin: 30px 0 0 0; + } +} +@media (max-width: 500px) { + .Intro-section .left { + display: flex; + flex-direction: column; + align-items: center; + } +} +a { + color: #D4AC0D; + text-decoration: none; +} +a:hover { + text-decoration: underline; +} +body { + font-family: 'Noto Sans TC', sans-serif; +} +body p { + font-size: 1.5rem; + display: flex; + margin: 30px 90px; + line-height: 1.3; +} +@media (max-width: 500px) { + body p { + font-size: 1.1rem; + margin: 10px 30px; + max-width: 100%; + } +} +h1 { + font-size: 3.5rem; + color: #4A235A; +} +@media (max-width: 500px) { + h1 { + font-size: 2.5rem; + } +} +h2 { + font-size: 2rem; + color: #4A235A; + margin: 0 60px; +} +@media (max-width: 500px) { + h2 { + font-size: 1.5rem; + margin: 0 20px; + } +} +h3 { + font-size: 1rem; +} +hr { + margin: 60px auto; +} +header { + margin: 40px auto; + display: flex; + justify-content: center; +} +@media (max-width: 500px) { + header { + display: flex; + margin: 10px auto; + } +} +nav { + font-size: 2rem; + color: #D4AC0D; + display: flex; + width: 80%; + justify-content: space-evenly; + margin: 20px auto; +} +@media (max-width: 500px) { + nav { + display: flex; + flex-direction: column; + align-items: center; + border-bottom: 1px solid gray; + font-size: 1.5rem; + } +} +@media (max-width: 500px) { + nav a { + display: flex; + border-top: 1px solid gray; + width: 100%; + justify-content: center; + margin: 5px auto; + } +} +.PlaySay-section, +.Salesforce-section { + display: flex; + flex-direction: column; + text-align: left; + margin: 20px auto; +} +.Lambda-section { + margin: 20px auto; +} +.Lambda-section img { + display: block; + margin-left: auto; + margin-right: auto; + width: 50%; +} +@media (max-width: 500px) { + .Lambda-section img { + width: 75%; + } +} +footer { + display: flex; + justify-content: center; +} diff --git a/favicon.ico b/favicon.ico new file mode 100644 index 000000000..6145c80cf Binary files /dev/null and b/favicon.ico differ diff --git a/images/RyanMeinzer.jpg b/images/RyanMeinzer.jpg new file mode 100644 index 000000000..029bdd8a7 Binary files /dev/null and b/images/RyanMeinzer.jpg differ diff --git a/images/tech-trifecta.png b/images/tech-trifecta.png new file mode 100644 index 000000000..182390443 Binary files /dev/null and b/images/tech-trifecta.png differ diff --git a/index.html b/index.html index a7f9e3ad1..cb8224a30 100644 --- a/index.html +++ b/index.html @@ -4,16 +4,124 @@ - My Resume + Ryan Meinzer - 'The Tech Trifecta' - + + + -

My Resume

+ +
+

Ryan Meinzer

+
+
+ +
+
+
+
+ Ryan Meinzer Picture +

LinkedIn

+
+
+

At PlaySay, I created a #1 ranked iPhone App that was acquired by Babbel. At Salesforce, I was the #1 ranked Sales rep. At Flatiron School, I am learning full stack engineering to get 'the tech trifecta' of Product, Sales and Engineering under my belt.

+
+
+
+
+

Engineering

+

Skills from ongoing education: HTML, Advanced CSS, Advanced Javascript, React, Ruby

+

At Flatiron School, I am learning full stack engineering to get 'the tech trifecta' of Product, Sales and Engineering under my belt.

+ The Tech Trifecta +

+ Ruby, OO, AR & CLI 'Shred It' Project +

+

+ This project's purpose was to demonstrate my proficiency by creating a game from scratch in the Command Line Interface using Ruby, Object Orientation and Active Record.
+ • It was built in object-oriented programming using joined database tables with SQL, relationships and CRUD actions with Active Record and conditional logic amid class and instance methods with Ruby.
+ • My role was to design and to build the entire application from scratch.
+

+

+ HTML & CSS 'RVbnb' Project +

+

+ This project's purpose was to demonstrate my proficiency by working with a group of students cross-functionally to deliver a minimum viable product (MVP) over the course of the week.
+ • It was built using user interface, Git, responsive design, pre-processors and javascript fundamentals.
+ • My role was the User Interface Developer, responsible for the entire website's front end.
+

+

+ Applied Javascript 'Newspaper' Project +

+

+ This project's purpose was to demonstrate my proficiency by creating an online newspaper.
+ • It was built using the DOM, the concept of components, HTTP GET requests and the axios library.
+ • My role was to piece together the online newspaper with everything I had learned to-date.
+

+

+ Ruby 'Tic Tac Toe' Project +

+

+ This project's purpose was to demonstrate my proficiency by creating a Tic Tac Toe game in the Command Line Interface (CLI).
+ • It was built in a procedural interface using data structures, variables, conditional logic, loops, arrays, iteration and helper methods within the Tic Tac Toe application all coded to the main executable file to run the game in the CLI.
+ • My role was to build the entire application.
+

+ +
+
+
+

Sales

+

Skills from Salesforce: Involved with the planning, design, development, release and optimization of software development with a majority of the most modern web technologies on Heroku.

+

+ ► Attained >200% of quota and ranked the #1 sales representative of 3 - 15 person ramped team from 2013 - 2015 (Salesforce's Heroku Division) +

+

+ 👑 #1 ranked rep of the 15 person ramped team Q1 & Q2 of 2015 (210% annualized quota)
+ 👑 #1 ranked rep of the 15 person ramped team of 2014 (287% quota)
+ 🏆 Voted the MVP of 2014 by the 15 person ramped team
+ 👑 #1 ranked rep of the three person ramped team of 2013 (202% quota) +

+

+ • Attained 210% of annualized quota in 2015, 287% of quota in 2014 and 202% of quota in 2013
+ • Developed, sold and supported products with cross-functional teams including runtime, routing, API, languages, data services, security, operations, partners, enterprise, marketing and support
+ • Continually improved sales process through multivariate testing of my gamification techniques that increased customers' probability of implementing my technical optimization advice by 130%.
+ • Clients included the President's barackobama.com, Facebook's internet.org, BitTorrent's P2P network, Pebble's smartwatch, Snoop Dogg's merryjane.com and Citrix's GoToMeeting
+

+
+
+
+

Product

+

Skills from PlaySay: iOS, Facebook API, Ruby on Rails, MySQL

+

+ ⭐ "Making learning a language fun" - The Wall Street Journal
+ ⭐ "An educational/business force to be reckoned with" - TechCrunch
+ ⭐ "Enabling a conversational language learning experience" - The New York Times
+ ⭐ "New & Noteworthy" - The Apple App Store
+

► Generated recurring revenue, increased valuation of the business to $2M then sold to Babbel

+

• Raised $800K in VC from the most active VC in the Education space of the USA
+ • Closed enterprise deals with McGraw-Hill, HarperCollins and 30 universities
+ • Oversaw key vertical analysis and P&L to ultimately increase repeat purchases by 200% YoY
+ • Captured 18% of target market in Japan via SEO, page optimization and SEM with a 60% ROI
+ • Directed marketing, advertising, promotion and PR to acquire 100K users
+ • Launched as TechCrunch Disrupt Finalists with 3K attendees and 250K online viewers (video below)
+ • Led strategy, product development and launch of a #1 ranked iPhone app in USA & 10 countries
+

+
+
+ + \ No newline at end of file diff --git a/less/index.less b/less/index.less index 191ce142e..7d5e5d7e1 100644 --- a/less/index.less +++ b/less/index.less @@ -19,7 +19,7 @@ menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; - border: 0; + // border: 0; font-size: 100%; font: inherit; vertical-align: baseline; @@ -50,10 +50,180 @@ table { /* Set every element's box-sizing to border-box */ * { - box-sizing: border-box; + box-sizing: border-box; + font-size: 62.5%; + // border: 1px solid black; } html, body { - height: 100%; + height: 100%; } +@import url('https://fonts.googleapis.com/css?family=Noto+Sans+TC&display=swap'); + +//variables + +@main-font: 'Noto Sans TC', sans-serif; +@h1-color: #4A235A; +@h2-color: #4A235A; +@nav-color: #D4AC0D; + +//end variables + +//mix-ins + +.center(){ + display: flex; + justify-content: center; +} + +.margin(){ + display: flex; + margin: 30px 90px; +} + +.content-margin(){ + display: flex; + flex-direction: column; + text-align: left; + margin: 20px auto; +} + +//end mix-ins + +.Intro-section { + display: flex; + justify-content: center; + align-items: center; + max-width: 85%; + margin: 0 auto; + @media (max-width: 500px) { + max-width: 90%; + flex-direction: column; + align-items: center; + justify-content: center; + } + .right { + @media (max-width: 500px) { + display: flex; + flex-direction: column; + align-items: center; + margin: 30px 0 0 0; + } + } + .left { + @media (max-width: 500px) { + display: flex; + flex-direction: column; + align-items: center; + } + } +} + +a { + color: @nav-color; + text-decoration: none; + &:hover { + text-decoration: underline; + } +} + +body { +font-family: @main-font; + p { + font-size: 1.5rem; + .margin(); + line-height: 1.3; + // for Mobile under 500px + @media (max-width: 500px) { + font-size: 1.1rem; + margin: 10px 30px; + max-width: 100%; + } + }// paragraph close +} // body close + +h1 { + font-size: 3.5rem; + color: @h1-color; + @media (max-width: 500px) { + font-size: 2.5rem; + } +} + +h2 { + font-size: 2rem; + color: @h2-color; + margin: 0 60px; + // for Mobile under 500px + @media (max-width: 500px) { + font-size: 1.5rem; + margin: 0 20px; + } +} + +h3 { + font-size: 1rem; +} + +hr { + margin: 60px auto; +} + +header { + display: flex; + margin: 40px auto; + .center(); + @media (max-width: 500px) { + display: flex; + margin: 10px auto; + }//closes media query for header +} + +nav { + font-size: 2rem; + color: @nav-color; + display: flex; + width: 80%; + justify-content: space-evenly; + margin: 20px auto; + // for Mobile under 500px + @media (max-width: 500px) { + display: flex; + flex-direction: column; + align-items: center; + border-bottom: 1px solid gray; + font-size: 1.5rem; + }//closes media query for nav + // for Mobile under 500px + a { + @media (max-width: 500px) { + display: flex; + border-top: 1px solid gray; + width: 100%; + justify-content: center; + margin: 5px auto; + } + }//closes media query for navigation hyperlinks +} //closes navigation + +.PlaySay-section, .Salesforce-section { + .content-margin(); +} + +.Lambda-section { + margin: 20px auto; + img { + display: block; + margin-left: auto; + margin-right: auto; + width: 50%; + @media (max-width: 500px) { + width: 75%; + } + }//closes image +} // closes Lambda Section + +footer { + .center(); +} \ No newline at end of file diff --git a/resume-example.png b/resume-example.png deleted file mode 100644 index e275a533d..000000000 Binary files a/resume-example.png and /dev/null differ