Skip to content

Commit

Permalink
Merge pull request #4 from OliverBeckwith/feature/experience
Browse files Browse the repository at this point in the history
Feature/experience
  • Loading branch information
OliverBeckwith authored Jul 28, 2023
2 parents 3f81e69 + b7717c4 commit 2187efb
Show file tree
Hide file tree
Showing 20 changed files with 405 additions and 116 deletions.
4 changes: 4 additions & 0 deletions .prettierrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
{
"tabWidth": 2,
"trailingComma": "es5"
}
22 changes: 22 additions & 0 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

6 changes: 4 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,8 @@
"deploy": "gh-pages -d dist",
"dev": "vite",
"build": "tsc && vite build",
"preview": "vite preview"
"preview": "vite preview",
"prettify": "prettier -w \"src/**/*{.ts,.tsx}\""
},
"dependencies": {
"react": "^17.0.2",
Expand All @@ -21,7 +22,8 @@
"@types/styled-components": "^5.1.25",
"@vitejs/plugin-react": "^1.0.7",
"gh-pages": "^3.2.3",
"prettier": "^3.0.0",
"typescript": "^4.5.4",
"vite": "^2.9.0"
}
}
}
42 changes: 22 additions & 20 deletions src/App.tsx
Original file line number Diff line number Diff line change
@@ -1,24 +1,26 @@
import { Header } from './components/Header'
import { GlobalStyles } from './components/GlobalStyles'
import { About } from './components/About'
import { Contact } from './components/Contact'
import { ContentContainer, PageContainer } from './components/PageContainer'
import { Projects } from './components/Projects'
import { Header } from "./components/Header";
import { GlobalStyles } from "./components/GlobalStyles";
import { About } from "./components/About";
import { Contact } from "./components/Contact";
import { ContentContainer, PageContainer } from "./components/PageContainer";
import { Projects } from "./components/Projects";
import { Experience } from "./components/Experience";

function App() {

return (<>
<GlobalStyles />
<PageContainer>
<ContentContainer>
<Header />
<About />
<Projects />
<Contact />
</ContentContainer>
</PageContainer>
</>
)
return (
<>
<GlobalStyles />
<PageContainer>
<ContentContainer>
<Header />
<About />
<Experience />
{/* <Projects /> */}
<Contact />
</ContentContainer>
</PageContainer>
</>
);
}

export default App
export default App;
29 changes: 16 additions & 13 deletions src/components/About/index.tsx
Original file line number Diff line number Diff line change
@@ -1,23 +1,26 @@
import {
SectionContainer,
SectionHeader,
SectionDescription,
SectionContent,
Strong,
} from "../common.css"

} from "../common.css";

export const About = () => {
return (
<SectionContainer>
<SectionHeader>Who am I?</SectionHeader>
<SectionDescription>
I am a <Strong>web developer</Strong> and a <Strong>systems engineer</Strong> with a passion for problem solving!
Graduating with a MSc in Big Data Science and Artificial Intelligence in 2020, on top of a BSc in Computer Science, I have a multi-faceted appreciation of all technologies.
</SectionDescription>
<SectionDescription>
I am always looking to make use of new and exciting technologies, frameworks, packages, and tools!
As such, I like to get stuck into a variety of different projects to get a wide scope of experience.
</SectionDescription>
<SectionContent>
I am a <Strong>web developer</Strong> and a{" "}
<Strong colour="red">systems engineer</Strong> with a passion for
problem solving! Graduating with a MSc in Big Data Science and
Artificial Intelligence in 2020, on top of a BSc in Computer Science, I
have a multi-faceted appreciation of all technologies.
</SectionContent>
<SectionContent>
I am always looking to make use of new and exciting technologies,
frameworks, packages, and tools! As such, I like to get stuck into a
variety of different projects to get a wide scope of experience.
</SectionContent>
</SectionContainer>
)
}
);
};
8 changes: 3 additions & 5 deletions src/components/Contact/icons/Email.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,5 @@
import { ContactIcon } from "../styles.css"
import { ContactIcon } from "../styles.css";

export const Email = () => {
return (
<ContactIcon className="fa-solid fa-envelope" />
)
}
return <ContactIcon className="fa-solid fa-envelope" />;
};
8 changes: 3 additions & 5 deletions src/components/Contact/icons/LinkedIn.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,5 @@
import { ContactIcon } from "../styles.css"
import { ContactIcon } from "../styles.css";

export const LinkedIn = () => {
return (
<ContactIcon className="fa-brands fa-linkedin" />
)
}
return <ContactIcon className="fa-brands fa-linkedin" />;
};
29 changes: 16 additions & 13 deletions src/components/Contact/index.tsx
Original file line number Diff line number Diff line change
@@ -1,23 +1,26 @@
import { SectionContainer, SectionHeader } from "../common.css"
import { Email } from "./icons/Email"
import { LinkedIn } from "./icons/LinkedIn"
import { ContactMethod, ContactMethodContainer, ContactText } from "./styles.css"

import { SectionContainer, SectionHeader } from "../common.css";
import { Email } from "./icons/Email";
import { LinkedIn } from "./icons/LinkedIn";
import {
ContactMethod,
ContactMethodContainer,
ContactText,
} from "./styles.css";

export const Contact = () => {
return (
<SectionContainer>
<SectionHeader>Want to talk?</SectionHeader>
<ContactMethodContainer>
<ContactMethod href="mailto:[email protected]">
<Email />
<ContactText>via email</ContactText>
</ContactMethod>
<Email />
<ContactText>via email</ContactText>
</ContactMethod>
<ContactMethod href="https://www.linkedin.com/in/oliverbeckwith/">
<LinkedIn />
<ContactText>via LinkedIn</ContactText>
</ContactMethod>
<LinkedIn />
<ContactText>via LinkedIn</ContactText>
</ContactMethod>
</ContactMethodContainer>
</SectionContainer>
)
}
);
};
31 changes: 23 additions & 8 deletions src/components/Contact/styles.css.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import styled from "styled-components";
import { device } from "../../utils/media";
import { theme } from "../common.css";

export const ContactMethodContainer = styled.div`
display: flex;
Expand All @@ -8,19 +9,21 @@ export const ContactMethodContainer = styled.div`
`;

export const ContactIcon = styled.i`
font-size: 2em;
font-size: 1.25em;
padding: 8px;
margin-right: 4px;
width: 12px;
${device.tablet} {
font-size: 2em;
margin-right: 8px;
width: 24px;
}
${device.laptop} {
margin-right: 12px;
}
${device.desktop} {
font-size: 2.25em;
margin-right: 16px;
width: 28px;
}
Expand All @@ -32,8 +35,8 @@ export const ContactText = styled.span`
border-bottom-right-radius: 4px;
border-top-right-radius: 4px;
padding: 0 4px;
background-color: #8888ff44;
border-left: 0px solid #8888ff88;
background-color: ${theme.colours.linkblue.background};
border-left: 0px solid ${theme.colours.linkblue.foreground};
transition: border 100ms ease-in-out;
Expand All @@ -59,10 +62,22 @@ export const ContactMethod = styled.a`
height: 32px;
text-decoration: none;
&:link { text-decoration: none; color: black; }
&:hover { text-decoration: none; color: black; }
&:visited { text-decoration: none; color: black; }
&:active { text-decoration: none; color: black; }
&:link {
text-decoration: none;
color: black;
}
&:hover {
text-decoration: none;
color: black;
}
&:visited {
text-decoration: none;
color: black;
}
&:active {
text-decoration: none;
color: black;
}
&:hover ${ContactText} {
border-left-width: 4px;
Expand All @@ -80,4 +95,4 @@ export const ContactMethod = styled.a`
${device.laptop} {
margin: 8px 0;
}
`;
`;
47 changes: 47 additions & 0 deletions src/components/Experience/experiences/Korelogic.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
import { SectionContent } from "../../common.css";
import {
ExperienceHeaderRow,
ExperienceTitle,
ExperienceDates,
ExperienceDescription,
SkillRow,
SkillPill,
} from "../styles.css";

export const Korelogic = () => {
return (
<SectionContent>
<ExperienceHeaderRow>
<ExperienceTitle>
Junior Javascript Developer - Korelogic Ltd
</ExperienceTitle>
<ExperienceDates>Feb 2021 - Dec 2021</ExperienceDates>
</ExperienceHeaderRow>
<ExperienceDescription>
<ul>
<li>Worked with external clients to deliver expected projects.</li>
<li>
Used work tracking tools and communicated progress with internal and
external teams on a daily basis.
</li>
<li>
Provided aide for the internal AWS architect for setting up and
maintaining project resources, IAM roles, and CloudFormation
templates
</li>
<li>
Developed new solutions using modern frameworks alongside
maintaining legacy systems
</li>
</ul>
<SkillRow>
<SkillPill>TypeScript</SkillPill>
<SkillPill>Project Management</SkillPill>
<SkillPill>AWS</SkillPill>
<SkillPill>Team Communication</SkillPill>
<SkillPill>Business-to-business (B2B)</SkillPill>
</SkillRow>
</ExperienceDescription>
</SectionContent>
);
};
Loading

0 comments on commit 2187efb

Please sign in to comment.