From 4f4df0f054941ab1aae885bc1008e75a67932182 Mon Sep 17 00:00:00 2001 From: Arjan Jassal Date: Mon, 15 Jul 2019 15:20:37 -0700 Subject: [PATCH 1/2] change gh link hover --- scripts/index.js | 2 +- styles/projects.scss | 33 ++++++++++++++++++++++++++------- 2 files changed, 27 insertions(+), 8 deletions(-) diff --git a/scripts/index.js b/scripts/index.js index 1c656823..672dae68 100644 --- a/scripts/index.js +++ b/scripts/index.js @@ -6,7 +6,7 @@ import { teamworkAnimation } from './teamworkAnimation'; import { toggleScrollIndicator } from './toggleScrollIndicator'; import { workAccordion } from './workAccordion'; -window.addEventListener('DOMContentLoaded', event => { +window.addEventListener('DOMContentLoaded', () => { aboutModal(); reactCameraAnimation(); readitAnimation(); diff --git a/styles/projects.scss b/styles/projects.scss index b0a282e3..3a7b37cc 100644 --- a/styles/projects.scss +++ b/styles/projects.scss @@ -158,24 +158,43 @@ @include mq($from: desktop) { height: 36px; - position: static; + position: relative; + bottom: auto; + right: auto; width: 36px; + } - svg { - height: 24px; - width: 24px; - } + &::before { + border-radius: 50%; + border: 6px solid white; + content: ''; + height: calc(100% + 2px); + left: -1px; + position: absolute; + top: -1px; + transform: scale(0); + transition: transform 0.35s var(--ease-out-cubic); + width: calc(100% + 2px); } svg { height: 18px; width: 18px; - transition: transform 0.25s var(--ease-out-cubic); + transition: transform 0.35s var(--ease-out-cubic); + + @include mq($from: desktop) { + height: 24px; + width: 24px; + } } &:hover { + &::before { + transform: none; + } + svg { - transform: scale(1.25) rotate(360deg); + transform: rotate(360deg); } } } From 2963868b24ed5fa7e89691edc4afa35213b3762a Mon Sep 17 00:00:00 2001 From: Arjan Jassal Date: Mon, 15 Jul 2019 16:03:16 -0700 Subject: [PATCH 2/2] redo project links --- includes/projects.pug | 9 +++-- scripts/index.js | 2 ++ scripts/projectLinks.js | 36 +++++++++++++++++++ styles/projects.scss | 79 ++++++++++++++++++----------------------- 4 files changed, 78 insertions(+), 48 deletions(-) create mode 100644 scripts/projectLinks.js diff --git a/includes/projects.pug b/includes/projects.pug index e01d4430..cf91e15f 100644 --- a/includes/projects.pug +++ b/includes/projects.pug @@ -4,7 +4,7 @@ section.projects h2.common-section-title 01. Side Projects .projects-list - .projects-box.js-scroll + .projects-box.js-scroll(data-link="https://github.com/ArjanJ/teamwork") .projects-info h3.projects-name Teamwork p.projects-desc An app to keep track of feedback, schedule 1-on-1 meetings, and keep your team happy. @@ -16,10 +16,11 @@ section.projects li.projects-tech-list-item Firebase a.projects-gh(href="https://github.com/ArjanJ/teamwork" rel="noopener" aria-label="GitHub repository for Teamwork" target="_blank") include ./icons/gh-icon.pug + span See GitHub .projects-img.projects-box--sunset include ./teamwork.pug - .projects-box.projects-box--reverse.js-scroll + .projects-box.projects-box--reverse.js-scroll(data-link="https://github.com/ArjanJ/react-camera") .projects-info h3.projects-name React Camera p.projects-desc A flexible camera component for React DOM. Take photos using the latest WebRTC API's. @@ -29,10 +30,11 @@ section.projects li.projects-tech-list-item Styled Components a.projects-gh(href="https://github.com/ArjanJ/react-camera" rel="noopener" aria-label="GitHub repository for React Camera" target="_blank") include ./icons/gh-icon.pug + span See GitHub .projects-img.projects-box--redsky include ./react-camera.pug - .projects-box.js-scroll + .projects-box.js-scroll(data-link="https://github.com/ArjanJ/readit") .projects-info h3.projects-name Readit p.projects-desc Browse Reddit without visual noise. Built with React + Flux. @@ -43,5 +45,6 @@ section.projects li.projects-tech-list-item Reddit API a.projects-gh(href="https://github.com/ArjanJ/readit" rel="noopener" aria-label="GitHub repository for Readit" target="_blank") include ./icons/gh-icon.pug + span See GitHub .projects-img.projects-box--cyan include ./readit.pug \ No newline at end of file diff --git a/scripts/index.js b/scripts/index.js index 672dae68..963b0643 100644 --- a/scripts/index.js +++ b/scripts/index.js @@ -1,4 +1,5 @@ import { aboutModal } from './aboutModal'; +import { projectLinks } from './projectLinks'; import { reactCameraAnimation } from './reactCameraAnimation'; import { readitAnimation } from './readitAnimation'; import { scrollAnimation } from './scrollAnimation'; @@ -8,6 +9,7 @@ import { workAccordion } from './workAccordion'; window.addEventListener('DOMContentLoaded', () => { aboutModal(); + projectLinks(); reactCameraAnimation(); readitAnimation(); scrollAnimation(); diff --git a/scripts/projectLinks.js b/scripts/projectLinks.js new file mode 100644 index 00000000..c060ca74 --- /dev/null +++ b/scripts/projectLinks.js @@ -0,0 +1,36 @@ +import isMobile from 'is-mobile'; + +/** + * projectsLinks + * On mobile the project links are added to the DOM + * using javascript because the actual link doesn't + * fit into the mobile design (it's hidden). + */ +export const projectLinks = () => { + const projects = document.querySelectorAll('.projects-box'); + + const handleClick = ({ target }) => { + const projectBox = target.closest('.projects-box'); + const link = projectBox.getAttribute('data-link'); + + // Open project link in new tab. + window.open(link, '_blank'); + }; + + const addEventListeners = () => { + for (let i = 0; i < projects.length; i++) { + projects[i].addEventListener('click', handleClick, false); + } + }; + + const init = () => { + // If we're on a desktop machine we don't need to bother adding links. + if (!isMobile()) { + return null; + } + + addEventListeners(); + }; + + init(); +}; diff --git a/styles/projects.scss b/styles/projects.scss index 3a7b37cc..5db3a75d 100644 --- a/styles/projects.scss +++ b/styles/projects.scss @@ -102,7 +102,7 @@ display: flex; flex-wrap: wrap; list-style-type: none; - margin-bottom: 24px; + margin-bottom: 30px; &-item { background: rgba(white, 0.2); @@ -145,56 +145,45 @@ } &-gh { - align-items: center; - border-radius: 50%; - border: 2px solid white; - bottom: 12px; - display: flex; - height: 30px; - justify-content: center; - position: absolute; - right: 12px; - width: 30px; + display: none; @include mq($from: desktop) { - height: 36px; - position: relative; - bottom: auto; - right: auto; - width: 36px; - } - - &::before { - border-radius: 50%; - border: 6px solid white; - content: ''; - height: calc(100% + 2px); - left: -1px; - position: absolute; - top: -1px; - transform: scale(0); - transition: transform 0.35s var(--ease-out-cubic); - width: calc(100% + 2px); - } - - svg { - height: 18px; - width: 18px; - transition: transform 0.35s var(--ease-out-cubic); - - @include mq($from: desktop) { - height: 24px; - width: 24px; + color: white; + display: block; + font-weight: 700; + text-decoration: none; + + span { + display: inline-block; + margin-left: 12px; + position: relative; + + &::before { + background: white; + bottom: 0; + content: ''; + height: 1px; + left: 0; + position: absolute; + transform-origin: left center; + transform: scaleX(0); + transition: transform 0.35s var(--ease-out-cubic); + width: 100%; + } } - } - &:hover { - &::before { - transform: none; + svg { + transition: transform 0.35s var(--ease-out-cubic); } - svg { - transform: rotate(360deg); + &:hover { + svg { + transform: rotateY(180deg); + } + + span::before { + transform: none; + } } } }