initial app

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;