Merge branch 'website' into issue-120-add-filter-buttons

migration.md

@@ -94,9 +94,10 @@ When done, check that person off.
 * [ ] [James Mills](https://jamesmills.co.uk/uses/) - Web Consultant
 * [ ] [Jeffrey Way](https://laracasts.com/blog/laracasts-uses) - Laracasts author
 * [ ] [Terry Godier](https://terrygodier.com/uses/) - Developer and Marketer
-* [ ] [David O'Trakoun](https://www.davidosomething.com/uses/) - Software Engineer
+* [x] [David O'Trakoun](https://www.davidosomething.com/uses/) - Software Engineer
 * [x] [Nuno Maduro](https://nunomaduro.com/uses/) - Software engineer, Open Source contributor, Speaker
 * [ ] [Erno Salo](https://endormi.io/uses/) - Full Stack Developer and Open Source Contributor
 * [ ] [James Brooks](https://james.brooks.page/uses/) - Software Developer at Laravel and Podcaster
+* [x] [Béla Varga](http://ecmanauten.de/uses/) - Front-end Developer, Meetup & Event Organizer and UX/UI Designer
 
 [awesome-badge]: https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg

src/components/Person.js

@@ -1,5 +1,7 @@
 import React from 'react';
 import { name } from 'country-emoji';
+import styled from 'styled-components';
+import { Tag, Tags } from './Topics';
 import iphone from '../images/iphone.png';
 import android from '../images/android.png';
 import windows from '../images/windows.svg';
@@ -10,9 +12,9 @@ export default function Person({ person, currentTag }) {
   const url = new URL(person.url);
   const img = `https://logo.clearbit.com/${url.host}`;
   return (
-    <div className="person">
+    <PersonWrapper>
-      <div className="personInner">
+      <PersonInner>
-        <header className="personHeader">
+        <header>
           <img width="50" height="50" src={img} alt={person.name} />
           <h3>
             <a href={person.url} target="_blank" rel="noopener noreferrer">
@@ -25,19 +27,15 @@ export default function Person({ person, currentTag }) {
           >{`${url.host}${url.pathname}`}</a>
         </header>
         <p>{person.description}</p>
-
+        <Tags>
-        <ul className="tags">
           {person.tags.map(tag => (
-            <li
+            <Tag key={tag} as="li" currentTag={tag === currentTag} small>
-              key={tag}
-              className={`tag ${tag === currentTag ? 'currentTag' : ''}`}
-            >
               {tag}
-            </li>
+            </Tag>
           ))}
-        </ul>
+        </Tags>
-      </div>
+      </PersonInner>
-      <div className="deets">
+      <PersonDeets>
         <span className="country" title={name(person.country)}>
           {person.country}
         </span>
@@ -69,7 +67,74 @@ export default function Person({ person, currentTag }) {
           </span>
         )}
         {person.github && <span>{person.github}</span>}
-      </div>
+      </PersonDeets>
-    </div>
+    </PersonWrapper>
   );
 }
+
+// Component Styles
+const PersonWrapper = styled.div`
+  border: 1px solid var(--vape);
+  border-radius: 5.34334px;
+  box-shadow: 10px -10px 0 var(--blue2);
+  display: grid;
+  grid-template-rows: 1fr auto auto;
+`;
+
+const PersonInner = styled.div`
+  padding: 2rem;
+  h3 {
+    margin: 0;
+  }
+  header {
+    display: grid;
+    grid-template-rows: auto auto;
+    grid-template-columns: auto 1fr;
+    grid-gap: 0 1rem;
+    img {
+      grid-row: 1 / -1;
+      background: var(--lightblue);
+      font-size: 1rem;
+    }
+    .displayLink {
+      text-decoration: none;
+      color: var(--vape);
+      letter-spacing: 1px;
+      font-size: 1.2rem;
+      :hover {
+        color: var(--pink);
+      }
+    }
+  }
+`;
+
+const PersonDeets = styled.div`
+  display: flex;
+  border-block-start: 1px solid var(--vape);
+  > * {
+    flex: 1;
+    border-inline-start: 1px solid var(--vape);
+    text-align: center;
+    padding: 1rem;
+    display: grid;
+    align-items: center;
+    justify-content: center;
+    grid-template-columns: auto auto;
+  }
+  a {
+    color: var(--vape);
+  }
+  :first-child {
+    border-inline-start: none;
+  }
+  .at {
+    color: var(--yellow);
+    margin-right: 2px;
+  }
+  .country {
+    font-size: 3rem;
+  }
+  .phone {
+    padding: 0;
+  }
+`;

src/components/Topics.js

@@ -1,4 +1,5 @@
 import React, { useContext } from 'react';
+import styled from 'styled-components';
 import FilterContext from '../context/FilterContext';
 
 export default function Topics() {
@@ -12,10 +13,10 @@ export default function Topics() {
   } = useContext(FilterContext);
 
   return (
-    <div className="tags">
+    <Tags>
       {tags.map(tag => (
-        <label
+        <Tag
-          className={`tag ${tag.name === currentTag ? 'currentTag' : ''}`}
+          currentTag={tag.name === currentTag}
           htmlFor={`filter-${tag.name}`}
           key={`filter-${tag.name}`}
         >
@@ -28,13 +29,13 @@ export default function Topics() {
             onChange={e => setCurrentTag(e.currentTarget.value)}
           />
           {tag.name}
-          <span className="count">{tag.count}</span>
+          <TagCount>{tag.count}</TagCount>
-        </label>
+        </Tag>
       ))}
 
       {countries.map(tag => (
-        <label
+        <Tag
-          className={`tag ${tag.emoji === currentTag ? 'currentTag' : ''}`}
+          currentTag={tag.emoji === currentTag}
           htmlFor={`filter-${tag.name}`}
           key={`filter-${tag.name}`}
           title={tag.name}
@@ -47,10 +48,11 @@ export default function Topics() {
             checked={tag.emoji === currentTag}
             onChange={e => setCurrentTag(e.currentTarget.value)}
           />
-          <span className="emoji">{tag.emoji}</span>
+          <TagEmoji>{tag.emoji}</TagEmoji>
-          <span className="count">{tag.count}</span>
+          <TagCount>{tag.count}</TagCount>
-        </label>
+        </Tag>
       ))}
+
       {computers.map(tag => (
         <label
           className={`tag ${tag.name === currentTag ? 'currentTag' : ''}`}
@@ -89,6 +91,54 @@ export default function Topics() {
           <span className="count">{tag.count}</span>
         </label>
       ))}
-    </div>
+    </Tags>
   );
 }
+
+// Component Styles
+const Tags = styled.div`
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-wrap: wrap;
+`;
+
+const Tag = styled.label`
+  background: var(--pink);
+  margin: 2px;
+  border-radius: 3px;
+  font-size: ${props => (props.small ? `1.2rem;` : `1.7rem;`)}
+
+  padding: 5px;
+  color: hsla(0, 100%, 100%, 0.8);
+  transition: background-color 0.2s;
+  cursor: pointer;
+  display: grid;
+  grid-template-columns: 1fr auto;
+  align-items: center;
+  input {
+    display: none;
+  }
+  ${props =>
+    props.currentTag &&
+    `
+    background: var(--yellow);
+    color: hsla(0, 100%, 0%, 0.8);
+  `}
+`;
+
+const TagEmoji = styled.span`
+  transform: scale(1.45);
+`;
+
+const TagCount = styled.span`
+  background: var(--blue);
+  font-size: 1rem;
+  color: white;
+  padding: 2px;
+  border-radius: 2px;
+  margin-left: 5px;
+`;
+
+export { Tag, Tags };

src/components/header.js

@@ -2,9 +2,10 @@ import { Link } from 'gatsby';
 import PropTypes from 'prop-types';
 import React from 'react';
 import Helmet from 'react-helmet';
+import styled from 'styled-components';
 
 const Header = ({ siteTitle }) => (
-  <header className="header">
+  <HeaderWrapper className="header">
     <Helmet>
       <title>{siteTitle}</title>
     </Helmet>
@@ -17,7 +18,7 @@ const Header = ({ siteTitle }) => (
         software and configs.
       </p>
     </div>
-  </header>
+  </HeaderWrapper>
 );
 
 Header.propTypes = {
@@ -29,3 +30,11 @@ Header.defaultProps = {
 };
 
 export default Header;
+
+// Component Styles
+const HeaderWrapper = styled.header`
+  text-align: center;
+  h1 {
+    font-size: 6rem;
+  }
+`;

src/components/layout.css

@@ -1,201 +0,0 @@
-html {
-  --purple: #1e1f5c;
-  --blue: #203447;
-  --lightblue: #1f4662;
-  --blue2: #1C2F40;
-  --yellow: #ffc600;
-  --pink: #EB4471;
-  --vape: #d7d7d7;
-  background: var(--blue);
-  color: var(--vape);
-  font-family: 'Fira Mono', monospace;
-  font-weight: 100;
-  font-size: 10px;
-}
-
-::selection {
-  background: var(--yellow);
-  color: var(--blue);
-}
-
-body {
-  font-size: 2rem;
-}
-
-h1,h2,h3,h4,h5,h6 {
-  font-weight: 500;
-}
-
-
-h1 a {
-  text-align: center;
-}
-
-
-a {
-  color: var(--yellow);
-  text-decoration-color: var(--pink);
-  font-style: italic;
-}
-
-code {
-  background: var(--lightblue);
-}
-
-.site {
-  max-width: 1900px;
-  margin: 5rem;
-}
-
-.header {
-  text-align: center;
-}
-
-.header h1 {
-  font-size: 6rem;
-}
-
-main {
-  display: grid;
-  grid-gap: 3rem;
-  max-width: 1900px;
-  padding: 0 3rem;
-  margin: 5rem auto;
-}
-
-.people {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
-  grid-gap: 5rem;
-}
-
-.person {
-  border: 1px solid var(--vape);
-  border-radius: 5.34334px;
-  box-shadow: 10px -10px 0 var(--blue2);
-  display: grid;
-  grid-template-rows:  1fr auto auto;
-}
-
-.person h3 {
-  margin: 0;
-}
-
-.personInner {
-  padding: 2rem;
-}
-
-.person .tag {
-  font-size: 1.2rem;
-}
-
-.personHeader {
-  display: grid;
-  grid-template-rows:auto auto;
-  grid-template-columns: auto 1fr;
-  grid-gap: 0 1rem;
-}
-
-.personHeader img {
-  grid-row: 1 / -1;
-  background: var(--lightblue);
-  font-size: 1rem;
-}
-
-.name {
-  display: block;
-}
-
-.name.last {
-  font-size: 5rem;
-}
-
-.deets {
-  display: flex;
-  border-block-start: 1px solid var(--vape);
-}
-
-.deets > * {
-  flex: 1;
-  border-inline-start: 1px solid var(--vape);
-  text-align: center;
-  padding: 1rem;
-  display: grid;
-  align-items: center;
-  justify-content: center;
-  grid-template-columns: auto auto;
-}
-
-.deets a {
-  color: var(--vape);
-}
-
-.deets .at {
-  color: var(--yellow);
-  margin-right: 2px;
-}
-
-.deets :first-child {
-  border-inline-start: none;
-}
-
-.deets .country {
-  font-size: 3rem;
-}
-.deets .phone {
-  padding: 0;
-}
-
-.displayLink {
-  text-decoration: none;
-  color: var(--vape);
-  letter-spacing: 1px;
-  font-size: 1.2rem;
-}
-
-.displayLink:hover {
-  color: var(--pink);
-}
-
-
-.tags {
-  list-style-type: none;
-  margin: 0;
-  padding: 0;
-  display: flex;
-  flex-wrap: wrap;
-}
-
-.tag {
-  background: var(--pink);
-  margin: 2px;
-  border-radius: 3px;
-  font-size: 1.7rem;
-  padding: 5px;
-  color: hsla(0, 100%, 100%, 0.8);
-  transition: background-color 0.2s;
-  cursor: pointer;
-  display: grid;
-  grid-template-columns: 1fr auto;
-  align-items: center;
-}
-
-.tag input { display: none; }
-
-.tag.currentTag {
-  background: var(--yellow);
-  color: hsla(0, 100%, 0%, 0.8);
-}
-
-.tag .emoji {
-  transform: scale(1.45);
-}
-
-.tag .count {
-  background: var(--blue);
-  font-size: 1rem;
-  color: white;
-  padding: 2px;
-  border-radius: 2px;
-  margin-left: 5px;
-}

src/components/layout.js

@@ -9,9 +9,9 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { useStaticQuery, graphql } from 'gatsby';
 
+import styled, { createGlobalStyle } from 'styled-components';
 import Header from './header';
 import 'normalize.css';
-import './layout.css';
 
 const Layout = ({ children }) => {
   const data = useStaticQuery(graphql`
@@ -26,15 +26,16 @@ const Layout = ({ children }) => {
 
   return (
     <>
+      <GlobalStyle />
       <Header siteTitle={data.site.siteMetadata.title} />
-      <main>
+      <Main>
         {children}
         <footer>
           © {new Date().getFullYear() - Math.floor(Math.random() * 777)} Made by{' '}
           <a href="https://wesbos.com">Wes Bos</a> with{' '}
           <a href="https://www.gatsbyjs.org">Gatsby</a>. Icons from icons8.com.
         </footer>
-      </main>
+      </Main>
     </>
   );
 };
@@ -44,3 +45,48 @@ Layout.propTypes = {
 };
 
 export default Layout;
+
+// Global Styles
+const GlobalStyle = createGlobalStyle`
+  html {
+    --purple: #1e1f5c;
+    --blue: #203447;
+    --lightblue: #1f4662;
+    --blue2: #1C2F40;
+    --yellow: #ffc600;
+    --pink: #EB4471;
+    --vape: #d7d7d7;
+    background: var(--blue);
+    color: var(--vape);
+    font-family: 'Fira Mono', monospace;
+    font-weight: 100;
+    font-size: 10px;
+  }
+  ::selection {
+    background: var(--yellow);
+    color: var(--blue);
+  }
+  body {
+    font-size: 2rem;
+  }
+  h1,h2,h3,h4,h5,h6 {
+    font-weight: 500;
+  }
+  a {
+    color: var(--yellow);
+    text-decoration-color: var(--pink);
+    font-style: italic;
+  }
+  code {
+    background: var(--lightblue);
+  }
+`;
+
+// Component Styles
+const Main = styled.main`
+  display: grid;
+  grid-gap: 3rem;
+  max-width: 1900px;
+  padding: 0 3rem;
+  margin: 5rem auto;
+`;

src/data.js

@@ -442,6 +442,29 @@ const pages = [
       'Vue',
     ],
   },
+  {
+    name: 'Sil van Diepen',
+    description: 'Creative Developer',
+    url: 'https://www.silvandiepen.nl/uses/',
+    twitter: '@silvandiepen',
+    emoji: '🐯',
+    country: '🇳🇱',
+    computer: 'apple',
+    phone: 'iphone',
+    tags: [
+      'Developer',
+      'Designer',
+      'Illustrator',
+      'Photography',
+      'Front End',
+      'JavaScript',
+      'Vue',
+      'Node',
+      'CSS',
+      'Sass',
+      'Design Systems'
+    ],
+  }
 ];
 
 export default pages;

src/pages/index.js

@@ -1,5 +1,6 @@
 import React, { useContext } from 'react';
 import { useStaticQuery, graphql } from 'gatsby';
+import styled from 'styled-components';
 import FilterContext from '../context/FilterContext';
 
 import Layout from '../components/layout';
@@ -37,13 +38,20 @@ function IndexPage() {
   return (
     <Layout>
       <Topics />
-      <div className="people">
+      <People>
         {people.map(person => (
           <Person key={person.name} person={person} currentTag={currentTag} />
         ))}
-      </div>
+      </People>
     </Layout>
   );
 }
 
 export default IndexPage;
+
+// Component Styles
+const People = styled.div`
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
+  grid-gap: 5rem;
+`;