Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Enhance about us #461

Merged
merged 19 commits into from
Apr 7, 2024
Merged
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Update HTML tags and class names, improve a11y
kathywklee committed Apr 6, 2024
commit 4a52d3df92ed46513689fa2ae2061e1d1e36dfeb
Original file line number Diff line number Diff line change
@@ -6,9 +6,9 @@ import { david, gabLeRoux, webber, fisher } from '../the-team-section/data/team-

const OurStory = () => {
return (
<div className="2xl:container 2xl:mx-auto lg:py-16 lg:px-20 md:py-12 md:px-6 px-4">
<div className="flex lg:flex-row flex-col items-start lg:space-x-8">
<div className="w-full lg:w-7/12 p-5 bg-theme-highlight rounded-md">
<section className="2xl:container 2xl:mx-auto lg:py-8 lg:px-20 md:px-6 px-4">
<div className="flex lg:flex-row flex-col items-start lg:gap-8">
<div className="w-full lg:w-7/12 p-5 bg-background-highlight-light dark:bg-background-highlight-dark rounded-md">
<FadeIntoView>
<h2 className="font-bold lg:text-4xl text-3xl lg:leading-9 leading-7">Our Story</h2>
</FadeIntoView>
@@ -21,7 +21,7 @@ const OurStory = () => {
</p>
</FadeIntoView>
</div>
<div className="lg:pt-16 xl:pt-0 w-full lg:w-5/12 lg:mt-0 sm:mt-10 mt-8">
<div className="xl:pt-0 w-full lg:w-5/12 lg:mt-0 sm:mt-10 mt-8">
<Timeline>
<TimelineItem
title="Founded (2019)"
@@ -82,7 +82,7 @@ const OurStory = () => {
</Timeline>
</div>
</div>
</div>
</section>
);
};

Original file line number Diff line number Diff line change
@@ -27,7 +27,7 @@ const TimelineItemBullet = ({ right }: Props): React.JSX.Element => {
];

return (
<div className={cx('-mt-1', { '-me-2 ms-1': !right, '-ms-2 me-1': right })}>
<div className={cx({ '-me-2 ms-1': !right, '-ms-2 me-1': right })}>
<svg
width="60"
height="12"
Original file line number Diff line number Diff line change
@@ -8,7 +8,7 @@ interface Props {
const TimelineItemText = ({ title, subTitle }: Props): React.JSX.Element => {
return (
<div className="w-full">
<h2 className="-mt-2 font-semibold text-xl leading-5 ">{title}</h2>
<h2 className="font-semibold text-xl leading-5">{title}</h2>
<p className="font-normal text-base leading-6 mt-2 text-softer">{subTitle}</p>
</div>
);
Original file line number Diff line number Diff line change
@@ -15,13 +15,13 @@ const TimelineItem = ({ title, subTitle, right }: Props): React.JSX.Element => {
<>
{!!right && (
<div
className={cx('border-0 border-solid border-primary', {
className={cx('border-0 border-solid border-primary-light dark:border-primary-dark', {
'border-r-2': right,
})}
/>
)}
<div
className={cx('pb-5 border-0 border-solid border-primary', {
className={cx('pb-5 border-0 border-solid border-primary-light dark:border-primary-dark', {
'border-e-2': !right,
'border-s-0 mb-0 pb-5': right,
})}
33 changes: 27 additions & 6 deletions src/components/pages/about-us/section/the-team-section/profile.tsx
Original file line number Diff line number Diff line change
@@ -47,10 +47,11 @@ const Profile = ({
continent,
social,
}: Props): React.JSX.Element => {
const displayName = nick || name;
return (
<div
className={cx(
'w-64 xl:w-72 py-10 space-y-8 bg-white flex justify-center items-center flex-col shadow hover:shadow-xl transition duration-500 ease-in-out border rounded-lg border-gray-100 bg-theme-highlight',
'w-full py-10 space-y-8 bg-background-highlight-light dark:bg-background-highlight-dark flex justify-center items-center flex-col shadow hover:shadow-xl transition duration-500 ease-in-out border rounded-lg border-gray-100',
className,
)}
>
@@ -70,34 +71,54 @@ const Profile = ({
</div>
</FadeIntoView>

<div className="flex flex-row space-x-2">
<div className="flex gap-2">
{social.website && (
<FadeIntoView delay={100}>
<a href={social.website} target="_blank" rel="noreferrer">
<a
href={social.website}
target="_blank"
rel="noreferrer"
title={`${displayName}'s website`}
>
{getWebsiteIcon(continent)}
</a>
</FadeIntoView>
)}

{social.twitter && (
<FadeIntoView delay={200}>
<a href={social.twitter} target="_blank" rel="noreferrer">
<a
href={social.twitter}
target="_blank"
rel="noreferrer"
title={`${displayName}'s Twitter`}
>
<FaTwitter />
</a>
</FadeIntoView>
)}

{social.linkedIn && (
<FadeIntoView delay={300}>
<a href={social.linkedIn} target="_blank" rel="noreferrer">
<a
href={social.linkedIn}
target="_blank"
rel="noreferrer"
title={`${displayName}'s Linkedin`}
>
<FaLinkedin />
</a>
</FadeIntoView>
)}

{social.github && (
<FadeIntoView delay={400}>
<a href={social.github} target="_blank" rel="noreferrer">
<a
href={social.github}
target="_blank"
rel="noreferrer"
title={`${displayName}'s Github`}
>
<FaGithub />
</a>
</FadeIntoView>
Original file line number Diff line number Diff line change
@@ -5,21 +5,23 @@ import { members } from './data/team-info';

const TheTeamSection = (): React.JSX.Element => {
return (
<div className="py-12 px-0 md:px-14 xl:px-8 flex justify-center items-center flex-col">
<h1 className="text-xl md:text-2xl xl:text-4xl tracking-wider leading-5 md:leading-6 xl:leading-9 text-center">
<section className="py-12 px-0 md:px-14 xl:px-8 flex justify-center items-center flex-col">
<h2 className="text-xl md:text-2xl xl:text-4xl tracking-wider leading-5 md:leading-6 xl:leading-9 text-center">
Core Maintainers
</h1>
<div className="mt-8 xl:mt-14 px-12 md:px-10 2xl:px-14 relative">
</h2>
<div className="mt-8 xl:mt-14 px-6 sm:px-12 md:px-10 2xl:px-14 relative">
<Pattern className="object-cover w-44 h-44 md:w-60 md:h-60 lg:w-72 lg:h-72 absolute left-0 top-0" />
<Pattern className="object-cover w-44 h-44 md:w-60 md:h-60 lg:w-72 lg:h-72 absolute right-0 bottom-0" />

<div className="gap-6 grid items-start w-full relative grid-cols-1 sm:grid-cols-2 xl:grid-cols-4">
<ul className="gap-6 grid items-start w-full relative grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 list-none ps-0">
{members.map((member) => (
<Profile key={member.nick} {...member} className="even:sm:mt-14 even:xl:mt-32" />
<li key={member.nick} className="even:sm:mt-14 even:xl:mt-32 w-60 sm:w-64 xl:w-70">
<Profile {...member} />
</li>
))}
</div>
</ul>
</div>
</div>
</section>
);
};

16 changes: 1 addition & 15 deletions src/css/custom.css
Original file line number Diff line number Diff line change
@@ -9,7 +9,7 @@

/* You can override the default Infima variables here. */
:root {
--ifm-color-primary: #309976;
--ifm-color-primary: #2b896a;
--ifm-color-primary-dark: #305a48;
--ifm-color-primary-darker: #2d5544;
--ifm-color-primary-darkest: #254638;
@@ -67,20 +67,6 @@
@apply opacity-75
}

.border-primary {
border-color: var(--brand-primary);
}

.footer {
--ifm-footer-background-color: #373445;
}

.layout {
color: var(--brand-text);
background: var(--brand-background);
}


.bg-theme-highlight {
background: var(--theme-background);
}
2 changes: 1 addition & 1 deletion src/pages/about.tsx
Original file line number Diff line number Diff line change
@@ -6,7 +6,7 @@ import TheTeamSection from '@site/src/components/pages/about-us/section/the-team

export default function About(): React.JSX.Element {
return (
<Layout wrapperClassName="layout">
<Layout wrapperClassName="text-brand-text-light dark:text-brand-text-dark bg-brand-background-light dark:bg-brand-background-dark">
<HeaderSection />
<OurStory />
<TheTeamSection />
10 changes: 9 additions & 1 deletion tailwind.config.js
Original file line number Diff line number Diff line change
@@ -5,7 +5,7 @@ module.exports = {
colors: {
primary: {
dark: '#3dc094',
light: '#309976',
light: '#2b896a',
},
secondary: {
dark: '#373445',
@@ -15,6 +15,10 @@ module.exports = {
dark: '#f0f2f5',
light: '#373445',
},
'brand-background': {
dark: '#23212b',
light: '#f0f2f5',
},
background: {
normal: {
dark: '#373445',
@@ -24,6 +28,10 @@ module.exports = {
dark: '#32303f',
light: '#f2f2f2',
},
highlight: {
dark: '#363344',
light: '#ffffff',
},
},
},
},