-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
executable file
·49 lines (47 loc) · 11.1 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
<!DOCTYPE html><html lang=en xmlns:og=https://ogp.me/ns# xmlns:fb=https://ogp.me/ns/fb#><meta charset=UTF-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><title>Suzan Sucro - Software Development</title><meta name=description content="Full-stack web developer based in San Diego, CA. Avid consumer of APIs. Framework/language glutton. I design and build great content for the web."><link rel=manifest href=manifest.json><meta name=mobile-web-app-capable content=yes><meta name=application-name content="Suzan Sucro Port"><link rel=icon sizes=192x192 href=images/touch/chrome-touch-icon-192x192.png><meta name=apple-mobile-web-app-capable content=yes><meta name=apple-mobile-web-app-status-bar-style content=black><meta name=apple-mobile-web-app-title content="Suzan Sucro Port"><link rel=apple-touch-icon href=images/touch/apple-touch-icon.png><meta name=msapplication-TileImage content=images/touch/ms-touch-icon-144x144-precomposed.png><meta name=msapplication-TileColor content=#2F3BA2><meta name=theme-color content=#2F3BA2><meta property=og:title content="Suzan Sucro - Software Development"><meta property=og:type content=website><meta property=og:description content="Full-stack web developer based in San Diego, CA. Avid consumer of APIs. Framework/language glutton. I design and build content for the web."><meta property=og:url content=https://suzmas.github.io><meta property=og:image content=https://suzmas.github.io/images/opengraph.png><meta property=fb:app_id content=313156035771024><meta name=p:domain_verify content=0b56136ad3804382a84c615599dd997c><script type=application/ld+json>{
"@context": "https://schema.org",
"@type": "WebPage",
"name": "Suzan Sucro",
"description": "Software Development Portfolio and Contact Page for Suzan Sucro",
"creator": {
"@type": "Person",
"name": "Suzan Sucro",
"email": "[email protected]",
"jobTitle": "Software Developer",
"sameAs": [
"https://www.linkedin.com/in/suzan-sucro",
"https://www.twitter.com/suzanmsu"
]
}
}</script><link rel=icon href="https://suzmas.github.io/favicon.ico?v=2"><link href="https://fonts.googleapis.com/css?family=Istok+Web:400,700|Open+Sans|Material+Icons|Dosis" rel=stylesheet><link href=https://code.getmdl.io/1.3.0/material.teal-red.min.css rel=stylesheet><link href=styles/main.css rel=stylesheet><body id="top"><script>
// FB Pageview settings
window.fbAsyncInit = function() {
FB.init({
appId: '313156035771024',
xfbml: true,
version: 'v2.9'
});
FB.AppEvents.logPageView();
};
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {
return;
}
js = d.createElement(s);
js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script><div class="mdl-layout mdl-js-layout"><a href="" id=contact-button class="mdl-button mdl-button--fab mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent mdl-cell--hide-phone hvr-grow"><i class=material-icons>mail</i></a><main class=mdl-layout__content><div class="mdl-tabs mdl-js-tabs mdl-js-ripple-effect"><div class="mdl-tabs__tab-bar navigation-tabs"><a href=#home-panel class="mdl-tabs__tab mdl-cell--hide-phone" id=logo>Suzan Sucro</a> <a href=#home-panel class="mdl-tabs__tab about is-active">About</a> <a href=#work-panel class=mdl-tabs__tab>Work</a> <a href=#contact-panel class="mdl-tabs__tab contact">Contact</a></div><div class=site-content><div class="container mdl-tabs__panel is-active" id=home-panel><div class="mdl-grid site-max-width fh-minus-nav"><div id=splash-pg-left class="mdl-cell mdl-cell--6-col mdl-cell--4-col-tablet mdl-cell--4-col-phone mdl-card welcome-card portfolio-card"><img id=splash-svg src=images/suzan.svg alt=""></div><div id=splash-pg-right class="mdl-cell mdl-cell--6-col mdl-cell--4-col-tablet mdl-cell--4-col-phone mdl-card welcome-card portfolio-card"><div class=mdl-card__supporting-text><h2 class="page-intro page-title">Hi, I'm Suzan</h2><h2 class=page-intro>I'm a software developer<br>and I build neat things with code.</h2><div class=social-media-icons><a href=https://github.com/suzmas><img class=social-media-icon alt="Link to my Github page." src=images/github.svg></a><a href=https://twitter.com/suzanmsu><img class=social-media-icon alt="Link to my twitter page." src=images/twitter.svg></a><a href=https://linkedin.com/in/suzan-sucro><img class=social-media-icon alt="Link to my LinkedIn page." src=images/linkedin2.svg></a></div></div></div></div></div><div class="container mdl-tabs__panel hidden" id=work-panel><div class="mdl-grid site-max-width p1"><div class="mdl-cell mdl-card mdl-shadow--2dp portfolio-card hidden"><div class=mdl-card__media><img class=article-image src=images/volunteerup.png border=0 alt=""></div><div class=mdl-card__title><h2 class=mdl-card__title-text>Volunteer Up</h2></div><div class=mdl-card__supporting-text>Volunteer management app built with group during a two week sprint. VolunteerUp is built with Rails and uses Postgres, jQuery, Bootstrap, Sass, AWS, gmaps, Devise, OAuth, Rspec and Capybara.</div><br><div class="mdl-card__actions mdl-card--border"><a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect mdl-button--accent" href=https://VolunteerUp.herokuapp.com/ >Live</a></div></div><div class="mdl-cell mdl-card mdl-shadow--2dp portfolio-card hidden"><div class=mdl-card__media><img class=article-image src=images/AFrame.png border=0 alt=""></div><div class=mdl-card__title><h2 class=mdl-card__title-text>WebVR</h2></div><div class=mdl-card__supporting-text>Interactive virtual reality content developed primarily for use in mobile browser with Google Cardboard. Uses A-Frame (WebVR library), Three.js, and Blender for 3D scene creation.</div><br><div class="mdl-card__actions mdl-card--border"><a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect mdl-button--accent" href=https://github.com/suzmas/AFrame>Repo</a></div></div><div class="mdl-cell mdl-card mdl-shadow--2dp portfolio-card hidden"><div class=mdl-card__media><img class=article-image src=images/voxlVR.png border=0 alt=""></div><div class=mdl-card__title><h2 class=mdl-card__title-text>Vox-L VR</h2></div><div class=mdl-card__supporting-text>Browser based interactive modding playground with entire VR cities, custom pre-fab structures, flying, teleporting, and more! Honestly, awesome. Vox-L is built with React and C#. My focus was on the frontend using React and MaterialUI.</div><br><div class="mdl-card__actions mdl-card--border"><a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect mdl-button--accent" href=https://store.steampowered.com/app/541150/VoxL/ >Product</a></div></div><br><div class="mdl-cell mdl-card mdl-shadow--2dp portfolio-card hidden"><div class=mdl-card__media><img class=article-image src=images/realsimple.png border=0 alt=""></div><div class=mdl-card__title><h2 class=mdl-card__title-text>Jekyll Themes</h2></div><div class=mdl-card__supporting-text>Series of custom themes I've created for use with Jekyll - a blog focused static site generator. Themes written with HTML, Markdown, Liquid Templating Language / Ruby, Scss, and JavaScript.</div><br><div class="mdl-card__actions mdl-card--border"><a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect mdl-button--accent" href="https://github.com/search?utf8=%E2%9C%93&q=org%3Asuzmas+topic%3Ajekyll&type=">Repo</a></div></div><br><div class="mdl-cell mdl-card mdl-shadow--2dp portfolio-card"><div class=mdl-card__media><img class=article-image src=images/hh_landingpg-mockup.png border=0 alt=""></div><div class=mdl-card__title><h2 class=mdl-card__title-text>An App Without a Name</h2></div><div class=mdl-card__supporting-text>Web app to connect users with restaurant/bar happy-hours. Why? Because finding happy-hour details on Yelp is a digging expedition. Users can filter by time, distance, and events going on right now - then easily access info on daily specials. Developed with React, Rails, Postgres, Bootstrap-React, and Leaflet maps.</div><br><div class="mdl-card__actions mdl-card--border"><a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect mdl-button--accent" href=https://anferne.herokuapp.com/ >Live (beta)</a></div></div><br><div class="mdl-cell mdl-card mdl-shadow--2dp portfolio-card hidden"><div class=mdl-card__media><img class=article-image src=images/findthetime.png border=0 alt=""></div><div class=mdl-card__title><h2 class=mdl-card__title-text>Vanilla JS</h2></div><div class=mdl-card__supporting-text>Fun vanilla DOM manipulation. This little project does async updates to animate the UI as a user inputs search text. Uses Wunderground API for autocompletion and TimeZonedb API to display the time in each city. Next mini-feature: add .tick() function to update the time while it's displayed.</div><br><div class="mdl-card__actions mdl-card--border"><a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect mdl-button--accent" href=https://suzmas.github.io/vanillaJS/autocomplete>Live</a></div></div><br></div></div><div class="container mdl-tabs__panel contact hidden fh-minus-nav" id=contact-panel><div class="mdl-grid site-max-width"><div class="mdl-cell mdl-cell--6-col mdl-card mdl-shadow--2dp"><div class="mdl-grid site-copy"><div class="mdl-cell mdl-cell--12-col pt1 pr1 pl1"><p>You can find me on <a href=https://github.com/suzmas>Github</a>, <a href=https://twitter.com/suzanmsu>Twitter</a>, and <a href=https://linkedin.com/in/suzan-sucro>LinkedIn</a>.<div class=mdl-card__supporting-text><form action=https://formspree.io/[email protected] method=POST class=form-contact><p class=font-sm>Or, send me a message :-)<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"><input class=mdl-textfield__input pattern="[A-Z,a-z, ]*" id=Name name=name><label class=mdl-textfield__label for=Name>Name</label><span class=mdl-textfield__error>Letters and spaces only</span></div><div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"><input class=mdl-textfield__input type=email id=Email name=_replyto><label class=mdl-textfield__label for=Email>Email</label></div><div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"><textarea class=mdl-textfield__input type=text rows=5 id=note name=message></textarea><label class=mdl-textfield__label for=note>Message</label></div><p><button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent" type=submit>Submit</button></form></div></div></div></div></div></div></div></div></main><script src=https://code.getmdl.io/1.3.0/material.min.js></script><script src=scripts/main.min.js></script><script>(function(i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r;
i[r] = i[r] || function() {
(i[r].q = i[r].q || []).push(arguments)
}, i[r].l = 1 * new Date();
a = s.createElement(o),
m = s.getElementsByTagName(o)[0];
a.async = 1;
a.src = g;
m.parentNode.insertBefore(a, m)
})(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
ga('create', 'UA-96929900-1', 'auto');
ga('send', 'pageview');</script></div></body></html>