resume: shift to html/css/js

This commit is contained in:
Naman Sood 2023-01-17 18:08:28 -05:00
parent 10a5dcd205
commit 2b12da2e74
9 changed files with 660 additions and 153 deletions

View file

@ -10,6 +10,4 @@ This is the code for my personal website and resume. The main branch of this rep
## License
I reserve all rights to the code in this repository except `resume.tex` and `resume.sty`. Please do not copy this code without my permission. If you would like permission, feel free to email me: mail@nsood.in.
The license for `resume.tex` and `resume.sty` is in a comment header in those files.
I reserve all rights to the code in this repository. Please do not copy this code without my permission. If you would like permission, feel free to email me: mail@nsood.in.

Binary file not shown.

View file

@ -1,44 +0,0 @@
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
% LaTeX Template: Curriculum Vitae
%
% Original template from: http://www.howtotex.com/
% Modified for use by Naman Sood.
%
% Feel free to distribute this template, but please keep the
% referral to HowToTeX.com.
%
% HowToTeX seems to be dead, but the unmodified template can
% be found at:
% https://www.overleaf.com/latex/templates/your-new-cv/xqzhcmqkqrtw
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\documentclass{article}
\usepackage[margin=0.65in,top=0.3in,bottom=0.5in]{geometry}
\usepackage{resume}
\setlength\parindent{0pt}
\begin{document}
\MyName{Naman Sood}
{\hfill \href{mailto:mail@nsood.in}{mail@nsood.in} |
\href{https://www.nsood.in}{www.nsood.in} |
\href{https://linkedin.com/in/namansood}{linkedin.com/in/namansood} |
\href{https://github.com/namansood}{github.com/namansood}
\hfill}
\vspace{12pt}
\rule{7.2in}{1pt}
\setlength\parskip{12pt plus 4pt minus 4pt}
\textbf{Company Name, Inc.} \hfill Octuary 42nd, 1984 \\ \emph{34 Example Way N \\ Dunnsburg, OFF 1A3 5B7}
To the recruiting team at Company Name,
Please hire me.
Yours sincerely,\\
Naman Sood.
\end{document}

244
css/resume.css Normal file
View file

@ -0,0 +1,244 @@
@charset "UTF-8";
*, *:before, *:after {
box-sizing: border-box;
}
body {
margin: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
button#print {
margin: 2rem auto;
border: none;
font-size: 9pt;
font-family: "IBM Plex Sans";
background: #eee;
color: #425580;
padding: 0.5rem 1rem;
border-radius: 0.2rem;
box-shadow: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.1), 0 0.1rem 0.2rem rgba(0, 0, 0, 0.1);
}
button#print:hover {
box-shadow: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.1), 0 0.1rem 0.2rem rgba(0, 0, 0, 0.2);
}
button#print:active {
background: #e0e0e0;
}
button#print i {
font-size: 7pt;
margin-right: 3pt;
}
#page {
width: 8.5in;
height: 11in;
margin: 0 auto 4rem;
box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1), 0 0 0.5rem rgba(0, 0, 0, 0.2);
font-family: "IBM Plex Sans", sans-serif;
font-weight: 400;
font-size: 9pt;
line-height: 14pt;
background-size: 14pt 14pt;
background-repeat: repeat;
background-position: center top;
}
#page .page-contents {
padding: 14pt 42pt 28pt;
}
@media print {
#page {
box-shadow: none;
height: auto;
width: auto;
margin: 0;
}
button#print {
display: none;
}
}
@page {
margin: 0;
}
p {
margin: 0;
}
h1.name {
margin: 0;
text-align: center;
font-size: 24pt;
line-height: 21pt;
padding-top: 7pt;
height: 28pt;
font-weight: 600;
}
nav.links {
display: flex;
justify-content: center;
align-items: stretch;
padding-top: 7pt;
height: 21pt;
}
nav.links a {
display: block;
color: inherit;
display: block;
padding: 0 7pt;
height: 14pt;
line-height: 14pt;
text-decoration: none;
font-size: 9pt;
}
a {
color: inherit;
text-decoration: none;
}
a i.fa {
font-size: 6pt;
margin: 0 0.5pt -1.5pt;
line-height: 9.24pt;
position: relative;
width: 9.24pt;
height: 9.24pt;
}
a i.fa:before {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
h2 {
margin: 0;
position: relative;
padding-top: 7pt;
line-height: 14pt;
height: 21pt;
font-size: 13pt;
font-weight: 900;
display: block;
padding-right: 0;
align-self: flex-start;
width: 100%;
}
h2:before {
content: "";
position: absolute;
bottom: -2pt;
left: 0;
width: 100%;
box-sizing: content-box;
height: 0;
border-top: 1.5pt solid #8ecfd5;
z-index: -1;
}
h3 {
margin: 0;
font-size: 11pt;
}
h3 a i.fa {
font-size: 7pt;
margin: 0 0 -1.5pt 3pt;
}
h4 {
margin: 0;
font-style: italic;
font-weight: 400;
font-size: 9pt;
display: flex;
width: 100%;
justify-content: space-between;
}
strong {
font-weight: 600;
}
section {
display: flex;
flex-direction: column;
}
section.skills p {
height: 14pt;
}
section.skills p:first-of-type {
margin-top: 7pt;
}
section.skills strong {
display: inline-block;
width: 80pt;
}
ul {
margin: 0;
padding: 0 0 0 14pt;
}
ul li {
display: block;
position: relative;
}
ul li:before {
content: "·";
height: 14pt;
width: 14pt;
display: block;
position: absolute;
top: 0;
left: -14pt;
text-align: center;
line-height: 14pt;
font-weight: bold;
font-size: 12pt;
}
section.experience article.work-exp {
position: relative;
margin: 7pt 0 0;
}
aside.date {
position: absolute;
right: 0;
top: 0;
height: 14pt;
line-height: 14pt;
}
aside.languages {
color: #444;
font-style: italic;
font-weight: 400;
}
section.projects article.project {
height: 28pt;
}
section.projects article.project:first-of-type {
margin-top: 7pt;
}
section.projects div.project-title {
display: flex;
align-items: baseline;
height: 14pt;
}
section.projects div.project-title h3 {
padding-right: 3pt;
}
section.education article.institution {
position: relative;
margin-top: 7pt;
}
/*# sourceMappingURL=resume.css.map */

276
css/resume.scss Normal file
View file

@ -0,0 +1,276 @@
*, *:before, *:after {
box-sizing: border-box;
}
body {
margin: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
$ls: 14pt;
button#print {
margin: 2rem auto;
border: none;
font-size: 9pt;
font-family: 'IBM Plex Sans';
background: #eee;
color: #425580;
padding: 0.5rem 1rem;
border-radius: 0.2rem;
box-shadow: 0 0.2rem 0.5rem rgba(0,0,0,0.1), 0 0.1rem 0.2rem rgba(0,0,0,0.1);
&:hover {
box-shadow: 0 0.2rem 0.5rem rgba(0,0,0,0.1), 0 0.1rem 0.2rem rgba(0,0,0,0.2);
}
&:active {
background: #e0e0e0;
}
i {
font-size: 7pt;
margin-right: 3pt;
}
}
#page {
width: 8.5in;
height: 11in;
margin: 0 auto 4rem;
box-shadow: 0 0.25rem 0.75rem rgba(0,0,0,0.1), 0 0 0.5rem rgba(0,0,0,0.2);
font-family: 'IBM Plex Sans', sans-serif;
font-weight: 400;
font-size: 9pt;
line-height: $ls;
$fade: #ccc;
$main: #aaa;
//background-image: linear-gradient(white 45%, $fade 45%, $fade 50%, white 50%, white 95%, $main 95%);
background-size: $ls $ls;
background-repeat: repeat;
background-position: center top;
.page-contents {
padding: $ls 3*$ls 2*$ls;
}
}
@media print {
#page {
box-shadow: none;
height: auto;
width: auto;
margin: 0;
}
button#print {
display: none;
}
}
// print margins
@page {
margin: 0;
}
p {
margin: 0;
}
h1.name {
margin: 0;
text-align: center;
font-size: 24pt;
line-height: 1.5*$ls;
padding-top: 0.5*$ls;
height: 2*$ls;
font-weight: 600;
}
nav.links {
display: flex;
justify-content: center;
align-items: stretch;
padding-top: 0.5*$ls;
height: 1.5*$ls;
a {
display: block;
color: inherit;
display: block;
padding: 0 0.5*$ls;
height: $ls;
line-height: $ls;
text-decoration: none;
font-size: 9pt;
}
}
a {
color: inherit;
text-decoration: none;
i.fa {
font-size: 6pt;
margin: 0 0.5pt -1.5pt;
line-height: 0.66*$ls;
position: relative;
width: 0.66*$ls;
height: 0.66*$ls;
&:before {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}
}
h2 {
margin: 0;
position: relative;
padding-top: 0.5*$ls;
line-height: $ls;
height: 1.5*$ls;
font-size: 13pt;
font-weight: 900;
display: block;
padding-right: 0;
align-self: flex-start;
width: 100%;
&:before {
content: '';
position: absolute;
bottom: -2pt;
left: 0;
width: 100%;
box-sizing: content-box;
//height: 1.5pt;
height: 0;
border-top: 1.5pt solid #8ecfd5;
z-index: -1;
}
}
h3 {
margin: 0;
font-size: 11pt;
a i.fa {
font-size: 7pt;
margin: 0 0 -1.5pt 3pt;
}
}
h4 {
margin: 0;
font-style: italic;
font-weight: 400;
font-size: 9pt;
display: flex;
width: 100%;
justify-content: space-between;
}
strong {
font-weight: 600;
}
section {
display: flex;
flex-direction: column;
}
section.skills {
p {
height: $ls;
}
p:first-of-type {
margin-top: 0.5*$ls;
}
strong {
display: inline-block;
width: 80pt;
}
}
ul {
margin: 0;
padding: 0 0 0 $ls;
li {
display: block;
position: relative;
&:before {
content: '·';
height: $ls;
width: $ls;
display: block;
position: absolute;
top: 0;
left: -$ls;
text-align: center;
line-height: $ls;
font-weight: bold;
font-size: 12pt;
}
}
}
section.experience {
article.work-exp {
position: relative;
margin: 0.5*$ls 0 0;
}
}
aside.date {
position: absolute;
right: 0;
top: 0; //calc($ls / 2);
height: $ls;
line-height: $ls;
// $offset: $4pt;
// top: -$offset;
// background: black;
// color: white;
// padding: $offset 1.5*$offset;
// height: $ls + 2*$offset;
}
aside.languages {
color: #444;
font-style: italic;
font-weight: 400;
}
section.projects {
article.project {
&:first-of-type {
margin-top: 0.5*$ls;
}
height: 2*$ls;
}
div.project-title {
display: flex;
align-items: baseline;
height: $ls;
h3 {
padding-right: 3pt;
}
}
}
section.education {
article.institution {
position: relative;
margin-top: 0.5*$ls;
}
}

7
js/resume.js Normal file
View file

@ -0,0 +1,7 @@
document.querySelectorAll('main a').forEach(el => {
const icon = document.createElement('i');
icon.classList.add('fa', 'fa-solid', 'fa-arrow-up-right-from-square');
el.appendChild(icon);
});
document.querySelector('#print').addEventListener('click', () => window.print());

132
resume.html Normal file
View file

@ -0,0 +1,132 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600&display=swap">
<link rel="stylesheet" href="css/resume.css">
<script src="https://kit.fontawesome.com/e34b4d0969.js" crossorigin="anonymous"></script>
<title>Naman Sood &ndash; Resume</title>
</head>
<body>
<button id="print"><i class="fa fa-solid fa-print"></i> Print/Save as PDF</button>
<div id="page">
<div class="page-contents">
<header>
<h1 class="name">Naman Sood</h1>
<nav class="links"><a href="mailto:mail@nsood.in">mail@nsood.in</a>|<a href="https://nsood.in">www.nsood.in</a>|<a href="https://linkedin.com/in/namansood">linkedin.com/in/namansood</a>|<a href="https://github.com/tendstofortytwo">github.com/tendstofortytwo</a></nav>
</header>
<main>
<section class="education">
<h2>Education</h2>
<article class="institution">
<h3>University of Waterloo</h3>
<h4>Bachelor of Computer Science &ndash; 3.91 GPA</h4>
<aside class="date">Sep 2019 &ndash; Apr 2024</aside>
<ul>
<li><strong>Relevant Coursework: </strong><span>Operating Systems, Concurrency, Networks, Security, Data Structures & Algorithms</span></li>
</ul>
</article>
</section>
<section class="skills">
<h2>Skills</h2>
<p><strong>Languages</strong><span>JavaScript, Go, Rust, C++, C, Python, Scala, HTML/CSS, Shell, Haskell</span></p>
<p><strong>Technologies</strong><span>Git, Docker, Kubernetes, AWS EC2/S3, gRPC/Protobuf, React, SQL, MongoDB</span></p>
</section>
<section class="experience">
<h2>Experience</h2>
<article class="work-exp">
<h3 class="employer">data.world</h3>
<h4 class="position">Software Engineer Intern <span class="location">Austin, TX</span></h4>
<aside class="date">May 2022 &ndash; Aug 2022</aside>
<ul>
<li><strong>Spearheaded Databricks and Apache Spark support</strong> in Java-based data catalog service by integrating JDBC database drivers.</li>
<li>Boosted user productivity in code editing workspace by generating autocompletions for RDF classes and properties.</li>
<li><strong>Delivered key usability improvements</strong> to code workspace in areas like error visibility and autogeneration of code snippets.</li>
<li>Refined syntax highlighting for SPARQL queries by improving regular expressions used to parse language constructs.</li>
</ul>
</article>
<article class="work-exp">
<h3 class="employer">Carta</h3>
<h4 class="position">Software Engineer Intern, Infrastructure <span class="location">Kitchener, ON</span></h4>
<aside class="date">Sep 2021 &ndash; Dec 2021</aside>
<ul>
<li>Designed distributed gRPC logging system using Apache Fluent for <strong>scalable auditing and compliance</strong> across organization.</li>
<li>Created proof-of-concept for logging system using Kubernetes DaemonSets, with ConfigMaps to deploy custom configurations.</li>
<li>Enforced standardization of Protobuf definitions for <strong>over 300 microservices</strong> by designing static analysis tool in Go.</li>
<li><strong>Optimized build times by 10x</strong> for Docker images by simplifying package requirements to allow precompiled dependencies.</li>
<li>Improved system availability by identifying and removing bottlenecks in Redis server connections in Python library.</li>
</ul>
</article>
<article class="work-exp">
<h3 class="employer">Tailscale</h3>
<h4 class="position">Software Engineer Intern <span class="location">Toronto, ON</span></h4>
<aside class="date">Jan 2021 &ndash; Apr 2021</aside>
<ul>
<li><strong>Introduced cloud/serverless support</strong> by emulating TCP/IP stack in userspace for Docker containers, using Google gVisor.</li>
<li>Enabled standardized communication using SOCKS5 protocol over Tailscale VPN by implementing proxy server in Go.</li>
<li><strong>Simplified deployments in cloud environments</strong> by creating single-session authentication keys with auto-cleanup.</li>
<li>Developed a <a href="https://github.com/tailscale/github-action">GitHub Action</a> for end-users that allows <strong>plug-and-play security</strong> for CI/CD pipelines.</li>
<li>Expanded outreach within the technical community by writing <a href="https://tailscale.com/blog/2021-05-github-actions-and-tailscale/">long-form content for corporate blog.</a></li>
</ul>
</article>
<article class="work-exp">
<h3 class="employer">University of Waterloo</h3>
<h4 class="position">Research Associate <span class="location">Waterloo, ON</span></h4>
<aside class="date">May 2020 &ndash; Aug 2020</aside>
<ul>
<li>Optimized Go consensus system to <strong>3x throughput</strong> by increasing maximum transaction count sent in each message.</li>
<li>Streamlined deployment of project by using Docker images to generate repeatable builds across diverse environments.</li>
<li>Unified similar codebases by migrating duplicate components to a single C++ project.</li>
<li>Assisted distributed systems research by conducting experiments on AWS EC2 and analyzing performance data in gnuplot.</li>
</ul>
</article>
<!-- <article class="work-exp">
<h3 class="employer">Creesync Software</h3>
<h4 class="position">Software Engineering Intern <span class="location">New Delhi, India</span></h4>
<aside class="date">May 2019 &ndash; Aug 2019</aside>
<ul>
<li>Simplified distribution of professionally clicked photos by building Electron and React Native apps.</li>
<li>Designed and deployed API to upload and preview photos in low-bandwidth situations using Node.js and AWS S3.</li>
</ul>
</article> -->
<article class="work-exp">
<h3 class="employer">The Girl Code</h3>
<h4 class="position">Volunteer Full Stack Developer <span class="location">New Delhi, India</span></h4>
<aside class="date">Mar 2018 &ndash; Apr 2020</aside>
<ul>
<li>Developed online platform to interactively teach programming in <strong>10+ workshops across 3 countries</strong> using NodeJS.</li>
</ul>
</article>
</section>
<section class="projects">
<h2>Projects</h2>
<article class="project">
<div class="project-title">
<h3><a href="https://github.com/tendstofortytwo/chip8-rust">CHIP8-rust</a></h3>
<aside class="languages">Rust</aside>
</div>
<p>Emulator for CHIP-8 microprocessor. Simulated behavior of machine instructions with Rust, created graphics in framebuffer.</p>
</article>
<article class="project">
<div class="project-title">
<h3><a href="https://github.com/tendstofortytwo/clay">Clay</a></h3>
<aside class="languages">C, x86 Assembly</aside>
</div>
<p>A minimal x86 operating system. Handled tasks like interrupts, timers, paging, while balancing performance and maintainability.</p>
</article>
<article class="project">
<div class="project-title">
<h3><a href="https://github.com/tendstofortytwo/cmdmap">cmdmap</a></h3>
<aside class="languages">Node.js</aside>
</div>
<p>Node module to map CLI programs to a JSON API. Designed abstraction over standard library features for improved security.</p>
</article>
</section>
</main>
</div>
</div>
<script src="js/resume.js"></script>
</body>
</html>

Binary file not shown.

View file

@ -1,106 +0,0 @@
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
% LaTeX Template: Curriculum Vitae
%
% Original template from: http://www.howtotex.com/
% Modified for use by Naman Sood.
%
% Feel free to distribute this template, but please keep the
% referal to HowToTeX.com.
%
% HowToTeX seems to be dead, but the unmodified template can
% be found at:
% https://www.overleaf.com/latex/templates/your-new-cv/xqzhcmqkqrtw
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\usepackage[english]{babel}
\usepackage[utf8]{inputenc}
\usepackage[T1]{fontenc}
\usepackage{lmodern}
\usepackage[protrusion=true]{microtype}
\usepackage[svgnames]{xcolor} % Colours by their 'svgnames'
\usepackage{url}
\usepackage{lmodern} % Allow arbitrary font sizes
\usepackage{textcomp}
\usepackage{hyperref}
\usepackage{enumitem}
\usepackage{sectsty}
\usepackage{fontawesome}
\usepackage{xcolor}
% using arbitrary fonts requires XeLaTeX, but that is
% incompatible with the ATS hack below. uncomment with
% caution
%\usepackage{fontspec}
%\setsansfont{Roboto}
% ATS hack: makes resumes easier to parse for machines
\input{glyphtounicode}
\pdfgentounicode=1
% remove paragraph indents
\setlength\parindent{0pt}
\newcommand{\linkIcon}{{\footnotesize \faExternalLink}}
\newcommand{\MyName}[1]{
\begin{center}
\Huge\usefont{OT1}{phv}{b}{n} #1
\end{center}
\par
}
\newcommand{\NewPart}[1]{
\vspace{-5mm}
\section*{\large \uppercase{#1}}
\vspace{-1mm}
\normalsize
}
\newcommand{\SkillsEntry}[2]{
\baselineskip=14pt\hangindent=0em\hangafter=0
\makebox[1.75cm][l]{
\textbf{#1}
}
\hspace{2em} #2
\par
}
\newcommand{\WorkEntry}[4]{
\textbf{\large #1} \hfill #2 \par
\vspace{0.5mm}
\textit{#3} \par
\hangindent=2em\hangafter=0 #4
\par
}
\newcommand{\EducationEntry}[4]{
\WorkEntry{#1}{#2}{#3}{#4}
}
\newcommand{\ProjectEntry}[4]{
\href{#2}{{\large \textbf{#1}} \linkIcon}
\textit{#3}
\par
\vspace{0.5mm}
#4
\par
}
% reduce large font size a bit
\renewcommand\large{\@setfontsize\Large{11pt}{18}}
% remove page numbers/headers/footers
\pagestyle{empty}
% remove link borders
\hypersetup{pdfborder=0 0 0}
\renewcommand{\familydefault}{\sfdefault}
\setlist[itemize]{leftmargin=*}
% Custom sectioning (sectsty package)
\sectionfont{
\vspace{-1mm}
\usefont{OT1}{phv}{b}{n}
\sectionrule{0pt}{0pt}{-5pt}{1pt}
}