Skip to content

Commit

Permalink
updating icons
Browse files Browse the repository at this point in the history
  • Loading branch information
@DarthOstrich
DarthOstrich committed Jan 29, 2020
1 parent dde35d3 commit c289ef8
Show file tree
Hide file tree
Showing 14 changed files with 260 additions and 30 deletions.
120 changes: 107 additions & 13 deletions src/components/Footer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,16 @@ import { Link } from 'gatsby';

// import logo from '../img/logo.svg';
import logo from '../img/CodeNutt-02.png';
import facebook from '../img/social/facebook.svg';
import instagram from '../img/social/instagram.svg';
import twitter from '../img/social/twitter.svg';
import vimeo from '../img/social/vimeo.svg';
import codepen from '../img/portfolio-logo-set_codepen.svg';
import github from '../img/portfolio-logo-set_github.svg';
import medium from '../img/portfolio-logo-set_medium.svg';
import twitter from '../img/portfolio-logo-set_twitter.svg';
import dev from '../img/portfolio-logo-set_dev.svg';
import youtube from '../img/portfolio-logo-set_youtube.svg';
// import facebook from '../img/social/facebook.svg';
// import instagram from '../img/social/instagram.svg';
// import twitter from '../img/social/twitter.svg';
// import vimeo from '../img/social/vimeo.svg';

const Footer = class extends React.Component {
render() {
Expand All @@ -17,15 +23,103 @@ const Footer = class extends React.Component {
<img src={logo} alt="Digital Nutt" style={{ width: '10em' }} />
</aside>
<section className="column">
<h4 className="title is-4 has-text-white">Socials</h4>
<ul>
<li>Medium</li>
<li>Twitter</li>
<li>Dev.to</li>
<li>Youtube</li>
<li>Github</li>
<li>LinkedIn</li>
</ul>
<a href="https://codepen.io/DarthOstrich">
<svg
id="Layer_1"
data-name="Layer 1"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 200 200"
className="icon icon--social">
<title>portfolio-logo-set</title>
<g id="gi95s1.tif">
<path
className="icon__stroke icon__stroke--social"
d="M50.09,100.1c0-4.62-.28-9.24.14-13.83a8.34,8.34,0,0,1,2.9-5.54c14.42-9.87,29-19.45,43.53-29.18,2.39-1.61,4.42-1.54,6.8.06q21.6,14.49,43.32,28.85A6.72,6.72,0,0,1,150,86.7q-.13,13.3,0,26.62a6.94,6.94,0,0,1-3.46,6.46q-21.42,14.15-42.7,28.48c-2.76,1.87-5,1.78-7.69,0q-21.28-14.39-42.71-28.48a6.84,6.84,0,0,1-3.37-6.51C50.19,108.85,50.09,104.47,50.09,100.1ZM61.93,84.82c5,3.31,9.51,6.4,14.14,9.3A2.8,2.8,0,0,0,78.53,94q8.11-5.3,16.09-10.81a3.25,3.25,0,0,0,1.26-2.25c.1-6,.05-11.94.05-18.75Zm76.17,0-34-22.6c0,6.79-.09,12.68.09,18.55a4.44,4.44,0,0,0,2,2.91c4.91,3.44,9.89,6.78,14.92,9.94a3.8,3.8,0,0,0,3.32.21C128.88,91.09,133.22,88.08,138.1,84.82ZM61.94,115.27l34,22.63c0-6.82,0-12.79-.05-18.76a3.3,3.3,0,0,0-1.27-2.25q-8-5.52-16.1-10.8a2.8,2.8,0,0,0-2.46-.13C71.44,108.89,66.91,112,61.94,115.27Zm76.14,0c-4.87-3.26-9.23-6.27-13.69-9a3.85,3.85,0,0,0-3.31.22c-5.07,3.21-10,6.57-15,10-.8.54-1.9,1.45-1.93,2.22-.15,6.17-.08,12.36-.08,19.27ZM84.73,100.05c4.88,3.28,9.51,6.44,14.2,9.48a2.77,2.77,0,0,0,2.43-.17c4.6-3,9.13-6.1,13.89-9.33-4.76-3.2-9.23-6.29-13.76-9.18a3.39,3.39,0,0,0-3,0C93.94,93.75,89.49,96.84,84.73,100.05ZM58.67,107.3,69.51,100,58.67,92.82Zm82.67-14.48-10.84,7.24,10.83,7.17Z"
/>
</g>
</svg>
</a>
{/* <a */}
{/* href="https://www.linkedin.com/in/jared-nutt-b0326854/" */}
{/* target="_blank"> */}
{/* <svg */}
{/* data-name="social-linkedin" */}
{/* xmlns="http://www.w3.org/2000/svg" */}
{/* viewBox="0 0 200 200" */}
{/* className="icon icon--social"> */}
{/* <path */}
{/* d="M132.61,23.67a11.93,11.93,0,0,0-.07-1.59A12.6,12.6,0,0,0,119.9,11.36Q72,11.49,24,11.36A12.67,12.67,0,0,0,11.38,24q.13,48,0,96.06A12.64,12.64,0,0,0,24,132.64c16-.13,32,0,48,0H120.3a12.21,12.21,0,0,0,12.31-12.27Q132.62,72,132.61,23.67Zm-84.9,90.66h-18V59.94h18ZM38.64,49.54A10.71,10.71,0,0,1,27.81,38.68,10.62,10.62,0,0,1,38.72,27.79,10.73,10.73,0,0,1,49.57,38.66,10.84,10.84,0,0,1,38.64,49.54Zm75.76,64c0,.26,0,.51,0,.82H96.26v-1.22q0-15.1,0-30.2a9.34,9.34,0,0,0-6.47-9.24,9.07,9.07,0,0,0-10.31,4,10.41,10.41,0,0,0-1.39,5.5q0,15,0,29.9c0,.39,0,.79,0,1.27H60V59.93H78.09v6.8l.21.06c.23-.3.46-.6.71-.89,3.88-4.51,8.71-7.29,14.75-7.16,7.49.17,13.24,3.73,17.35,9.93A20.08,20.08,0,0,1,114.41,80Q114.39,96.77,114.41,113.51Z" */}
{/* className="icon__stroke icon__stroke--social"></path> */}
{/* </svg> */}
{/* </a> */}
<a href="https://twitter.com/code_nutt" target="_blank">
<svg
id="Layer_1"
data-name="Layer 1"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 200 200"
className="icon icon--social">
<title>portfolio-logo-set</title>
<g id="gJjI1E.tif">
<path
className="icon__stroke icon__stroke--social"
d="M116.92,59.19h4.32c.79.18,1.65.33,2.47.52a20.6,20.6,0,0,1,9.93,5.4,1.36,1.36,0,0,0,1.05.42c2.45-.69,4.9-1.37,7.28-2.25,1.77-.66,3.44-1.58,5.29-2.47a21.55,21.55,0,0,1-8.47,11.07,39.34,39.34,0,0,0,11.21-3l-.49.79a39.14,39.14,0,0,1-8.89,9.18,1.81,1.81,0,0,0-.8,1.72,54.7,54.7,0,0,1-1.47,14.48,59.55,59.55,0,0,1-18.82,31.84,54.75,54.75,0,0,1-29.75,13.33c-1.58.21-3.22.39-4.84.59H78.27c-1.91-.21-3.83-.34-5.73-.64a58.87,58.87,0,0,1-19.45-6.59C52,133,51,132.37,50,131.76a47.12,47.12,0,0,0,15.81-1.59A40.39,40.39,0,0,0,80,123a20.42,20.42,0,0,1-11.9-4.14A20.1,20.1,0,0,1,61,108.76c1.58.08,3,.25,4.44.19s2.9-.31,4.34-.49A22.28,22.28,0,0,1,58.16,101a20.19,20.19,0,0,1-4.47-13.11,21.33,21.33,0,0,0,9.17,2.52,20.66,20.66,0,0,1-8.5-12.55,20.37,20.37,0,0,1,2.29-14.9,58.81,58.81,0,0,0,19,15.28,57.38,57.38,0,0,0,23.23,6.2,49.81,49.81,0,0,1-.15-6.23c.79-8.51,5.28-14.41,13.18-17.63A43.52,43.52,0,0,1,116.92,59.19Z"
/>
</g>
</svg>
</a>
<a href="https://github.com/DarthOstrich" target="_blank">
<svg
id="Layer_1"
data-name="Layer 1"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 200 200"
className="icon icon--social">
<title>portfolio-logo-set</title>
<g id="_7JV8hd.tif" data-name=" 7JV8hd.tif">
<path
className="icon__stroke icon__stroke--social"
d="M125.52,155.56c-2.44,0-3.49-.87-3.85-3.26a11.68,11.68,0,0,1-.14-2V131.11a18,18,0,0,0-3.07-10.26c-.44-.62-.92-1.21-1.5-2,1.41-.25,2.69-.48,4-.73a51.58,51.58,0,0,0,13-3.94,25.68,25.68,0,0,0,12.68-13.4,39,39,0,0,0,3.22-20,27.18,27.18,0,0,0-4.41-12.71c-.42-.6-.74-1.27-1.18-1.84a6.18,6.18,0,0,1-.92-5.53A25.11,25.11,0,0,0,142.16,46a2.17,2.17,0,0,0-2.31-1.47,20.85,20.85,0,0,0-9.62,2.68q-3.41,1.76-6.74,3.69a5.15,5.15,0,0,1-3.89.58A70.73,70.73,0,0,0,95,50.17c-2.61.31-5.2.85-7.77,1.38a4.79,4.79,0,0,1-3.69-.6,47.39,47.39,0,0,0-12.07-5.67,43.31,43.31,0,0,0-4.52-.84,1.85,1.85,0,0,0-2.18,1.39,26.73,26.73,0,0,0-.85,16.28,3.13,3.13,0,0,1-.64,3.06,27.25,27.25,0,0,0-6,13.83,44.2,44.2,0,0,0,.59,14.19,31,31,0,0,0,5,12.52,26.92,26.92,0,0,0,14.34,10.35c3.69,1.14,7.45,1.84,11.19,2.67.42.1.84.17,1.4.28a15.6,15.6,0,0,0-1.75,2.45c-.93,1.91-1.57,3.91-2.41,5.85a2.85,2.85,0,0,1-1.12,1.5c-4.52,1.9-9.1,2.47-13.65.09a17.25,17.25,0,0,1-6.05-5.62c-1.62-2.3-3.23-4.61-5.72-6.14s-4.9-2.3-7.72-1.72c-.52.11-1.26.44-1.38.83a1.94,1.94,0,0,0,.61,1.49,15.63,15.63,0,0,0,2.45,2,18.51,18.51,0,0,1,6.14,7.17c1.32,2.57,2.33,5.29,4.39,7.43a15.06,15.06,0,0,0,10.2,4.77c3.42.22,6.86-.05,10.29-.1h1.11c0,.39.07.76.07,1.15,0,3.92-.14,7.84-.05,11.75.06,2.88-1.73,3.6-3.69,3.69h-.66"
/>
</g>
</svg>
</a>
<a href="https://medium.com/@jarednutt27" target="_blank">
<svg
id="Layer_1"
data-name="Layer 1"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 200 200"
className="icon icon--social">
<title>portfolio-logo-set</title>
<g id="_5pDvOt.tif" data-name="5pDvOt.tif">
<path
className="icon__stroke icon__stroke--social"
d="M150,50.36v99.9H50.1V50.36H150ZM78,88.11h.13l.22.48q8.28,18,16.55,36.08c.21.46.32,1.09.68,1.32s1,0,1.48.08.57-.14.72-.51Q105,107,112.33,88.49l.18-.41a.22.22,0,0,1,.09.19v30.14a1.89,1.89,0,0,1-.62,1.47c-1.64,1.56-3.23,3.17-4.88,4.7a1.55,1.55,0,0,0-.41,1.56h26.22a1.53,1.53,0,0,0-.54-1.7c-1.6-1.51-3.14-3.07-4.71-4.6a1.57,1.57,0,0,1-.52-1.21c0-1.42,0-2.83,0-4.25q0-17,0-33.95a1.58,1.58,0,0,1,.53-1.2c1.65-1.57,3.27-3.18,5-4.71a1.55,1.55,0,0,0,.43-1.63c-.2,0-12.13,0-17.92,0a.76.76,0,0,0-.83.58Q108,89.3,101.61,105.15c-.08.2-.17.4-.29.68-.13-.27-.22-.44-.29-.62q-7.26-15.9-14.51-31.82a.72.72,0,0,0-.79-.51c-6.1,0-12.19,0-18.29,0h-.7c.09.49,0,1,.25,1.3,2,2.53,4.13,5,6.22,7.51a2.8,2.8,0,0,1,.72,1.86q0,14.73,0,29.46a5.49,5.49,0,0,0,0,.58,3.32,3.32,0,0,1-.77,2.59c-2.26,2.75-4.52,5.51-6.81,8.23A1.92,1.92,0,0,0,66,126H86a2,2,0,0,0-.42-1.68c-2.29-2.7-4.53-5.45-6.78-8.18a3.52,3.52,0,0,1-.83-2.44c0-.39,0-.78,0-1.17V88.11Z"
/>
<path
className="icon__stroke icon__stroke--social"
d="M127.76,50.36H50.1v99.9s-.09,0-.09,0,0-.26,0-.39V50.26h.76c32.93,0,66.31.09,99.24.1"
/>
</g>
</svg>
</a>
<a href="https://www.youtube.com/channel/UCZ9sBtbkSoLhjUaS-B0I-BQ">
<svg
id="Layer_1"
data-name="Layer 1"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 200 200"
className="icon icon--social">
<title>portfolio-logo-set</title>
<g id="o3DiYX.tif">
<path
className="icon__stroke icon__stroke--social"
d="M149.44,84.81a44,44,0,0,0-1.54-9.24c-1.61-5.14-5-8.34-10.28-9.22a64.78,64.78,0,0,0-8.24-.68c-9.78-.32-19.57-.56-28.34-.81-9.43.22-17.85.36-26.27.63-4,.12-8,.32-11.94.81A11.63,11.63,0,0,0,52.76,74a23.17,23.17,0,0,0-1.55,5.55c-.51,4.38-.91,8.79-1.06,13.2a186.11,186.11,0,0,0,.55,24.08,33.83,33.83,0,0,0,2,9.38,11.29,11.29,0,0,0,7.76,7,43.87,43.87,0,0,0,10.83,1.32c9.19.27,18.38.59,27.58.64,8,.05,15.92-.19,23.88-.43,4.74-.14,9.49-.34,14.2-.84a11.75,11.75,0,0,0,10.27-7.65,25.57,25.57,0,0,0,1.23-3.9,77.2,77.2,0,0,0,1.4-14.93A197.63,197.63,0,0,0,149.44,84.81ZM89.7,113.08V84.92l27.11,14.13Z"
/>
</g>
</svg>
</a>
</section>
</div>
<div className="content">Socials</div>
Expand Down
25 changes: 13 additions & 12 deletions src/components/all.sass
View file
Original file line number Diff line number Diff line change
Expand Up @@ -241,10 +241,11 @@ blockquote:before
transition: filter $animation;


// .icon--social
// height: 4rem;
// margin: 0 1rem;
.icon--social
width: 5rem;
height: 5rem;
margin: 0 1rem;


.icon__stroke
fill-opacity: 0;
Expand All @@ -253,14 +254,14 @@ blockquote:before
stroke-width: 4px;


// .icon__stroke--social
// transition: all $animation;
// stroke: $link;
// fill: $link;
// fill-opacity: 0;
// &:hover
// transition: all $animation;
// fill-opacity: 1;
.icon__stroke--social
transition: all $animation;
stroke: $link;
fill: $link;
fill-opacity: 0;
&:hover
transition: all $animation;
fill-opacity: 1;


.icon__stroke--inner
Expand Down
1 change: 1 addition & 0 deletions src/img/portfolio-logo-set-01.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions src/img/portfolio-logo-set_codepen.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions src/img/portfolio-logo-set_dev.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions src/img/portfolio-logo-set_github.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading

0 comments on commit c289ef8

Please sign in to comment.