C3C/cv
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update skills, page breaks and add profile picture
Some checks failed
continuous-integration/drone/tag Build is failing
Details

Browse Source
This commit is contained in:
Arnie 2024-10-24 13:15:06 +02:00
parent df24388d95
commit 373f01c9c2
9 changed files with 195 additions and 123 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
app/frontend/src/assets/profile.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 280 KiB

259
app/frontend/src/components/CV/Experience.tsx
View File

@ -3,7 +3,7 @@ import { defineMessages, useIntl } from "react-intl";
import { Content } from "../common/Content"; import { Content } from "../common/Content";
import { Headline, SubHeadline } from "../common/Headline"; import { Headline, SubHeadline } from "../common/Headline";
import { Spacer } from "../common/Spacer"; import PageBreakAvoid from "../common/PageBreakAvoid";
import { Paragraph } from "../common/Text"; import { Paragraph } from "../common/Text";
const messages = defineMessages({ const messages = defineMessages({
@ -25,44 +25,69 @@ const approxCurrentYears = {
), ),
}; };
const yourpassSkills = [ const investbaySkills = [
"DevOps", "DevOps",
"Front-End Development", "Google Cloud Platform (GCP)",
"Back-end Operations", "Amazon Web Services (AWS)",
"Software Development", "Gitlab",
"Kubernetes", "Terraform",
"TypeScript", "Cloud infrastructure",
"Go", "Cloud Applications",
"Linux", "Software Development Life Cycle (SDLC)",
"Linux Server",
"Linux System Administration", "Linux System Administration",
"Back-End Web Development", "Go",
"Git", "TypeScript",
"Nix",
"GraphQL",
"gRPC",
"PostgreSQL", "PostgreSQL",
"Node.js", "Node.js",
"React.js", "React.js",
];
const yourpassSkills = [
"DevOps",
"Software as a Service (SaaS)",
"Cloud Infrastructure",
"Kubernetes",
"Back-end Operations",
"Linux System Administration",
"Amazon Web Services (AWS)", "Amazon Web Services (AWS)",
"Amazon EKS", "Terraform",
"Go (Programming Language)",
"gRPC",
"Front-End Development",
"React.js",
"Node.js",
"TypeScript",
"Nix",
"Software Development Life Cycle (SDLC)",
"Software Development",
"Git",
"PostgreSQL",
]; ];
const yoursystemSkills = [ const yoursystemSkills = [
"DevOps", "DevOps",
"Front-End Development", "Docker Swarm",
"Linux System Administration",
"Back-end Operations", "Back-end Operations",
"Front-End Development",
"Amazon Web Services (AWS)",
"Bash",
"Linux Server",
"Terraform",
"Cloud Infrastructure",
"Cloud Applications",
"Go (Programming Language)",
"TypeScript",
"Node.js",
"Software Development Life Cycle (SDLC)",
"Software Development", "Software Development",
"Kubernetes", "Kubernetes",
"TypeScript",
"Linux",
"Linux Server",
"Linux System Administration",
"Back-End Web Development", "Back-End Web Development",
"GraphQL",
"Git", "Git",
"Node.js",
"Vue.js",
"PHP",
"Bash",
"Amazon Web Services (AWS)",
"Amazon EKS",
]; ];
const Experience: React.FC = () => { const Experience: React.FC = () => {
@ -70,103 +95,109 @@ const Experience: React.FC = () => {
return ( return (
<> <>
<Headline level={3}>INVESTBAY s.r.o.</Headline> <PageBreakAvoid>
<SubHeadline level={4}>DevOps Architect</SubHeadline> <Headline level={3}>INVESTBAY s.r.o.</Headline>
<Content> <SubHeadline level={4}>DevOps Architect</SubHeadline>
<Paragraph> <Content>
{intl.formatMessage( <Paragraph>
{ {intl.formatMessage(
defaultMessage: "February 2024 - Present", {
id: "Experience.investbay", defaultMessage: "February 2024 - Present",
}, id: "Experience.investbay",
{ },
// not used atm {
count: approxCurrentYears.InvestBay, // not used atm
} count: approxCurrentYears.InvestBay,
)} }
</Paragraph> )}
<Paragraph> </Paragraph>
<strong>{intl.formatMessage(messages.skills)}:</strong>{" "} <Paragraph>
{yourpassSkills.join(" · ")} <strong>{intl.formatMessage(messages.skills)}:</strong>{" "}
</Paragraph> {investbaySkills.join(" · ")}
</Content> </Paragraph>
</Content>
</PageBreakAvoid>
<Headline level={3}>YOUR PASS s.r.o.</Headline> <PageBreakAvoid>
<SubHeadline level={4}>DevOps Engineer</SubHeadline> <Headline level={3}>YOUR PASS s.r.o.</Headline>
<Content> <SubHeadline level={4}>DevOps Engineer</SubHeadline>
<Paragraph> <Content>
{intl.formatMessage( <Paragraph>
{ {intl.formatMessage(
defaultMessage: "July 2021 - Present ({count} years)", {
id: "Experience.yourpass", defaultMessage: "July 2021 - Present ({count} years)",
}, id: "Experience.yourpass",
{ },
count: approxCurrentYears.YourPass, {
} count: approxCurrentYears.YourPass,
)} }
</Paragraph> )}
<Paragraph> </Paragraph>
<strong>{intl.formatMessage(messages.skills)}:</strong>{" "} <Paragraph>
{yourpassSkills.join(" · ")} <strong>{intl.formatMessage(messages.skills)}:</strong>{" "}
</Paragraph> {yourpassSkills.join(" · ")}
</Content> </Paragraph>
</Content>
</PageBreakAvoid>
<Spacer /> <PageBreakAvoid>
<Headline level={3}>YOUR SYSTEM s.r.o.</Headline>
<SubHeadline level={4}>SysOps</SubHeadline>
<Headline level={3}>YOUR SYSTEM s.r.o.</Headline> <Content>
<SubHeadline level={4}>SysOps</SubHeadline> <Paragraph>
{intl.formatMessage(
{
defaultMessage: "January 2022 - Present ({count} years)",
id: "Experience.yoursystem",
},
{
count: approxCurrentYears.YourSystemSysOps,
}
)}
</Paragraph>
<Paragraph>
<strong>{intl.formatMessage(messages.skills)}:</strong>{" "}
{yoursystemSkills.join(" · ")}
</Paragraph>
</Content>
<Content> <SubHeadline level={4}>Lead Developer/Architect</SubHeadline>
<Paragraph>
{intl.formatMessage( <Content>
{ <Paragraph>
defaultMessage: "January 2022 - Present ({count} years)", {intl.formatMessage({
defaultMessage: "February 2016 - December 2021 (5 years)",
id: "Experience.yoursystem", id: "Experience.yoursystem",
}, })}
{ </Paragraph>
count: approxCurrentYears.YourSystemSysOps, <Paragraph>
} <strong>{intl.formatMessage(messages.skills)}:</strong>{" "}
)} {yoursystemSkills.join(" · ")}
</Paragraph> </Paragraph>
<Paragraph> </Content>
<strong>{intl.formatMessage(messages.skills)}:</strong>{" "} </PageBreakAvoid>
{yoursystemSkills.join(" · ")}
</Paragraph>
</Content>
<SubHeadline level={4}>Lead Developer/Architect</SubHeadline> <PageBreakAvoid>
<Headline level={3}>Past experience</Headline>
<SubHeadline level={4}>Developer</SubHeadline>
<Content> <Content>
<Paragraph> <Paragraph>
{intl.formatMessage({ {intl.formatMessage({
defaultMessage: "February 2016 - December 2021 (5 years)", defaultMessage: "Birth - February 2016",
id: "Experience.yoursystem", id: "Experience.past",
})} })}
</Paragraph> </Paragraph>
<Paragraph> <Paragraph>
<strong>{intl.formatMessage(messages.skills)}:</strong>{" "} {intl.formatMessage({
{yoursystemSkills.join(" · ")} defaultMessage:
</Paragraph> "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...",
</Content> id: "Experience.pastDescription",
})}
<Headline level={3}>Past experience</Headline> </Paragraph>
<SubHeadline level={4}>Developer</SubHeadline> </Content>
</PageBreakAvoid>
<Content>
<Paragraph>
{intl.formatMessage({
defaultMessage: "Birth - February 2016",
id: "Experience.past",
})}
</Paragraph>
<Paragraph>
{intl.formatMessage({
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",
})}
</Paragraph>
</Content>
</> </>
); );
}; };

5
app/frontend/src/components/CV/Skill.tsx
View File

@ -2,6 +2,7 @@ import React from "react";
import { Spacer } from "../common/Spacer"; import { Spacer } from "../common/Spacer";
import { Paragraph } from "../common/Text"; import { Paragraph } from "../common/Text";
import PageBreakAvoid from "../common/PageBreakAvoid";
type SkillProps = { type SkillProps = {
title: string; title: string;
@ -11,13 +12,13 @@ const Skill: React.FC<React.PropsWithChildren<SkillProps>> = (props) => {
const { children, title } = props; const { children, title } = props;
return ( return (
<div> <PageBreakAvoid>
<strong>{title}</strong> <strong>{title}</strong>
<Spacer /> <Spacer />
{React.Children.map(children, (c) => ( {React.Children.map(children, (c) => (
<Paragraph>{c}</Paragraph> <Paragraph>{c}</Paragraph>
))} ))}
</div> </PageBreakAvoid>
); );
}; };

7
app/frontend/src/components/CV/Skills.tsx
View File

@ -3,6 +3,7 @@ import { useIntl } from "react-intl";
import { SubHeadline } from "../common/Headline"; import { SubHeadline } from "../common/Headline";
import { List, ListItem } from "../common/List"; import { List, ListItem } from "../common/List";
import PageBreakAvoid from "../common/PageBreakAvoid";
import { Spacer } from "../common/Spacer"; import { Spacer } from "../common/Spacer";
import { Paragraph } from "../common/Text"; import { Paragraph } from "../common/Text";
import Skill from "./Skill"; import Skill from "./Skill";
@ -99,8 +100,10 @@ const Skills: React.FC = () => {
<List> <List>
{otherSkills.map((s) => ( {otherSkills.map((s) => (
<ListItem key={s.title}> <ListItem key={s.title}>
<strong>{s.title}</strong> <PageBreakAvoid>
{s.description && `: ${s.description}`} <strong>{s.title}</strong>
{s.description && `: ${s.description}`}
</PageBreakAvoid>
</ListItem> </ListItem>
))} ))}
</List> </List>

3
app/frontend/src/components/CV/Summary.tsx
View File

@ -38,8 +38,7 @@ const Summary: React.FC = () => {
knowledge of KNX systems. knowledge of KNX systems.
</Paragraph> </Paragraph>
<Caption> <Caption>
-- This summary was graciously generated by an AI and then rewritten and -- Summary graciously generated by an AI and curated by human
adjusted by a human
</Caption> </Caption>
</> </>
); );

2
app/frontend/src/components/Layout/MainLayout.tsx
View File

@ -23,7 +23,7 @@ const Nav = styled("nav")({
flex: "0 0 280px", flex: "0 0 280px",
width: 280, width: 280,
minHeight: "100%", minHeight: "100%",
padding: "3rem 2rem 2rem", padding: "2rem 2rem 2rem",
[hideNavigationMQ]: { [hideNavigationMQ]: {
display: "none", display: "none",

28
app/frontend/src/components/Navigation/MainNavigation.tsx
View File

@ -1,12 +1,23 @@
import styled from "@emotion/styled";
import React, { useEffect, useRef } from "react"; import React, { useEffect, useRef } from "react";
import { useIntl } from "react-intl"; import { useIntl } from "react-intl";
import profile from "../../assets/profile.jpg";
import { CONTACT_EMAIL, CONTACT_PHONE } from "../../config/environment"; import { CONTACT_EMAIL, CONTACT_PHONE } from "../../config/environment";
import { Contact } from "../common/Contact"; import { Contact } from "../common/Contact";
import { List, ListItem } from "../common/List"; import { List, ListItem } from "../common/List";
import { Spacer } from "../common/Spacer"; import { Spacer } from "../common/Spacer";
import NavigationHeadline from "./NavigationHeadline"; import NavigationHeadline from "./NavigationHeadline";
const ProfileImg = styled("img")({
borderRadius: "50%",
border: "2px solid white",
display: "block",
margin: "0 auto",
maxWidth: "100%",
width: 150,
});
const getTopOffset = (input: HTMLElement) => { const getTopOffset = (input: HTMLElement) => {
let el: HTMLElement | Element | null = input; let el: HTMLElement | Element | null = input;
let o = 0; let o = 0;
@ -51,6 +62,13 @@ const MainNavigation: React.FC = () => {
scrollPrev = window.scrollY; scrollPrev = window.scrollY;
const top = getTopOffset(d); const top = getTopOffset(d);
console.log({
"window.innerHeight": window.innerHeight,
height,
top,
down,
});
if (window.innerHeight > height) { if (window.innerHeight > height) {
d.style.marginTop = `${Math.max(window.scrollY, 0)}px`; d.style.marginTop = `${Math.max(window.scrollY, 0)}px`;
return; return;
@ -61,16 +79,24 @@ const MainNavigation: React.FC = () => {
const wDelta = window.scrollY + window.innerHeight; const wDelta = window.scrollY + window.innerHeight;
const diff = wDelta - delta; const diff = wDelta - delta;
console.log({ delta, wDelta, "window.scrollY": window.scrollY, diff });
if (diff > 0) { if (diff > 0) {
const sizeDelta = Math.min(window.innerHeight - height, 0); const sizeDelta = Math.min(window.innerHeight - height, 0);
d.style.marginTop = `${Math.max(top + diff + sizeDelta, 0)}px`; d.style.marginTop = `${Math.max(top + diff + sizeDelta, 0)}px`;
console.log({
sizeDelta,
marginTop: Math.max(top + diff + sizeDelta, 0),
});
} }
} else { } else {
const delta = top; const delta = top;
const wDelta = window.scrollY; const wDelta = window.scrollY;
const diff = wDelta - delta; const diff = wDelta - delta;
console.log({ delta, wDelta, "window.scrollY": window.scrollY, diff });
if (diff < 0) { if (diff < 0) {
console.log({ marginTop: Math.max(top + diff, 0) });
d.style.marginTop = `${Math.max(top + diff, 0)}px`; d.style.marginTop = `${Math.max(top + diff, 0)}px`;
} }
} }
@ -86,6 +112,8 @@ const MainNavigation: React.FC = () => {
return ( return (
<div ref={ref}> <div ref={ref}>
<ProfileImg src={profile} alt="profile picture" />
<NavigationHeadline> <NavigationHeadline>
{intl.formatMessage({ {intl.formatMessage({
defaultMessage: "Contact", defaultMessage: "Contact",

7
app/frontend/src/components/common/PageBreakAvoid.tsx Normal file
View File

@ -0,0 +1,7 @@
import styled from "@emotion/styled";
const PageBreakAvoid = styled("div")({
pageBreakInside: "avoid",
});
export default PageBreakAvoid;

7
flake.nix
View File

@ -8,7 +8,8 @@
{ {
formatter = nix.formatter; formatter = nix.formatter;
packages = nix.lib.forAllSystems (pkgs: packages = nix.lib.forAllSystems (
pkgs:
let let
version = "rev-${self.shortRev or self.dirtyShortRev}"; version = "rev-${self.shortRev or self.dirtyShortRev}";
package = builtins.fromJSON (builtins.readFile ./app/frontend/package.json); package = builtins.fromJSON (builtins.readFile ./app/frontend/package.json);
@ -42,7 +43,9 @@
"-w" "-w"
"-X gopkg.c3c.cz/cv/app/server/internal/version.Tag=${version}" "-X gopkg.c3c.cz/cv/app/server/internal/version.Tag=${version}"
"-X gopkg.c3c.cz/cv/app/server/internal/version.Commit=${self.rev or self.dirtyRev}" "-X gopkg.c3c.cz/cv/app/server/internal/version.Commit=${self.rev or self.dirtyRev}"
"-X gopkg.c3c.cz/cv/app/server/internal/version.commitTime=${builtins.toString (self.lastModified or 0)}" "-X gopkg.c3c.cz/cv/app/server/internal/version.commitTime=${
builtins.toString (self.lastModified or 0)
}"
]; ];
vendorHash = "sha256-44xcyVk5KcurQLkVJv1MeAj+Pfcu53664pvVgHdyv3E="; vendorHash = "sha256-44xcyVk5KcurQLkVJv1MeAj+Pfcu53664pvVgHdyv3E=";
}; };