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.

Sign up for GitHub

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

Other performance improvements #44

Merged
merged 1 commit into from
May 29, 2024
Merged

Other performance improvements #44

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
Binary file added src/assets/video/baldini_10s_low.mp4
View file
Open in desktop
Binary file not shown.
Binary file added src/assets/video/millenium_10s_low.mp4
View file
Open in desktop
Binary file not shown.
Binary file added src/assets/video/moddilugitrix_10s_low.mp4
View file
Open in desktop
Binary file not shown.
Binary file added src/assets/video/shorty_10s_low.mp4
View file
Open in desktop
Binary file not shown.
Binary file added src/assets/video/transplay_10s_low.mp4
View file
Open in desktop
Binary file not shown.
5 changes: 2 additions & 3 deletions src/components/atoms/BigPictureSection/index.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
text-align: center;

// mix-blend-mode: soft-light;
h4 {
h3 {
font-size: 5rem;
text-transform: uppercase;
margin-bottom: 5px;
Expand All @@ -33,8 +33,7 @@
width: 40%;
text-align: right;
right: 4%;
h4 {
opacity: 0.2;
h3 {
font-size: 10rem;
}

Expand Down
28 changes: 1 addition & 27 deletions src/components/atoms/BigPictureSection/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,32 +6,6 @@ import { GatsbyImage } from 'gatsby-plugin-image';
import Carousel from '../Carousel';

const Index = ({ title, text, reverse = false, images, videos }: BigPictureSectionProps) => {
// let base = 0;
// const [offset, setOffset] = useState<number>(0);

// const [ref, inView, entry] = useInView({
// threshold: 0.2,
// fallbackInView: true,
// triggerOnce: false,
// });

// const parallax = () => {
// const rect = entry!.target.getBoundingClientRect();
// const a = rect.top + rect.bottom;
// setOffset((a / window.innerHeight) * 100);
// };

// useEffect(() => {
// if (inView) {
// base = window.scrollY;
// window.addEventListener('scroll', () => parallax());
// } else window.removeEventListener('scroll', () => {});

// return window.removeEventListener('scroll', () => {});
// }, [inView]);

// const transform = `translateX(${reverse ? '-' : '+'}${Math.round(offset / 2)}%)`;

const slides = [
videos?.map((v, key) => (
<video key={key} className={styles.video} height={500} muted autoPlay controls={false} loop playsInline>
Expand All @@ -56,7 +30,7 @@ const Index = ({ title, text, reverse = false, images, videos }: BigPictureSecti
return (
<div className={styles.wrap}>
<ShowOnView className={reverse ? styles.wrapTextReverse : styles.wrapText}>
<h4 dangerouslySetInnerHTML={{ __html: title }}></h4>
<h3 dangerouslySetInnerHTML={{ __html: title }}></h3>
<p dangerouslySetInnerHTML={{ __html: text ?? '' }}></p>
</ShowOnView>

Expand Down
4 changes: 2 additions & 2 deletions src/components/atoms/LanguagePicker/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ const Index = () => {
return (
<div className={styles.languagePicker} onMouseLeave={() => setDropdown(false)}>
<p onClick={() => setDropdown((v) => !v)}>
<Flag className={styles.flag} code={enToUk(language)} />
<Flag className={styles.flag} code={enToUk(language)} alt={language + ' flag'} />
{language.toUpperCase()}
{/* <Down width={10} height={10} /> */}
</p>
Expand All @@ -23,7 +23,7 @@ const Index = () => {
to={originalPath}
language={lng}
>
<Flag className={styles.flag} code={enToUk(lng)} /> {lng.toUpperCase()}
<Flag className={styles.flag} code={enToUk(lng)} alt={lng + ' flag'} /> {lng.toUpperCase()}
</Link>
{key % 2 === 0 ? <div className={styles.separator}></div> : null}
</div>
Expand Down
20 changes: 12 additions & 8 deletions src/components/atoms/VideoMasked/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,20 +4,24 @@ import * as styles from './index.module.scss';
import BoscoCoste from '../../../assets/video/bosco_coste_forward.mp4';
import ShowOnView from '../ShowOnView';

const VideoMasked = ({}: VideoMaskedProps) => {
const VideoMasked = ({ showOnView = false }: VideoMaskedProps) => {
const [loadVideo, setLoadVideo] = useState<boolean>(false);

useEffect(() => {
setLoadVideo(true);
}, []);

return (
<ShowOnView className={styles.videoWrap}>
<video height={500} muted autoPlay controls={false} loop playsInline>
{loadVideo ? <source src={BoscoCoste} type="video/mp4" /> : <></>}
Your browser doesn't support video tag
</video>
</ShowOnView>
const children = (
<video height={500} muted autoPlay controls={false} loop playsInline>
{loadVideo ? <source src={BoscoCoste} type="video/mp4" /> : <></>}
Your browser doesn't support video tag
</video>
);

return showOnView ? (
<ShowOnView className={styles.videoWrap}>{children}</ShowOnView>
) : (
<div className={styles.videoWrap}>{children}</div>
);
};

Expand Down
4 changes: 2 additions & 2 deletions src/components/atoms/VideoMasked/index.types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
export default interface VideoMaskedProps {

}
showOnView?: boolean;
}
109 changes: 6 additions & 103 deletions src/components/molecules/NaturalmenteTecnologici/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,98 +2,26 @@ import React from 'react';

import * as styles from './index.module.scss';
import Heading from '../../atoms/Heading';
import Bug from '../../../assets/bug.svg';
import Insects from '../../../assets/insects.svg';
import Section from '../Section';
import SingleSection from '../../atoms/SingleSection';
import HeardOn from '../../atoms/HeardOn';
import WhenAndWhere from '../WhenAndWhere';
import { useTranslation } from 'react-i18next';
import Twitch from '../../../assets/twitch.svg';
import VerticalSectionImage from '../../atoms/VerticalSectionImage';
import { StaticImage } from 'gatsby-plugin-image';
import CardImage from '../../atoms/CardImage';
import ShowOnView from '../../atoms/ShowOnView';
import BigPictureSection from '../../atoms/BigPictureSection';
import { images as ntImages } from '../../../utilities/ntPhotos';
import Banner from '../../atoms/Banner';
import Shorty from '../../../assets/video/shorty_10s.mp4';
import Moddilugitrix from '../../../assets/video/moddilugitrix_10s.mp4';
import Baldini from '../../../assets/video/baldini_10s.mp4';
import Millenium from '../../../assets/video/millenium_10s.mp4';
import Transplay from '../../../assets/video/transplay_10s.mp4';
import Shorty from '../../../assets/video/shorty_10s_low.mp4';
import Moddilugitrix from '../../../assets/video/moddilugitrix_10s_low.mp4';
import Baldini from '../../../assets/video/baldini_10s_low.mp4';
import Millenium from '../../../assets/video/millenium_10s_low.mp4';
import Transplay from '../../../assets/video/transplay_10s_low.mp4';
import VideoMasked from '../../atoms/VideoMasked';

const Index = () => {
const { t } = useTranslation();
const { music, activities, nature } = ntImages();

const whatIs = [
{
name: t('WhatIsName1'),
text: t('WhatIsText1'),
big: true,
},
// {
// name: t('WhatIsName2'),
// text: t('WhatIsText2'),
// eventbrite: true,
// },
// {
// name: t('WhatIsName3'),
// text: t('WhatIsText3'),
// eventbrite: true,
// },
// {
// name: t('WhatIsName4'),
// text: t('WhatIsText4'),
// big: true,
// },
];

const info = [
{
title: t('InfoTitle1'),
text: t('InfoText1'),
svgStyle: { transform: 'rotate(94.72deg)' },
// cta: 'ASSICURATI IL PASS',
// ctaLink: '#biglietti',
},
{
title: t('InfoTitle2'),
text: t('InfoText2'),
// cta: 'RISERVA IL TUO POSTO',
// ctaLink: '#biglietti',
},
{
title: t('InfoTitle3'),
text: t('InfoText3'),
// cta: 'PRENDINE PARTE',
// ctaLink: '#biglietti',
// svgStyle: { transform: 'rotateY(180deg)' },
},
{
title: t('InfoTitle4'),
text: t('InfoText4'),
svgStyle: { transform: 'rotate(94.72deg)' },
cta: t('InfoCta4'),
ctaLink: '/contattaci',
ctaInternal: true,
},
{
title: t('InfoTitle5'),
text: t('InfoText5'),
cta: t('InfoCta5'),
ctaLink: 'https://www.twitch.tv/syskracktv',
ctaInternal: false,
ctaIcon: Twitch,
},
];

return (
<div className={styles.wrap}>
<div className={styles.singleSectionsWrap}>
<Heading text={t('EventTitle')} smaller={false} simple showOnView />
<Heading text={t('EventTitle')} smaller={false} simple showOnView={false} />
<div className={styles.singleSections}>
<VideoMasked />
<p dangerouslySetInnerHTML={{ __html: t('EventDescription') }}></p>
Expand All @@ -106,35 +34,10 @@ const Index = () => {
/>
<BigPictureSection images={activities} title={t('Value2')} text={t('ValueText2')} reverse />
<BigPictureSection images={nature} videos={[Transplay]} title={t('Value3')} text={t('ValueText3')} />
{/* {whatIs.map((item, key) => (
<div className={styles.singleSections} style={item.big ? {} : { maxWidth: '500px' }} key={key}>
<Heading text={item.name} smaller={key != 0} />
<SingleSection>
<p dangerouslySetInnerHTML={{ __html: item.text }}></p>
</SingleSection>
</div>
))} */}
</div>
<HeardOn />

<WhenAndWhere />
{/* <Heading text={t('WhatHeading')} />
{info.map((item, key) => {
return (
<Section
title={item.title}
text={item.text}
reversed={key % 2 == 1}
key={key}
Svg={key % 2 == 0 ? Bug : Insects}
svgStyle={item.svgStyle}
buttonHref={item.ctaLink}
buttonTitle={item.cta}
buttonInternal={item.ctaInternal}
ButtonIcon={item.ctaIcon}
/>
);
})} */}
</div>
);
};
Expand Down
4 changes: 2 additions & 2 deletions src/components/molecules/WhenAndWhere/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,11 +31,11 @@ const Index = () => {
</span>
<LocationMap />
</ShowOnView>
<div className={styles.services}>
<ShowOnView className={styles.services}>
{services.map((s, key) => (
<Badge key={key} name={s} on />
))}
</div>
</ShowOnView>
{/* <ShowOnView>
<h4 dangerouslySetInnerHTML={{ __html: t('WhereLocation') }}></h4>
<Button text={t('HowToReach')} title={t('HowToReach')} href="/info/#come-raggiungerci" internal />
Expand Down
1 change: 1 addition & 0 deletions src/styles/globals.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@
font-style: normal;
font-weight: normal;
src: local('Alba'), url('/fonts/alba/ALBA____.woff2') format('woff2');
font-display: 'swap';
}

html {
Expand Down
Loading