initial app

app/frontend/src/App.tsx

@@ -0,0 +1,65 @@
+import createCache from "@emotion/cache";
+import { CacheProvider, Global, ThemeProvider, css } from "@emotion/react";
+import styled from "@emotion/styled";
+import normalizeCss from "normalize.css/normalize.css?inline";
+import React from "react";
+import { IntlProvider } from "react-intl";
+
+import themeConfig from "./config/theme";
+import { quickTransition } from "./utils/transitions";
+import Router from "./views/Router";
+
+const themeCache = createCache({
+  key: "cv",
+});
+
+const i = themeCache.insert;
+themeCache.insert = (...args) => {
+  args[2].tags.forEach((t) => {
+    if (!t.getAttribute("media")) {
+      t.setAttribute("media", "all");
+    }
+  });
+  return i(...args);
+};
+
+const globalStyles = css`
+  body {
+    font-size: 16px;
+    line-height: 1.5;
+    font-family: "Noto Sans", sans-serif;
+  }
+`;
+
+const Styles = styled("div")(({ theme }) => ({
+  color: theme.palette.text.primary,
+
+  "*": {
+    boxSizing: "border-box",
+  },
+  a: {
+    color: theme.palette.link.main,
+    transition: `color 0.5s ${quickTransition}`,
+  },
+  "a:hover": {
+    color: theme.palette.link.hover,
+  },
+}));
+
+const App: React.FC = () => {
+  return (
+    <IntlProvider locale="en" defaultLocale="en">
+      <CacheProvider value={themeCache}>
+        <Global styles={normalizeCss} />
+        <Global styles={globalStyles} />
+        <ThemeProvider theme={themeConfig}>
+          <Styles>
+            <Router />
+          </Styles>
+        </ThemeProvider>
+      </CacheProvider>
+    </IntlProvider>
+  );
+};
+
+export default App;

app/frontend/src/components/CV/Experience.tsx

@@ -0,0 +1,120 @@
+import React from "react";
+import { defineMessages, useIntl } from "react-intl";
+
+import { Content } from "../common/Content";
+import { Headline, SubHeadline } from "../common/Headline";
+import { Spacer } from "../common/Spacer";
+import { Paragraph } from "../common/Text";
+
+const messages = defineMessages({
+  skills: {
+    defaultMessage: "Skills",
+    id: "Experience.skills",
+  },
+  yourpass: {
+    defaultMessage: "July 2021 - Present ({count} years)",
+    id: "Experience.yourpass",
+  },
+  yoursystem: {
+    defaultMessage: "February 2016 - December 2021 (5 years)",
+    id: "Experience.yoursystem",
+  },
+  past: {
+    defaultMessage: "Birth - February 2016",
+    id: "Experience.past",
+  },
+  pastDescription: {
+    defaultMessage:
+      "Working on smaller projects such as chats, forum based websites, web based presentations, most notably a system for handling the driver training center and driving school agenda... Tinkering...",
+    id: "Experience.pastDescription",
+  },
+});
+
+const approxCurrentYears = Math.round(
+  (Date.now() - new Date("2021-06-01").getTime()) / 1000 / 60 / 60 / 24 / 365
+);
+
+const yourpassSkills = [
+  "DevOps",
+  "Front-End Development",
+  "Back-end Operations",
+  "Software Development",
+  "Kubernetes",
+  "TypeScript",
+  "Go",
+  "Linux",
+  "Linux Server",
+  "Linux System Administration",
+  "Back-End Web Development",
+  "Git",
+  "PostgreSQL",
+  "Node.js",
+  "React.js",
+  "Amazon Web Services (AWS)",
+  "Amazon EKS",
+];
+
+const yoursystemSkills = [
+  "DevOps",
+  "Front-End Development",
+  "Back-end Operations",
+  "Software Development",
+  "Kubernetes",
+  "TypeScript",
+  "Linux",
+  "Linux Server",
+  "Linux System Administration",
+  "Back-End Web Development",
+  "Git",
+  "Node.js",
+  "Vue.js",
+  "PHP",
+  "Bash",
+  "Amazon Web Services (AWS)",
+  "Amazon EKS",
+];
+
+const Experience: React.FC = () => {
+  const intl = useIntl();
+
+  return (
+    <>
+      <Headline level={3}>YOUR PASS s.r.o.</Headline>
+      <SubHeadline level={4}>DevOps Engineer</SubHeadline>
+      <Content>
+        <Paragraph>
+          {intl.formatMessage(messages.yourpass, {
+            count: approxCurrentYears,
+          })}
+        </Paragraph>
+        <Paragraph>
+          <strong>{intl.formatMessage(messages.skills)}:</strong>{" "}
+          {yourpassSkills.join(" · ")}
+        </Paragraph>
+      </Content>
+
+      <Spacer />
+
+      <Headline level={3}>YOUR SYSTEM s.r.o.</Headline>
+      <SubHeadline level={4}>Lead Developer/Architect</SubHeadline>
+
+      <Content>
+        <Paragraph>{intl.formatMessage(messages.yoursystem)}</Paragraph>
+        <Paragraph>
+          <strong>{intl.formatMessage(messages.skills)}:</strong>{" "}
+          {yoursystemSkills.join(" · ")}
+        </Paragraph>
+      </Content>
+
+      <Headline level={3}>Past experience</Headline>
+      <SubHeadline level={4}>Developer</SubHeadline>
+
+      <Content>
+        <Paragraph>{intl.formatMessage(messages.past)}</Paragraph>
+        <Paragraph>{intl.formatMessage(messages.pastDescription)}</Paragraph>
+      </Content>
+    </>
+  );
+};
+
+export default Experience;

app/frontend/src/components/CV/Skill.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+
+import { Spacer } from "../common/Spacer";
+import { Paragraph } from "../common/Text";
+
+type SkillProps = {
+  title: string;
+};
+
+const Skill: React.FC<React.PropsWithChildren<SkillProps>> = (props) => {
+  const { children, title } = props;
+
+  return (
+    <div>
+      <strong>{title}</strong>
+      <Spacer />
+      {React.Children.map(children, (c) => (
+        <Paragraph>{c}</Paragraph>
+      ))}
+    </div>
+  );
+};
+
+export default Skill;

app/frontend/src/components/CV/Skills.tsx

@@ -0,0 +1,120 @@
+import React from "react";
+import { defineMessages, useIntl } from "react-intl";
+
+import { SubHeadline } from "../common/Headline";
+import { List, ListItem } from "../common/List";
+import { Spacer } from "../common/Spacer";
+import { Paragraph } from "../common/Text";
+import Skill from "./Skill";
+
+const messages = defineMessages({
+  backendDevelopment: {
+    defaultMessage:
+      "Deep knowledge of backend operations, mostly supporting web based applications using various technologies, programming languages and frameworks.",
+    id: "Skills.backendDevelopment",
+  },
+  backendDevelopmentAdditional: {
+    defaultMessage:
+      "In recent years, the main focus was on Go to write tooling and backend services.",
+    id: "Skills.backendDevelopment",
+  },
+  devops: {
+    defaultMessage:
+      "Several years of experience developing, maintaining and adhering to the DevOps practices to streamline organization's processes across both backend and frontend development.",
+    id: "Skills.devops",
+  },
+  frontendDevelopment: {
+    defaultMessage:
+      "Extensive experience in frontend development spanning back to the early 2000s.",
+    id: "Skills.frontendDevelopment",
+  },
+  infrastructureOperations: {
+    defaultMessage:
+      "Throughout my career, I have gained valuable experience in developing and maintaining high-load infrastructures over several years.",
+    id: "Skills.infrastructureOperations",
+  },
+  infrastructureOperationsAdditional: {
+    defaultMessage:
+      "Following the OCI (Open Container Initiative) and leveraging Docker and Kubernetes to create highly available deployments, primarily on the AWS platform, was a challenging and enjoyable experience, that has greatly enhanced my skills in this area.",
+    id: "Skills.infrastructureOperationsAdditional",
+  },
+  otherNotableSkills: {
+    defaultMessage: "Other notable skills",
+    id: "Skills.otherNotableSkills",
+  },
+});
+
+type OtherSkill = {
+  title: string;
+  description?: string;
+};
+
+const otherSkills: OtherSkill[] = [
+  {
+    title: "Primary languages",
+    description: "Go, Typescript (and Javascript)",
+  },
+  {
+    title: "Infrastructure based skills",
+    description:
+      "Kubernetes and AWS EKS, Containerized applications, Linux system administration, Amazon Web Services - good understanding of Networking, RDS, Queues",
+  },
+  {
+    title: "Databases",
+    description: "PostgreSQL, MySQL/MariaDB",
+  },
+  {
+    title: "Some of the relevant Frameworks/Tooling",
+    description:
+      "Terraform, Prometheus, Grafana, React, Webpack, Rollup, Esbuild, deep understanding of Git",
+  },
+  {
+    title: "Software Development",
+    description:
+      "Played with various programming and scripting languages such as Python, Lua, bash, C++, often for embedded devices",
+  },
+  {
+    title: "SmartHome installations",
+    description: "KNX, Control4 with custom driver development",
+  },
+  {
+    title: "Spoken languages",
+    description: "Czech native, English",
+  },
+];
+
+const Skills: React.FC = () => {
+  const intl = useIntl();
+
+  return (
+    <>
+      <Skill title="DevOps">{intl.formatMessage(messages.devops)}</Skill>
+      <Skill title="Front-End Development">
+        {intl.formatMessage(messages.frontendDevelopment)}
+      </Skill>
+      <Skill title="Back-End Development">
+        {intl.formatMessage(messages.backendDevelopment)}
+        {intl.formatMessage(messages.backendDevelopmentAdditional)}
+      </Skill>
+      <Skill title="Infrastructure operations">
+        {intl.formatMessage(messages.infrastructureOperations)}
+        {intl.formatMessage(messages.infrastructureOperationsAdditional)}
+      </Skill>
+      <Spacer withDivider />
+      <SubHeadline level={4}>
+        {intl.formatMessage(messages.otherNotableSkills)}
+      </SubHeadline>
+      <List>
+        {otherSkills.map((s) => (
+          <ListItem key={s.title}>
+            <strong>{s.title}</strong>
+            {s.description && `: ${s.description}`}
+          </ListItem>
+        ))}
+      </List>
+      <Paragraph></Paragraph>
+    </>
+  );
+};
+
+export default Skills;

app/frontend/src/components/CV/Summary.tsx

@@ -0,0 +1,48 @@
+import React from "react";
+
+import { Paragraph } from "../common/Text";
+import { Caption } from "../common/Text";
+
+const Summary: React.FC = () => {
+  return (
+    <>
+      <Paragraph>
+        With many years of experience and a strong skill set in TypeScript, Go
+        and Kubernetes, I specialize in overseeing infrastructure, back-end and
+        front-end development, bringing an understanding of Amazon Web Services
+        (AWS) and Linux system administration. With a focus on implementing
+        DevOps practices and streamlining workflows, I have a proven track
+        record of delivering efficient and scalable solutions.
+      </Paragraph>
+      <Paragraph>
+        In my current role I take charge of frontend-end development, leveraging
+        my expertise in Node.js and TypeScript and partly help out with back-end
+        development, to deliver robust and reliable systems. Additionally, I
+        manage infrastructure, ensuring smooth performance and optimal
+        functionality.
+      </Paragraph>
+      <Paragraph>
+        Fueled by a strong passion for cutting-edge advancements and staying at
+        the forefront of industry developments, I am dedicated to driving
+        continuous improvement and exploring new frontiers. My goal is to
+        collaborate with forward-thinking teams and contribute to the
+        development of cutting-edge solutions. I thrive in dynamic and
+        challenging environments, where I can apply my technical expertise and
+        problem-solving abilities to drive success.
+      </Paragraph>
+
+      <Paragraph>
+        In addition to my technical expertise, I hold certifications as a
+        Control4 Pro and KNX Partner. These certifications validate my
+        proficiency in Lua programming and Control4 integration, as well as my
+        knowledge of KNX systems.
+      </Paragraph>
+      <Caption>
+        -- This summary was graciously generated by an AI and then rewritten and
+        adjusted by a human
+      </Caption>
+    </>
+  );
+};
+
+export default Summary;

app/frontend/src/components/CV/index.ts

@@ -0,0 +1,3 @@
+export { default as Experience } from "./Experience";
+export { default as Summary } from "./Summary";
+export { default as Skills } from "./Skills";

app/frontend/src/components/ErrorBoundary/ErrorBoundary.tsx

@@ -0,0 +1,67 @@
+import React from "react";
+
+type ErrorHandler = (error: Error, info: React.ErrorInfo) => void;
+type ErrorHandlingComponent<Props> = (
+  props: Props,
+  error?: Error
+) => React.ReactNode;
+
+type ErrorState = { error?: Error };
+
+function Catch<Props extends object>(
+  component: ErrorHandlingComponent<Props>,
+  errorHandler?: ErrorHandler
+): React.ComponentType<Props> {
+  function Inner({ error, props }: { error?: Error; props: Props }) {
+    return <React.Fragment>{component(props, error)}</React.Fragment>;
+  }
+
+  return class CatchClass extends React.Component<Props, ErrorState> {
+    state: ErrorState = {
+      error: undefined,
+    };
+
+    static getDerivedStateFromError(error: Error) {
+      return { error };
+    }
+
+    componentDidCatch(error: Error, info: React.ErrorInfo) {
+      if (errorHandler) {
+        errorHandler(error, info);
+      }
+    }
+
+    render() {
+      return <Inner error={this.state.error} props={this.props} />;
+    }
+  };
+}
+
+const divStyles: React.CSSProperties = {
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  justifyContent: "center",
+};
+
+const ErrorBoundary = Catch(function (
+  props: React.PropsWithChildren,
+  error?: Error
+) {
+  if (error) {
+    return (
+      <div style={divStyles}>
+        <h2>
+          There was an error on the page. Please reload the application and try
+          again.
+        </h2>
+        <p />
+        <p>{error.message}</p>
+      </div>
+    );
+  }
+
+  return <>{props.children}</>;
+});
+
+export default ErrorBoundary;

app/frontend/src/components/ErrorBoundary/index.ts

@@ -0,0 +1 @@
+export { default as ErrorBoundary } from "./ErrorBoundary";

app/frontend/src/components/Layout/MainLayout.tsx

@@ -0,0 +1,63 @@
+import styled from "@emotion/styled";
+import React from "react";
+
+import MainNavigation from "../Navigation/MainNavigation";
+import { hideNavigationMQ } from "./navigationBreakpoint";
+
+const Root = styled("div")({
+  background: "rgb(215, 215, 215)",
+});
+
+const Container = styled("div")({
+  alignItems: "stretch",
+  display: "flex",
+  margin: "0 auto",
+  maxWidth: 1200,
+  minHeight: "100vh",
+  width: "100%",
+});
+
+const Nav = styled("nav")({
+  background: "rgb(41, 62, 73)",
+  color: "white",
+  flex: "0 0 280px",
+  width: 280,
+  minHeight: "100%",
+  padding: "3rem 2rem 2rem",
+
+  [hideNavigationMQ]: {
+    display: "none",
+  },
+
+  "& a": {
+    color: "rgb(218, 218, 236)",
+  },
+  "& a:hover": {
+    color: "white",
+  },
+});
+
+const Main = styled("main")(({ theme }) => ({
+  background: "rgb(245, 245, 245)",
+  color: theme.palette.text.primary,
+  flex: "1 1 100%",
+  minHeight: 1,
+  padding: "3rem 2rem 2rem",
+}));
+
+const MainLayout: React.FC<React.PropsWithChildren> = (props) => {
+  const { children } = props;
+
+  return (
+    <Root>
+      <Container>
+        <Nav>
+          <MainNavigation />
+        </Nav>
+        <Main>{children}</Main>
+      </Container>
+    </Root>
+  );
+};
+
+export default MainLayout;

app/frontend/src/components/Layout/navigationBreakpoint.ts

@@ -0,0 +1,5 @@
+const navigationBreakpoint = 600;
+
+export const hideNavigationMQ = `@media (max-width: ${navigationBreakpoint}px)`;
+
+export default navigationBreakpoint;

app/frontend/src/components/Navigation/MainNavigation.tsx

@@ -0,0 +1,86 @@
+import React from "react";
+import { defineMessages, useIntl } from "react-intl";
+
+import { CONTACT_EMAIL, CONTACT_PHONE } from "../../config/environment";
+import { Contact } from "../common/Contact";
+import { List, ListItem } from "../common/List";
+import { Spacer } from "../common/Spacer";
+import NavigationHeadline from "./NavigationHeadline";
+
+const messages = defineMessages({
+  certifications: {
+    defaultMessage: "Certifications",
+    id: "Navigation.certifications",
+  },
+  contact: {
+    defaultMessage: "Contact",
+    id: "Navigation.contact",
+  },
+  experience: {
+    defaultMessage: "Experience",
+    id: "Navigation.experience",
+  },
+  objective: {
+    defaultMessage: "Objective",
+    id: "Navigation.objective",
+  },
+  topSkills: {
+    defaultMessage: "Top Skills",
+    id: "Navigation.topSkills",
+  },
+});
+
+const MainNavigation: React.FC = () => {
+  const intl = useIntl();
+  return (
+    <>
+      <NavigationHeadline>
+        {intl.formatMessage(messages.contact)}
+      </NavigationHeadline>
+
+      <Spacer />
+
+      <Contact email={CONTACT_EMAIL} phoneNumber={CONTACT_PHONE} />
+
+      <NavigationHeadline to="#objective">
+        {intl.formatMessage(messages.objective)}
+      </NavigationHeadline>
+
+      <NavigationHeadline to="#skills">
+        {intl.formatMessage(messages.topSkills)}
+      </NavigationHeadline>
+
+      <Spacer />
+
+      <List>
+        <ListItem>DevOps</ListItem>
+        <ListItem>Front-End Development</ListItem>
+        <ListItem>Back-End Development</ListItem>
+        <ListItem>Kubernetes</ListItem>
+        <ListItem>Typescript</ListItem>
+        <ListItem>Go</ListItem>
+      </List>
+
+      <Spacer spacing={0} withDivider />
+
+      <NavigationHeadline to="#certifications">
+        {intl.formatMessage(messages.certifications)}
+      </NavigationHeadline>
+
+      <Spacer />
+
+      <List>
+        <ListItem>Control4 Pro</ListItem>
+        <ListItem>KNX Partner</ListItem>
+      </List>
+
+      <Spacer spacing={0} withDivider />
+
+      <NavigationHeadline to="#experience">
+        {intl.formatMessage(messages.experience)}
+      </NavigationHeadline>
+    </>
+  );
+};
+
+export default MainNavigation;

app/frontend/src/components/Navigation/NavigationHeadline.tsx

@@ -0,0 +1,33 @@
+import styled from "@emotion/styled";
+import React from "react";
+import {
+  Link as RouterLink,
+  LinkProps as RouterLinkProps,
+} from "react-router-dom";
+
+const Headline = styled("h3")({
+  fontSize: "1.5rem",
+  lineHeight: 1,
+  marginBottom: "0.2rem",
+});
+
+const Link = styled(RouterLink)({
+  textDecoration: "none",
+});
+
+type NavigationHeadlineProps = Partial<Pick<RouterLinkProps, "to">>;
+
+const NavigationHeadline: React.FC<
+  React.PropsWithChildren<NavigationHeadlineProps>
+> = (props) => {
+  const { children, to } = props;
+
+  return (
+    <Headline>
+      {to && <Link to={to}>{children}</Link>}
+      {!to && children}
+    </Headline>
+  );
+};
+
+export default NavigationHeadline;

app/frontend/src/components/common/Contact/Contact.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+
+import { Paragraph } from "../Text";
+
+type ContactProps = {
+  phoneNumber: string;
+  email: string;
+};
+
+const Contact: React.FC<ContactProps> = (props) => {
+  const { email, phoneNumber } = props;
+
+  return (
+    <>
+      <Paragraph>
+        <a href={`mailto:${email}`}>{email}</a>
+      </Paragraph>
+      <Paragraph>
+        <a href={`tel:${phoneNumber}`}>{phoneNumber}</a>
+      </Paragraph>
+    </>
+  );
+};
+
+export default Contact;

app/frontend/src/components/common/Contact/index.ts

@@ -0,0 +1 @@
+export { default as Contact } from "./Contact";

app/frontend/src/components/common/Content/Content.tsx

@@ -0,0 +1,12 @@
+import styled from "@emotion/styled";
+
+const Content = styled("div")(({ theme }) => ({
+  padding: theme.spacing(0.5),
+  paddingLeft: theme.spacing(1),
+  "@media (min-width: 800px)": {
+    padding: theme.spacing(1),
+    paddingLeft: theme.spacing(2),
+  },
+}));
+
+export default Content;

app/frontend/src/components/common/Content/index.ts

@@ -0,0 +1 @@
+export { default as Content } from "./Content";

app/frontend/src/components/common/Headline/Headline.tsx

@@ -0,0 +1,52 @@
+import styled from "@emotion/styled";
+import React from "react";
+
+const StyledH1 = styled("h1")({
+  fontSize: "2rem",
+  lineHeight: 1.5,
+  margin: 0,
+  marginBottom: "0.2rem",
+});
+
+const StyledH2 = styled("h2")({
+  fontSize: "1.5rem",
+  lineHeight: 1.5,
+  margin: 0,
+  marginBottom: "0.2rem",
+});
+
+const StyledH3 = styled("h3")({
+  fontSize: "1.35rem",
+  lineHeight: 1.5,
+  margin: 0,
+  marginBottom: "0.2rem",
+});
+
+const StyledH4 = styled("h4")({
+  fontSize: "1.2rem",
+  lineHeight: 1.5,
+  margin: 0,
+  marginBottom: "0.2rem",
+});
+
+const ComponentMap = {
+  1: StyledH1,
+  2: StyledH2,
+  3: StyledH3,
+  4: StyledH4,
+};
+
+export type HeadlineProps = {
+  level: 1 | 2 | 3 | 4;
+  className?: string;
+};
+
+const Headline: React.FC<React.PropsWithChildren<HeadlineProps>> = (props) => {
+  const { level, ...rest } = props;
+
+  const Component = ComponentMap[level];
+
+  return <Component {...rest} />;
+};
+
+export default Headline;

app/frontend/src/components/common/Headline/SubHeadline.tsx

@@ -0,0 +1,15 @@
+import styled from "@emotion/styled";
+
+import { Headline } from ".";
+import { HeadlineProps } from "./Headline";
+
+type SubHeadlineProps = {
+  level: Exclude<HeadlineProps["level"], 1>;
+  className?: string;
+};
+
+const SubHeadline = styled(Headline)<SubHeadlineProps>(({ theme }) => ({
+  color: theme.palette.text.secondary,
+}));
+
+export default SubHeadline;

app/frontend/src/components/common/Headline/index.ts

@@ -0,0 +1,2 @@
+export { default as Headline } from "./Headline";
+export { default as SubHeadline } from "./SubHeadline";

app/frontend/src/components/common/Link/Link.tsx

@@ -0,0 +1,13 @@
+import styled from "@emotion/styled";
+import { Link as RouterLink } from "react-router-dom";
+
+const Link = styled(RouterLink)(({ theme }) => {
+  return {
+    color: theme.palette.link.main,
+    "&:hover": {
+      color: theme.palette.link.hover,
+    },
+  };
+});
+
+export default Link;

app/frontend/src/components/common/Link/index.ts

@@ -0,0 +1 @@
+export { default as Link } from "./Link";

app/frontend/src/components/common/List/List.tsx

@@ -0,0 +1,17 @@
+import styled from "@emotion/styled";
+import React from "react";
+
+const Ul = styled("ul")({
+  listStyle: "none",
+  margin: 0,
+  padding: 0,
+  paddingLeft: "0.5rem",
+});
+
+const List: React.FC<React.PropsWithChildren> = (props) => {
+  const { children } = props;
+
+  return <Ul>{children}</Ul>;
+};
+
+export default List;

app/frontend/src/components/common/List/ListItem.tsx

@@ -0,0 +1,20 @@
+import styled from "@emotion/styled";
+import React from "react";
+
+const Li = styled("li")(({ theme }) => ({
+  listStyle: "none",
+  margin: 0,
+  padding: 0,
+  marginBottom: theme.spacing(1),
+  "&:last-child": {
+    marginBottom: 0,
+  },
+}));
+
+const ListItem: React.FC<React.PropsWithChildren> = (props) => {
+  const { children } = props;
+
+  return <Li>{children}</Li>;
+};
+
+export default ListItem;

app/frontend/src/components/common/List/index.ts

@@ -0,0 +1,2 @@
+export { default as List } from "./List";
+export { default as ListItem } from "./ListItem";

app/frontend/src/components/common/Spacer/Divider.tsx

@@ -0,0 +1,12 @@
+import styled from "@emotion/styled";
+
+const Divider = styled("hr")({
+  background:
+    "linear-gradient(90deg, transparent, rgba(200, 200, 200, 0.5) 1.5rem calc(100% - 1.5rem), transparent 100%);",
+  border: "0 none",
+  height: 1,
+  position: "relative",
+  width: "100%",
+});
+
+export default Divider;

app/frontend/src/components/common/Spacer/Spacer.tsx

@@ -0,0 +1,50 @@
+import styled from "@emotion/styled";
+import React from "react";
+
+import Divider from "./Divider";
+
+type SpaceProps = {
+  spacing?: number;
+};
+
+const shouldForwardProp = (prop: string) =>
+  prop !== "spacing" && prop !== "inline";
+
+const Root = styled("div")({
+  width: "100%",
+});
+
+type SpacerProps = SpaceProps & {
+  /**
+   * Displays the dividing line
+   */
+  withDivider?: boolean;
+};
+
+const Space = styled("div", { shouldForwardProp })<SpaceProps>(
+  ({ spacing, theme }) => ({
+    width: "100%",
+    height: theme.spacing(spacing === undefined ? 1 : spacing),
+  })
+);
+
+const Spacer: React.FC<SpacerProps> = (props) => {
+  const { spacing, withDivider } = props;
+
+  if (!withDivider) {
+    const spaceSize = typeof spacing === undefined ? 2 : spacing;
+    return <Space spacing={spaceSize} />;
+  }
+
+  const spaceSize = typeof spacing === undefined ? 1 : spacing;
+
+  return (
+    <Root>
+      <Space spacing={spaceSize} />
+      {withDivider && <Divider />}
+      <Space spacing={spaceSize} />
+    </Root>
+  );
+};
+
+export default Spacer;

app/frontend/src/components/common/Spacer/index.ts

@@ -0,0 +1 @@
+export { default as Spacer } from "./Spacer";

app/frontend/src/components/common/Text/Caption.tsx

@@ -0,0 +1,14 @@
+import styled from "@emotion/styled";
+
+const Caption = styled("caption")(({ theme }) => ({
+  color: theme.palette.text.secondary,
+  fontSize: "0.75rem",
+  lineHeight: 1.5,
+  margin: 0,
+  marginBottom: "0.5rem",
+  display: "block",
+  textAlign: "unset",
+  textTransform: "uppercase",
+}));
+
+export default Caption;

app/frontend/src/components/common/Text/Paragraph.tsx

@@ -0,0 +1,10 @@
+import styled from "@emotion/styled";
+
+const Paragraph = styled("p")({
+  fontSize: "0.875rem",
+  lineHeight: 1.5,
+  margin: 0,
+  marginBottom: "0.5rem",
+});
+
+export default Paragraph;

app/frontend/src/components/common/Text/index.ts

@@ -0,0 +1,2 @@
+export { default as Caption } from "./Caption";
+export { default as Paragraph } from "./Paragraph";

app/frontend/src/config/environment.ts

@@ -0,0 +1,42 @@
+interface ConfigFromBackend {
+  commitTime: string;
+  contactEmail: string;
+  contactPhone: string;
+  position: string;
+}
+
+interface MyWindow extends Window {
+  APP_CONFIG?: ConfigFromBackend;
+}
+
+declare const window: MyWindow;
+
+const confString = (input: string | undefined, def: string): string => {
+  if (
+    input === undefined ||
+    (typeof input === "string" && input.trim() === "")
+  ) {
+    return def;
+  }
+
+  return input;
+};
+
+export const BUILD_TIMESTAMP: Date = window.APP_CONFIG?.commitTime
+  ? new Date(window.APP_CONFIG.commitTime)
+  : new Date();
+
+export const CONTACT_EMAIL = confString(
+  window.APP_CONFIG?.contactEmail,
+  import.meta.env.VITE_CONTACT_EMAIL || ""
+);
+
+export const CONTACT_PHONE = confString(
+  window.APP_CONFIG?.contactPhone,
+  import.meta.env.VITE_CONTACT_PHONE || ""
+);
+
+export const POSITION = confString(
+  window.APP_CONFIG?.position,
+  import.meta.env.VITE_POSITION || ""
+);

app/frontend/src/config/theme.ts

@@ -0,0 +1,33 @@
+import { Theme } from "@emotion/react";
+
+declare module "@emotion/react" {
+  export interface Theme {
+    palette: {
+      link: {
+        main: string;
+        hover: string;
+      };
+      text: {
+        primary: string;
+        secondary: string;
+      };
+    };
+    spacing: (multiplication: number) => string;
+  }
+}
+
+const theme: Theme = {
+  palette: {
+    link: {
+      main: "rgb(42, 106, 190)",
+      hover: "rgb(69, 135, 221)",
+    },
+    text: {
+      primary: "rgb(25, 25, 25)",
+      secondary: "rgb(110, 110, 110)",
+    },
+  },
+  spacing: (multiplication: number) => `${multiplication * 0.5}rem`,
+};
+
+export default theme;

app/frontend/src/main.tsx

@@ -0,0 +1,10 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+
+import App from "./App";
+
+ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);

app/frontend/src/utils/transitions/index.ts

@@ -0,0 +1 @@
+export { default as quickTransition } from "./quickTransition";

app/frontend/src/utils/transitions/quickTransition.ts

@@ -0,0 +1,3 @@
+const quickTransition = "cubic-bezier(.5,1,.23,.94)";
+
+export default quickTransition;

app/frontend/src/views/Dashboard.tsx

@@ -0,0 +1,81 @@
+import styled from "@emotion/styled";
+import React from "react";
+import { defineMessages, useIntl } from "react-intl";
+
+import { Experience, Skills, Summary } from "../components/CV";
+import MainLayout from "../components/Layout/MainLayout";
+import { hideNavigationMQ } from "../components/Layout/navigationBreakpoint";
+import { Contact } from "../components/common/Contact";
+import { Content } from "../components/common/Content";
+import { Headline, SubHeadline } from "../components/common/Headline";
+import { Spacer } from "../components/common/Spacer";
+import { CONTACT_EMAIL, CONTACT_PHONE, POSITION } from "../config/environment";
+
+const messages = defineMessages({
+  experienceTitle: {
+    defaultMessage: "Experience",
+    id: "Dashboard.experienceTitle",
+  },
+  location: {
+    defaultMessage: "Central Bohemia, Czechia",
+    id: "Dashboard.location",
+  },
+  skillsTitle: {
+    defaultMessage: "Skills",
+    id: "Dashboard.skillsTitle",
+  },
+});
+
+const HiddenWithNav = styled("div")({
+  display: "none",
+  [hideNavigationMQ]: {
+    display: "block",
+  },
+});
+
+const Dashboard: React.FC = () => {
+  const intl = useIntl();
+
+  return (
+    <MainLayout>
+      <Headline level={1}>Lukáš Čech</Headline>
+      <SubHeadline level={2}>{POSITION}</SubHeadline>
+      <SubHeadline level={4}>
+        {intl.formatMessage(messages.location)}
+      </SubHeadline>
+
+      <HiddenWithNav>
+        <Contact email={CONTACT_EMAIL} phoneNumber={CONTACT_PHONE} />
+      </HiddenWithNav>
+
+      <div id="objective" />
+      <Spacer withDivider />
+
+      <Content>
+        <Summary />
+      </Content>
+
+      <div id="experience" />
+      <Spacer withDivider />
+
+      <Headline level={2}>{intl.formatMessage(messages.skillsTitle)}</Headline>
+      <Spacer />
+      <Content>
+        <Skills />
+      </Content>
+
+      <div id="experience" />
+      <Spacer withDivider />
+
+      <Headline level={2}>
+        {intl.formatMessage(messages.experienceTitle)}
+      </Headline>
+      <Spacer />
+      <Content>
+        <Experience />
+      </Content>
+    </MainLayout>
+  );
+};
+
+export default Dashboard;

app/frontend/src/views/NotFound.tsx

@@ -0,0 +1,34 @@
+import styled from "@emotion/styled";
+import React from "react";
+import { defineMessages, useIntl } from "react-intl";
+
+import { Link } from "../components/common/Link";
+
+const messages = defineMessages({
+  notFound: {
+    defaultMessage: "Nothing to see here",
+    id: "Router.NotFound",
+  },
+});
+
+const Root = styled("div")({
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  justifyContent: "center",
+  height: "100vh",
+  width: "100vw",
+});
+
+const NotFound = () => {
+  const intl = useIntl();
+
+  return (
+    <Root>
+      <p>{intl.formatMessage(messages.notFound)}</p>
+      <Link to="/">Go home</Link>
+    </Root>
+  );
+};
+
+export default NotFound;

app/frontend/src/views/Router.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+import { Outlet, RouterProvider } from "react-router-dom";
+import { createBrowserRouter } from "react-router-dom";
+
+import { ErrorBoundary } from "../components/ErrorBoundary";
+import Dashboard from "./Dashboard";
+
+const Layout: React.FC = () => {
+  return (
+    <ErrorBoundary>
+      <Outlet />
+    </ErrorBoundary>
+  );
+};
+
+const NotFound = React.lazy(() => import("./NotFound"));
+
+const router = createBrowserRouter([
+  {
+    path: "/",
+    element: <Layout />,
+    children: [
+      {
+        index: true,
+        element: <Dashboard />,
+      },
+      {
+        path: "*",
+        element: <NotFound />,
+      },
+    ],
+  },
+]);
+
+const Router = (): JSX.Element => {
+  return <RouterProvider router={router} />;
+};
+
+export default Router;

app/frontend/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />