Adding skill details, changing base page to work better without JS.
This commit is contained in:
Jonathan Bernard
parent
c79935151c
commit
52d28fd7be
@ -4,6 +4,7 @@
|
||||
<meta charset=utf-8>
|
||||
<title>Jonathan Bernard - Full Stack Developer</title>
|
||||
<link rel=stylesheet href=resume.css>
|
||||
<link rel=stylesheet href=https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
@ -30,40 +31,39 @@
|
||||
<h2>Things I Know</h2>
|
||||
<div id=languages>
|
||||
<h3>Programming Languages</h3>
|
||||
<span>Java</span>
|
||||
<span>Groovy</span>
|
||||
<span>.NET</span>
|
||||
<span>C/C++</span>
|
||||
<span>SQL</span>
|
||||
<span>HTML5</span>
|
||||
<span>CSS3</span>
|
||||
<span>SCSS</span>
|
||||
<span>JavaScript</span>
|
||||
<span>EcmaScript6</span>
|
||||
<span>PHP</span>
|
||||
<span>Erlang</span>
|
||||
<span>BASH Script</span>
|
||||
<span>Visual Basic</span>
|
||||
<span>Perl</span>
|
||||
<span>Lisp</span>
|
||||
<span>XML</span>
|
||||
<span>Visual FoxPro</span>
|
||||
<a href=#java-and-me class=nojs data-subject-url=https://en.wikipedia.org/wiki/Java_%28programming_language%29>Java</a>
|
||||
<a href=#groovy-and-me class=nojs data-subject-url=https://groovy-lang.org>Groovy</a>
|
||||
<a href=#csharp-and-me data-name=csharp class=nojs data-subject-url=>C# (.NET)</a>
|
||||
<a href=#c-cpp-and-me data-name=c-cpp class=nojs data-subject-url=>C/C++</a>
|
||||
<a href=#sql-and-me class=nojs data-subject-url=>SQL</a>
|
||||
<a href=#html5-and-me class=nojs data-subject-url=>HTML5</a>
|
||||
<a href=#css3-and-me class=nojs data-subject-url=>CSS3</a>
|
||||
<a href=#scss-and-me class=nojs data-subject-url=>SCSS</a>
|
||||
<a href=#javascript-and-me data-name=javascript class=nojs data-subject-url=>JavaScript/ECMA Script 6</a>
|
||||
<a href=#php-and-me class=nojs data-subject-url=>PHP</a>
|
||||
<a href=#erlang-and-me class=nojs data-subject-url=>Erlang</a>
|
||||
<a href=#bash-and-me data-name=bash class=nojs data-subject-url=>BASH Script</a>
|
||||
<a href=#visual-basic-and-me data-name=visual-basic class=nojs data-subject-url=>Visual Basic</a>
|
||||
<a href=#perl-and-me class=nojs data-subject-url=>Perl</a>
|
||||
<a href=#lisp-and-me class=nojs data-subject-url=>Lisp</a>
|
||||
<a href=#xml-and-me class=nojs data-subject-url=>XML</a>
|
||||
<a href=#visual-foxpro-and-me data-name=visual-foxpro class=nojs data-subject-url=>Visual FoxPro</a>
|
||||
</div>
|
||||
|
||||
<div id=server-side>
|
||||
<h3>Server-Side Technologies</h3>
|
||||
<span>JSP</span>
|
||||
<span>ASP.NET</span>
|
||||
<span>Jersey</span>
|
||||
<span>Grails</span>
|
||||
<span>Apache httpd</span>
|
||||
<span>Apache Tomcat</span>
|
||||
<span>nginx</span>
|
||||
<span>Jetty</span>
|
||||
<span>Glassfish</span>
|
||||
<span>YAWS</span>
|
||||
<span>Hazelcast</span>
|
||||
<span>Spring Framework</span>
|
||||
<a href=#jsp-and-me class=nojs data-subject-url=>JSP</a>
|
||||
<a href=#asp.net-and-me class=nojs data-subject-url=>ASP.NET</a>
|
||||
<a href=#jersey-and-me class=nojs data-subject-url=>Jersey</a>
|
||||
<a href=#grails-and-me class=nojs data-subject-url=>Grails</a>
|
||||
<a href=#httpd-and-me data-name=httpd class=nojs data-subject-url=>Apache httpd</a>
|
||||
<a href=#tomcat-and-me data-name=tomcat class=nojs data-subject-url=>Apache Tomcat</a>
|
||||
<a href=#nginx-and-me class=nojs data-subject-url=>nginx</a>
|
||||
<a href=#jetty-and-me class=nojs data-subject-url=>Jetty</a>
|
||||
<a href=#glassfish-and-me class=nojs data-subject-url=>Glassfish</a>
|
||||
<a href=#yaws-and-me class=nojs data-subject-url=>YAWS</a>
|
||||
<a href=#hazelcast-and-me class=nojs data-subject-url=>Hazelcast</a>
|
||||
<a href=#spring-framework-and-me data-name=spring class=nojs data-subject-url=>Spring Framework</a>
|
||||
</div>
|
||||
|
||||
<div id=databases>
|
||||
@ -71,62 +71,61 @@
|
||||
|
||||
<div>
|
||||
<h4>Relational</h4>
|
||||
<span>PostgreSQL</span>
|
||||
<span>Oracle</span>
|
||||
<span>MS Sql Server</span>
|
||||
<span>MySQL</span>
|
||||
<span>H2</span>
|
||||
<span>HSQLDB</span>
|
||||
<span>SqlLite</span>
|
||||
<span>Access</span>
|
||||
<a href=#postgresql-and-me class=nojs data-subject-url=>PostgreSQL</a>
|
||||
<a href=#oracle-and-me class=nojs data-subject-url=>Oracle</a>
|
||||
<a href=#ms sql server-and-me class=nojs data-subject-url=>MS Sql Server</a>
|
||||
<a href=#mysql-and-me class=nojs data-subject-url=>MySQL</a>
|
||||
<a href=#h2-and-me class=nojs data-subject-url=>H2</a>
|
||||
<a href=#hsqldb-and-me class=nojs data-subject-url=>HSQLDB</a>
|
||||
<a href=#sqllite-and-me class=nojs data-subject-url=>SqlLite</a>
|
||||
<a href=#access-and-me class=nojs data-subject-url=>Access</a>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4>No-SQL</h4>
|
||||
<span>Mnesia</span>
|
||||
<span>LevelDB</span>
|
||||
<span>KyotoCabinet</span>
|
||||
<span>CouchDB</span>
|
||||
<span>MongoDB</span>
|
||||
<a href=#mnesia-and-me class=nojs data-subject-url=>Mnesia</a>
|
||||
<a href=#leveldb-and-me class=nojs data-subject-url=>LevelDB</a>
|
||||
<a href=#kyotocabinet-and-me class=nojs data-subject-url=>KyotoCabinet</a>
|
||||
<a href=#couchdb-and-me class=nojs data-subject-url=>CouchDB</a>
|
||||
<a href=#mongodb-and-me class=nojs data-subject-url=>MongoDB</a>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4>ORM/Access Layers</h4>
|
||||
<span>JPA</span>
|
||||
<span>Hibernate</span>
|
||||
<span>Spring Data</span>
|
||||
<a href=#jpa-and-me class=nojs data-subject-url=>JPA</a>
|
||||
<a href=#hibernate-and-me class=nojs data-subject-url=>Hibernate</a>
|
||||
<a href=#spring data-and-me class=nojs data-subject-url=>Spring Data</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id=web>
|
||||
<h3>Web Technologies</h3>
|
||||
<span>HTTP</span>
|
||||
<span>REST</span>
|
||||
<span>SOAP</span>
|
||||
<span>Ajax</span>
|
||||
<span>WebSockets</span>
|
||||
<span>
|
||||
<a href=#http-and-me class=nojs data-subject-url=>HTTP</a>
|
||||
<a href=#rest-and-me class=nojs data-subject-url=>REST</a>
|
||||
<a href=#soap-and-me class=nojs data-subject-url=>SOAP</a>
|
||||
<a href=#ajax-and-me class=nojs data-subject-url=>Ajax</a>
|
||||
<a href=#websockets-and-me class=nojs data-subject-url=>WebSockets</a>
|
||||
</div>
|
||||
|
||||
<div id=front-end>
|
||||
<h3>Front-End Frameworks, Libraries, & Principles</h3>
|
||||
<span>jQuery</span>
|
||||
<span>Backbone.js</span>
|
||||
<span>Underscore.js</span>
|
||||
<span>Mustache.js</span>
|
||||
<span>Handlebars.js</span>
|
||||
<span>Progressive Enhancement</span>
|
||||
<span>Responsive Design</span>
|
||||
<span>User Experience Design</span>
|
||||
<a href=#jquery-and-me class=nojs data-subject-url=>jQuery</a>
|
||||
<a href=#backbone.js-and-me class=nojs data-subject-url=>Backbone.js</a>
|
||||
<a href=#underscore.js-and-me class=nojs data-subject-url=>Underscore.js</a>
|
||||
<a href=#mustache.js-and-me class=nojs data-subject-url=>Mustache.js</a>
|
||||
<a href=#handlebars.js-and-me class=nojs data-subject-url=>Handlebars.js</a>
|
||||
<a href=#progressive-enhancement-and-me data-name=progresive-enhancement class=nojs data-subject-url=>Progressive Enhancement</a>
|
||||
<a href=#responsive-design-and-me data-name=responsive-design class=nojs data-subject-url=>Responsive Design</a>
|
||||
<a href=#user-experience-and-me data-name=user-experience class=nojs data-subject-url=>User Experience Design</a>
|
||||
</div>
|
||||
|
||||
<div id=desktop>
|
||||
<h3>Classical Application Technologies</h3>
|
||||
<span>Swing</span>
|
||||
<span data-name=WPF>Windows Presentation Foundations (WPF)</span>
|
||||
<span>WinForms</span>
|
||||
<span>Griffon</span>
|
||||
<span>Windows COM</span>
|
||||
<a href=#swing-and-me class=nojs data-subject-url=>Swing</a>
|
||||
<a href=#wpf-and-me data-name=wpf class=nojs data-subject-url=>Windows Presentation Foundations (WPF)</a>
|
||||
<a href=#winforms-and-me class=nojs data-subject-url=>WinForms</a>
|
||||
<a href=#griffon-and-me class=nojs data-subject-url=>Griffon</a>
|
||||
<a href=#windows-com-and-me data-name=windows-com class=nojs data-subject-url=>Windows COM</a>
|
||||
</div>
|
||||
|
||||
<div id=devtools>
|
||||
@ -134,85 +133,213 @@
|
||||
|
||||
<div>
|
||||
<h4>Editors/IDEs</h4>
|
||||
<span>VI(m)</span>
|
||||
<span>Eclipse</span>
|
||||
<span>NetBeans</span>
|
||||
<span>VisualStudio</span>
|
||||
<span>Appcelerator Titanium Studio</span>
|
||||
<span>UNIX Command Line</span>
|
||||
<a href=#vim-and-me data-name=vim class=nojs data-subject-url=>VI(m)</a>
|
||||
<a href=#eclipse-and-me class=nojs data-subject-url=>Eclipse</a>
|
||||
<a href=#netbeans-and-me class=nojs data-subject-url=>NetBeans</a>
|
||||
<a href=#visualstudio-and-me class=nojs data-subject-url=>VisualStudio</a>
|
||||
<a href=#titanium-studio-and-me data-name=titanium-studio class=nojs data-subject-url=>Appcelerator Titanium Studio</a>
|
||||
<a href=#unix-cli-and-me data-name=unix-cli class=nojs data-subject-url=>UNIX Command Line</a>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4>Source Control</h4>
|
||||
<span>Git</span>
|
||||
<span>Mercurial</span>
|
||||
<span>Subversion</span>
|
||||
<span>Fossil</span>
|
||||
<span>CVS</span>
|
||||
<a href=#git-and-me class=nojs data-subject-url=>Git</a>
|
||||
<a href=#mercurial-and-me class=nojs class=nojs data-subject-url=>Mercurial</a>
|
||||
<a href=#subversion-and-me class=nojs data-subject-url=>Subversion</a>
|
||||
<a href=#fossil-and-me class=nojs data-subject-url=>Fossil</a>
|
||||
<a href=#cvs-and-me class=nojs data-subject-url=>CVS</a>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4>Build Tools</h4>
|
||||
<span>Gradle</span>
|
||||
<span>Apache Maven</span>
|
||||
<span>Apache Ant</span>
|
||||
<span>GNU Make</span>
|
||||
<span>Apache Ivy</span>
|
||||
<a href=#gradle-and-me class=nojs data-subject-url=>Gradle</a>
|
||||
<a href=#maven-and-me data-name=maven class=nojs data-subject-url=>Apache Maven</a>
|
||||
<a href=#ant-and-me data-name=ant class=nojs data-subject-url=>Apache Ant</a>
|
||||
<a href=#make-and-me data-name=make class=nojs data-subject-url=>GNU Make</a>
|
||||
<a href=#ivy-and-me data-name=ivy class=nojs data-subject-url=>Apache Ivy</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id=cryptography>
|
||||
<h3>Applied Cryptography & Security</h3>
|
||||
<span>Symmetric Ciphers</span>
|
||||
<span>Asymmetric Ciphers</span>
|
||||
<span data-name=PKI>Public Key Infrastructure (PKI)</span>
|
||||
<a href=#symmetric-ciphers-and-me data-name=symmetric-ciphers class=nojs data-subject-url=>Symmetric Ciphers</a>
|
||||
<a href=#asymmetric-ciphers-and-me data-name=asymmetric-ciphers class=nojs data-subject-url=>Asymmetric Ciphers</a>
|
||||
<a href=#pki-and-me data-nme=pki class=nojs data-subject-url=>Public Key Infrastructure (PKI)</a>
|
||||
</div>
|
||||
|
||||
<div id=smart-cards>
|
||||
<h3>Smart Cards</h3>
|
||||
<span data-name="ISO 7816">ISO 7816 - Identification Cards</span>
|
||||
<span data-name="ISO 14443">ISO 14443 - Contactless IC Cards --
|
||||
Proximity Cards</span>
|
||||
<a href=#iso7816 data-name=iso7816 class=nojs data-subject-url=>ISO 7816 (Identification Cards)</a>
|
||||
<a href=#iso14443 data-name=iso14443 class=nojs data-subject-url=>ISO 14443 (Contactless IC Cards — Proximity Cards)</a>
|
||||
</div>
|
||||
|
||||
<div id=operating-systems>
|
||||
<h3>Operating Systems (use & administration)</h3>
|
||||
<span data-name="Linux">Linux (<em>esp. Ubuntu, Debian, and Red Hat -based
|
||||
distros.</em>)</span>
|
||||
<span>OpenBSD</span>
|
||||
<span>Windows</span>
|
||||
<a href=#linux-and-me data-name=linux class=nojs data-subject-url=>Linux (<em>esp. Ubuntu, Debian, and Red Hat -based distros.</em>)</a>
|
||||
<a href=#openbsd-and-me class=nojs data-subject-url=>OpenBSD</a>
|
||||
<a href=#windows-and-me class=nojs data-subject-url=>Windows</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id=skills-details>
|
||||
<div class=skill-detail data-skill=java>
|
||||
<h4>Java</h4>
|
||||
<p>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.
|
||||
</div>
|
||||
<div class=skill-detail data-skill=groovy>
|
||||
<h4>Groovy</h4>
|
||||
<p>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.
|
||||
</div>
|
||||
<div class=skill-detail data-skill=csharp>
|
||||
<h4>.NET</h4>
|
||||
<p>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.
|
||||
</div>
|
||||
<div class=skill-detail data-skill=c-cpp>
|
||||
<h4>C/C++</h4>
|
||||
<p>
|
||||
</div>
|
||||
<div class=skill-detail data-skill=sql>
|
||||
<h4>SQL</h4>
|
||||
<p>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.
|
||||
</div>
|
||||
<div class=skill-detail data-skill=html5>
|
||||
<h4>HTML5</h4>
|
||||
<p>
|
||||
</div>
|
||||
<div class=skill-detail data-skil=css3>
|
||||
<h4>CSS3</h4>
|
||||
<p>
|
||||
</div>
|
||||
<div class=skill-detail data-skill=scss>
|
||||
<h4>SCSS</h4>
|
||||
<p>
|
||||
</div>
|
||||
<div class=skill-detail data-skill=javascript>
|
||||
<h4>JavaScript/ECMA Script 6</h4>
|
||||
<p>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.
|
||||
</div>
|
||||
<div class=skill-detail data-skill=php>
|
||||
<h4>PHP</h4>
|
||||
<p>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.
|
||||
</div>
|
||||
<div class=skill-detail data-skill=erlang>
|
||||
<h4>Erlang</h4>
|
||||
<p>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.
|
||||
</div>
|
||||
<div class=skill-detail data-skill=bash>
|
||||
<h4>BASH Script</h4>
|
||||
<p>
|
||||
</div>
|
||||
<div class=skil-detail data-skill=visual-basic>
|
||||
<h4>Visual Basic</h4>
|
||||
<p>
|
||||
</div>
|
||||
<div class=skill-detail data-skill=perl>
|
||||
<h4>Perl</h4>
|
||||
<p>
|
||||
</div>
|
||||
<div class=skill-detail data-skill=lisp>
|
||||
<h4>Lisp</h4>
|
||||
<p>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
<section id=jobs-section>
|
||||
<a class=anchor id=jobs></a>
|
||||
<h2>Places I've Worked</h2>
|
||||
<div class=job>
|
||||
<h3>3M <em>(contracted via Maxis Group)</em></h3>
|
||||
<h4>Traffic Safety Systems Division</h4>
|
||||
<h3 class=company>3M <em>(contracted via Maxis Group)</em></h3>
|
||||
<h4 class=division>Traffic Safety Systems Division</h4>
|
||||
<span class=title>Software Engineer VI</span>
|
||||
<span class=duration>October 2013 - present</span>
|
||||
</div>
|
||||
<div class=job>
|
||||
<h3>HID Global</h3>
|
||||
<h4>Personalization Infrastructure</h4>
|
||||
<h3 class=company>HID Global</h3>
|
||||
<h4 class=division>Personalization Infrastructure</h4>
|
||||
<span class=title>Staff Engineer</span>
|
||||
<span class=duration>February 2012 - September 2013</span>
|
||||
</div>
|
||||
<div class=job>
|
||||
<h3>QuantumDigital.com</h3>
|
||||
<h3 class=company>QuantumDigital.com</h3>
|
||||
<span class=title>Systems Developer</span>
|
||||
<span class=duration>August 2010 - February 2012</span>
|
||||
</div>
|
||||
<div class=job>
|
||||
<h3>Gemalto</h3>
|
||||
<h4>Solutions and Special Projects</h4>
|
||||
<h3 class=company>Gemalto</h3>
|
||||
<h4 class=division>Solutions and Special Projects</h4>
|
||||
<span class=title>Software Architect and Developer</title>
|
||||
<span class=duration>June 2005 - August 2010</span>
|
||||
</div>
|
||||
<div class=job>
|
||||
<h3>Freescale Semiconductor</h3>
|
||||
<h4>Hardware/Software Development</h4>
|
||||
<h3 class=company>Freescale Semiconductor</h3>
|
||||
<h4 class=division>Hardware/Software Development</h4>
|
||||
<span class=title>Summer Intern / Contractor</span>
|
||||
<span class=duration>June 2004 - October 2004</span>
|
||||
</div>
|
||||
@ -234,8 +361,25 @@
|
||||
<a class=anchor id=about></a>
|
||||
<h2>Who I Am</h2>
|
||||
</section>
|
||||
|
||||
<div id=glass-pane></div>
|
||||
|
||||
<script type=text/html>
|
||||
<div class=skill data-name={{name}}>
|
||||
<span class=name>{{displayName}}</span>
|
||||
<div class=links>
|
||||
<div class=name>{{displayName}}</div>
|
||||
<ul>
|
||||
<li><a href=#{{name}}-and-me class=and-me>my experience</a></li>
|
||||
<li><a href=#filter-{name} class=filter>show related things</a></li>
|
||||
<li><a href={{url}}>more about java<i class='fa fa-external-link'></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
||||
<!--<script src=https://cdnjs.cloudflare.com/ajax/libs/zepto/1.1.6/zepto.min.js></script>-->
|
||||
<script src=https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js></script>
|
||||
<script src=https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.3/handlebars.min.js></script>
|
||||
<script src=https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js></script>
|
||||
<script src=https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.2.3/backbone-min.js></script>
|
||||
<script src=resume.js></script>
|
||||
|
||||
@ -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(); }
|
||||
});
|
||||
|
||||
})();
|
||||
|
||||
@ -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.
|
||||
@ -14,6 +15,8 @@ article,aside,details,figcaption,figure,
|
||||
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;
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user