niklas/niklas_birk_math
1
0
Fork 0
Code Issues Pull Requests Activity

Add math-logo.svg, informatics-logo.svg, coding-logo.svg for landing page; Reformat code

Browse Source
This commit is contained in:
Niklas Birk
2022-08-03 15:20:04 +02:00
parent 8c2e8ba2c1
commit 5c439ea851
14 changed files with 323 additions and 281 deletions
Download Patch File Download Diff File Expand all files Collapse all files

118
src/components/HomepageFeatures/index.js
View File

@ -3,59 +3,79 @@ import clsx from 'clsx';
import styles from './styles.module.css';
const FeatureList = [
{
title: 'Mathematik',
Svg: require('@site/static/img/niklas-birk-logo.svg').default,
description: (
<>
Mathematik ist ...
</>
),
},
{
title: 'Informatik',
Svg: require('@site/static/img/niklas-birk-logo.svg').default,
description: (
<>
Informatik ist ...
</>
),
},
{
title: 'Programmierung',
Svg: require('@site/static/img/niklas-birk-logo.svg').default,
description: (
<>
Programmierung ist ...
</>
),
},
{
title: 'Mathematik',
Svg: require('@site/static/img/math-logo.svg').default,
description: (
<>
<p>Mathematik ist eine Wissenschaft, die selbstgeschaffene abstrakte Strukturen auf ihre Eigenschaften
und Muster untersucht.</p>
<p>Sie ist mehr als dir die Schule zeigt und wesentlich cooler als du glaubst!<br/>
Gib ihr eine Chance!</p>
</>
),
},
{
title: 'Informatik',
Svg: require('@site/static/img/informatics-logo.svg').default,
description: (
<>
<p>Informatik ist eine Strukturwissenschaft, die sich mit der Information und deren automatischer
Verarbeitung befasst.</p>
<p>
<q><cite>In der Informatik geht es genau so wenig um Computer, wie in der Astronomie um
Teleskope.</cite></q>
</p>
- Edsger Wybe Dijkstra
</>
),
},
{
title: 'Programmierung',
Svg: require('@site/static/img/coding-logo.svg').default,
description: (
<>
<p>Programmierung ist das Erstellen von Programmen mit einer Programmiersprache.</p>
<p>
<pre style={{textAlign: 'left'}}>
<code>
int main(void)<br/>
&#123;<br/>
&nbsp; printf("Programmierst du auch?");<br/>
&nbsp; return 0;<br/>
&#125;
</code>
</pre>
</p>
</>
),
},
];
function Feature({Svg, title, description}) {
return (
<div className={clsx('col col--4')}>
<div className="text--center">
<Svg className={styles.featureSvg} role="img" />
</div>
<div className="text--center padding-horiz--md">
<h3>{title}</h3>
<p>{description}</p>
</div>
</div>
);
return (
<div className={clsx('col col--4')}>
<div className="text--center">
<Svg className={styles.featureSvg} role="img"/>
</div>
<div className="text--center padding-horiz--md">
<h3>{title}</h3>
<p>{description}</p>
</div>
</div>
);
}
export default function HomepageFeatures() {
return (
<section className={styles.features}>
<div className="container">
<div className="row">
{FeatureList.map((props, idx) => (
<Feature key={idx} {...props} />
))}
</div>
</div>
</section>
);
return (
<section className={styles.features}>
<div className="container">
<div className="row">
{FeatureList.map((props, idx) => (
<Feature key={idx} {...props} />
))}
</div>
</div>
</section>
);
}

12
src/components/HomepageFeatures/styles.module.css
View File

@ -1,11 +1,11 @@
.features {
display: flex;
align-items: center;
padding: 2rem 0;
width: 100%;
display: flex;
align-items: center;
padding: 2rem 0;
width: 100%;
}
.featureSvg {
height: 200px;
width: 200px;
height: 30%;
width: 30%;
}