Skip to content

Commit acbf6f0

Browse files
BenedictLangBenedictLang
committed
feat(About): add about section, add image responsive, fix layout, fix font sizes
1 parent cd8628a commit acbf6f0

File tree

17 files changed

+296
-58
lines changed

17 files changed

+296
-58
lines changed

‎public/images/Profilbild.png

483 KB
Loading

‎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/Button/Button.module.scss

+7-4
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,14 @@
11
@import '../../../styles/settings/__settings';
22

33
.button {
4+
position: relative;
5+
display: flex;
6+
align-items: center;
7+
gap: $space-mini;
8+
width: fit-content;
49
color: $color-text;
10+
font-size: $font-size-btn;
511
font-family: inherit;
6-
font-size: 1.3em;
712
font-weight: 600;
813
background-color: $color-bg;
914
padding: 0.7em 1.4em;
@@ -12,11 +17,9 @@
1217
box-shadow: $fx-dropShadow;
1318
transition-duration: $duration-short;
1419
cursor: pointer;
15-
display: flex;
16-
align-items: center;
17-
gap: $space-mini;
1820

1921
svg {
22+
font-size: $font-size-p;
2023
margin-bottom: -0.2em;
2124
}
2225

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

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
@import '../../../styles/settings/__settings';
22

33
.button {
4-
outline: none;
5-
background: transparent;
6-
cursor: pointer;
74
position: relative;
5+
background: transparent;
6+
font-size: $font-size-p;
7+
outline: none;
88
z-index: 0;
99

1010
&:before {

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@
55
width: 100%;
66
max-width: $container-width;
77
height: 100%;
8-
padding: 0 $space-medium;
9-
margin: 0 auto;
8+
padding: $space $space;
9+
margin: auto;
1010
align-content: center;
1111

1212
h2,

‎src/components/Sections/Footer/Footer.js

+15-13
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import Container from '../../ContainerElements/Container';
77

88
import styles from './Footer.module.scss';
99
import CustomLink from '../../Link';
10+
import { FaSitemap, FaRssSquare } from 'react-icons/fa';
1011

1112
const Footer = ({ minimal = false }) => {
1213
const { recentPosts = [], categories = [] } = useSite();
@@ -56,19 +57,6 @@ const Footer = ({ minimal = false }) => {
5657
</ul>
5758
</li>
5859
)}
59-
<li>
60-
<p className={styles.footerMenuTitle}>
61-
<strong>More</strong>
62-
</p>
63-
<ul className={styles.footerMenuItems}>
64-
<li>
65-
<a href="/feed.xml">RSS</a>
66-
</li>
67-
<li>
68-
<a href="/sitemap.xml">Sitemap</a>
69-
</li>
70-
</ul>
71-
</li>
7260
</ul>
7361
</Container>
7462
</Section>
@@ -88,6 +76,20 @@ const Footer = ({ minimal = false }) => {
8876
<CustomLink href={'https://lang-familie.de/datenschutzerklaerung/'}>Privacy Policy</CustomLink>
8977
</div>
9078
)}
79+
{!minimal && (
80+
<ul className={styles.footerAccessibles}>
81+
<li>
82+
<a href="/feed.xml" aria-details="RSS">
83+
<FaRssSquare />
84+
</a>
85+
</li>
86+
<li>
87+
<a href="/sitemap.xml" aria-details="Sitemap">
88+
<FaSitemap />
89+
</a>
90+
</li>
91+
</ul>
92+
)}
9193
</Section>
9294
</footer>
9395
);

‎src/components/Sections/Footer/Footer.module.scss

+15-1
Original file line numberDiff line numberDiff line change
@@ -43,14 +43,16 @@
4343

4444
.footerMenuTitle {
4545
display: inline-block;
46-
color: $color-gray-800;
46+
color: $color-text;
47+
font-size: $font-size-p;
4748
text-decoration: none;
4849
margin-bottom: 1.4em;
4950
margin-top: 0;
5051
}
5152

5253
.footerMenuItems {
5354
li {
55+
font-size: $font-size-p;
5456
margin-bottom: 1em;
5557

5658
&:last-child {
@@ -90,6 +92,7 @@
9092
display: flex;
9193
flex-direction: row;
9294
flex-wrap: wrap;
95+
font-size: $font-size-passive;
9396
}
9497

9598
a {
@@ -113,6 +116,13 @@
113116
flex-direction: row;
114117
gap: $space-small;
115118
}
119+
120+
.footerAccessibles {
121+
display: flex;
122+
align-items: center;
123+
gap: $space-small;
124+
font-size: $font-size-p;
125+
}
116126
}
117127

118128
@include only-mobile {
@@ -133,5 +143,9 @@
133143

134144
justify-content: center;
135145
}
146+
147+
.footerAccessibles {
148+
display: none;
149+
}
136150
}
137151
}

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

+8
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import CustomLink from '../../../Link';
99
import { FiGithub, FiLinkedin, FiDribbble } from 'react-icons/fi';
1010
import { RiStackOverflowFill } from 'react-icons/ri';
1111
import { CgScrollV } from 'react-icons/cg';
12+
import Image from 'next/image';
1213

1314
const Hero = ({ children, className, scrollTo }) => {
1415
const contentClassName = new ClassName();
@@ -59,6 +60,13 @@ const Hero = ({ children, className, scrollTo }) => {
5960
<CgScrollV />
6061
</ButtonGlow>
6162
</div>
63+
<Image
64+
src={'/images/Profilbild.png'}
65+
alt="Profile picture Benedict Lang"
66+
className={styles.image}
67+
width={500}
68+
height={0}
69+
/>
6270
{children}
6371
</Content>
6472
</div>

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

+34-8
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,15 @@
33
.hero {
44
position: relative;
55
width: 100%;
6-
height: 100vh;
6+
min-height: 100vh;
77

88
.content {
99
display: flex;
1010
flex-direction: column-reverse;
1111
gap: $space;
1212
align-items: center;
13+
min-height: 95vh;
14+
max-width: unset;
1315

1416
.socialLinks {
1517
display: none;
@@ -32,11 +34,32 @@
3234
color: $color-text-transparent-light;
3335
}
3436
p {
35-
font-size: clamp(0.7em, calc(0.5em + 3vw), 1.5em);
37+
font-size: clamp(0.7em, calc(0.1em + 4vw), 1.5em);
38+
max-width: 100%;
3639
}
3740
.btn {
3841
margin-top: $space-small;
39-
align-self: center;
42+
align-self: start;
43+
}
44+
}
45+
.image {
46+
//display: none;
47+
position: absolute;
48+
bottom: 0;
49+
width: calc(240px + 8vw);
50+
max-width: 500px;
51+
right: 0;
52+
}
53+
}
54+
}
55+
56+
@include up-to-tablet {
57+
.hero {
58+
.content {
59+
.image {
60+
display: block;
61+
width: 45%;
62+
right: 2vw;
4063
}
4164
}
4265
}
@@ -46,6 +69,12 @@
4669
.hero {
4770
.content {
4871
flex-direction: row;
72+
min-height: 100vh;
73+
.image {
74+
display: block;
75+
width: calc(370px + 4vw);
76+
right: calc($space-mini + 4vw);
77+
}
4978

5079
.socialLinks {
5180
display: flex;
@@ -64,12 +93,9 @@
6493
}
6594
.textBox {
6695
padding-top: 20vh;
67-
96+
padding-bottom: unset;
6897
p {
69-
max-width: 50%;
70-
}
71-
.btn {
72-
align-self: start;
98+
max-width: 60%;
7399
}
74100
}
75101
}

‎src/components/Sections/Section/Section.module.scss

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

33
.section {
4+
position: relative;
5+
display: flex;
6+
align-items: center;
47
width: 100%;
58
padding: 0;
69
margin: 0;

‎src/pages/blog.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import useSite from 'hooks/use-site';
22
import { getPaginatedPosts } from 'lib/posts';
33
import { WebsiteJsonLd } from 'lib/json-ld';
4-
import styles from 'styles/pages/Home.module.scss';
4+
import styles from 'styles/pages/Blog.module.scss';
55

66
import Layout from 'components/Layouts/Layout';
77
import Section from 'components/Sections/Section';

‎src/pages/home.js

+59-1
Original file line numberDiff line numberDiff line change
@@ -13,13 +13,17 @@ import LogoSlider from '../components/Slider/LogoSlider';
1313
import Image from 'next/image';
1414
import CustomLink from '../components/Link';
1515
import { getAllCustomers } from '../lib/customers';
16+
import Content from '../components/ContainerElements/Content';
17+
import Button from '../components/Buttons/Button';
18+
import { IoArchiveOutline } from 'react-icons/io5';
1619

1720
export default function Home({ customers }) {
1821
const { metadata = {} } = useSite();
1922
const { title } = metadata;
2023
const { isMobile } = useViewport();
2124
const { setCameraTarget } = useContext(ThreeSceneContext);
2225
const clientsRef = useRef(null);
26+
const currentYear = new Date().getFullYear();
2327

2428
useEffect(() => {
2529
const newTarget = new Vector3();
@@ -48,7 +52,61 @@ export default function Home({ customers }) {
4852
})}
4953
</LogoSlider>
5054
</div>
51-
<Section className={styles.tileSection}></Section>
55+
{/*<Section className={styles.services}>
56+
<Content></Content>
57+
</Section>*/}
58+
<Section className={styles.aboutSection}>
59+
<Content className={styles.aboutContent}>
60+
<div>
61+
<h3>About Me</h3>
62+
<p>
63+
I am a 24-year-old Bachelor student in Computer Science and Media at Media University Stuttgart (HdM),
64+
Germany. As a full-stack developer, I enjoy optimizing processes using my IT knowledge and continually
65+
learning new technologies to achieve that goal. Creating a secure and impressive user experience are
66+
crucial parts to me.
67+
</p>
68+
<div className={styles.aboutBlock}>
69+
<p>
70+
During my studies, I used to work as a tutor and enjoyed assisting other students in various design and
71+
software projects. While explaining, things become even clearer for myself. As a student trainee I
72+
gained insights in AI appliance at our institute IAAI for two semesters. Subsequently, when working on
73+
software projects, I always advocated for appliance security and constantly developed my passion for
74+
InfoSec while continuing my exciting journey at Porsche.
75+
</p>
76+
</div>
77+
</div>
78+
<div className={styles.numbers}>
79+
<div className={styles.infoBox}>
80+
<span className={styles.years}>{currentYear - 2014}</span>
81+
<span>
82+
Jahre <br />
83+
Grafikdesign
84+
</span>
85+
</div>
86+
<div className={styles.infoBox}>
87+
<span className={styles.years}>{currentYear - 2017}</span>
88+
<span>
89+
Jahre Web <br />
90+
Entwicklung
91+
</span>
92+
</div>
93+
<div className={styles.infoBox}>
94+
<span className={styles.years}>{currentYear - 2019}</span>
95+
<span>
96+
Jahre Software <br />
97+
Entwicklung
98+
</span>
99+
</div>
100+
</div>
101+
</Content>
102+
</Section>
103+
<Section>
104+
<Content className={styles.portfolioContent}>
105+
<Button href={'https://www.apps.benedict.lang-familie.de'} className={styles.showWork}>
106+
All Work <IoArchiveOutline />
107+
</Button>
108+
</Content>
109+
</Section>
52110
</Layout>
53111
);
54112
}

‎src/styles/globals.scss

+5-1
Original file line numberDiff line numberDiff line change
@@ -70,10 +70,14 @@ h2 {
7070
font-size: $font-size-h2;
7171
font-weight: 700;
7272
}
73+
h3 {
74+
font-size: $font-size-h3;
75+
font-weight: 700;
76+
}
7377

7478
p {
7579
font-size: $font-size-p;
76-
line-height: clamp(0.5rem, calc(1.5rem + 1vw), 3rem);
80+
line-height: clamp(0.5rem, calc(1.2rem + 2vw + 1vh), 3rem);
7781
margin: 1.2em 0;
7882
}
7983

0 commit comments

Comments
 (0)