LaconicNetwork/laconic-dot-com
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: improve data, ui

Browse Source
This commit is contained in:
Nazareno Oviedo 2022-04-06 10:51:41 -03:00
parent ee4f7130a3
commit 5bd2ee97eb
4 changed files with 164 additions and 129 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
src/components/icons/socials.tsx
View File

@ -130,6 +130,24 @@ const Linkedin = ({
)
}
const Github = ({ className, fill }: { className?: string; fill?: string }) => {
return (
<svg
className={className}
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M12 1C5.923 1 1 5.923 1 12c0 4.867 3.149 8.979 7.521 10.436.55.096.756-.233.756-.522 0-.262-.013-1.128-.013-2.049-2.764.509-3.479-.674-3.699-1.292-.124-.317-.66-1.293-1.128-1.554-.385-.206-.935-.715-.013-.729.866-.014 1.485.797 1.691 1.128.99 1.663 2.571 1.196 3.204.907.096-.715.385-1.196.701-1.471-2.447-.275-5.005-1.224-5.005-5.431 0-1.197.426-2.187 1.128-2.957-.11-.275-.495-1.402.11-2.915 0 0 .92-.288 3.024 1.128.88-.248 1.816-.372 2.75-.372.936 0 1.87.124 2.75.372 2.104-1.43 3.025-1.128 3.025-1.128.605 1.513.22 2.64.11 2.915.702.77 1.128 1.747 1.128 2.957 0 4.22-2.571 5.156-5.019 5.43.399.345.743 1.005.743 2.036 0 1.471-.014 2.654-.014 3.025 0 .288.206.632.756.522A11.02 11.02 0 0 0 23 12c0-6.077-4.922-11-11-11Z"
fill={fill || 'var(--color-white)'}
/>
</svg>
)
}
const Facebook = ({
className,
fill
@ -257,4 +275,13 @@ const Discourse = ({
)
}
export { Discourse, Facebook, Instagram, Linkedin, Reddit, Telegram, Twitter }
export {
Discourse,
Facebook,
Github,
Instagram,
Linkedin,
Reddit,
Telegram,
Twitter
}

149
src/components/sections/about/team/team.module.scss
View File

@ -16,22 +16,22 @@
> div:nth-child(2) {
display: flex;
margin: auto;
width: tovw(1076px, 'default', 400px);
gap: tovw(24px, 'default', 24px);
justify-content: space-between;
width: tovw(1076px, 'default', 400px);
margin: auto;
padding-top: tovw(68px, 'default', 40px);
gap: tovw(24px, 'default', 24px);
@media screen and (max-width: 800px) {
width: 100%;
flex-direction: column;
width: 100%;
}
p {
margin: 0;
width: tovw(524px, 'default', 300px);
font-size: tovw(24px, 'default', 18px);
line-height: 1.32;
width: tovw(524px, 'default', 300px);
margin: 0;
letter-spacing: -0.01em;
@media screen and (max-width: 800px) {
@ -45,10 +45,10 @@
.team {
display: flex;
flex-direction: column;
margin: auto;
gap: tovw(64px, 'default', 26px);
padding-top: tovw(120px, 'default', 60px);
width: tovw(1076px, 'default', 400px);
margin: auto;
padding-top: tovw(120px, 'default', 60px);
gap: tovw(64px, 'default', 26px);
@media screen and (max-width: 800px) {
width: 100%;
@ -71,9 +71,9 @@
}
span:last-child {
padding-top: tovw(18px, 'default', 8px);
font-size: tovw(16px, 'default', 12px);
font-family: var(--font-dm-mono), sans-serif;
font-size: tovw(16px, 'default', 12px);
padding-top: tovw(18px, 'default', 8px);
color: var(--color-grey-light);
@media screen and (max-width: 800px) {
@ -88,85 +88,86 @@
scaleX(2.2) scaleY(1.6);
@media screen and (max-width: 800px) {
height: tovw(32px, 'default', 32px);
transform: rotate(-90deg) scaleX(2.2) scaleY(1.4)
translateY(tovw(-2px, 'mobile', -3px));
height: tovw(32px, 'default', 32px);
}
}
}
}
.profilesContainer {
@media screen and (min-width: 1400px) {
display: flex;
justify-content: flex-start;
gap: tovw(100px, 'default', 40px);
.profiles__container {
@media screen and (min-width: 1400px) {
display: flex;
justify-content: flex-start;
gap: tovw(100px, 'default', 40px);
}
@media screen and (max-width: 800px) {
width: 100vw;
margin: 0 tovw(-70px, 'tablet', -35px);
scroll-behavior: smooth;
}
}
.member {
display: flex;
flex-direction: column;
justify-content: space-between;
width: tovw(194px, 'default', 80px);
transition: filter var(--normal-transition);
gap: tovw(24px, 'default', 18px);
img {
overflow: hidden;
border-radius: tovw(5px, 'default', 5px);
}
.description {
font-family: var(--font-tt-hoves);
font-size: tovw(18px, 'default', 16px);
line-height: 1.3;
display: flex;
flex-direction: column;
letter-spacing: -0.02em;
gap: tovw(5px, 'default', 5px);
span:last-child {
color: var(--color-grey-light);
}
}
.socials {
display: flex;
gap: tovw(14px, 'default', 14px);
button {
cursor: pointer;
border: none;
background-color: unset;
}
@media screen and (max-width: 800px) {
width: 100vw;
margin: 0 tovw(-70px, 'tablet', -35px);
scroll-behavior: smooth;
}
svg {
width: tovw(23px, 'default', 18px);
.member {
display: flex;
flex-direction: column;
justify-content: space-between;
gap: tovw(24px, 'default', 18px);
width: tovw(194px, 'default', 80px);
transition: filter 350ms;
img {
border-radius: tovw(5px, 'default', 5px);
}
}
.darker {
@media screen and (max-width: 1400px) {
filter: opacity(40%);
transition: filter 200ms;
}
}
.description {
display: flex;
flex-direction: column;
gap: tovw(5px, 'default', 5px);
letter-spacing: -0.02em;
line-height: 1.3;
font-family: var(--font-tt-hoves), sans-serif;
font-size: tovw(18px, 'default', 16px);
span:last-child {
color: var(--color-grey-light);
}
}
.socials {
display: flex;
gap: tovw(14px, 'default', 14px);
button {
cursor: pointer;
border: none;
background-color: unset;
@media screen and (max-width: 800px) {
width: tovw(12px, 'mobile', 19px);
}
svg {
width: tovw(23px, 'default', 18px);
@media screen and (max-width: 800px) {
width: tovw(12px, 'mobile', 19px);
}
&:hover {
filter: opacity(80%);
}
&:hover {
filter: opacity(80%);
}
}
}
}
.darker {
@media screen and (max-width: 1400px) {
transition: filter var(--normal-transition);
filter: opacity(40%);
}
}
.arrow {
position: absolute;
left: tovw(312px, 'default');

52
src/components/sections/about/team/team.tsx
View File

@ -1,10 +1,11 @@
import 'keen-slider/keen-slider.min.css'
import clsx from 'clsx'
import { useKeenSlider } from 'keen-slider/react'
import { useState } from 'react'
import Line from '~/components/icons/line'
import { Facebook, Linkedin, Twitter } from '~/components/icons/socials'
import { Github, Linkedin, Twitter } from '~/components/icons/socials'
import Heading from '~/components/primitives/heading'
import s from './team.module.scss'
@ -12,33 +13,39 @@ import s from './team.module.scss'
type Team = {
member: {
fullName: string
position: string
github: string
image: string
twitter: string
facebook: string
linkedin: string
position: string
twitter: string
}
className?: string
}
function MemberProfile({ member, className }: Team) {
return (
<div className={`${s.member} ${className}`}>
<img src={member.image} alt="team member" />
<div className={s.description}>
<div className={clsx(s['member'], className)}>
<img alt={member.fullName} loading="lazy" src={member.image} />
<div className={s['description']}>
<span>{member.fullName}</span>
<span>{member.position}</span>
</div>
<div className={s.socials}>
<a href={member.twitter} target={'_blank'} rel="noopener">
<Twitter />
</a>
<a href={member.facebook} target={'_blank'} rel="noopener">
<Facebook />
</a>
<a href={member.linkedin} target={'_blank'} rel="noopener">
<Linkedin />
</a>
<div className={s['socials']}>
{member.twitter && (
<a href={member.twitter} target="_blank" rel="noopener">
<Twitter />
</a>
)}
{member.github && (
<a href={member.github} target="_blank" rel="noopener">
<Github />
</a>
)}
{member.linkedin && (
<a href={member.linkedin} target="_blank" rel="noopener">
<Linkedin />
</a>
)}
</div>
</div>
)
@ -47,11 +54,11 @@ function MemberProfile({ member, className }: Team) {
type Teams = {
members: {
fullName: string
position: string
github: string
image: string
twitter: string
facebook: string
linkedin: string
position: string
twitter: string
}[]
teamName: string
teamNumber: string
@ -95,7 +102,10 @@ function Team({ members, teamName, teamNumber, teamDept }: Teams) {
</div>
<span>{teamNumber}</span>
</div>
<div ref={sliderRef} className={`${s.profilesContainer} keen-slider`}>
<div
ref={sliderRef}
className={clsx(s['profiles__container'], 'keen-slider')}
>
{members.map((member: any, i) => (
<MemberProfile
className={`keen-slider__slide ${

63
src/components/sections/about/team/teams.ts
View File

@ -3,33 +3,33 @@ export const laconicTeam = [
fullName: 'Rick Dudley',
position: 'Chief Architect, Cerc',
image: '/images/about/team/rick-dudley.jpg',
twitter: 'https://twitter.com',
facebook: 'https://facebook.com',
linkedin: 'https://linkedin.com'
github: 'https://github.com/AFDudley',
linkedin: 'https://www.linkedin.com/in/afdudley/',
twitter: 'https://twitter.com/AFDudley0'
},
{
fullName: 'Maly Ly',
position: 'Chief Architect, Cerc',
image: '/images/about/team/maly-ly.jpg',
twitter: 'https://twitter.com',
facebook: 'https://facebook.com',
linkedin: 'https://linkedin.com'
github: '',
linkedin: 'https://www.linkedin.com/in/malytly/',
twitter: 'https://twitter.com/malytly'
},
{
fullName: 'Boris Mann',
position: 'CEO, Fission',
image: '/images/about/team/boris-mann.jpg',
twitter: 'https://twitter.com',
facebook: 'https://facebook.com',
linkedin: 'https://linkedin.com'
github: 'https://github.com/bmann',
linkedin: 'https://www.linkedin.com/in/boris/',
twitter: 'https://twitter.com/bmann'
},
{
fullName: 'Brooklyn Zelenka',
position: 'CTO, Fission',
image: '/images/about/team/brooklyn-zelenka.jpg',
twitter: 'https://twitter.com',
facebook: 'https://facebook.com',
linkedin: 'https://linkedin.com'
github: 'https://github.com/expede',
linkedin: 'https://www.linkedin.com/in/brooklynzelenka/',
twitter: 'https://twitter.com/expede'
}
]
@ -38,33 +38,33 @@ export const cercTeam = [
fullName: 'Ashwin Phatak',
position: 'VP of Engineering',
image: '/images/about/team/ashwin-phatak.jpg',
twitter: 'https://twitter.com',
facebook: 'https://facebook.com',
linkedin: 'https://linkedin.com'
twitter: 'https://twitter.com/ashwinphatak',
linkedin: 'https://www.linkedin.com/in/ashwinphatak/',
github: 'https://github.com/ashwinphatak'
},
{
fullName: 'Ian Norden',
position: 'Engineering Lead',
image: '/images/about/team/ian-norden.jpg',
twitter: 'https://twitter.com',
facebook: 'https://facebook.com',
linkedin: 'https://linkedin.com'
twitter: '',
linkedin: 'https://www.linkedin.com/in/ian-s-norden/',
github: 'https://github.com/i-norden'
},
{
fullName: 'Leah Light',
position: 'Operations Manager',
image: '/images/about/team/leah-light.jpg',
twitter: 'https://twitter.com',
facebook: 'https://facebook.com',
linkedin: 'https://linkedin.com'
twitter: '',
linkedin: 'https://www.linkedin.com/in/leah-light-a308535/',
github: ''
},
{
fullName: 'Erik Dies',
position: 'Product Lead',
image: '/images/about/team/erik-dies.jpg',
twitter: 'https://twitter.com',
facebook: 'https://facebook.com',
linkedin: 'https://linkedin.com'
twitter: 'https://twitter.com/thelesserdies',
linkedin: '',
github: 'https://github.com/erikdies'
}
]
@ -73,24 +73,21 @@ export const xylmTeam = [
fullName: 'Robert Douglass',
position: 'VP of Ecosystem',
image: '/images/about/team/robert-douglass.jpg',
twitter: 'https://twitter.com',
facebook: 'https://facebook.com',
linkedin: 'https://linkedin.com'
twitter: 'https://twitter.com/robertDouglass',
linkedin: 'https://www.linkedin.com/in/roberttdouglass/'
},
{
fullName: 'Michael Gushansky',
position: 'Engineering Lead',
image: '/images/about/team/michael-gushansky.jpg',
twitter: 'https://twitter.com',
facebook: 'https://facebook.com',
linkedin: 'https://linkedin.com'
twitter: 'https://twitter.com/mikegushansky',
linkedin: 'https://www.linkedin.com/in/michael-gushansky-08698384/'
},
{
fullName: 'Olive Kimoto',
position: 'Creative & Program Lead',
image: '/images/about/team/olive-kimoto.jpg',
twitter: 'https://twitter.com',
facebook: 'https://facebook.com',
linkedin: 'https://linkedin.com'
twitter: 'https://twitter.com/olivekimoto',
linkedin: 'https://www.linkedin.com/in/olive-kimoto-71433b138/'
}
]