stuff?

cooperbrislain · Mar 30, 2021 · 39640f8 · 39640f8
1 parent ede0570
commit 39640f8
Show file tree

Hide file tree

Showing 16 changed files with 146 additions and 778 deletions.
diff --git a/.idea/GitResume.iml b/.idea/GitResume.iml
diff --git a/.idea/jsLibraryMappings.xml b/.idea/jsLibraryMappings.xml
diff --git a/_includes/head.html b/_includes/head.html
@@ -8,8 +8,11 @@
 <link rel="manifest" href="{{ "/assets/icon/manifest.json" | absolute_url }}">
 <link rel="mask-icon" href="{{ "/assets/icon/safari-pinned-tab.svg" | absolute_url }}" color="#5bbad5">
 <link rel="shortcut icon" href="{{ "/assets/icon/favicon.ico" | absolute_url }}">
+<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.2/css/all.css">
+<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.2/css/v4-shims.css">
 <meta name="msapplication-config" content="{{ "/assets/icon/browserconfig.xml" | absolute_url }}">
 <meta name="theme-color" content="#00892B">
 <!-- CSS -->
+<script src="https://kit.fontawesome.com/ba7572c917.js" crossorigin="anonymous"></script>
 <link rel="stylesheet" href="{{ "/assets/css/style.css" | absolute_url }}" />
 <noscript><link rel="stylesheet" href="{{ "/assets/css/noscript.css" | absolute_url }}" /></noscript>
diff --git a/_includes/tag-list.html b/_includes/tag-list.html
@@ -3,6 +3,9 @@
         {% if item.enabled %}
             {% if item.slug %}
                 <li data-skill="{{ item.slug }}" data-json="{{ item | jsonify | xml_escape }}">
+                    {% if item.icon %}
+                        <i class="{{ item.icon }}"></i>
+                    {% endif %}
                     {{ item.title }}
                 </li>
             {% else %}

diff --git a/_sass/_custom.scss b/_sass/_custom.scss
@@ -304,3 +304,13 @@ canvas {
     left: 0;
     pointer-events: none;
 }
+
+li[data-skill] {
+    width: auto;
+    display: inline-block;
+    i {
+        ::after {
+            content: "<br />";
+        }
+    }
+}
diff --git a/_sass/_main.scss b/_sass/_main.scss
@@ -2,7 +2,6 @@
 @import 'libs/functions';
 @import 'libs/mixins';
 @import 'libs/skel';
-@import url('https://kit.fontawesome.com/ba7572c917.js');
 @import url('https://fonts.googleapis.com/css?family=Merriweather:300,700,300italic,700italic|Source+Sans+Pro:900');
 
 /*

diff --git a/assets/css/font-awesome.min.css b/assets/css/font-awesome.min.css
diff --git a/assets/css/noscript.css b/assets/css/noscript.css
@@ -1,5 +1,3 @@
-@import url(font-awesome.min.css);
-
 /*
 	Massively by HTML5 UP
 	html5up.net | @ajlkn

diff --git a/assets/fonts/FontAwesome.otf b/assets/fonts/FontAwesome.otf
diff --git a/assets/fonts/fontawesome-webfont.eot b/assets/fonts/fontawesome-webfont.eot
diff --git a/assets/fonts/fontawesome-webfont.svg b/assets/fonts/fontawesome-webfont.svg
diff --git a/assets/fonts/fontawesome-webfont.ttf b/assets/fonts/fontawesome-webfont.ttf
diff --git a/assets/fonts/fontawesome-webfont.woff b/assets/fonts/fontawesome-webfont.woff
diff --git a/assets/fonts/fontawesome-webfont.woff2 b/assets/fonts/fontawesome-webfont.woff2
diff --git a/assets/js/script.js b/assets/js/script.js
@@ -6,8 +6,8 @@ String.prototype.toKebabCase = function() {
 };
 
 Math.lerp = (value1, value2, amount) => {
-    amount = amount < 0 ? 0 : amount;
-    amount = amount > 1 ? 1 : amount;
+    let amount_ = amount < 0 ? 0 : amount;
+    amount_ = amount > 1 ? 1 : amount;
     return value1 + (value2 - value1) * amount;
 };
 
@@ -27,23 +27,23 @@ connectBubbles = function($from, $to, fromRadius=50, toRadius=50, smallRadius=15
 
     document.ctx = ctx;
     document.$selected = $from;
-    // to loop
+
     $to.each(function() {
         const $this = $(this);
         let toAnchor, toRadius;
-
-        if ($this === $from[0]) {
-            return 0;
-        }
+        console.log($this, $from);
+        if ($this === $from) { return 0; }
 
         if ($this.is('.job .skills li')) {
             const $sectionHeading = $this.parent().parent().find('h3');
+            console.log($this, $sectionHeading);
             toAnchor = {
                 x: $sectionHeading.offset().left-15,
                 y: $sectionHeading.offset().top+$sectionHeading.outerHeight()/2
             };
             toRadius = 15;
         } else {
+            console.log($this);
             toAnchor = {
                 x: $this.offset().left+$this.outerWidth()/2,
                 y: $this.offset().top+$this.outerHeight()/2
@@ -58,7 +58,7 @@ connectBubbles = function($from, $to, fromRadius=50, toRadius=50, smallRadius=15
         );
 
         // calculate segment between
-        const lineOrigin = {
+        const lineStart = {
             'x': fromAnchor.x+Math.cos(angle)*fromRadius,
             'y': fromAnchor.y+Math.sin(angle)*fromRadius
         };
@@ -68,25 +68,34 @@ connectBubbles = function($from, $to, fromRadius=50, toRadius=50, smallRadius=15
             'y': toAnchor.y-Math.sin(angle)*toRadius
         };
 
-        ctx = document.ctx;
-
-        // draw line
-        ctx.beginPath();
-        ctx.strokeStyle = "#02acf3";
-        ctx.lineWidth = 3;
-        ctx.globalAlpha = 0.5;
-        ctx.moveTo(lineOrigin.x, lineOrigin.y);
-        ctx.lineTo(lineEnd.x, lineEnd.y);
-        ctx.stroke();
-        // glow target
-        ctx.beginPath();
-        ctx.arc(toAnchor.x,toAnchor.y,toRadius,0,2*Math.PI);
-        ctx.strokeStyle="#32ccf3";
-        ctx.innerGlow(15);
-        document.ctx = ctx;
+        document.ctx = drawLine(document.ctx, lineStart, lineEnd);
     });
 };
 
+const drawLine = (ctx, lineStart, lineEnd) => {
+    ctx.strokeStyle = "#02acf3";
+    ctx.lineWidth = 3;
+    ctx.globalAlpha = 0.5;
+
+    ctx.beginPath();
+    ctx.moveTo(lineStart.x, lineStart.y);
+    ctx.lineTo(lineEnd.x, lineEnd.y);
+    ctx.stroke();
+
+    return ctx;
+};
+
+const drawCircle = (ctx, center, radius) => {
+    ctx.strokeStyle="#32ccf3";
+
+    ctx.beginPath();
+    ctx.arc(center.x, center.y, radius, 0, 2*Math.PI);
+    ctx.innerGlow(15);
+
+    return ctx;
+};
+
+
 CanvasRenderingContext2D.prototype.innerGlow = function(iterations) {
     this.save();
     this.globalAlpha = 0.08;
@@ -111,53 +120,41 @@ CanvasRenderingContext2D.prototype.eclipseText = function(text, x, y, iterations
     this.restore();
 };
 
-$(document).ready(function() {
-    // assign data from json tags
-    $('[data-json]').each(function () {
-        $(this).data($(this).data('json'));
-        $(this).removeAttr('json');
-        $(this).removeData('json');
-    });
-    $('strong').each(function(index) {
-        let skillName = $(this).text();
-        skillName = skillName.toKebabCase();
-        $(this).attr('data-skill',skillName);
-        $(this).data('skill',skillName);
-    });
-    $('#technical-skills+ul li[data-skill]').each(function() {
-        if($(this).data('slug')) {
-            $(this).attr('data-skill',$(this).data('slug'));
-            $(this).data('skill',$(this).data('slug'));
-        }
-        if($(this).data('synonyms')) {
-            document.curSkill = $(this).data('skill');
-            $.each($(this).data('synonyms'), function(index, value) {
-                const $items = $(`strong[data-skill="${value}"`);
-                $items.attr('data-skill', document.curSkill);
-                $items.data('skill', document.curSkill);
+const writeText = (text, origin= {x: 0, y: 0}) => {
+    const ctx = document.ctx;
 
-            });
-        }
-    });
+    ctx.font = "900 14pt Tajawal";
+    ctx.textAlign = "center";
+    ctx.fillStyle = "black";
+    ctx.strokeStyle = "white";
 
-    // set up canvas
-    $('<canvas id="canvas">').appendTo('body'); // todo: change this to append before scripts?
-    const canvas = document.getElementById('canvas');
+    ctx.eclipseText(text, origin.x, origin.y, 15);
+    document.$selected.css('visibility','hidden');
+    document.ctx = ctx;
+    return 0;
+};
+
+const buildCanvas = $canvas => {
+    const canvas = $canvas.get();
+    const ctx = canvas.getContext('2d');
+
+    document.ctx = ctx;
     // set width and height to the entire page (as opposed to the window)
+    // todo: convert this vanilla js to jQuery?
     canvas.width = document.documentElement.clientWidth;
     canvas.height = document.documentElement.clientHeight;
-    let ctx = document.getElementById('canvas').getContext('2d');
-    document.ctx = ctx;
-    let devicePixelRatio = window.devicePixelRatio || 1;
-    let backingStoreRatio = ctx.webkitBackingStorePixelRatio ||
-                        ctx.mozBackingStorePixelRatio ||
-                        ctx.msBackingStorePixelRatio ||
-                        ctx.oBackingStorePixelRatio ||
-                        ctx.backingStorePixelRatio || 1;
-    let ratio = devicePixelRatio / backingStoreRatio;
+
+    const devicePixelRatio = window.devicePixelRatio || 1;
+    const backingStoreRatio = ctx.webkitBackingStorePixelRatio ||
+        ctx.mozBackingStorePixelRatio ||
+        ctx.msBackingStorePixelRatio ||
+        ctx.oBackingStorePixelRatio ||
+        ctx.backingStorePixelRatio || 1;
+    const ratio = devicePixelRatio / backingStoreRatio;
+
     if (devicePixelRatio !== backingStoreRatio) {
-        let oldWidth = canvas.width;
-        let oldHeight = canvas.height;
+        const oldWidth = canvas.width;
+        const oldHeight = canvas.height;
         canvas.width = oldWidth * ratio;
         canvas.height = oldHeight * ratio;
         canvas.style.width = oldWidth + 'px';
@@ -166,7 +163,34 @@ $(document).ready(function() {
     }
     ctx.globalAlpha = 0.5;
     ctx.lineWidth=3;
+
     document.ctx = ctx;
+};
+
+$(document).ready(function() {
+
+    const $canvas = $('<canvas id="canvas">').appendTo('body');
+
+    // assign data from json tags
+    $('[data-json]').each((i, $item) => {
+        console.log($item);
+        $item.data($item.data('json'));
+        $item.removeAttr('json');
+        $item.removeData('json');
+    });
+
+    // assign data
+    $('strong').each((i, $item) => {
+        console.log($item);
+        const skillName = $item.text().toKebabCase();
+        $item.attr('data-skill',skillName);
+        $item.data('skill',skillName);
+    });
+
+    enhanceTechnicals();
+
+    buildCanvas($canvas);
+
 
     const $skills = $('#technical-skills+ul>li, strong[data-skill]');
 
@@ -223,31 +247,29 @@ $(document).ready(function() {
         };
         const $skillAnchors = $(`[data-skill="${document.$selected.data('skill')}"]`);
         // fade out other skills.
-        $('.job').not($('.job').has(`[data-skill="${document.$selected.data('skill')}"]`)).fadeOut(() => {
-            $('canvas').css('pointer-events', 'auto');
-            ctx = document.ctx;
-            ctx.clearRect(0, 0, $('canvas').outerWidth(), $('canvas').outerHeight());
-            ctx.beginPath();
-            document.ctx = ctx;
+        const $jobs = $('.job');
+        const $selectedJob = $jobs.has(`[data-skill="${document.$selected.data('skill')}"]`);
+        $jobs.not($selectedJob).fadeOut(() => {
+            const $canvas = $('canvas');
+            let ctx = document.ctx;
+            $canvas.css('pointer-events', 'auto');
+
+            ctx.clearRect(0, 0, $canvas.outerWidth(), $canvas.outerHeight());
+
             connectBubbles(document.$selected, $skillAnchors);
-            ctx = document.ctx;
-            ctx.font = "900 14pt Tajawal";
-            ctx.fillStyle = "black";
-            ctx.strokeStyle = "white";
-            ctx.textAlign = "center";
-            ctx.eclipseText(document.$selected.text().trim(),
-                document.fromAnchor.x,
-                document.fromAnchor.y, 15);
-            document.$selected.css('visibility','hidden');
-            document.ctx = ctx;
+            const text = document.$selected.text().trim();
+            writeText(text);
         });
 
         $('canvas').on('click', e => {
-            $this = $(e.target);
+            const $this = $(e.target);
+            const $canvas = $('canvas');
+
             $('[data-skill]').css('visibility','visible');
+
             ctx = document.ctx;
             ctx.globalAlpha = 1;
-            ctx.clearRect(0, 0, $('canvas').outerWidth(), $('canvas').outerHeight());
+            ctx.clearRect(0, 0, $canvas.outerWidth(), $canvas.outerHeight());
             document.ctx = ctx;
             e.preventDefault();
             $this.css('pointer-events', 'none');
@@ -259,4 +281,23 @@ $(document).ready(function() {
     $('.btn-grip').on('click', () => { $('#nav .panel').slideToggle() });
 
     $(document).on('scroll', () => { $('#nav .panel').slideUp(); });
-});
+});
+
+const enhanceTechnicals = () => {
+    $('#technical-skills+ul li[data-skill]').each(function() {
+        const $this = $(this);
+        if($this.data('slug')) {
+            $this.attr('data-skill',$this.data('slug'));
+            $this.data('skill',$this.data('slug'));
+        }
+        if($this.data('synonyms')) {
+            document.curSkill = $this.data('skill');
+            const synonyms = $this.data('synonyms');
+            $.each(synonyms, function(i, skill) {
+                const $items = $(`strong[data-skill="${skill}"`);
+                $items.attr('data-skill', document.curSkill);
+                $items.data('skill', document.curSkill);
+            });
+        }
+    });
+};
diff --git a/index.md b/index.md
@@ -9,7 +9,7 @@ COOPER BRISLAIN
 
 > Full-Stack Software Engineer looking to make an impact building systems that facilitate better discourse on social media. 
  
-## TECHNICAL SKILLS
+## SKILLS
 
 {% include tag-list.html items=site.data.skills_technical %}