From 62afb57ff3e7b6516b0d3d39c88ed29a1468bd3a Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Mon, 10 Jan 2022 15:19:27 +0100 Subject: chore: add a social media widget on contact and cv pages --- src/assets/images/social-media/github.svg | 1 + src/assets/images/social-media/gitlab.svg | 1 + src/assets/images/social-media/linkedin.svg | 1 + src/assets/images/social-media/twitter.svg | 1 + .../Widget/SocialMedia/SocialMedia.module.scss | 47 ++++++++++++++ src/components/Widget/SocialMedia/SocialMedia.tsx | 72 ++++++++++++++++++++++ src/components/Widget/index.tsx | 3 +- src/config/social-media.ts | 22 +++++++ src/pages/contact.tsx | 9 +++ src/pages/cv.tsx | 9 +++ 10 files changed, 165 insertions(+), 1 deletion(-) create mode 100644 src/assets/images/social-media/github.svg create mode 100644 src/assets/images/social-media/gitlab.svg create mode 100644 src/assets/images/social-media/linkedin.svg create mode 100644 src/assets/images/social-media/twitter.svg create mode 100644 src/components/Widget/SocialMedia/SocialMedia.module.scss create mode 100644 src/components/Widget/SocialMedia/SocialMedia.tsx create mode 100644 src/config/social-media.ts (limited to 'src') diff --git a/src/assets/images/social-media/github.svg b/src/assets/images/social-media/github.svg new file mode 100644 index 0000000..861be58 --- /dev/null +++ b/src/assets/images/social-media/github.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/images/social-media/gitlab.svg b/src/assets/images/social-media/gitlab.svg new file mode 100644 index 0000000..94c1f7a --- /dev/null +++ b/src/assets/images/social-media/gitlab.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/images/social-media/linkedin.svg b/src/assets/images/social-media/linkedin.svg new file mode 100644 index 0000000..9259989 --- /dev/null +++ b/src/assets/images/social-media/linkedin.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/images/social-media/twitter.svg b/src/assets/images/social-media/twitter.svg new file mode 100644 index 0000000..94dbe55 --- /dev/null +++ b/src/assets/images/social-media/twitter.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/Widget/SocialMedia/SocialMedia.module.scss b/src/components/Widget/SocialMedia/SocialMedia.module.scss new file mode 100644 index 0000000..70ef5d9 --- /dev/null +++ b/src/components/Widget/SocialMedia/SocialMedia.module.scss @@ -0,0 +1,47 @@ +@use "@styles/abstracts/functions" as fun; +@use "@styles/abstracts/placeholders"; + +.list { + @extend %flex-list; + + gap: var(--spacing-xs); + align-items: center; +} + +.link { + display: block; + width: 3em; + height: 3em; + background: none; + box-shadow: fun.convert-px(1) fun.convert-px(1) fun.convert-px(1) + var(--color-shadow-light), + fun.convert-px(1) fun.convert-px(2) fun.convert-px(2) fun.convert-px(-1) + var(--color-shadow-light), + fun.convert-px(3) fun.convert-px(4) fun.convert-px(4) fun.convert-px(-3) + var(--color-shadow-light), + 0 0 0 0 var(--color-shadow); + transition: all 0.3s linear 0s; + + &:hover, + &:focus { + box-shadow: fun.convert-px(1) fun.convert-px(1) fun.convert-px(1) + var(--color-shadow-light), + fun.convert-px(1) fun.convert-px(1) fun.convert-px(2) fun.convert-px(-1) + var(--color-shadow-lighter), + fun.convert-px(3) fun.convert-px(3) fun.convert-px(4) fun.convert-px(-4) + var(--color-shadow-lighter), + fun.convert-px(6) fun.convert-px(6) fun.convert-px(10) fun.convert-px(-3) + var(--color-shadow-light); + transform: scale(1.15); + } + + &:focus { + outline: var(--color-primary) dashed fun.convert-px(2); + } + + &:active { + box-shadow: 0 0 0 0 var(--color-shadow-light); + outline: none; + transform: scale(0.9); + } +} diff --git a/src/components/Widget/SocialMedia/SocialMedia.tsx b/src/components/Widget/SocialMedia/SocialMedia.tsx new file mode 100644 index 0000000..9ca0627 --- /dev/null +++ b/src/components/Widget/SocialMedia/SocialMedia.tsx @@ -0,0 +1,72 @@ +import { socialWebsites } from '@config/social-media'; +import GithubIcon from '@assets/images/social-media/github.svg'; +import GitlabIcon from '@assets/images/social-media/gitlab.svg'; +import LinkedInIcon from '@assets/images/social-media/linkedin.svg'; +import TwitterIcon from '@assets/images/social-media/twitter.svg'; +import styles from './SocialMedia.module.scss'; + +const SocialMedia = ({ + title, + github = false, + gitlab = false, + linkedin = false, + twitter = false, +}: { + title: string; + github?: boolean; + gitlab?: boolean; + linkedin?: boolean; + twitter?: boolean; +}) => { + const getIcon = (id: string) => { + switch (id) { + case 'github': + return ; + case 'gitlab': + return ; + case 'linkedin': + return ; + case 'twitter': + return ; + default: + break; + } + }; + + const shouldDisplayLink = (id: string) => { + switch (id) { + case 'github': + return github; + case 'gitlab': + return gitlab; + case 'linkedin': + return linkedin; + case 'twitter': + return twitter; + default: + break; + } + }; + + const items = socialWebsites.map((website) => { + return shouldDisplayLink(website.id) ? ( +
  • + + {getIcon(website.id)} + {website.name} + +
    • + ) : ( + '' + ); + }); + + return ( +
    +

    {title}

    +
      {items}
    +
    + ); +}; + +export default SocialMedia; diff --git a/src/components/Widget/index.tsx b/src/components/Widget/index.tsx index d5374ea..9df51e3 100644 --- a/src/components/Widget/index.tsx +++ b/src/components/Widget/index.tsx @@ -1,6 +1,7 @@ import RecentPosts from './RecentPosts/RecentPosts'; import Sharing from './Sharing/Sharing'; +import SocialMedia from './SocialMedia/SocialMedia'; import ThematicsList from './ThematicsList/ThematicsList'; import TopicsList from './TopicsList/TopicsList'; -export { RecentPosts, Sharing, ThematicsList, TopicsList }; +export { RecentPosts, Sharing, SocialMedia, ThematicsList, TopicsList }; diff --git a/src/config/social-media.ts b/src/config/social-media.ts new file mode 100644 index 0000000..a2bb2ed --- /dev/null +++ b/src/config/social-media.ts @@ -0,0 +1,22 @@ +export const socialWebsites = [ + { + id: 'github', + name: 'Github', + url: 'https://github.com/ArmandPhilippot', + }, + { + id: 'gitlab', + name: 'Gitlab', + url: 'https://gitlab.com/ArmandPhilippot', + }, + { + id: 'linkedin', + name: 'LinkedIn', + url: 'https://www.linkedin.com/in/armandphilippot', + }, + { + id: 'twitter', + name: 'Twitter', + url: 'https://twitter.com/ArmandPhilippot', + }, +]; diff --git a/src/pages/contact.tsx b/src/pages/contact.tsx index 9eebdb2..d9c4e4f 100644 --- a/src/pages/contact.tsx +++ b/src/pages/contact.tsx @@ -11,6 +11,7 @@ import Head from 'next/head'; import { FormEvent, useState } from 'react'; import PostHeader from '@components/PostHeader/PostHeader'; import styles from '@styles/pages/Page.module.scss'; +import { SocialMedia } from '@components/Widget'; const ContactPage: NextPageWithLayout = () => { const [name, setName] = useState(''); @@ -111,6 +112,14 @@ const ContactPage: NextPageWithLayout = () => { + ); diff --git a/src/pages/cv.tsx b/src/pages/cv.tsx index 8bd1b0c..83d1fe5 100644 --- a/src/pages/cv.tsx +++ b/src/pages/cv.tsx @@ -9,6 +9,8 @@ import CVContent, { intro, meta } from '@content/pages/cv.mdx'; import PostHeader from '@components/PostHeader/PostHeader'; import { ArticleMeta } from '@ts/types/articles'; import styles from '@styles/pages/Page.module.scss'; +import { SocialMedia } from '@components/Widget'; +import { t } from '@lingui/macro'; const CV: NextPageWithLayout = () => { const dates = { @@ -36,6 +38,13 @@ const CV: NextPageWithLayout = () => {
    + ); -- cgit v1.2.3