mirror of
https://github.com/BradNut/awesome-uses
synced 2025-09-08 17:40:31 +00:00
Merge branch 'website' into issue-120-add-filter-buttons
This commit is contained in:
Wes Bos
GitHub
commit
151d8e10eb
8 changed files with 236 additions and 235 deletions
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
<div className="personInner">
|
||||
<header className="personHeader">
|
||||
<PersonWrapper>
|
||||
<PersonInner>
|
||||
<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>
|
||||
|
||||
<ul className="tags">
|
||||
<Tags>
|
||||
{person.tags.map(tag => (
|
||||
<li
|
||||
key={tag}
|
||||
className={`tag ${tag === currentTag ? 'currentTag' : ''}`}
|
||||
>
|
||||
<Tag key={tag} as="li" currentTag={tag === currentTag} small>
|
||||
{tag}
|
||||
</li>
|
||||
</Tag>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
<div className="deets">
|
||||
</Tags>
|
||||
</PersonInner>
|
||||
<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>
|
||||
</div>
|
||||
</PersonDeets>
|
||||
</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;
|
||||
}
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -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
|
||||
className={`tag ${tag.name === currentTag ? 'currentTag' : ''}`}
|
||||
<Tag
|
||||
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>
|
||||
</label>
|
||||
<TagCount>{tag.count}</TagCount>
|
||||
</Tag>
|
||||
))}
|
||||
|
||||
{countries.map(tag => (
|
||||
<label
|
||||
className={`tag ${tag.emoji === currentTag ? 'currentTag' : ''}`}
|
||||
<Tag
|
||||
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>
|
||||
<span className="count">{tag.count}</span>
|
||||
</label>
|
||||
<TagEmoji>{tag.emoji}</TagEmoji>
|
||||
<TagCount>{tag.count}</TagCount>
|
||||
</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 };
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
`;
|
||||
|
|
|
|||
23
src/data.js
23
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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
`;
|
||||
|
|
|
|||
Loading…
Reference in a new issue