diff options
| -rw-r--r-- | css/resume.css | 82 | ||||
| -rw-r--r-- | resume.html | 133 |
2 files changed, 215 insertions, 0 deletions
diff --git a/css/resume.css b/css/resume.css new file mode 100644 index 0000000..74f0c1d --- /dev/null +++ b/css/resume.css @@ -0,0 +1,82 @@ +@import url("fonts.css"); + +body { + font-family: Alegreya, serif; + background-color: #FFF; + color: #333; + max-width: 40em; + margin: 1em auto; + padding: 0em 1em; + border: 1px solid #000; + box-shadow: -1rem 1rem 0 0 rgba(0, 0, 0, 0.1); +} + +h1, h2, h3, b { + color: #000; +} + +ul { + margin-top: 0; +} + +a, a:visited { + color: #1455FB; + text-decoration: none; +} + +#blurb { + font-style: normal; +} + +#contact { + list-style: none; +} + +.title { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: end; + list-style-type: circle; + margin-bottom: 0; + margin-top: 0; +} + +h2 { + margin-bottom: 0; +} + +h2::after { + content: ""; + width: 100px; + border-top: 2px solid #333; +} + +@media screen and (max-width: 700px) { + /* todo: fix lumping of contact section on the se/seii size */ + body { + max-width: 80vw; + font-size: 0.5em; + } +} + +@page { + /* todo: fit the resume all on one page */ + size: auto; + margin: 2mm; +} + +@media print { + body { + background-color: #FFF; + color: #000; + border: none; + box-shadow: none; + } + a, a:visited, hr { + color: #000; + } + b > a::after { + content: ": " attr(href) + } +} diff --git a/resume.html b/resume.html new file mode 100644 index 0000000..3fd5c5b --- /dev/null +++ b/resume.html @@ -0,0 +1,133 @@ +<html> +<head> + <title>j-james | resume</title> + <meta charset="utf-8"/> + <meta name="viewport" content="width=device-width"/> + <link rel="icon" type="image/jpg" href="assets/compass.jpg"/> + <link rel="stylesheet" href="css/normalize.css"/> + <link rel="stylesheet" href="css/resume.css"/> +</head> +<body> + <!-- todo: the positions of dates are inconsistent --> + <section class="title"> + <!-- this part should be like bilal's --> + <div> <!-- weirdly, this doesn't work as a p --> + <h1>Justice “JJ” James</h1> + <i id="blurb">I like general mathematics, distributed systems, and Taylor Swift.</i> + </div> + <ul id="contact"> + <li>email: <a href="mailto:jj@j-james.me">jj@j-james.me</a></li> + <li>website: <a href="https://j-james.me">j-james.me</a></li> + <li>github: <a href="https://github.com/j-james">j-james</a></li> + <!-- <li>gitlab: <a href="https://gitlab.com/j-james">j-james</a></li> --> + <!-- <li>based: vancouver and seattle</li> --> + </ul> + </section> + <section> + <!-- this part should be like shuyao's --> + <h2>Education</h2> + <hr> + <p class="title"> + <b>University of British Columbia</b> + <i>September 2021 - Present</i> + </p> + <ul> + <li>Expected Major: Combined <a href="https://you.ubc.ca/ubc_programs/mathematics-vancouver-bsc/">Mathematics</a> and <a href="https://you.ubc.ca/ubc_programs/computer-science-vancouver-bsc/">Computer Science</a></li> + <li>Expected Graduation: April 2025</li> + </ul> + </section> + <section> + <h2>Skills</h2> + <hr> + <!-- <ul> + <li>HTML/CSS: self-taught, many projects</li> + <li>Java: {Spartronics experience}</li> + <li>Python: {UBCCTF experience}</li> + <li>Rust: {UBC Bionics experience}</li> + <li>Nim: many projects</li> + <li>Go: minimal</li> + <li>C: minimal experience, currently learning</li> + </ul> --> + <ul> + <li><b>Proficient in:</b> Nim, HTML/CSS, Java</li> + <li><b>Decent at:</b> Python, Golang, Bash, Spanish</li> + <li><b>Currently Learning:</b> C, Rust, Latin</li> + </ul> + </section> + <section> + <h2>Projects</h2> + <hr> + <ul> + <li><a href="https://github.com/j-james/htmlstuck">HTMLStuck</a>: leveraging Ruffle for native web playback of Flash animations</li> + <li><a href="https://github.com/Spartronics4915/2020-InfiniteRecharge">2020-InfiniteRecharge</a>: performant and modular code for a competitive robot</li> + <li><a href="https://github.com/j-james/static-slack">developers_handbook</a>: a guide for development in FIRST robotics</li> + <li><a href="https://github.com/j-james/static-slack">static-slack</a>: a lightweight static site generator for Slack archives</li> + <li><a href="https://github.com/j-james/aoc">aoc</a>: aesthetic solutions to yearly Advent of Code puzzles</li> + </ul> + </section> + <section> + <h2>Experience</h2> + <hr> + <h3>High School</h3> + <p class="title"> + <b>Bainbridge Roller Hockey League</b> + <i>Summer 2011 - Summer 2021</i> + </p> + <ul> + <li>Assistant Coach (Summer 2017 - Summer 2019)</li> + <li>Referee (Summer 2018 - Summer 2021)</li> + </ul> + <p class="title"> + <b>FIRST Robotics (<a href="https://spartronics4915.com">Spartronics 4915</a>)</b> + <i>September 2017 - June 2021</i> + </p> + <ul> + <li>Programmer (September 2017 - June 2021)</li> + <li>Leadership Member (June 2018 - June 2021)</li> + <li>Programming Lead (June 2019 - June 2021)</li> + <li>Team Captain (June 2019 - June 2021)</li> + </ul> + <h3>University</h3> + <p class="title"> + <b>UBC Bionics (<a href="https://ubcbionics.com/">BEAR UBC</a>)</b> + <i>September 2021 - Present</i> + </p> + <ul> + <li>UBC Bionics: engineering design team building a bionic arm</li> + <li>Embedded Programmer</li> + </ul> + <p class="title"> + <b>UBC CTF (<a href="https://ubcctf.github.io">Maple Bacon</a>)</b> + <i>September 2021 - Present</i> + </p> + <ul> + <li>Capture the Flag (CTFs): competitive cybersecurity challenges</li> + <li>#1 team in Canada</li> + <li>misc and osint specialist</li> + </ul> + </section> + <!--<section> + <h2>Languages</h2> + <hr> + <ul> + <li>English (Native)</li> + <li>Spanish (Grade 11 level)</li> + <li>Latin (Native)</li> + </ul> + </section>--> + <section> + <h2>Awards</h2> + <hr> + <ul> + <li>National Honor Society member (2017 - 2021)</li> + <li>National Merit Scholarship Semifinalist (2019)</li> + <li>Presidential Volunteer Service Award Program (Bronze, 2019)</li> + <li>Dean's List Semi-Finalist for FRC (2020)</li> + <li>Washington State Honors (2021)</li> + <li>Most Likely to Ask “Are We There Yet?” (voted on by the class of 2021)</li> + <li>SAT Score: 1570/1600</li> + <li>ACT Score: 35/36</li> + </ul> + </section> +</body> +</html> |