Skip to content

Commit

Permalink
cover replaced banner
Browse files Browse the repository at this point in the history
  • Loading branch information
@nmacdon3
nmacdon3 committed May 13, 2022
1 parent 1e4b245 commit fa49d1e
Show file tree
Hide file tree
Showing 6 changed files with 104 additions and 32 deletions.
26 changes: 26 additions & 0 deletions deploy.sh
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
#!/usr/bin/env sh

# abort on errors
set -e

# build
npm run build

# navigate into the build output directory
cd dist

# if you are deploying to a custom domain
# echo 'www.example.com' > CNAME

git init
git checkout -b main
git add -A
git commit -m 'deploy'

# if you are deploying to https://<USERNAME>.github.io
# git push -f [email protected]:<USERNAME>/<USERNAME>.github.io.git main

# if you are deploying to https://<USERNAME>.github.io/<REPO>
git push -f [email protected]:<nmacdon3>/<Resume>.git main

cd -
101 changes: 77 additions & 24 deletions src/App.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import classnames from "classnames";
import React from "react";
import profile from "./brighter.png";
import { BsDot } from "react-icons/bs";
import { BsArrowRight, BsCode, BsDot } from "react-icons/bs";
import { HiChevronRight, HiOutlineMail, HiPlus } from "react-icons/hi";
import { AiOutlinePhone, AiFillLinkedin } from "react-icons/ai";
import { FaReact } from "react-icons/fa";
Expand All @@ -12,6 +12,10 @@ import {
technicalSkills,
professionalSkills,
} from "./content";
import cover from "./cover2.jpg";

const motif = "#A57A58";
const accent = "#8B8064";

const Section = ({
title,
Expand All @@ -34,10 +38,18 @@ const Job = ({ job }: { job: JobType }) => {
<h4 className="uppercase font-normal tracking-widest text-xs text-gray-700 mb-1">
{job.title}
</h4>
<div className="flex items-center space-x-1 text-xs tracking-wider text-orange-800/70 ">
<span className="font-medium text-orange-800/90">{job.company}</span>
<div className="flex items-center space-x-1 text-xs tracking-wider \ ">
<span
style={{ color: motif }}
className="font-medium text-orange-800/90"
>
{job.company}
</span>
<BsDot className="h-4 w-4" />
<span className=""> {job.duration}</span>
<span style={{ color: motif }} className="opacity-90">
{" "}
{job.duration}
</span>
</div>
<p className="text-xs text-gray-500 text-justify mt-2 mb-2">
{job.description}
Expand All @@ -49,29 +61,50 @@ const Job = ({ job }: { job: JobType }) => {
);
};

const Banner = () => {
return (
<div
style={{ backgroundColor: "#AC845F" }}
className="h-96 opacity-60 bg-orange-300/40 w-[60rem] absolute -top-56 -left-6 rotate-6 overflow-hidden"
>
<div className="h-96 bg-orange-300/30 w-[60rem] absolute -top-40 -right-20 rotate-45"></div>
</div>
);
};
const Cover = () => {
return (
<div className="absolute top-0 left-0 w-full overflow-hidden h-40">
<div className="relative w-screen h-44 ">
<img
src={cover}
className=" object-cover h-screen w-[60rem] absolute -top-24 -left-0 "
/>
</div>
</div>
);
};

function App() {
return (
<div className="h-screen w-screen bg-gradient-to-t from-gray-300 flex justify-center items-center font-body">
<div className="w-[44rem] h-full bg-white relative px-10 shadow-2xl overflow-hidden flex flex-col">
<div className="h-96 bg-orange-300/40 w-[60rem] absolute -top-56 -left-6 rotate-6 overflow-hidden">
<div className="h-96 bg-orange-300/30 w-[60rem] absolute -top-40 -right-20 rotate-45"></div>
</div>
<header className="flex items-start space-x-8 shrink-0 pt-10">
<div className="h-screen bg-gradient-to-t from-gray-300 font-body flex justify-center overflow-scroll sm:py-10">
<div className="h-auto sm:h-[56rem] w-[44rem] bg-white relative px-10 shadow-2xl sm:overflow-hidden overflow-scroll flex flex-col sm:rounded-lg">
<header className="flex items-start shrink-0 pt-9">
<Cover />
<img
className="rounded-full ring-4 ring-white h-16 w-16 sm:h-28 sm:w-28 z-20 relative object-cover"
className="rounded-full ring-4 ring-white h-16 w-16 sm:h-24 sm:w-24 z-20 relative object-cover mr-8"
src={profile}
/>
<div>
<h1 className="text-3xl sm:text-5xl font-thin relative tracking-wide mb-2 font-serif ">
<h1 className="text-3xl sm:text-4xl font-thin relative tracking-wide font-serif text-white ">
<span className="font-sans">Nathan</span> MacDonald
</h1>
<div className="flex items-center flex-wrap text-sm sm:text-lg ">
<div className="flex items-center flex-wrap text-sm sm:text-lg relative text-white/70">
Lead Frontend Developer
<HiPlus className="mx-2 h-3 w-3" /> Lead UX Designer
</div>
</div>
</header>
<section className="flex sm:space-x-16 mt-7 flex-grow flex-wrap overflow-auto">
<section className="flex sm:space-x-16 mt-16 flex-grow flex-wrap ">
<div className="w-full sm:w-[25rem] ">
<Section title="ABOUT">
<p className="text-gray-500 text-xs text-justify">{aboutText}</p>
Expand All @@ -85,16 +118,19 @@ function App() {
i !== jobs.length - 1 && ""
)}
>
<HiChevronRight className="h-4 w-4 text-orange-800 rounded-full shrink-0 mr-1 -translate-x-1" />
<HiChevronRight
style={{ color: accent }}
className="h-4 w-4 rounded-full shrink-0 mr-1 -translate-x-1"
/>

<Job job={job} />
</div>
))}
</Section>
</div>
<div className="mt-8 space-x-10 sm:space-x-0 sm:w-40 flex sm:flex-col">
<div className="mt-8 space-x-10 sm:space-x-0 sm:w-40 flex sm:flex-col px-2 sm:px-0">
<Section title="SKILLS">
<h5 className=" tracking-widest text-xs mb-2 text-gray-700">
<h5 className=" tracking-widest text-xs mb-2 text-gray-700 w-40">
TECHNICAL
</h5>
{technicalSkills.map((skill) => (
Expand All @@ -115,32 +151,49 @@ function App() {
</span>
, Minor in Business Administration (CO-OP)
</h4>
<h5 className="text-xs text-orange-800/90 mt-1 font-medium">
<h5 style={{ color: motif }} className="text-xs mt-1 font-medium">
University of New Brunswick
</h5>
<h5 className="text-xs text-orange-800/60 mt-1">
<h5
style={{ color: "#A57A58" }}
className="text-xs opacity-80 mt-1"
>
September, 2016 - December, 2020
</h5>
</Section>
</div>
</section>

<footer className="border-t border-orange-800/60 w-full h-20 text-xs py-4 text-gray-500 space-y-2 ">
<div className="sm:flex items-center sm:space-x-3 mb-4 ">
<div className="sm:flex items-center sm:space-x-3 mb-4 space-y-1 sm:space-y-0">
<span className="flex items-center ">
<HiOutlineMail className="h-4 w-4 mr-1" /> [email protected]
<HiOutlineMail className="h-4 w-4 mr-1" />{" "}
<a className="hover:underline" href="mailto:[email protected]">
[email protected]
</a>
</span>
<span className="flex items-center ">
<AiOutlinePhone className="h-4 w-4 mr-1" /> (506) 471-3038
</span>
<div className="flex items-center ">
<AiFillLinkedin className="h-4 w-4 mr-1" />{" "}
https://ca.linkedin.com/in/nathan-macdonald-489503134
<a
className="hover:underline"
href="https://ca.linkedin.com/in/nathan-macdonald-489503134"
>
https://ca.linkedin.com/in/nathan-macdonald-489503134
</a>
</div>
</div>
<div className="flex items-center ">
<div className="flex items-center pb-4 sm:pb-0">
<FaReact className="h-4 w-4 mr-1" /> This resume was built with
React
React{" "}
<a
href="https://github.com/nmacdon3/Resume"
className="flex items-center ml-2 text-orange-800"
>
<BsCode className="mr-1 ml-2 h-4 w-4" /> See Code
</a>
</div>
</footer>
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/content.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ export const jobs: JobType[] = [
duration: "January 2021 - Present",
description: `Nathan was hired as the sole Frontend contributor to this fast-paced startup right after graduation. The small size of the company allowed him to try new roles and gain new expertise including: `,
responsibilities: [
"Building, testing, and deploying a production-grade web app",
"Building, securing, and deploying a production-grade web app",
"Designing attractive and intuitive UI / UX",
"Shaping company goals into actionable projects",
],
Expand Down
Binary file added src/cover.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/cover2.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
7 changes: 0 additions & 7 deletions src/logo.svg
View file

This file was deleted.

0 comments on commit fa49d1e

Please sign in to comment.