From 52d28fd7be2b3010780d7554801bbfd77c666781 Mon Sep 17 00:00:00 2001 From: Jonathan Bernard Date: Sun, 27 Sep 2015 12:18:10 -0500 Subject: [PATCH] Adding skill details, changing base page to work better without JS. --- html-interactive/index.html | 344 +++++++++++++++++++++++++---------- html-interactive/resume.js | 20 +- html-interactive/resume.scss | 60 +++++- 3 files changed, 319 insertions(+), 105 deletions(-) diff --git a/html-interactive/index.html b/html-interactive/index.html index 24ab52c..1aa43da 100644 --- a/html-interactive/index.html +++ b/html-interactive/index.html @@ -4,6 +4,7 @@ Jonathan Bernard - Full Stack Developer + @@ -30,40 +31,39 @@

Things I Know

Programming Languages

- Java - Groovy - .NET - C/C++ - SQL - HTML5 - CSS3 - SCSS - JavaScript - EcmaScript6 - PHP - Erlang - BASH Script - Visual Basic - Perl - Lisp - XML - Visual FoxPro + Java + Groovy + C# (.NET) + C/C++ + SQL + HTML5 + CSS3 + SCSS + JavaScript/ECMA Script 6 + PHP + Erlang + BASH Script + Visual Basic + Perl + Lisp + XML + Visual FoxPro

Server-Side Technologies

- JSP - ASP.NET - Jersey - Grails - Apache httpd - Apache Tomcat - nginx - Jetty - Glassfish - YAWS - Hazelcast - Spring Framework + JSP + ASP.NET + Jersey + Grails + Apache httpd + Apache Tomcat + nginx + Jetty + Glassfish + YAWS + Hazelcast + Spring Framework
@@ -71,62 +71,61 @@

Relational

- PostgreSQL - Oracle - MS Sql Server - MySQL - H2 - HSQLDB - SqlLite - Access + PostgreSQL + Oracle + MS Sql Server + MySQL + H2 + HSQLDB + SqlLite + Access

No-SQL

- Mnesia - LevelDB - KyotoCabinet - CouchDB - MongoDB + Mnesia + LevelDB + KyotoCabinet + CouchDB + MongoDB

ORM/Access Layers

- JPA - Hibernate - Spring Data + JPA + Hibernate + Spring Data

Web Technologies

- HTTP - REST - SOAP - Ajax - WebSockets - + HTTP + REST + SOAP + Ajax + WebSockets

Front-End Frameworks, Libraries, & Principles

- jQuery - Backbone.js - Underscore.js - Mustache.js - Handlebars.js - Progressive Enhancement - Responsive Design - User Experience Design + jQuery + Backbone.js + Underscore.js + Mustache.js + Handlebars.js + Progressive Enhancement + Responsive Design + User Experience Design

Classical Application Technologies

- Swing - Windows Presentation Foundations (WPF) - WinForms - Griffon - Windows COM + Swing + Windows Presentation Foundations (WPF) + WinForms + Griffon + Windows COM
@@ -134,85 +133,213 @@

Editors/IDEs

- VI(m) - Eclipse - NetBeans - VisualStudio - Appcelerator Titanium Studio - UNIX Command Line + VI(m) + Eclipse + NetBeans + VisualStudio + Appcelerator Titanium Studio + UNIX Command Line

Source Control

- Git - Mercurial - Subversion - Fossil - CVS + Git + Mercurial + Subversion + Fossil + CVS

Build Tools

- Gradle - Apache Maven - Apache Ant - GNU Make - Apache Ivy + Gradle + Apache Maven + Apache Ant + GNU Make + Apache Ivy

Applied Cryptography & Security

- Symmetric Ciphers - Asymmetric Ciphers - Public Key Infrastructure (PKI) + Symmetric Ciphers + Asymmetric Ciphers + Public Key Infrastructure (PKI)

Smart Cards

- ISO 7816 - Identification Cards - ISO 14443 - Contactless IC Cards -- - Proximity Cards + ISO 7816 (Identification Cards) + ISO 14443 (Contactless IC Cards — Proximity Cards)

Operating Systems (use & administration)

- Linux (esp. Ubuntu, Debian, and Red Hat -based - distros.) - OpenBSD - Windows + Linux (esp. Ubuntu, Debian, and Red Hat -based distros.) + OpenBSD + Windows
+
+
+

Java

+

I have been involved with projects and companies leveraging + Java since version 1.2. Java is one of the languages and + environments in which I am most comfortable. I have experience + writing Java at all levels where Java can be applied. From + cross-platform desktop applications to command line utilities + to J2EE business logic to microservices. I have experience + applying Java to several programming paradigms, including highly + concurrent and distributed environments. + + I continue to find myself in situations where Java is a good fit + for the problem, and I continue to enjoy working with tools and + languages that build on the JVM and the Java ecosystem. I feel + very confident about my ability to immediately contribute in + this language. +

+
+

Groovy

+

Groovy is my language of choice when I want to write dynamic + code or do rapid prototyping in the Java environment. I have + several years of experience working with Groovy and leveraging + the Java ecosystem from Groovy. I am comfortable across the + entire spectrum between writing very Java-like Groovy and + writing idiomatic Groovy taking advantage of Groovy's dynamic + nature. I am very confident in my knowledge of this language. +

+
+

.NET

+

I have been working with C# since Microsoft introduced the + .NET platform. As with the Java ecosystem, I have experience + using C# and .NET across many different problem domains, from + hardware automation to classical desktop applications to + server-side processing. C# is my language of choice when + specifically targeting Windows platforms. I am very confident + in my knowledge of this language, and am familiar with the .NET + environment. +

+
+

C/C++

+

+

+
+

SQL

+

Almost every non-trivial problem has non-trivial persistence + needs. Very often, relational databases are an appropriate + solution. While I appreciate the architectural benefits of an + ORM layer, I have always enjoyed working with SQL directly when + the opportunity is presented. I am very comfortable with + standard SQL and relational databases in general. +

+
+

HTML5

+

+

+
+

CSS3

+

+

+
+

SCSS

+

+

+
+

JavaScript/ECMA Script 6

+

When I was first introduced to JavaScript, I was not + particularly interested in using it. As the language and + ecosystem has matured in the last several years, I have come to + appreciate JavaScript more. I have been very excited by the + developments of modern JS engines and am very excited about + some of the features introduced in ECMA Script 6. JavaScript + has become a performant, expressive language and many of the + shortcomings and warts it possesed are being addressed. + + In particular, with the emergence of frameworks like Backbone + and React, as well as the libraries surrounding large-scale + application development in JavaScript, I have found it a very + pleasent language to work with. I have several years of + experience building web-based applications with JavaScript. I + feel very confident in my knowledge and expertise with this + language. +

+
+

PHP

+

PHP is a language I have had cause to use several times in + my career, most often because it is the native language of an + existing solution. In my time with QuantumDigital I had the + oportunity to futher my understanding of modern PHP by + enrolling in Zend's advanced PHP training courses. + + While it has been several years since I have worked regularly + in PHP I am confident in my past experience and ability to ramp + up quickly to an expert level. +

+
+

Erlang

+

When I first learned of Erlang it immediately caught my + attention due to it's philosophy of expecting failure, it's + approach to concurrency and it's functional nature. While I + have had the oportunity to use Erlang successfully on some + personal projects, I have not yet had the opportunity to be a + part of a team of people all working in the language. I am very + familiar with the standard library, aware of the growing + ecosystem surrounding Erlang in modern use, and thouroughly + enjoy writing Erlang code. I would be excited for the + opportunity to work with and learn from a team using Erlang to + build their solutions. I feel very confident in the core + language and runtime, and confident in my ability to ramp up on + new subjects in this domain. +

+
+

BASH Script

+

+

+
+

Visual Basic

+

+

+
+

Perl

+

+

+
+

Lisp

+

+

+ +
+

Places I've Worked

-

3M (contracted via Maxis Group)

-

Traffic Safety Systems Division

+

3M (contracted via Maxis Group)

+

Traffic Safety Systems Division

Software Engineer VI October 2013 - present
-

HID Global

-

Personalization Infrastructure

+

HID Global

+

Personalization Infrastructure

Staff Engineer February 2012 - September 2013
-

QuantumDigital.com

+

QuantumDigital.com

Systems Developer August 2010 - February 2012
-

Gemalto

-

Solutions and Special Projects

+

Gemalto

+

Solutions and Special Projects

Software Architect and Developer June 2005 - August 2010
-

Freescale Semiconductor

-

Hardware/Software Development

+

Freescale Semiconductor

+

Hardware/Software Development

Summer Intern / Contractor June 2004 - October 2004
@@ -234,8 +361,25 @@

Who I Am

+ +
+ + + diff --git a/html-interactive/resume.js b/html-interactive/resume.js index 2409485..0ef03db 100644 --- a/html-interactive/resume.js +++ b/html-interactive/resume.js @@ -5,7 +5,14 @@ R.PageView = Backbone.View.extend({ el: $("body")[0], + events: { + "click .skill span.name": "showSkillLinks", + "click #glass-pane": "unselect", + "click .selected div.name": "unselect" + }, + initialize: function(options) { + _.bindAll(this, "showSkillLinks"); window.addEventListener("scroll", this.fixHeader); }, @@ -13,7 +20,18 @@ var $h = $("header"); if ($(document).scrollTop() > 100) { $h.addClass("fixed"); } - else $h.removeClass("fixed"); }, 100) + else $h.removeClass("fixed"); }, 100), + + showSkillLinks: function(e) { + this.select($(e.target).siblings("div.links")); }, + + select: function($el) { + $("#glass-pane").show(); + $el.fadeIn().addClass("selected"); }, + + unselect: function() { + $(".selected").fadeOut().removeClass("selected"); + $("#glass-pane").hide(); } }); })(); diff --git a/html-interactive/resume.scss b/html-interactive/resume.scss index cc067f1..e8e6338 100644 --- a/html-interactive/resume.scss +++ b/html-interactive/resume.scss @@ -1,5 +1,6 @@ @import url("//fonts.googleapis.com/css?family=Monda|Cantarell|Exo 2"); +$white: #EEE; $black: #222; // Simple HTML5 reset. Not comprehensive but sufficient. @@ -11,9 +12,11 @@ $black: #222; padding: 0; } article,aside,details,figcaption,figure, -footer,header,hgroup,menu,nav,section { +footer,header,hgroup,menu,nav,section { display:block; } +html { background-color: $white; } + body { font-family: Cantarell; font-size: 125%; @@ -36,6 +39,7 @@ header { right: 0; top: 0; transition: all 0.2s; + z-index: 3; h1 { font-size: 5rem; @@ -94,7 +98,7 @@ nav#sectionNav { } section { - a { + a.anchor { display: block; position: relative; top: -3rem; @@ -114,11 +118,48 @@ section { & > div { margin-bottom: 2rem; } &#skills-section { - span { - cursor: pointer; + a.nojs { + color: $black; + text-decoration: none; + &:after { content: ","; } &:last-of-type:after { content: ""; } } + + div.skill { + display: inline-block; + cursor: pointer; + position: relative; + + &:after { content: ","; } + &:last-of-type:after { content: ""; } + + div.links { + background-color: $white; + border: solid thin $black; + border-radius: 3px; + display: none; + + position: absolute; + left: calc(-0.2rem - 1px); + top: calc(-0.2rem - 1px); + z-index: 2; + + div.name { + background-color: $black; + color: $white; + font-weight: bold; + font-variant: small-caps; + padding: 0.2rem; + } + + ul { + padding: 0.2rem; + list-style: none; + white-space: nowrap; + } + } + } } &#jobs-section div.job { @@ -131,3 +172,14 @@ section { } } } + +#glass-pane { + display: none; + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + z-index: 1; +} +