Skip to content

Commit 6a4e04c

Browse files
author
Mackenzie Browne
committed
poc resume
1 parent 9f06e27 commit 6a4e04c

File tree

7 files changed

+1405
-87
lines changed

7 files changed

+1405
-87
lines changed

‎package.json‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,17 @@
1010
"@types/node": "^12.0.0",
1111
"@types/react": "^16.9.0",
1212
"@types/react-dom": "^16.9.0",
13+
"@types/styled-components": "^5.0.1",
14+
"bootstrap": "^4.4.1",
15+
"husky": "^4.2.3",
16+
"lint-staged": "^10.0.8",
17+
"node-sass": "^4.13.1",
18+
"prettier": "^1.19.1",
1319
"react": "^16.13.0",
20+
"react-bootstrap": "^1.0.0-beta.17",
1421
"react-dom": "^16.13.0",
1522
"react-scripts": "3.4.0",
23+
"styled-components": "^5.0.1",
1624
"typescript": "~3.7.2"
1725
},
1826
"scripts": {
@@ -35,5 +43,15 @@
3543
"last 1 firefox version",
3644
"last 1 safari version"
3745
]
46+
},
47+
"lint-staged": {
48+
"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}": [
49+
"prettier --write"
50+
]
51+
},
52+
"husky": {
53+
"hooks": {
54+
"pre-commit": "lint-staged"
55+
}
3856
}
3957
}

‎src/App.tsx‎

Lines changed: 267 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,271 @@
1-
import React from 'react';
2-
import logo from './logo.svg';
3-
import './App.css';
1+
import React from "react";
2+
import styled from "styled-components";
3+
import { Container, Row, Col, Badge, ListGroup } from "react-bootstrap";
44

5-
function App() {
5+
// import logo from './logo.svg';
6+
import "./App.css";
7+
8+
const PillGroup = styled(ListGroup).attrs({
9+
horizontal: true,
10+
className: "d-flex flex-wrap"
11+
})``;
12+
13+
const Pill = styled(ListGroup.Item).attrs({
14+
as: Badge,
15+
variant: "secondary"
16+
})`
17+
margin: 1px;
18+
// font-weight: lighter;
19+
border-color: #6c757d;
20+
`;
21+
22+
const Title = styled.h1.attrs({
23+
className: "mt-2"
24+
})``;
25+
26+
const SubTitle = styled.h2.attrs({
27+
className: "mt-3"
28+
})``;
29+
30+
const Summary = styled.p.attrs({
31+
className: "mb-1"
32+
})``;
33+
34+
const Company = ({ name, location }) => (
35+
<Row>
36+
<Col as="h3" className="mb-0">
37+
{name}
38+
</Col>
39+
<Col as="h5" className="mb-0" xs="auto">
40+
{location}
41+
</Col>
42+
</Row>
43+
);
44+
45+
const Position = ({ title, time, duties }) => (
46+
<>
47+
<Row>
48+
<Col as="h4" className="my-2">
49+
{title}
50+
</Col>
51+
<Col as="h5" className="my-2" xs="auto">
52+
{time}
53+
</Col>
54+
</Row>
55+
<ul className="pl-3 mt-0 mb-2">
56+
{duties.map((duty, index) => (
57+
<li key={`${title}-${index}`}>{duty}</li>
58+
))}
59+
</ul>
60+
</>
61+
);
62+
63+
const Pills = ({ title, list }) => (
64+
<>
65+
<SubTitle>{title}</SubTitle>
66+
<PillGroup>
67+
{list.map((listItem, index) => (
68+
<Pill key={`${title}-${index}`}>{listItem}</Pill>
69+
))}
70+
</PillGroup>
71+
</>
72+
);
73+
74+
const SideList = ({ title, list }) => (
75+
<>
76+
<SubTitle>{title}</SubTitle>
77+
<ul className="list-unstyled p-0 m-0">
78+
{list.map((item, index) => (
79+
<li key={`${title}-${index}`}>{item}</li>
80+
))}
81+
</ul>
82+
</>
83+
);
84+
85+
const ExperienceList = styled(ListGroup).attrs({ variant: "flush" })``;
86+
const Experience = styled(ListGroup.Item).attrs({ className: "pl-0" })``;
87+
88+
export default function App() {
689
return (
7-
<div className="App">
8-
<header className="App-header">
9-
<img src={logo} className="App-logo" alt="logo" />
10-
<p>
11-
Edit <code>src/App.tsx</code> and save to reload.
12-
</p>
13-
<a
14-
className="App-link"
15-
href="https://reactjs.org"
16-
target="_blank"
17-
rel="noopener noreferrer"
18-
>
19-
Learn React
20-
</a>
21-
</header>
22-
</div>
90+
<Container className="pt-5">
91+
<Row>
92+
<Col>
93+
<Title>Mackenzie Browne</Title>
94+
<Summary>
95+
Product-focused nerd with 10 years industry experience.
96+
Professional, organized lifelong learner motivated by difficult and
97+
interesting challenges. Self-driven, enthusiastic and love working
98+
both independently and with teams. Uses a curated collection of
99+
libraries and automation tools to make development / testing /
100+
deployment as efficient as possible.
101+
</Summary>
102+
</Col>
103+
</Row>
104+
<Row>
105+
<Col>
106+
<SubTitle>Experience</SubTitle>
107+
<ExperienceList>
108+
<Experience>
109+
<Company name="Elsevier" location="Amsterdam" />
110+
<Position
111+
title="Senior Full Stack Developer - Scopus Core Team"
112+
time="Feb 2020 - Present"
113+
duties={[
114+
"Building a full design system and shared component library to unify the look and feel of all Scopus Products",
115+
"Involvement in major web stack migration to microservices and modern front-end technologies.",
116+
"Mentoring and 1 on 1's for junior / intermediate developers.",
117+
"Performing technical and cultural interviews to grow the team."
118+
]}
119+
/>
120+
</Experience>
121+
<Experience>
122+
<Company name="Prodigy" location="Toronto" />
123+
<Position
124+
title="Lead Mobile Application Developer - Game"
125+
time="Mar 2019 – Sep 2019"
126+
duties={[
127+
"Improve the mobile app development and quality assurance experience by developing tools that improve the efficiency of internal teams.",
128+
"Improve user experience by building mobile-specific features as well as improving any mobile usability issues and bugs.",
129+
"Configure automation pipelines for QA, builds and deployment.",
130+
"Facilitate cross-team collaboration to improve the mobile experience in all parts of the app.",
131+
"Code mentor for several junior developers in the company."
132+
]}
133+
/>
134+
<Position
135+
title="Senior Full Stack Developer - School Leader App"
136+
time="Jun 2018 – Mar 2019"
137+
duties={[
138+
"Full Stack Development using React, Node and GraphQL",
139+
"Primary role is to develop new features and improve the Admin/Principal user experience.",
140+
"Create user management system to remove and invite new uses to an Principal's school",
141+
"Develop several in-house tools to improve productivity and integrate Github and CI communication through slack."
142+
]}
143+
/>
144+
</Experience>
145+
<Experience>
146+
<Company name="Novus Health" location="Toronto" />
147+
<Position
148+
title="Senior Frontend Developer"
149+
time="Oct 2017 – Jun 2018"
150+
duties={[
151+
"Support and maintain the existing Novus platform app. Includes a user-facing website and a supporting content management system.",
152+
"Designed and implemented a standardized method to building apps that can be reproduced for projects going forward. This dramatically reduced the amount of bugs and support needed to keep software running long-term.",
153+
"Create new internal company app with data analytics, multiple sign-in routes and dynamic navigation features.",
154+
"Help develop skills of interns and other employees on the team with pair programming and code reviews on each submission.",
155+
'Promote extra curricular coding activities like running a team "Advent Of Code" scoreboard.'
156+
]}
157+
/>
158+
</Experience>
159+
{/* <Experience>
160+
<Company name="Bonsai" location="Toronto" />
161+
<Position
162+
title="Development Team Lead"
163+
time="Apr 2017 – Sep 2017"
164+
duties={[
165+
"Hire and Lead team of 8 developers",
166+
"Build custom e-commerce ios / android hybrid app",
167+
"Build a supporting CMS back-end to support the customer-facing app",
168+
"Setup agile team development practices",
169+
"Setup continuous integration with unit testing",
170+
"Gather and refine specifications and requirements based on technical needs"
171+
]}
172+
/>
173+
</Experience> */}
174+
<Experience>
175+
<Company
176+
name="Self Employed (9274022 Canada Inc.)"
177+
location="Canada, USA (On-Site and Remote)"
178+
/>
179+
<Position
180+
title="Freelance Full Stack and Mobile Developer"
181+
time="August 2011 – June 2017"
182+
duties={[
183+
"Full-time contracting including initial pitch meetings all the way through to final product.",
184+
"Perform interviews and hiring to advice how companies should hire their teams",
185+
"Requirements gathering, design, proof of concept and mvp implementations.",
186+
"Perform upgrades, maintinence or build new features to existing products.",
187+
"Built Mobile Apps, Websites and Hardware projects involving GPS and Bluetooth",
188+
"Clients included IBM, NYPD, Syfy/Space Channel, NBC, Hatch, and many small startups, nonprofits and charities in the Toronto area"
189+
]}
190+
/>
191+
</Experience>
192+
</ExperienceList>
193+
</Col>
194+
<Col md={3}>
195+
<SideList
196+
title="Contact"
197+
list={[
198+
"info@mackbrowne.com",
199+
"+31 061 773 5900",
200+
"linkedin.com/in/mackbrowne"
201+
]}
202+
/>
203+
<SideList
204+
title="Portfolio"
205+
list={["mackbrowne.com", "github.com/mackbrowne"]}
206+
/>
207+
<SideList
208+
title="Skills"
209+
list={[
210+
"Beautiful customer-facing pages",
211+
"Responsive Design",
212+
"Agile and Kanban Methodology",
213+
"Git Flow",
214+
"Unit and E2E Testing",
215+
"Continuous Builds / Tests / Deploys",
216+
"Native and Hybrid App Development",
217+
"Single Page Apps",
218+
"REST API Development"
219+
]}
220+
/>
221+
<Pills
222+
title="Frameworks"
223+
list={[
224+
"ReactJS",
225+
"Hooks / Context",
226+
"Redux",
227+
"Styled-Components",
228+
"Jest",
229+
"Cypress",
230+
"NodeJS",
231+
"Typescript",
232+
"GraphQL",
233+
"Bootstrap",
234+
"React-Native",
235+
"Expo",
236+
"Cordova",
237+
"MeteorJS",
238+
"Angular"
239+
]}
240+
/>
241+
<Pills
242+
title="Services"
243+
list={[
244+
"AWS",
245+
"Firebase",
246+
"JIRA",
247+
"CircleCI",
248+
"Google Play",
249+
"Itunes Connect",
250+
"Stripe",
251+
"Maps",
252+
"OAuth"
253+
]}
254+
/>
255+
<Pills
256+
title="Tools"
257+
list={[
258+
"Git",
259+
"VSCode",
260+
"Jenkins",
261+
"Vim",
262+
"Eslint",
263+
"Prettier",
264+
"cloc"
265+
]}
266+
/>
267+
</Col>
268+
</Row>
269+
</Container>
23270
);
24271
}
25-
26-
export default App;

‎src/index.css‎

Lines changed: 0 additions & 13 deletions
This file was deleted.

‎src/index.scss‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
// Override default variables before the import
2+
// $body-bg: #000;
3+
// Import Bootstrap and its default variables
4+
@import "~bootstrap/scss/bootstrap.scss";
5+
6+
// body {
7+
// margin: 0;
8+
// font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
9+
// "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
10+
// sans-serif;
11+
// -webkit-font-smoothing: antialiased;
12+
// -moz-osx-font-smoothing: grayscale;
13+
// }
14+
15+
// code {
16+
// font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
17+
// monospace;
18+
// }
19+
20+
h3 {
21+
font-size: 1.5rem;
22+
}
23+
24+
h4 {
25+
font-size: 1.2rem;
26+
}
27+
28+
h5 {
29+
font-size: 1.2rem;
30+
font-weight: lighter;
31+
}
32+
33+
li {
34+
font-weight: lighter;
35+
}

‎src/index.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
import React from 'react';
2-
import ReactDOM from 'react-dom';
3-
import './index.css';
4-
import App from './App';
5-
import * as serviceWorker from './serviceWorker';
1+
import React from "react";
2+
import ReactDOM from "react-dom";
3+
import "./index.scss";
4+
import App from "./App";
5+
import * as serviceWorker from "./serviceWorker";
66

7-
ReactDOM.render(<App />, document.getElementById('root'));
7+
ReactDOM.render(<App />, document.getElementById("root"));
88

99
// If you want your app to work offline and load faster, you can change
1010
// unregister() to register() below. Note this comes with some pitfalls.

0 commit comments

Comments
 (0)