102 lines
3 KiB
TypeScript
102 lines
3 KiB
TypeScript
import * as React from "react"
|
|
import styled from "@emotion/styled"
|
|
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"
|
|
|
|
const Card = styled(Card_)`
|
|
height: 100%;
|
|
`
|
|
|
|
type IconProps = {
|
|
Icon: SvgIconComponent
|
|
title: string
|
|
}
|
|
|
|
const content = [
|
|
{
|
|
title: "Cloud",
|
|
icon: CloudIcon,
|
|
description: "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.",
|
|
},
|
|
{
|
|
title: "Type safety",
|
|
icon: BugReportIcon,
|
|
description: (
|
|
<>
|
|
I love strong type systems. They avoid runtime exceptions like{" "}
|
|
<Link to="https://en.wikipedia.org/wiki/Null_pointer#History">
|
|
the billion-dollar mistake
|
|
</Link>{" "}
|
|
by checking for errors at compile time. A good type system enforces error handling & allows developers to focus more on actual application logic.
|
|
</>
|
|
),
|
|
},
|
|
{
|
|
title: "Reproducibility",
|
|
icon: SettingsSuggestIcon,
|
|
description: `
|
|
"But it works on my machine" — how many times did you hear this?
|
|
Running into issues building software can be frustrating & time consuming.
|
|
That's where reproducible builds with declarative environments come to the rescue!
|
|
Nix is one such system that allows you to use the same dependencies on all developers' machines & in CI/CD pipelines.
|
|
`,
|
|
},
|
|
{
|
|
title: "DevOps",
|
|
icon: AutoModeIcon,
|
|
description: `
|
|
Plan, Develop, Deliver, Operate — Repeat
|
|
DevOps is about continually providing value to customers.
|
|
|
|
Teams who adopt DevOps streamline their processes & automate their systems. This allows rapidly delivering features & maintaining a reliable system.
|
|
`,
|
|
},
|
|
{
|
|
title: "Learning",
|
|
icon: SchoolIcon,
|
|
description: `
|
|
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.
|
|
`,
|
|
},
|
|
]
|
|
|
|
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">
|
|
<Grid container spacing={2} alignItems="stretch">
|
|
{content.map(({ title, icon, description }) =>
|
|
<Grid item xs={4}>
|
|
<Card>
|
|
<CardContent>
|
|
<Title Icon={icon} title={title} />
|
|
|
|
{description}
|
|
</CardContent>
|
|
</Card>
|
|
</Grid>
|
|
)}
|
|
</Grid>
|
|
</Layout>
|
|
)
|
|
}
|
|
|
|
export default IndexPage
|