Skip to content

Commit 2fa30e4

Browse files
BenedictLangBenedictLang
committedAug 13, 2024·
feat(Home): setup hero section
1 parent 7475903 commit 2fa30e4

29 files changed

+200
-31
lines changed
 

‎public/fonts/Geologica-VariableFont_CRSV,SHRP,slnt,wght.ttf

335 KB
Binary file not shown.

‎src/components/Audio/ButtonAudio/ButtonAudio.module.css

+8-2
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/components/Audio/ButtonAudio/ButtonAudio.module.css.map

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/components/Buttons/ButtonGlow/ButtonGlow.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import stylesBtn from '../Button/Button.module.css';
33
import CustomLink from '../../Link';
44
import { useEffect } from 'react';
55

6-
const ButtonGlow = ({ onClick, children, className, href, ...rest }) => {
6+
const ButtonGlow = ({ onClick, children, className, href, overglow, ...rest }) => {
77
useEffect(() => {
88
console.log('Rendering ButtonGlow');
99
}, []);
@@ -17,7 +17,7 @@ const ButtonGlow = ({ onClick, children, className, href, ...rest }) => {
1717
<CustomLink
1818
href={href}
1919
onClick={handleClick}
20-
className={`${className} ${stylesBtn.button} ${styles.button}`}
20+
className={`${className} ${stylesBtn.button} ${styles.button} ${overglow ? styles.overGlow : ''}`}
2121
{...rest}
2222
>
2323
{children}

‎src/components/Buttons/ButtonGlow/ButtonGlow.module.scss

+25-6
Original file line numberDiff line numberDiff line change
@@ -18,14 +18,20 @@
1818
z-index: -1;
1919
transition: all $duration-short ease-in-out;
2020
}
21-
2221
&:before {
23-
background: linear-gradient($color-gradient), linear-gradient($color-gradient);
22+
background: linear-gradient($color-gradient-light), linear-gradient($color-gradient-light);
2423
background-size: 500%;
2524
filter: blur(1em);
2625
opacity: 0.7;
2726
animation: glowing 15s ease-in-out infinite;
2827
}
28+
&.overGlow {
29+
&:before {
30+
animation:
31+
glowing 15s ease-in-out infinite,
32+
rotating 15s ease-in-out infinite;
33+
}
34+
}
2935

3036
&:hover {
3137
border: $border-width-medium solid $color-bg-transparent;
@@ -46,22 +52,35 @@
4652
@keyframes glowing {
4753
0% {
4854
background-position: 0 50%;
49-
transform: scale(1) rotate(0deg);
5055
}
5156
25% {
5257
background-position: 50% 0;
53-
transform: scale(1.2) rotate(15deg);
5458
}
5559
50% {
5660
background-position: 100% 50%;
57-
transform: scale(1.3) rotate(-10deg);
5861
}
5962
75% {
6063
background-position: 50% 100%;
61-
transform: scale(1.1) rotate(-20deg);
6264
}
6365
100% {
6466
background-position: 0 50%;
67+
}
68+
}
69+
70+
@keyframes rotating {
71+
0% {
72+
transform: scale(1) rotate(0deg);
73+
}
74+
25% {
75+
transform: scale(1.2) rotate(15deg);
76+
}
77+
50% {
78+
transform: scale(1.3) rotate(-10deg);
79+
}
80+
75% {
81+
transform: scale(1.1) rotate(-20deg);
82+
}
83+
100% {
6584
transform: scale(1) rotate(0deg);
6685
}
6786
}

‎src/components/ContainerElements/Container/Container.module.scss

-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
@import '../../../styles/settings/_settings';
22

33
.container {
4-
max-width: 60rem;
54
padding: 0 $space-medium;
65
margin: 0 auto;
76
}

‎src/components/ContainerElements/Content/Content.module.scss

+7-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,13 @@
11
@import '../../../styles/settings/_settings';
22

33
.content {
4-
font-size: 1.5rem;
4+
position: relative;
5+
width: 100%;
6+
max-width: $container-width;
7+
height: 100%;
8+
padding: 0 $space-medium;
9+
margin: 0 auto;
10+
align-content: center;
511

612
h2,
713
h3,

‎src/components/Sections/Heros/Hero/Hero.js

+26-1
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,38 @@
11
import ClassName from '../../../../models/classname';
22

33
import styles from './Hero.module.scss';
4+
import GlitchText from '../../../Text/GlitchText';
5+
import ButtonGlow from '../../../Buttons/ButtonGlow';
6+
import GradientText from '../../../Text/GradientText';
7+
import Content from '../../../ContainerElements/Content';
48

59
const Hero = ({ children, className }) => {
610
const contentClassName = new ClassName();
711

812
contentClassName.addIf(className, className);
913

10-
return <div className={`${contentClassName.toString()}${styles.hero}`}>{children}</div>;
14+
return (
15+
<div className={`${contentClassName.toString()} ${styles.hero}`}>
16+
<Content>
17+
<div className={styles.textBox}>
18+
<hr />
19+
<h2>Design & Software. Made in Germany.</h2>
20+
<h1>
21+
Hey, I&apos;m&nbsp;
22+
<GlitchText text="Benny" intervalTime={40} />
23+
</h1>
24+
<p>
25+
As a full-stack software engineer and designer, I love to create digital experiences and optimizing IT
26+
processes and security. I&apos;m ready for your <GradientText string={'challenge'} />.
27+
</p>
28+
<ButtonGlow href="/#clients" className={styles.btn} overglow={false}>
29+
Learn more
30+
</ButtonGlow>
31+
</div>
32+
{children}
33+
</Content>
34+
</div>
35+
);
1136
};
1237

1338
export default Hero;

‎src/components/Sections/Heros/Hero/Hero.module.scss

+45
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,49 @@
11
@import '../../../../styles/settings/_settings';
22

33
.hero {
4+
position: relative;
5+
width: 100%;
6+
height: 100vh;
7+
align-items: center;
8+
9+
.textBox {
10+
display: flex;
11+
flex-direction: column;
12+
align-items: end;
13+
gap: $space-small;
14+
15+
hr {
16+
width: 4rem;
17+
}
18+
h1 {
19+
margin: 0;
20+
line-height: 1.15;
21+
font-size: 6em;
22+
font-weight: 600;
23+
}
24+
h2 {
25+
font-size: 1.5em;
26+
color: $color-text-transparent-light;
27+
font-weight: 700;
28+
}
29+
p {
30+
font-size: 1.4em;
31+
}
32+
.btn {
33+
align-self: center;
34+
}
35+
}
36+
}
37+
38+
@include from-tablet {
39+
.hero {
40+
.textBox {
41+
p {
42+
max-width: 50%;
43+
}
44+
.btn {
45+
align-self: end;
46+
}
47+
}
48+
}
449
}

‎src/components/Sections/Heros/HeroSub/HeroSub.js

+5-6
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,20 @@
11
import ClassName from '../../../../models/classname';
22
import styles from './HeroSub.module.scss';
33
import useSite from '../../../../hooks/use-site';
4+
import GlitchText from '../../../Text/GlitchText';
45

56
export default function HeroSub({ children, className }) {
67
const { metadata = {} } = useSite();
7-
const { title, description } = metadata;
8+
const { description } = metadata;
89

910
const contentClassName = new ClassName();
1011
contentClassName.addIf(className, className);
1112

1213
return (
1314
<div className={styles.heroSub}>
14-
<h1
15-
dangerouslySetInnerHTML={{
16-
__html: title,
17-
}}
18-
/>
15+
<h1>
16+
<GlitchText text="Hello World!" intervalTime={50} />
17+
</h1>
1918
<p
2019
className={styles.description}
2120
dangerouslySetInnerHTML={{

‎src/components/Sections/Heros/HeroSub/HeroSub.module.scss

+1
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
margin: 0;
88
line-height: 1.15;
99
font-size: 3rem;
10+
font-weight: 700;
1011
text-align: center;
1112

1213
@media (min-width: 480px) {

‎src/components/Text/GlitchText/GlitchText.js

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import { useEffect, useState } from 'react';
2+
3+
const GlitchText = ({ text, intervalTime = 50 }) => {
4+
const chars = '☺Σ×Π#-_¯—→↓↑←0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZ';
5+
const [displayedText, setDisplayedText] = useState('');
6+
7+
useEffect(() => {
8+
let currentText = Array(text.length).fill('#');
9+
setDisplayedText(currentText.join(''));
10+
11+
let currentIndex = 0;
12+
13+
const intervalId = setInterval(() => {
14+
// Replace the current character with either the correct character or a random one
15+
if (currentText[currentIndex] !== text[currentIndex]) {
16+
currentText[currentIndex] =
17+
Math.random() < 0.5 ? text[currentIndex] : chars[Math.floor(Math.random() * chars.length)];
18+
setDisplayedText(currentText.join(''));
19+
} else {
20+
currentIndex++;
21+
}
22+
23+
// Stop the interval when all characters are resolved
24+
if (currentIndex >= text.length) {
25+
clearInterval(intervalId);
26+
}
27+
}, intervalTime); // Change the timing here to make the glitch effect faster or slower
28+
29+
return () => clearInterval(intervalId);
30+
}, [text, intervalTime]);
31+
32+
return <>{displayedText} </>;
33+
};
34+
35+
export default GlitchText;

‎src/components/Text/GlitchText/index.js

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { default } from './GlitchText';

‎src/components/Text/GradientText/GradientText.js

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import React from 'react';
2+
import styles from './GradientText.module.scss';
3+
4+
const GradientText = ({ string }) => {
5+
return <span className={styles.gradientText}>{string}</span>;
6+
};
7+
8+
export default GradientText;

‎src/components/Text/GradientText/GradientText.module.scss

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
@import '../../../styles/settings/__settings';
2+
3+
.gradientText {
4+
background-image: linear-gradient(to right, $color-white-trans-light, $color-primary);
5+
-webkit-background-clip: text;
6+
background-clip: text;
7+
color: transparent;
8+
}

‎src/components/Text/GradientText/index.js

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { default } from './GradientText';

‎src/components/SectionTitle/index.js ‎src/components/Text/SectionTitle/index.js

File renamed without changes.

‎src/components/Title/Title.js ‎src/components/Text/Title/Title.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import ClassName from 'models/classname';
1+
import ClassName from '../../../models/classname';
22

33
import styles from './Title.module.scss';
44

‎src/components/Title/index.js ‎src/components/Text/Title/index.js

File renamed without changes.

‎src/pages/authors/[slug].js

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { AuthorJsonLd } from 'lib/json-ld';
44
import usePageMetadata from 'hooks/use-page-metadata';
55

66
import TemplateArchive from 'templates/archive';
7-
import Title from 'components/Title';
7+
import Title from 'components/Text/Title';
88

99
export default function Author({ user, posts }) {
1010
const { title, name, avatar, description, slug } = user;

‎src/pages/categories.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { WebpageJsonLd } from 'lib/json-ld';
77
import Layout from 'components/Layouts/Layout';
88
import Section from 'components/Sections/Section';
99
import Container from 'components/ContainerElements/Container';
10-
import SectionTitle from 'components/SectionTitle';
10+
import SectionTitle from 'components/Text/SectionTitle';
1111

1212
import styles from 'styles/pages/Categories.module.scss';
1313
import HeroSub from '../components/Sections/Heros/HeroSub';

‎src/pages/categories/[slug].js

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { getPostsByCategoryId } from 'lib/posts';
33
import usePageMetadata from 'hooks/use-page-metadata';
44

55
import TemplateArchive from 'templates/archive';
6-
import Title from 'components/Title';
6+
import Title from 'components/Text/Title';
77

88
export default function Category({ category, posts }) {
99
const { name, description, slug } = category;

‎src/pages/home.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,11 @@ import Section from 'components/Sections/Section';
88
import Container from 'components/ContainerElements/Container';
99
import PostCard from 'components/PostCard';
1010
import Pagination from 'components/Pagination';
11-
import HeroSub from '../components/Sections/Heros/HeroSub';
1211
import { useContext, useEffect } from 'react';
1312
import { ThreeSceneContext } from '../components/3D/ThreeSceneProvider';
1413
import { Vector3 } from 'three';
1514
import { useViewport } from '../components/_General/Viewport/ViewportProvider';
15+
import Hero from '../components/Sections/Heros/Hero';
1616

1717
export default function Home({ posts, pagination }) {
1818
const { metadata = {} } = useSite();
@@ -25,15 +25,15 @@ export default function Home({ posts, pagination }) {
2525
if (isMobile) {
2626
newTarget.y = 3;
2727
} else {
28-
newTarget.x = 5;
28+
newTarget.x = -5;
2929
}
3030
setCameraTarget(newTarget);
3131
}, [isMobile, setCameraTarget]);
3232

3333
return (
3434
<Layout>
3535
<WebsiteJsonLd siteTitle={title} />
36-
<HeroSub />
36+
<Hero />
3737
<Section>
3838
<Container>
3939
<h2 className="sr-only">Posts</h2>

‎src/pages/index.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -183,7 +183,7 @@ Instagram [https://www.instagram.com/bl_design.de/]
183183
return (
184184
<LayoutFullscreen>
185185
<Container className={styles.content}>
186-
<ButtonGlow href="/" onClick={handleClick}>
186+
<ButtonGlow href="/" onClick={handleClick} overglow={true}>
187187
GET $data
188188
</ButtonGlow>
189189
{isModalVisible && (

‎src/styles/globals.scss

+5
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ body {
2323
position: relative;
2424
overflow: auto;
2525
background-color: $color-bg;
26+
color: $color-text;
2627

2728
/* Background glows */
2829
&::before,
@@ -55,6 +56,10 @@ body {
5556
}
5657
}
5758

59+
h1 {
60+
font-family: Geologica, sans-serif;
61+
}
62+
5863
p {
5964
line-height: 1.6;
6065
margin: 1.2em 0;

‎src/styles/settings/_colors.scss

+5-2
Original file line numberDiff line numberDiff line change
@@ -23,8 +23,8 @@ $color-blue-800: #002a5a;
2323
$color-blue-900: #001227;
2424
$color-blue-1000: #080917;
2525

26-
$color-green-300: rgb(10, 250, 206);
27-
$color-green-300-trans: rgba(10, 250, 206, 0.68);
26+
$color-green-300: rgb(10, 230, 236);
27+
$color-green-300-trans: rgba(10, 230, 236, 0.68);
2828
$color-green-300-trans-strong: rgba(0, 255, 224, 0.03);
2929

3030
$color-purple-300: #a663ca;
@@ -54,5 +54,8 @@ $color-text-transparent-light: $color-white-trans-light;
5454
$color-text-transparent: $color-white-trans;
5555
$color-text-passive: $color-gray-700;
5656

57+
$color-gradient-light: 40deg, transparent, $color-container, transparent, $color-primary, $color-container, transparent,
58+
$color-primary, $color-container, transparent;
59+
5760
$color-gradient: 40deg, transparent, $color-complementary, transparent, $color-primary, $color-complementary,
5861
transparent, $color-primary, $color-complementary, transparent;

‎src/styles/settings/_typography.scss

+8
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,12 @@
1+
@font-face {
2+
font-family: Geologica;
3+
src: url('/fonts/Geologica-VariableFont_CRSV,SHRP,slnt,wght.ttf') format('ttf');
4+
font-weight: 500;
5+
font-display: swap;
6+
}
7+
18
$font-family-default:
9+
'Geologica',
210
Menlo,
311
Monaco,
412
Lucida Console,

‎src/templates/archive.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import useSite from 'hooks/use-site';
77
import Layout from 'components/Layouts/Layout';
88
import Section from 'components/Sections/Section';
99
import Container from 'components/ContainerElements/Container';
10-
import SectionTitle from 'components/SectionTitle';
10+
import SectionTitle from 'components/Text/SectionTitle';
1111
import PostCard from 'components/PostCard';
1212
import Pagination from 'components/Pagination/Pagination';
1313

0 commit comments

Comments
 (0)
Please sign in to comment.