felschr/felschr.com
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: add icons to landing page cards

Browse source
This commit is contained in:
Felix Schröter 2022-11-15 20:42:38 +01:00
parent b60f9004a7
commit bd5ab17227
Signed by: felschr
GPG key ID: 671E39E6744C807D
1 changed files with 29 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

46
src/pages/index.tsx
View file

@ -1,5 +1,13 @@
import styled from "@emotion/styled"
import { Card as Card_, CardContent, Grid, Typography } from "@mui/material"
import { Box, Card as Card_, CardContent, Grid, Typography } from "@mui/material"
import {
AutoMode as AutoModeIcon,
BugReport as BugReportIcon,
Cloud as CloudIcon,
School as SchoolIcon,
SettingsSuggest as SettingsSuggestIcon,
SvgIconComponent
} from "@mui/icons-material"
import { Link } from "gatsby"
import Layout from "../components/organisms/Layout"
@ -7,6 +15,20 @@ const Card = styled(Card_)`
height: 100%;
`
type IconProps = {
Icon: SvgIconComponent
title: string
}
const Title = ({ Icon, title }: IconProps) => (
<Box display="flex" gap={1}>
<Typography variant="h5" gutterBottom>
{title}
</Typography>
<Icon fontSize="large" />
</Box>
)
const IndexPage = () => {
return (
<Layout pageTitle="Home">
@ -14,11 +36,9 @@ const IndexPage = () => {
<Grid item xs={4}>
<Card>
<CardContent>
<Typography variant="h5" gutterBottom>
Cloud
</Typography>
<Title Icon={CloudIcon} title="Cloud" />
I'm experienced in designing & implementing Cloud-native software on all major Cloud platforms that is tailored to the customer's needs. Containers, microservices, serverless setups — I'm familiar with all the important tools.
I'm experienced in designing & implementing Cloud-native solutions tailored to highly specialised needs. Containers, microservices, serverless setups — I'm familiar with all the important tools.
</CardContent>
</Card>
</Grid>
@ -26,9 +46,7 @@ const IndexPage = () => {
<Grid item xs={4}>
<Card>
<CardContent>
<Typography variant="h5" gutterBottom>
Type safety
</Typography>
<Title Icon={BugReportIcon} title="Type safety" />
I love strong type systems. They avoid runtime exceptions like{" "}
<Link to="https://en.wikipedia.org/wiki/Null_pointer#History">
@ -42,9 +60,7 @@ const IndexPage = () => {
<Grid item xs={4}>
<Card>
<CardContent>
<Typography variant="h5" gutterBottom>
Reproducibility
</Typography>
<Title Icon={SettingsSuggestIcon} title="Reproducibility" />
"But it works on my machine" — how many times did you hear this?
Running into issues building software can be frustrating & time consuming.
@ -57,9 +73,7 @@ const IndexPage = () => {
<Grid item xs={4}>
<Card>
<CardContent>
<Typography variant="h5" gutterBottom>
DevOps
</Typography>
<Title Icon={AutoModeIcon} title="DevOps" />
Plan, Develop, Deliver, Operate — Repeat
DevOps is about continually providing value to customers.
@ -72,9 +86,7 @@ const IndexPage = () => {
<Grid item xs={4}>
<Card>
<CardContent>
<Typography variant="h5" gutterBottom>
Learning
</Typography>
<Title Icon={SchoolIcon} title="Learning" />
Software development is such a vast field and I love learning about new technologies.
You can expect software built on modern state-of-the-art technologies & methodologies from me.