jdb/resume
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Adding skill details, changing base page to work better without JS.

Browse Source
This commit is contained in:
Jonathan Bernard 2015-09-27 12:18:10 -05:00
parent c79935151c
commit 52d28fd7be
3 changed files with 319 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

344
html-interactive/index.html
View File

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

20
html-interactive/resume.js
View File

@ -5,7 +5,14 @@
R.PageView = Backbone.View.extend({ R.PageView = Backbone.View.extend({
el: $("body")[0], el: $("body")[0],
events: {
"click .skill span.name": "showSkillLinks",
"click #glass-pane": "unselect",
"click .selected div.name": "unselect"
},
initialize: function(options) { initialize: function(options) {
_.bindAll(this, "showSkillLinks");
window.addEventListener("scroll", this.fixHeader); window.addEventListener("scroll", this.fixHeader);
}, },
@ -13,7 +20,18 @@
var $h = $("header"); var $h = $("header");
if ($(document).scrollTop() > 100) { if ($(document).scrollTop() > 100) {
$h.addClass("fixed"); } $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(); }
}); });
})(); })();

58
html-interactive/resume.scss
View File

@ -1,5 +1,6 @@
@import url("//fonts.googleapis.com/css?family=Monda|Cantarell|Exo 2"); @import url("//fonts.googleapis.com/css?family=Monda|Cantarell|Exo 2");
$white: #EEE;
$black: #222; $black: #222;
// Simple HTML5 reset. Not comprehensive but sufficient. // Simple HTML5 reset. Not comprehensive but sufficient.
@ -14,6 +15,8 @@ article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { footer,header,hgroup,menu,nav,section {
display:block; } display:block; }
html { background-color: $white; }
body { body {
font-family: Cantarell; font-family: Cantarell;
font-size: 125%; font-size: 125%;
@ -36,6 +39,7 @@ header {
right: 0; right: 0;
top: 0; top: 0;
transition: all 0.2s; transition: all 0.2s;
z-index: 3;
h1 { h1 {
font-size: 5rem; font-size: 5rem;
@ -94,7 +98,7 @@ nav#sectionNav {
} }
section { section {
a { a.anchor {
display: block; display: block;
position: relative; position: relative;
top: -3rem; top: -3rem;
@ -114,11 +118,48 @@ section {
& > div { margin-bottom: 2rem; } & > div { margin-bottom: 2rem; }
&#skills-section { &#skills-section {
span { a.nojs {
cursor: pointer; color: $black;
text-decoration: none;
&:after { content: ","; } &:after { content: ","; }
&:last-of-type: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 { &#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;
}