www
/
www-new
12
3
Fork 5
Code Issues 58 Pull Requests 42 Projects Releases Wiki Activity

First draft of internships page
continuous-integration/drone/push Build is failing Details

This commit is contained in:
Ryan Yunchang Zhu 2023-10-25 15:15:13 -04:00
parent 2f382c8cfb
commit 695d57438e
13 changed files with 764 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/Navbar.tsx
View File

@ -98,7 +98,7 @@ const menu: Menu = [
},
{
name: "Internships",
route: "https://github.com/uwcsc/2023-internships",
route: "/resources/internships",
},
],
},

9
content/resources/internships/index.mdx Normal file
View File

@ -0,0 +1,9 @@
import { Bubble } from "@/components/Bubble";
<Bubble>
**Disclaimer**: This resource is primarily for University of Waterloo students who plan on completing a co-op term or internship in a software related position; however, this guide can be used for any post-secondary student and for other similar fields.
This document’s purpose is to serve only as a guide. There are no definitive answers for the whole internship application process, so we recommend you use your judgement and refer to others for additional advice.
</Bubble>

48
content/resources/internships/interview/behavioural.mdx Normal file
View File

@ -0,0 +1,48 @@
- There are tons of questions that you may face as part of the behavioural portion
- This is where you demonstrate your passion, interest, and ability to adapt, learn, and grow
- You should be able to describe every portion of your resume in detail
- More often than not, an interviewer may ask for a bit more clarification about a certain point on your resume
- We’ll cover a few of the common or trickiest questions, but there are a variety you can search up on the internet
### **“Tell me about/Introduce yourself”**
- This is the most common first question you will encounter at any interview
- Pitch/Sell yourself! Show all that’s great about you!
- Start by saying your name, your year, school, and program
- Talk about interests and hobbies, and tie them back to your interest and passion to the field
- Tell a very short story about yourself that allows the employer to see what drives you
- Especially if you may lack some skills, being able to demonstrate your desire to learn and grow may be much more impactful
- Example: Hi! I’m FirstName and I’m a 3rd year Computer Science student at the University of Waterloo! Ever since I was a little kid, I’ve always been curious about the world and how it works, from how a simple click on my smartphone can result in me seeing someone on the other side of the world, which is what led me to start programming and end up here at the University of Waterloo studying computer science. I’ve always had this passion to learn more and contribute to something bigger, which is why I’m here looking to join Company Inc. as a software developer!
### **Behaviour-based question**
- This often comes in the form of “Describe a time when…” or “Tell me about a time when…” or “Give me an example of…”
- The reason why this type of question is used is to see how you tackle a past situation, which may potentially arise in the future, these often include:
- Working under pressure
- Working in a team, especially with conflicts or disagreements
- Completing a task within a given deadline
- Approaching a difficult situation
- To answer these questions, you should use the STAR Method, which can be used to model your answer with the following:
- Situation
- Provide the interviewer with context and background information about the situation you faced
- Use the five Ws (Who, What, When, Where, Why, How)
- Task
- Describe what you needed to do, the goals you had, challenges you expected to face and any expectations of the task
- Action
- Describe what you did and how you did it in relation to tackling the task you mentioned
- Highlight tools and skills you used
- This should be the most extensive part of your answer
- Result
- Discuss the outcome of your actions, in relation to the task
- Describe any accomplishments from your actions, and what you learnt as a result of your actions
### **Negative questions**
- These are questions that usually come in the form of:
- “Tell me about a weakness you have.”
- “What is one time you made a mistake?”
- “Describe when you weren’t able to complete a task within a given deadline.”
- This question is not supposed to put you down, it’s more to test your ability to pull yourself out of a messy situation and be able to adapt, learn, and grow from adversity
- State the negative first, such as your weakness, then talk about how you’re using this weakness to learn and grow into something positive
- Avoid using certain answers that may be seen as more positive than negative or are too broad
- Some answers that are frowned upon are being a perfectionist, being a workaholic, or public speaking

35
content/resources/internships/interview/general.mdx Normal file
View File

@ -0,0 +1,35 @@
- Make sure you understand the question before you answer
- It’s perfectly fine to ask the interviewer for further clarification or ask them to repeat themselves
- It’s also fine, and highly recommended, that you slow down and take time to understand the question in full detail, rather than jumping ahead and answering
- Find the right balance for length in your responses
- Your answers shouldn’t be too long nor should they be too short
- Be precise and to the point
- **DO NOT RAMBLE**
- Be confident in what you say, and stand by what you say
- It looks very bad if you keep backtracking and try to constantly reverse what you say
- If you begin to doubt your answers, **slow down** and think things over
- Be friendly, professional, enthusiastic and show that you’re passionate
- You want this job and the employer knows this
- Remember! The interviewer wants you to succeed, so make it easier for them by being friendly and professional
- Research about the company beforehand
- Ask questions throughout and at the end of the interview (unless specified)
- **ALWAYS BRING A QUESTION TO AN INTERVIEW**
- If you begin to run out of time, you can exclude asking questions
- Otherwise, it shows your interest in the position if you ask questions
- Some safe general questions you can ask include:
- What’s the work/team environment?
- What type of projects will I be working on/have other interns worked on?
- What do you like about (Company Name)?
- What technologies/tools are used here?
- Is this job remote, hybrid, or in-person?
- When will I hear back about this job?
- Don’t ask this question on WaterlooWorks unless it’s direct offer round, as you can refer to the co-op calendar with all the offer dates
- What is the expected salary/compensation?
- **ONLY ASK ON WATERLOOWORKS IF IT’S NOT SPECIFIED**
- CCA not only protects you, but they also recommend you ask
- Describe why you need to know, such as if it’s in-person and you need to consider living accommodations
- Try to word it in such as way that you may be concerned about living conditions as opposed to greed
- Lastly, **go into the interview with the right mindset!**
- More often than not, people walk into an interview being extremely nervous, which is valid but causes them to trip up and leads to the interview being less than ideal
- Breathe! Stay relaxed and grounded
- Whatever the outcome, this is another opportunity for you to practise your skills

13
content/resources/internships/interview/preface.mdx Normal file
View File

@ -0,0 +1,13 @@
## <span>Preparing for and Acing the Interview</span>
The interview process may seem daunting, but it allows for both you and the employer to determine if either of you are a perfect fit for each other. You can see it more of a bidirectional test as opposed to all the pressure being placed on you, the interviewee.
The purpose of the interview for an employer is to see if you’re the perfect fit, as mentioned, as well as truly get to know you and ask more detailed questions about anything, as you only have limited space to talk about yourself on a resume or a cover letter. This is also a time for you to truly demonstrate your mastery or proficiency in a skill.
As mentioned, the interview isn’t only for the employer, it’s also time for you to get to know more about the employer/company and determine if this job is truly something that suits you.
Most, if not all jobs, contain a portion known as the “Behavioural” interview. This is where you would talk about yourself, your interests, hobbies, the reason why you want this job, etc. This portion relies heavily on soft skills and you may need to practise with others to refine your skills.
For software development jobs, you may experience an additional portion known as the “Technical” interview. This is where your hard skills come in, and they’ll ask more specific questions about programming and computer science. You will also need to practise for this, which can be done alone as opposed to the behavioural portion which we recommend that you do with others.
Check out some of our advice below!

26
content/resources/internships/interview/technical.mdx Normal file
View File

@ -0,0 +1,26 @@
- This is where all the hard skills you mentioned on your resume are truly tested, in addition to your critical thinking and problem solving skills
- Depending on the job you apply to, you may be asked questions ranging from something that is extremely concrete to something that is extremely conceptual
- An example of a more concrete question would be “Demonstrate how you would call this API, which returns an array of objects, as a list in React?” or “Determine the number of prime numbers from 2 to N”
- An example of a more conceptual question would be “Describe what a RESTful API is” or “What is the time complexity of deletion in an AVL tree”
#### **Concrete Questions**
- You will most likely encounter this type of technical question in your interview
- Read the question carefully, understand the full question and ask clarification questions about it before proceeding
- People often skip important details in the question, which may change large parameters of the question
- Slow down, get a full understanding, and ask the interviewer anything about the question, as they will fully understand the question and can answer any related questions that may cause you to get stuck
- If you’re given a choice of language, choose one that you’re most comfortable using
- Discuss your approach to the problem prior to beginning
- Wait until the interviewer says you can begin, as they may not have everything set up for you to do the question
- While you’re doing the question, **THINK OUT LOUD**
- The interviewer is more concerned about the process as opposed to the answer
- Even if you make mistakes in your code, if you voice your thoughts, the interviewer may spot errors that are silly mistakes (which may be penalised less than if they didn’t know)
- This also allows the interviewer to help you if you get stuck
- Run some test cases and edges cases, and discuss those edge cases
- There are plenty of websites where you can practise and test yourself prior to the interview, such as LeetCode
#### **Conceptual Questions**
- A lot of these questions are trivia based, where you need extensive knowledge on a given technology, tool, framework, data structure, etc.
- Google is a good resource to go to for these types of questions, as there are a variety of questions that could be asked for your specific job
- Try your best to answer them to the best of your ability, and even if you’re unsure, it’s fine to make an educated guess

29
content/resources/internships/resources/index.mdx Normal file
View File

@ -0,0 +1,29 @@
### **General Resources**
- [CSC Co-op Bootcamp Masterclass W23 Slides](https://docs.google.com/presentation/u/1/d/1P-VZyiUuy5TPnHW-r3dwGZKeGOM4kxXU2RiURTaaUDI/edit)
### **Resume and Cover Letters**
- [Overleaf: Sample resumes and cover letters](https://www.overleaf.com/gallery/tagged/cv)
- Indeed
- [How to Write a Resume](https://ca.indeed.com/career-advice/resumes-cover-letters/how-to-write-a-resume)
- [How to Write an Internship Resume (Template and Example)](https://ca.indeed.com/career-advice/resumes-cover-letters/internship-resume)
- [How to Write a Cover Letter](https://www.freecodecamp.org/news/writing-a-killer-software-engineering-resume-b11c91ef699d/)
- [FreeCodeCamp: Writing a Killer Software Engineering Resume](https://ca.indeed.com/career-advice/resumes-cover-letters/how-to-write-a-cover-letter)
### **Behavioural Interview**
- Indeed
- [37 First Job Interview Questions](https://ca.indeed.com/career-advice/interviewing/first-job-interview-questions)
- [19 Common Interview Questions](https://ca.indeed.com/career-advice/interviewing/interview-questions)
- [10 Behavioural Interview Questions](https://www.indeed.com/career-advice/interviewing/behavioral-interview-questions)
- [How to use the STAR Interview Method](https://ca.indeed.com/career-advice/interviewing/star-interview-method)
- [Tech Interview Handbook: The 30 most common Software Engineer behavioral interview questions](https://www.techinterviewhandbook.org/behavioral-interview-questions/)
### **Technical Interview**
- [CSC x SE Soc S21 Interview Prep Twitch Livestream](https://www.youtube.com/watch?v=HcW_38diePo)
- Tech Interview Handbook
- [Blind 75 LeetCode problems](https://www.techinterviewhandbook.org/grind75)
- [Coding Interview Cheatsheet: Best practicies before, during, and after](https://www.techinterviewhandbook.org/coding-interview-cheatsheet/)
- [LeetCode: Blind 75 LeetCode questions](https://leetcode.com/discuss/general-discussion/460599/blind-75-leetcode-questions)

28
content/resources/internships/resume/appearance.mdx Normal file
View File

@ -0,0 +1,28 @@
- There’s no one template to follow or one template you should use
- There are countless templates you can find online, such as some on Overleaf, on Microsoft Word, etc.
- Some people might want to try to “game the system” by optimising for ATS (Applicant Tracking Systems), but there’s no correct answer for this
- There’s no one text editing software to use
- There’s a debate between using LaTeX as opposed to a WYSIWYG (What you see is what you get) word editor like Microsoft Word
- Using one or the other may have slight advantages, but overall, they make no difference
- The only answer is to use one that you’re comfortable using, as it’s just best to create something that someone can read
- You should use a **single** A4 or Letter page, and be able to fit everything on this one page
- Most people prefer to use narrow margins (1.27cm/0.5”) to fit everything in; however, it is safe to use normal margins (2.54cm/1”)
- Font selection is not much of a concern; however, keep it readable and professional
- This means avoiding fonts such as Comic Sans
- The argument between Sans Serif and Serif fonts doesn’t matter too much, readability matters the most
- Fill your page as much as you can!
- Leaving empty space may leave a bad impression, as it may look like you may not be interested and it doesn’t give an employer enough information to base a decision off of
- Look at the **Sections to Include** section for information to include that you may be missing
- If you’re running out of space on your page…
- Decrease your font size (while maintaining readability)
- So long as your page is readable, it’s perfectly fine to decrease your font size
- Make sure it’s not **cramped** as it can be extremely difficult to distinguish multiple lines of text if the font is too small
- There’s no definitive answer for the minimum size of font you can set, as fonts vary in size, but somewhere between 8pt and 10pt would be considered the bare minimum to be readable
- Decrease spacing between text
- Look out for lines that may only contain a few words
- Some lines may break into multiple lines, with the last line that consist of only a few words
- Try to rephrase that whole point such that it takes up less space, through the removal of some filler words, unnecessary adjectives/adverbs, etc.
- Lastly, you may just have **too much information!**
- You may be describing something in too much detail, may be mentioning too many projects/experiences, etc.
- Don’t overwhelm the reader!
- Remember, **quality > quantity!**

85
content/resources/internships/resume/content.mdx Normal file
View File

@ -0,0 +1,85 @@
You should include the following sections in the following order
1. **Name and Contact Information**
2. **Skills**
3. **Experience and Employment History**
4. **Projects**
5. **Education**
6. **Awards and Certifications**
If you’re applying externally (i.e. outside of the WaterlooWorks platform), then the education section should go above the Skills section
#### **Name and Contact Information**
- Put your full name in large and bold text!
- Include your contact information, primarily your phone number and email
- People may argue that a phone number is not necessary; however, it’s not uncommon for an employer to contact you via phone, so it’s better to include it than not
- For your email, ensure you include a professional looking email
- The most safe option for your email is your school email
- For University of Waterloo students, use your “Friendly Email Address”
- E.g. firstname.lastname123@uwaterloo.ca
- This can be set up at https://uwaterloo.ca/watiam
- Login to your WatIAM
- Click “Manage Email Address”
- Select your “Friendly Email Address”
- Click Submit
- This makes it easier for a recruiter to remember your email and identify you based off your email
- If you wish to use a personal email address as opposed to your school email, then your email should only consist of your full name, one or two additional symbols, and a few numbers
- Include links to any of your portfolios and your LinkedIn
- Your LinkedIn should utilise a custom Profile URL consisting of your full name as well, which makes it easier to access as opposed to a random assortment of characters
- E.g. linkedin.com/in/firstname-lastname
- Your main portfolio link to include would be your preferred Git repository website(s), such as GitHub or GitLab
- And include any other additional portfolio pages that may be applicable to a job posting
#### **Skills**
- For software development jobs, you should only include hard skills such as languages, tools, frameworks, and libraries
- Avoid including built-in libraries that are part of a programming language (such as the os library in Python), or API libraries (such as Discord.js)
- If you’re wondering if you know a skill well enough to put it on, think whether…
- Worked with it during a co-op
- You’ve done a project with it
- Could answer questions on it if asked during an interview
- You are comfortable with it?
- If you’ve answered yes to these questions, then you should include it
#### **Experience and Employment History**
- You should ideally only include experiences and employment history that have some relevance to your desired industry
- If you have other experiences, you may need to consider whether to include it as opposed to saving space for other sections
- An example would be considering between mentioning an experience working in retail as opposed to a project you worked on during a hackathon
- It may be preferable to include your project as opposed to your job experience if you begin to run out of space
- For all the experiences you list, mention the employer, your job title, the time that you worked in this position, and the location of this position
- Give a description of what you’ve done at this job, what languages/tools/libraries/frameworks you used, and you’ve accomplished
- Highlight some of the things that you may have improved or any successes that occurred
- Some people may argue that you can include extracurriculars and volunteer experience
- Only include it if you have skills and experience that are relevant to the job you’re applying to AND you don’t have other projects or experiences you can mention
- You should order your experiences/history from most recent to least recent
#### **Projects**
- Include a link to all your projects
- Mention everything you’ve used such as your language, frameworks, libraries, tools, etc.
- It’s unnecessary to mention Git as a tool here, especially if you link to a Git repository
- Describe what was done, what you accomplished, any successes, etc.
#### **Education**
- Mention your degree(s), program(s) and specialisation(s)/option(s)
- Example: Bachelor of Mathematics - Honours Computer Science Co-op (Bioinformatics Specialization), Combinatorics and Optimization
- Include your school and graduation date
- Graduation date may not be applicable if you’re a first and second year as some jobs only give offers to third years and above
- If you’re a University of Waterloo co-op student and plan to apply externally (outside of WaterlooWorks), then you should only state your planned graduation date as a regular graduation date as opposed to the co-op graduation date (4 years ahead as opposed to 5 years ahead in co-op)
- If you have a high average and GPA (average >=80% and GPA >=3.8), you should include them
- If you don’t have a high average/GPA, it’s fine to exclude it
- GPA is an iffy topic at Waterloo, due to the fact there’s no official conversion at Waterloo
- If you’re a Waterloo student and wish to calculate your GPA, you can use the GPA conversion table from OUAC (Ontario Universities’ Application Centre) or an online converter
- One website includes https://whatsmygpa.ca
- You **convert** your overall average directly into GPA, you must convert the grade of each course into a GPA value then you can calculate an average from there
- The main difference between a GPA and an average is GPA shows consistency in your performance as opposed to average which shows your overall performance
- Include some of the relevant courses to the jobs you’re applying to
- If you’re a first/second year student, you may have difficulty with this; however, if you have partially completed a course and on track to complete it, it is generally safe to include it
#### **Awards and Certifications**
- This section is often excluded by many people, and depending on the jobs you’re applying for, you may also exclude this section
- You should avoid including common awards, such as the University of Waterloo President’s Scholarship
- Highlight the prestige of a given award, such as being in the top percentile of a given population

9
content/resources/internships/resume/general.mdx Normal file
View File

@ -0,0 +1,9 @@
- Follow the KISS principle
- KISS - Keep it simple, stupid!
- Often times, people try to cram in as much information, but being direct and straight to the point makes it easier to read
- The employer, more often than not, has hundreds of resume to go through and may only have a few seconds to read through an entire resume, so simplicity is often preferred as extra details may be overlooked
- All the description you include on your resume should be short, simple, concise, and to the point
- Make sure they’re relevant to the job posting
- It’s common for descriptions to start with a verb
- Highlight any metrics as it’s easy for people to understand
- Bold these in your resume so they catch the attention of the employer

3
content/resources/internships/resume/preface.mdx Normal file
View File

@ -0,0 +1,3 @@
Your resume is the first thing an employer sees and the main thing that the employer will use to base their decision to interview you off of. You will need to make a good first impression to show that you’re the ideal candidate and that you have all the skills and qualifications necessary for the jobs you’re applying for.
Although anyone can state that they have the necessary qualifications and skills for a given job, you must demonstrate your ability through past experiences and/or projects, and describe them in detail to cement your skills.

144
pages/resources/internships/index.module.css Normal file
View File

@ -0,0 +1,144 @@
.page {
margin: calc(20rem / 16) 0 calc(60rem / 16);
}
.title {
height: calc(80rem / 14);
padding-left: calc(20rem / 16);
color: var(--primary-title);
margin-top: 3rem;
}
.content {
color: var(--text);
}
.content span {
color: var(--primary-accent);
}
.titleContainer {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: flex-start;
max-width: calc(800rem / 16);
margin: 0 auto;
overflow-y: clip;
overflow-x: clip;
height: calc(200rem / 16);
}
.codey {
z-index: -1;
height: calc(400rem / 20);
}
.selectorContainer {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid var(--light--author-text);
width: calc(61.52vw + 124.3px);
margin: calc(20rem / 16) auto;
}
.selector {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
margin: 0;
padding: calc(10rem / 16);
border-top-left-radius: calc(10rem / 16);
border-top-right-radius: calc(10rem / 16);
background-color: transparent;
color: var(--primary-accent);
font-size: calc(1.716vw + 7.566px);
font-weight: 700;
cursor: pointer;
width: calc(100% / 3);
border: none;
font-family: var(--font-mono);
transition: background-color 0.2s ease-out;
}
.selector:hover {
background-color: var(--dark--primary-accent-lightest);
}
.selected {
background-color: var(--light--author-text);
}
.selected:hover {
background-color: var(--light--author-text);
}
.subpagesWrapper {
overflow-x: hidden;
margin: calc(20rem / 14) calc(0.1924 * 100vw - 62.15px);
}
.subpagesContainer {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-template-rows: repeat(1, minmax(0, 1fr));
width: calc(3 * (61.52vw + 124.3px));
transition: transform 0.6s cubic-bezier(0.88, 0.1, 0.64, 0.95);
}
.subpage0 {
transform: translateX(0);
}
.subpage1 {
transform: translateX(calc(-1 * (61.52vw + 124.3px)));
}
.subpage2 {
transform: translateX(calc(-2 * (61.52vw + 124.3px)));
}
.subpageContainer {
padding: 10px;
margin: 0 10px;
overflow-y: hidden;
transition: all 2.5s cubic-bezier(0.95, 0.34, 0, 1);
}
.subpage {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
}
@media only screen and (max-width: calc(768rem / 16)) {
.page {
margin-bottom: calc(30rem / 16);
}
.titleContainer {
display: flex;
flex-direction: column;
align-items: center;
max-width: calc(800rem / 16);
margin: 0 auto;
overflow-y: clip;
height: calc(130rem / 16);
}
.title {
padding-left: 0;
}
.content ul {
padding-left: calc(20rem / 16);
}
.content ol {
padding-left: calc(16rem / 16);
}
.codey {
width: calc(140rem / 16);
height: calc(124rem / 16);
padding-left: calc(30rem / 16);
}
}

334
pages/resources/internships/index.tsx Normal file
View File

@ -0,0 +1,334 @@
import React from "react";
import { ConnectWithUs } from "@/components/ConnectWithUs";
import { DefaultLayout } from "@/components/DefaultLayout";
import { EmailSignup } from "@/components/EmailSignup";
import { Image } from "@/components/Image";
import {
GetShapesConfig,
mobileShapesConfig,
} from "@/components/ShapesBackground";
import { Title } from "@/components/Title";
import Header from "../../../content/resources/internships/index.mdx";
import ResumePreface from "../../../content/resources/internships/resume/preface.mdx";
import ResumeGeneral from "../../../content/resources/internships/resume/general.mdx";
import ResumeAppearance from "../../../content/resources/internships/resume/appearance.mdx";
import ResumeContent from "../../../content/resources/internships/resume/content.mdx";
import InterviewPreface from "../../../content/resources/internships/interview/preface.mdx";
import InterviewGeneral from "../../../content/resources/internships/interview/general.mdx";
import InterviewBehavioural from "../../../content/resources/internships/interview/behavioural.mdx";
import InterviewTechnical from "../../../content/resources/internships/interview/technical.mdx";
import Resources from "../../../content/resources/internships/resources/index.mdx";
import styles from "./index.module.css";
export default function Internships() {
const [currentSubpage, setCurrentSubpage] = React.useState(1);
const [currentResumePage, setCurrentResumePage] = React.useState(0);
const [currentInterviewPage, setCurrentInterviewPage] = React.useState(0);
return (
<>
<Title>Internships</Title>
<div className={styles.titleContainer}>
<h1 className={styles.title}>Internship Guide and Resources</h1>
<Image src="/images/about-us.svg" className={styles.codey} />
</div>
<div className={styles.content}>
<Header />
</div>
<div className={styles.selectorContainer}>
{["Resume", "Interview", "Resources"].map((name, i) => (
<button
className={
styles.selector +
" " +
(currentSubpage === i ? styles.selected : "")
}
key={name}
onClick={() => {
setCurrentSubpage(i);
}}
>
{name}
</button>
))}
</div>
<div className={styles.subpagesWrapper}>
<div
className={
styles.subpagesContainer +
" " +
(currentSubpage === 0
? styles.subpage0
: currentSubpage === 1
? styles.subpage1
: styles.subpage2)
}
>
<div className={styles.subpageContainer}
style={{
maxHeight: currentSubpage === 0 ? "100%" : "0",
}}
>
<div className={styles.subpage}>
<ResumePreface />
</div>
<div
className={styles.selectorContainer}
style={{
width: "100%",
}}
>
{["General", "Appearance", "Content"].map((name, i) => (
<button
className={
styles.selector +
" " +
(currentResumePage === i ? styles.selected : "")
}
key={name}
onClick={() => {
setCurrentResumePage(i);
}}
>
{name}
</button>
))}
</div>
<div
className={styles.subpagesWrapper}
style={{
width: "100%",
margin: "0 auto",
}}
>
<div
className={
styles.subpagesContainer +
" " +
(currentResumePage === 0
? styles.subpage0
: currentResumePage === 1
? styles.subpage1
: styles.subpage2)
}
>
<div
className={styles.subpageContainer}
style={{
maxHeight: currentResumePage === 0 ? "100%" : "0",
}}
>
<div className={styles.subpage}>
<ResumeGeneral />
</div>
</div>
<div
className={styles.subpageContainer}
style={{
maxHeight: currentResumePage === 1 ? "100%" : "0",
}}
>
<div className={styles.subpage}>
<ResumeAppearance />
</div>
</div>
<div
className={styles.subpageContainer}
style={{
maxHeight: currentResumePage === 2 ? "100%" : "0",
}}
>
<div className={styles.subpage}>
<ResumeContent />
</div>
</div>
</div>
</div>
</div>
<div className={styles.subpageContainer}
style={{
maxHeight: currentSubpage === 1 ? "100%" : "0",
}}
>
<div className={styles.subpage}>
<InterviewPreface />
</div>
<div
className={styles.selectorContainer}
style={{
width: "100%",
}}
>
{["General", "Behavioural", "Technical"].map((name, i) => (
<button
className={
styles.selector +
" " +
(currentInterviewPage === i ? styles.selected : "")
}
key={name}
onClick={() => {
setCurrentInterviewPage(i);
}}
>
{name}
</button>
))}
</div>
<div
className={styles.subpagesWrapper}
style={{
width: "100%",
margin: "0 auto",
}}
>
<div
className={
styles.subpagesContainer +
" " +
(currentInterviewPage === 0
? styles.subpage0
: currentInterviewPage === 1
? styles.subpage1
: styles.subpage2)
}
>
<div
className={styles.subpageContainer}
style={{
maxHeight: currentInterviewPage === 0 ? "100%" : "0",
}}
>
<div className={styles.subpage}>
<InterviewGeneral />
</div>
</div>
<div
className={styles.subpageContainer}
style={{
maxHeight: currentInterviewPage === 1 ? "100%" : "0",
}}
>
<div className={styles.subpage}>
<InterviewBehavioural />
</div>
</div>
<div
className={styles.subpageContainer}
style={{
maxHeight: currentInterviewPage === 2 ? "100%" : "0",
}}
>
<div className={styles.subpage}>
<InterviewTechnical />
</div>
</div>
</div>
</div>
</div>
<div
className={styles.subpageContainer}
style={{
maxHeight: currentSubpage === 2 ? "100%" : "0",
}}
>
<div className={styles.subpage}>
<Resources />
</div>
</div>
</div>
</div>
<DefaultLayout>
<ConnectWithUs />
<EmailSignup />
</DefaultLayout>
</>
);
}
Internships.Layout = function InternshipsLayout(props: { children: React.ReactNode }) {
return <div className={styles.page}>{props.children}</div>;
};
Internships.getShapesConfig = (() => {
const desktopConfig = {
cross: [
{
top: "calc(16rem / 16)",
left: "calc(-78rem / 16)",
width: "calc(150rem / 16)",
height: "calc(150rem / 16)",
transform: "rotate(30deg)",
},
],
dots: [
{
top: "calc(520rem / 16)",
right: "calc(-120rem / 16)",
width: "calc(292rem / 16)",
height: "calc(330rem / 16)",
transform: "rotate(-29deg)",
},
],
hash: [
{
top: "calc(528rem / 16)",
left: "60vw",
width: "calc(60rem / 16)",
height: "calc(60rem / 16)",
},
{
bottom: "calc(440rem / 16)",
right: "84vw",
width: "calc(60rem / 16)",
height: "calc(60rem / 16)",
},
],
triangle: [
{
top: "calc(554rem / 16)",
right: "80vw",
width: "calc(68rem / 16)",
height: "calc(68rem / 16)",
transform: "rotate(-26deg)",
},
{
top: "calc(2190rem / 16)",
right: "4vw",
width: "calc(68rem / 16)",
height: "calc(68rem / 16)",
transform: "rotate(-26deg)",
},
],
waves: [
{
top: "calc(1300rem / 16)",
left: "2vw",
width: "calc(102rem / 16)",
height: "calc(50rem / 16)",
},
],
wavesBig: [
{
top: "calc(42rem / 16)",
right: "calc(-160rem / 16)",
width: "calc(376rem / 16)",
height: "calc(132rem / 16)",
},
{
bottom: "calc(40rem / 16)",
left: "calc(-174rem / 16)",
width: "calc(376rem / 16)",
height: "calc(132rem / 16)",
},
],
};
if (window.innerWidth <= 768) {
return mobileShapesConfig;
}
return desktopConfig;
}) as GetShapesConfig;