initial app
This commit is contained in:
Arnie
@@ -0,0 +1,46 @@
|
||||
module.exports = {
|
||||
env: { browser: true, es2020: true },
|
||||
extends: [
|
||||
"eslint:recommended",
|
||||
"react-app",
|
||||
"airbnb-typescript",
|
||||
"airbnb/hooks",
|
||||
"plugin:@typescript-eslint/recommended",
|
||||
"plugin:react/recommended",
|
||||
"plugin:react-hooks/recommended",
|
||||
"prettier", // Help to cooperate ESLint and Prettier
|
||||
"plugin:prettier/recommended",
|
||||
],
|
||||
ignorePatterns: [
|
||||
"/build",
|
||||
"/dist",
|
||||
"/node_modules",
|
||||
"/.eslintrc.cjs",
|
||||
"/vite.config.ts",
|
||||
],
|
||||
parser: "@typescript-eslint/parser",
|
||||
parserOptions: {
|
||||
ecmaVersion: "latest",
|
||||
project: "./tsconfig.json",
|
||||
sourceType: "module",
|
||||
tsconfigRootDir: __dirname,
|
||||
},
|
||||
plugins: ["react-refresh"],
|
||||
rules: {
|
||||
// Run prettier separately but use its configuration
|
||||
// This speeds up on-the-fly linting during development
|
||||
"prettier/prettier": "off",
|
||||
"react-refresh/only-export-components": "warn",
|
||||
"import/no-extraneous-dependencies": [
|
||||
"error",
|
||||
{
|
||||
devDependencies: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
settings: {
|
||||
react: {
|
||||
version: "detect",
|
||||
},
|
||||
},
|
||||
};
|
||||
@@ -0,0 +1,24 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
.DS_Store
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
@@ -0,0 +1,9 @@
|
||||
/node_modules
|
||||
# Ignore artifacts:
|
||||
/build
|
||||
/dist
|
||||
/coverage
|
||||
|
||||
# generated code
|
||||
/src/api/naming
|
||||
/src/preview
|
||||
@@ -0,0 +1,4 @@
|
||||
{
|
||||
"importOrder": ["^[./]"],
|
||||
"importOrderSeparation": true
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;600&display=swap" rel="stylesheet">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Lukáš Čech</title>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
window.global = window;
|
||||
try {
|
||||
window.APP_CONFIG = JSON.parse('{{ .Config }}');
|
||||
} catch (e) {
|
||||
console.debug('App uses development configuration');
|
||||
}
|
||||
</script>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
Generated
+7308
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,51 @@
|
||||
{
|
||||
"name": "cv",
|
||||
"private": true,
|
||||
"version": "0.0.1",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"build": "npm run check && tsc && vite build",
|
||||
"check": "npm run typecheck && echo \"Checking files with prettier\" && npm run prettier > /dev/null && npm run lint",
|
||||
"dev": "vite",
|
||||
"fix": "npm run prettier:format && npm run lint:fix",
|
||||
"lint": "eslint src --ext ts,tsx",
|
||||
"lint:fix": "eslint --fix src --ext ts,tsx",
|
||||
"lint:fix:changed": "eslint --fix $(npm run --silent list:changed)",
|
||||
"list:changed": "git diff HEAD --name-only --diff-filter=ACM --relative=app/console/src \"*.tsx\" \"*.ts\" \"*.js\" | sed 's#^#./src/#' ; git ls-files \"./src/*.tsx\" \"./src/*.ts\" -o --exclude-standard",
|
||||
"prettier": "prettier --config ./.prettierrc --check 'src/**/*.{js,ts,tsx}'",
|
||||
"prettier:format": "prettier --config ./.prettierrc --write 'src/**/*.{js,ts,tsx}'",
|
||||
"prettier:format:changed": "prettier --config ./.prettierrc --write $(npm run --silent list:changed)",
|
||||
"typecheck": "tsc --noEmit"
|
||||
},
|
||||
"dependencies": {
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@emotion/cache": "^11.11.0",
|
||||
"@emotion/react": "^11.11.0",
|
||||
"@emotion/styled": "^11.11.0",
|
||||
"@trivago/prettier-plugin-sort-imports": "^4.1.1",
|
||||
"@types/react": "^18.0.37",
|
||||
"@types/react-dom": "^18.0.11",
|
||||
"@types/stylis": "^4.2.0",
|
||||
"@typescript-eslint/eslint-plugin": "^5.59.0",
|
||||
"@typescript-eslint/parser": "^5.59.0",
|
||||
"@vitejs/plugin-react-swc": "^3.0.0",
|
||||
"eslint": "^8.38.0",
|
||||
"eslint-config-airbnb": "^19.0.4",
|
||||
"eslint-config-airbnb-typescript": "^17.0.0",
|
||||
"eslint-config-prettier": "^8.8.0",
|
||||
"eslint-config-react-app": "^7.0.1",
|
||||
"eslint-plugin-import": "^2.27.5",
|
||||
"eslint-plugin-prettier": "^4.2.1",
|
||||
"eslint-plugin-react-hooks": "^4.6.0",
|
||||
"eslint-plugin-react-refresh": "^0.3.4",
|
||||
"normalize.css": "^8.0.1",
|
||||
"react-intl": "^6.4.2",
|
||||
"react-router-dom": "^6.11.2",
|
||||
"stylis": "^4.2.0",
|
||||
"typescript": "^5.0.2",
|
||||
"vite": "^4.3.9"
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
@@ -0,0 +1,5 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-terminal" width="250px" height="250px" viewBox="0 0 24 24" stroke-width="1.00" stroke="rgba(1, 1, 1, 1)" fill="none" stroke-linecap="round" stroke-linejoin="round"><circle cx="50%" cy="50%" r="50%" stroke="none" stroke-width="0" fill="rgba(255, 255, 255, 1)"/><g transform="translate(2.40, 2.40) scale(0.8)"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 7l5 5l-5 5"/><line x1="12" y1="19" x2="19" y2="19"/></g>
|
||||
|
||||
|
||||
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 519 B |
@@ -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;
|
||||
@@ -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;
|
||||
@@ -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;
|
||||
@@ -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;
|
||||
@@ -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;
|
||||
@@ -0,0 +1,3 @@
|
||||
export { default as Experience } from "./Experience";
|
||||
export { default as Summary } from "./Summary";
|
||||
export { default as Skills } from "./Skills";
|
||||
@@ -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;
|
||||
@@ -0,0 +1 @@
|
||||
export { default as ErrorBoundary } from "./ErrorBoundary";
|
||||
@@ -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;
|
||||
@@ -0,0 +1,5 @@
|
||||
const navigationBreakpoint = 600;
|
||||
|
||||
export const hideNavigationMQ = `@media (max-width: ${navigationBreakpoint}px)`;
|
||||
|
||||
export default navigationBreakpoint;
|
||||
@@ -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;
|
||||
@@ -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;
|
||||
@@ -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;
|
||||
@@ -0,0 +1 @@
|
||||
export { default as Contact } from "./Contact";
|
||||
@@ -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;
|
||||
@@ -0,0 +1 @@
|
||||
export { default as Content } from "./Content";
|
||||
@@ -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;
|
||||
@@ -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;
|
||||
@@ -0,0 +1,2 @@
|
||||
export { default as Headline } from "./Headline";
|
||||
export { default as SubHeadline } from "./SubHeadline";
|
||||
@@ -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;
|
||||
@@ -0,0 +1 @@
|
||||
export { default as Link } from "./Link";
|
||||
@@ -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;
|
||||
@@ -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;
|
||||
@@ -0,0 +1,2 @@
|
||||
export { default as List } from "./List";
|
||||
export { default as ListItem } from "./ListItem";
|
||||
@@ -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;
|
||||
@@ -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;
|
||||
@@ -0,0 +1 @@
|
||||
export { default as Spacer } from "./Spacer";
|
||||
@@ -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;
|
||||
@@ -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;
|
||||
@@ -0,0 +1,2 @@
|
||||
export { default as Caption } from "./Caption";
|
||||
export { default as Paragraph } from "./Paragraph";
|
||||
@@ -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 || ""
|
||||
);
|
||||
@@ -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;
|
||||
@@ -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>
|
||||
);
|
||||
@@ -0,0 +1 @@
|
||||
export { default as quickTransition } from "./quickTransition";
|
||||
@@ -0,0 +1,3 @@
|
||||
const quickTransition = "cubic-bezier(.5,1,.23,.94)";
|
||||
|
||||
export default quickTransition;
|
||||
@@ -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;
|
||||
@@ -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;
|
||||
@@ -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;
|
||||
Vendored
+1
@@ -0,0 +1 @@
|
||||
/// <reference types="vite/client" />
|
||||
@@ -0,0 +1,23 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2020",
|
||||
"useDefineForClassFields": true,
|
||||
"lib": ["ES2020", "DOM", "DOM.Iterable"],
|
||||
"module": "ESNext",
|
||||
"skipLibCheck": true,
|
||||
/* Bundler mode */
|
||||
"moduleResolution": "bundler",
|
||||
"allowImportingTsExtensions": true,
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"noEmit": true,
|
||||
"jsx": "react",
|
||||
|
||||
/* Linting */
|
||||
"strict": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"noFallthroughCasesInSwitch": true
|
||||
},
|
||||
"include": ["src"]
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
import { defineConfig } from 'vite'
|
||||
import react from '@vitejs/plugin-react-swc'
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
clearScreen: false,
|
||||
plugins: [react()],
|
||||
})
|
||||
@@ -0,0 +1,113 @@
|
||||
package config
|
||||
|
||||
import (
|
||||
"encoding/json"
|
||||
"fmt"
|
||||
"log"
|
||||
"os"
|
||||
"time"
|
||||
|
||||
"go.uber.org/zap"
|
||||
"go.uber.org/zap/zapcore"
|
||||
|
||||
"go.c3c.cz/cv/app/server/internal/version"
|
||||
)
|
||||
|
||||
type FrontendConfigDef struct {
|
||||
CommitTime string `json:"commitTime"`
|
||||
ContactEmail string `json:"contactEmail"`
|
||||
ContactPhone string `json:"contactPhone"`
|
||||
Position string `json:"position"`
|
||||
}
|
||||
|
||||
var (
|
||||
BindAddrPprof = confString("BIND_ADDR_PPROF", "localhost:6060", false)
|
||||
BindAddrHttp = confString("BIND_ADDR_HTTP", ":8080", false)
|
||||
|
||||
GraceTerminationDelay = confDuration("GRACE_TERMINATION_DELAY", 0)
|
||||
GraceTerminationLimit = confDuration("GRACE_TERMINATION_LIMIT", 10*time.Second)
|
||||
|
||||
LoggerConfig *zap.Config
|
||||
loggingLevel = confString("LOGGING_LEVEL", "info", false)
|
||||
|
||||
Frontend string
|
||||
)
|
||||
|
||||
func init() {
|
||||
b, err := json.Marshal(FrontendConfigDef{
|
||||
CommitTime: version.CommitTime.Format(time.RFC3339),
|
||||
ContactEmail: confString("CONTACT_EMAIL", "", true),
|
||||
ContactPhone: confString("CONTACT_PHONE", "", true),
|
||||
Position: confString("POSITION", "", true),
|
||||
})
|
||||
if err != nil {
|
||||
log.Fatal(err)
|
||||
}
|
||||
Frontend = string(b)
|
||||
|
||||
zapConfig := confString("LOGGER_CONFIG", "", false)
|
||||
|
||||
var l zapcore.Level
|
||||
if err := l.UnmarshalText([]byte(loggingLevel)); err != nil {
|
||||
log.Fatal(fmt.Errorf("could not create debug level from env: %w", err))
|
||||
}
|
||||
|
||||
if zapConfig != "" {
|
||||
if err := json.Unmarshal([]byte(zapConfig), &LoggerConfig); err != nil {
|
||||
log.Fatal(fmt.Errorf("could not create logging configuration from env: %w", err))
|
||||
}
|
||||
|
||||
// Warn if both logger config and logging level are specified
|
||||
_, loggingLevelPresent := os.LookupEnv("LOGGING_LEVEL")
|
||||
if loggingLevelPresent {
|
||||
log.Println("cannot have both LOGGING_CONFIG and LOGGING_LEVEL environment configuration values")
|
||||
LoggerConfig.Level = zap.NewAtomicLevelAt(l)
|
||||
}
|
||||
} else {
|
||||
loggerConfig := zap.NewProductionConfig()
|
||||
encoderConfig := zap.NewProductionEncoderConfig()
|
||||
encoderConfig.TimeKey = "t"
|
||||
encoderConfig.LevelKey = "l"
|
||||
encoderConfig.CallerKey = "c"
|
||||
encoderConfig.MessageKey = "m"
|
||||
encoderConfig.StacktraceKey = "s"
|
||||
encoderConfig.EncodeLevel = zapcore.CapitalLevelEncoder
|
||||
encoderConfig.EncodeTime = zapcore.RFC3339NanoTimeEncoder
|
||||
encoderConfig.EncodeDuration = zapcore.MillisDurationEncoder
|
||||
encoderConfig.EncodeCaller = zapcore.ShortCallerEncoder
|
||||
|
||||
loggerConfig.EncoderConfig = encoderConfig
|
||||
loggerConfig.Level = zap.NewAtomicLevelAt(l)
|
||||
loggerConfig.Encoding = "json"
|
||||
|
||||
LoggerConfig = &loggerConfig
|
||||
}
|
||||
}
|
||||
|
||||
const requiredErrorF = `required variable "%s" not set`
|
||||
|
||||
func confString(name string, defaultValue string, required bool) string {
|
||||
val, present := os.LookupEnv(name)
|
||||
if !present {
|
||||
if required {
|
||||
log.Fatalf(requiredErrorF, name)
|
||||
}
|
||||
|
||||
val = defaultValue
|
||||
}
|
||||
return val
|
||||
}
|
||||
|
||||
func confDuration(name string, defaultValue time.Duration) (val time.Duration) {
|
||||
sVal, present := os.LookupEnv(name)
|
||||
if !present {
|
||||
val = defaultValue
|
||||
} else {
|
||||
var err error
|
||||
val, err = time.ParseDuration(sVal)
|
||||
if err != nil {
|
||||
log.Fatalf(`cannot parse duration variable "%s"`, name)
|
||||
}
|
||||
}
|
||||
return
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
package files
|
||||
|
||||
import (
|
||||
"embed"
|
||||
)
|
||||
|
||||
//go:embed data/public/*
|
||||
var Public embed.FS
|
||||
@@ -0,0 +1,121 @@
|
||||
package httpserver
|
||||
|
||||
import (
|
||||
"compress/gzip"
|
||||
"crypto/rand"
|
||||
"encoding/base64"
|
||||
"html/template"
|
||||
"io"
|
||||
"io/fs"
|
||||
"mime"
|
||||
"net/http"
|
||||
"path"
|
||||
"path/filepath"
|
||||
"strings"
|
||||
"time"
|
||||
|
||||
"go.uber.org/zap"
|
||||
|
||||
"go.c3c.cz/cv/app/server/internal/files"
|
||||
"go.c3c.cz/cv/app/server/internal/version"
|
||||
)
|
||||
|
||||
type handler struct {
|
||||
indexTemplate *template.Template
|
||||
logger *zap.Logger
|
||||
frontendConfig string
|
||||
}
|
||||
|
||||
func (h *handler) ServeHTTP(w http.ResponseWriter, r *http.Request) {
|
||||
f, err := files.Public.Open(path.Join("data", "public", r.URL.Path))
|
||||
if err != nil {
|
||||
h.serveIndex(w)
|
||||
return
|
||||
}
|
||||
|
||||
fi, err := f.Stat()
|
||||
if err != nil || fi.IsDir() {
|
||||
h.serveIndex(w)
|
||||
return
|
||||
}
|
||||
|
||||
h.serveFile(w, r, version.CommitTime, f)
|
||||
}
|
||||
|
||||
func (h *handler) serveFile(w http.ResponseWriter, r *http.Request, modtime time.Time, f fs.File) {
|
||||
if !modtime.IsZero() {
|
||||
ims := r.Header.Get("If-Modified-Since")
|
||||
modtime = modtime.Truncate(time.Second)
|
||||
if t, err := http.ParseTime(ims); err == nil && !modtime.After(t) {
|
||||
w.WriteHeader(http.StatusNotModified)
|
||||
return
|
||||
}
|
||||
w.Header().Set("Last-Modified", modtime.UTC().Format(http.TimeFormat))
|
||||
}
|
||||
|
||||
w.Header().Set("Content-Type", mime.TypeByExtension(filepath.Ext(r.URL.Path)))
|
||||
|
||||
if strings.Contains(r.Header.Get("Accept-Encoding"), "gzip") {
|
||||
w.Header().Set("Content-Encoding", "gzip")
|
||||
gw, err := gzip.NewWriterLevel(w, gzip.DefaultCompression)
|
||||
if err != nil {
|
||||
h.logger.Warn("Could not create gzip writer", zap.Error(err))
|
||||
return
|
||||
}
|
||||
if n, _ := io.Copy(gw, f); n == 0 {
|
||||
w.Header().Del("Content-Encoding")
|
||||
gw.Reset(io.Discard)
|
||||
}
|
||||
err = gw.Close()
|
||||
|
||||
if err != nil {
|
||||
h.logger.Warn("Could not close gzip writer", zap.Error(err))
|
||||
return
|
||||
}
|
||||
} else {
|
||||
_, err := io.Copy(w, f)
|
||||
if err != nil {
|
||||
h.logger.Warn("Could not write file response", zap.Error(err))
|
||||
return
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
type indexData struct {
|
||||
Config string
|
||||
CspNonce string
|
||||
}
|
||||
|
||||
func (h *handler) serveIndex(w http.ResponseWriter) {
|
||||
w.Header().Set("Content-Type", "text/html; charset=utf-8")
|
||||
|
||||
if h.indexTemplate == nil {
|
||||
_, _ = w.Write([]byte("no index"))
|
||||
return
|
||||
}
|
||||
|
||||
token := make([]byte, 12)
|
||||
_, err := rand.Read(token)
|
||||
if err != nil {
|
||||
h.logger.Warn("Could not create random csp token", zap.Error(err))
|
||||
return
|
||||
}
|
||||
|
||||
data := indexData{
|
||||
Config: h.frontendConfig,
|
||||
CspNonce: base64.RawStdEncoding.EncodeToString(token),
|
||||
}
|
||||
|
||||
w.Header().Set("Content-Security-Policy", "script-src 'self' 'nonce-"+data.CspNonce+"' 'unsafe-eval'")
|
||||
w.Header().Set("X-Frame-Options", "DENY")
|
||||
w.Header().Set("X-XSS-Protection", "1; mode=block")
|
||||
w.Header().Set("X-Content-Type-Options", "nosniff")
|
||||
w.Header().Set("Referrer-Policy", "same-origin")
|
||||
w.Header().Set("Strict-Transport-Security", "max-age=31536000; includeSubDomains")
|
||||
w.Header().Set("Permissions-Policy", "accelerometer=(), camera=(), geolocation=(), microphone=(), payment=(), usb=()")
|
||||
|
||||
err = h.indexTemplate.Execute(w, data)
|
||||
if err != nil {
|
||||
h.logger.Warn("Could not execute index template", zap.Error(err))
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,115 @@
|
||||
package httpserver
|
||||
|
||||
import (
|
||||
"context"
|
||||
"fmt"
|
||||
"html/template"
|
||||
"io"
|
||||
"log"
|
||||
"mime"
|
||||
"net/http"
|
||||
"time"
|
||||
|
||||
"go.uber.org/zap"
|
||||
|
||||
"go.c3c.cz/cv/app/server/internal/files"
|
||||
)
|
||||
|
||||
func init() {
|
||||
err := mime.AddExtensionType(".ico", "image/x-icon")
|
||||
if err != nil {
|
||||
log.Fatal(err)
|
||||
}
|
||||
|
||||
err = mime.AddExtensionType(".json", "application/json; charset=utf-8")
|
||||
if err != nil {
|
||||
log.Fatal(err)
|
||||
}
|
||||
}
|
||||
|
||||
type Options struct {
|
||||
Logger *zap.Logger
|
||||
BindAddr string
|
||||
FrontendConfig string
|
||||
RequireIndex bool
|
||||
}
|
||||
|
||||
type server struct{ http.Server }
|
||||
|
||||
func New(options *Options) (*server, error) {
|
||||
handler := &handler{
|
||||
frontendConfig: options.FrontendConfig,
|
||||
logger: options.Logger,
|
||||
}
|
||||
|
||||
httpSrv := &server{
|
||||
http.Server{
|
||||
Addr: options.BindAddr,
|
||||
Handler: handler,
|
||||
},
|
||||
}
|
||||
|
||||
index, err := files.Public.Open("data/public/index.html")
|
||||
if err != nil {
|
||||
if !options.RequireIndex {
|
||||
return httpSrv, nil
|
||||
}
|
||||
|
||||
return nil, fmt.Errorf("could not open index.html: %w", err)
|
||||
}
|
||||
|
||||
fi, err := index.Stat()
|
||||
if err != nil || fi.IsDir() {
|
||||
if !options.RequireIndex {
|
||||
return httpSrv, nil
|
||||
}
|
||||
|
||||
return nil, fmt.Errorf("invalid index.html: %w", err)
|
||||
}
|
||||
|
||||
tb, err := io.ReadAll(index)
|
||||
if err != nil {
|
||||
if !options.RequireIndex {
|
||||
return httpSrv, nil
|
||||
}
|
||||
|
||||
return nil, fmt.Errorf("could not read index.html: %w", err)
|
||||
}
|
||||
|
||||
handler.indexTemplate, err = template.New("index").Parse(string(tb))
|
||||
if err != nil {
|
||||
if !options.RequireIndex {
|
||||
return httpSrv, nil
|
||||
}
|
||||
|
||||
return nil, fmt.Errorf("could not parse index.html: index.html: %w", err)
|
||||
}
|
||||
|
||||
return httpSrv, nil
|
||||
}
|
||||
|
||||
func (s *server) ShutdownWithDelay(delay time.Duration, limit time.Duration) {
|
||||
h, ok := s.Handler.(*handler)
|
||||
|
||||
var logger *zap.Logger
|
||||
if ok {
|
||||
logger = h.logger
|
||||
} else {
|
||||
logger = zap.L()
|
||||
}
|
||||
|
||||
if delay > 0 {
|
||||
logger.Info(fmt.Sprintf("Waiting %s for incoming requests\n", delay))
|
||||
time.Sleep(delay)
|
||||
}
|
||||
|
||||
ctx, cancel := context.WithTimeout(context.Background(), limit)
|
||||
defer cancel()
|
||||
|
||||
logger.Info("Gracefully shutting down http server")
|
||||
if err := s.Shutdown(ctx); err != nil {
|
||||
logger.Error("Failed to shutdown http server", zap.Error(err))
|
||||
} else {
|
||||
logger.Info("Http server was stopped")
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,58 @@
|
||||
package pprofserver
|
||||
|
||||
import (
|
||||
"net/http"
|
||||
|
||||
"go.uber.org/zap"
|
||||
)
|
||||
|
||||
type Options struct {
|
||||
BindAddr string
|
||||
LogLevelHandler http.Handler
|
||||
Logger *zap.Logger
|
||||
}
|
||||
|
||||
type server struct {
|
||||
addr string
|
||||
logger *zap.Logger
|
||||
ready bool
|
||||
}
|
||||
|
||||
func New(options Options) *server {
|
||||
s := &server{
|
||||
addr: options.BindAddr,
|
||||
logger: options.Logger,
|
||||
}
|
||||
|
||||
http.Handle("/log/level", options.LogLevelHandler)
|
||||
http.HandleFunc("/readyz", s.handleReady)
|
||||
|
||||
return s
|
||||
}
|
||||
|
||||
func (s *server) ListenAndServe() error {
|
||||
return http.ListenAndServe(s.addr, nil)
|
||||
}
|
||||
|
||||
func (s *server) handleReady(w http.ResponseWriter, _ *http.Request) {
|
||||
s.logger.Debug("Handling healthcheck request", zap.Bool("ready", s.ready))
|
||||
|
||||
if s.ready {
|
||||
w.WriteHeader(http.StatusOK)
|
||||
return
|
||||
}
|
||||
|
||||
w.WriteHeader(http.StatusServiceUnavailable)
|
||||
_, err := w.Write([]byte("shutting down"))
|
||||
if err != nil {
|
||||
s.logger.Error("Could not write ready response", zap.Error(err))
|
||||
}
|
||||
}
|
||||
|
||||
func (s *server) SetReady() {
|
||||
s.ready = true
|
||||
}
|
||||
|
||||
func (s *server) SetNotReady() {
|
||||
s.ready = false
|
||||
}
|
||||
@@ -0,0 +1,36 @@
|
||||
package version
|
||||
|
||||
import (
|
||||
"encoding/json"
|
||||
"time"
|
||||
)
|
||||
|
||||
var (
|
||||
JSON []byte
|
||||
|
||||
Commit string
|
||||
CommitTime time.Time
|
||||
Tag string
|
||||
|
||||
commitTime string
|
||||
repoUrl string
|
||||
)
|
||||
|
||||
func init() {
|
||||
t, _ := time.Parse(time.RFC3339, commitTime)
|
||||
CommitTime = t.In(time.UTC)
|
||||
|
||||
type v struct {
|
||||
Source string `json:"source,omitempty"`
|
||||
Version string `json:"version,omitempty"`
|
||||
Commit string `json:"commit,omitempty"`
|
||||
CommitTime time.Time `json:"commitTime,omitempty"`
|
||||
}
|
||||
|
||||
JSON, _ = json.Marshal(v{
|
||||
Source: repoUrl,
|
||||
Version: Tag,
|
||||
Commit: Commit,
|
||||
CommitTime: CommitTime,
|
||||
})
|
||||
}
|
||||
@@ -0,0 +1,126 @@
|
||||
package main
|
||||
|
||||
import (
|
||||
"fmt"
|
||||
"net/http"
|
||||
_ "net/http/pprof"
|
||||
"os"
|
||||
"os/signal"
|
||||
"syscall"
|
||||
|
||||
"go.uber.org/zap"
|
||||
|
||||
"go.c3c.cz/cv/app/server/internal/config"
|
||||
"go.c3c.cz/cv/app/server/internal/httpserver"
|
||||
"go.c3c.cz/cv/app/server/internal/pprofserver"
|
||||
"go.c3c.cz/cv/app/server/internal/version"
|
||||
)
|
||||
|
||||
func main() {
|
||||
defer handleExit()
|
||||
|
||||
notice := "Starting version "
|
||||
if version.Tag != "" {
|
||||
notice += version.Tag
|
||||
} else {
|
||||
notice += "latest"
|
||||
}
|
||||
if version.Commit != "" {
|
||||
notice = fmt.Sprintf("%s (%s)", notice, version.Commit)
|
||||
}
|
||||
|
||||
var logger *zap.Logger
|
||||
var err error
|
||||
|
||||
logger, err = config.LoggerConfig.Build()
|
||||
|
||||
if err != nil {
|
||||
fmt.Println(notice)
|
||||
fmt.Println(version.CommitTime.Format("Committed at 2006/01/02 15:04:05 MST"))
|
||||
|
||||
panic(Exit{fmt.Errorf("logger creation failed")})
|
||||
}
|
||||
|
||||
logger.Info(
|
||||
"App initializing",
|
||||
zap.String("version", version.Tag),
|
||||
zap.String("commit", version.Commit),
|
||||
zap.Time("commitTime", version.CommitTime),
|
||||
)
|
||||
|
||||
defer func() {
|
||||
_ = logger.Sync()
|
||||
}()
|
||||
|
||||
httpSrv, err := httpserver.New(&httpserver.Options{
|
||||
BindAddr: config.BindAddrHttp,
|
||||
FrontendConfig: config.Frontend,
|
||||
Logger: logger,
|
||||
})
|
||||
if err != nil {
|
||||
logger.Error("HTTP server creation failed", zap.Error(err))
|
||||
panic(Exit{err})
|
||||
}
|
||||
|
||||
quit := struct {
|
||||
os chan os.Signal
|
||||
pprof chan error
|
||||
http chan error
|
||||
}{
|
||||
os: make(chan os.Signal, 1),
|
||||
pprof: make(chan error, 1),
|
||||
http: make(chan error, 1),
|
||||
}
|
||||
|
||||
pprofSrv := pprofserver.New(pprofserver.Options{
|
||||
BindAddr: config.BindAddrPprof,
|
||||
Logger: logger,
|
||||
LogLevelHandler: config.LoggerConfig.Level,
|
||||
})
|
||||
|
||||
// Pprof server.
|
||||
go func() {
|
||||
logger.Info("debug server was started", zap.String("BindAddr", config.BindAddrPprof))
|
||||
quit.pprof <- pprofSrv.ListenAndServe()
|
||||
}()
|
||||
|
||||
go func() {
|
||||
logger.Info("http server was started", zap.String("BindAddr", config.BindAddrHttp))
|
||||
pprofSrv.SetReady()
|
||||
err := httpSrv.ListenAndServe()
|
||||
if err != http.ErrServerClosed {
|
||||
quit.http <- err
|
||||
}
|
||||
}()
|
||||
|
||||
logger.Info("application started")
|
||||
|
||||
signal.Notify(quit.os, os.Interrupt, syscall.SIGTERM)
|
||||
|
||||
select {
|
||||
case s := <-quit.os:
|
||||
sig, _ := s.(syscall.Signal)
|
||||
logger.Info("Signal received\n", zap.Int("signal", int(sig)))
|
||||
pprofSrv.SetNotReady()
|
||||
httpSrv.ShutdownWithDelay(config.GraceTerminationDelay, config.GraceTerminationLimit)
|
||||
case err := <-quit.pprof:
|
||||
logger.Error("app shutdown was triggered by a pprof server error", zap.Error(err))
|
||||
httpSrv.ShutdownWithDelay(config.GraceTerminationDelay, config.GraceTerminationLimit)
|
||||
case err := <-quit.http:
|
||||
logger.Error("app shutdown was triggered by an http server error", zap.Error(err))
|
||||
}
|
||||
}
|
||||
|
||||
type Exit struct {
|
||||
err error
|
||||
}
|
||||
|
||||
func handleExit() {
|
||||
if e := recover(); e != nil {
|
||||
if exit, ok := e.(Exit); ok {
|
||||
fmt.Println(exit.err)
|
||||
os.Exit(1)
|
||||
}
|
||||
panic(e)
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user