Redesign internships pages
continuous-integration/drone/push Build is failing
Details
continuous-integration/drone/push Build is failing
Details
This commit is contained in:
parent
e0740e123f
commit
0b00dc5d7f
|
|
@ -46,5 +46,10 @@
|
|||
"other": "off"
|
||||
},
|
||||
"editor.tabSize": 4
|
||||
},
|
||||
"[javascript][javascriptreact][typescript][typescriptreact]": {
|
||||
"editor.codeActionsOnSave": {
|
||||
"source.fixAll.eslint": "explicit"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -112,7 +112,7 @@ const menu: Menu = [
|
|||
route: "/resources/internships/resources",
|
||||
},
|
||||
],
|
||||
route: "/resources/internships/resume",
|
||||
route: "/resources/internships",
|
||||
},
|
||||
],
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,145 +0,0 @@
|
|||
.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(50.52vw + 124.3px);
|
||||
margin: calc(20rem / 16) auto;
|
||||
}
|
||||
|
||||
.selector {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 0;
|
||||
margin-bottom: calc(10rem / 16);
|
||||
padding: calc(10rem / 16);
|
||||
border-top-left-radius: calc(10rem / 16);
|
||||
border-top-right-radius: calc(10rem / 16);
|
||||
background-color: transparent;
|
||||
color: var(--text);
|
||||
font-size: calc(0.7vw + 7.566px);
|
||||
font-weight: 400;
|
||||
cursor: pointer;
|
||||
width: calc(100% / 3);
|
||||
border: none;
|
||||
font-family: var(--font-mono);
|
||||
transition: background-color 0.2s ease-out;
|
||||
}
|
||||
.selector:hover {
|
||||
color: var(--link-hover);
|
||||
}
|
||||
.selected {
|
||||
color: var(--primary-accent);
|
||||
}
|
||||
.selected:hover {
|
||||
color: var(--primary-accent);
|
||||
}
|
||||
|
||||
.subpagesWrapper {
|
||||
overflow-x: hidden;
|
||||
margin: 0 calc(0.1924 * 100vw);
|
||||
}
|
||||
|
||||
.subpagesContainer {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
grid-template-rows: repeat(1, minmax(0, 1fr));
|
||||
width: calc(3 * (50.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 * (50.52vw + 124.3px)));
|
||||
}
|
||||
.subpage2 {
|
||||
transform: translateX(calc(-2 * (50.52vw + 124.3px)));
|
||||
}
|
||||
|
||||
.subpageContainer {
|
||||
padding: 10px;
|
||||
margin: 0 10px;
|
||||
overflow-y: hidden;
|
||||
transition: all 6s 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);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,180 +1,10 @@
|
|||
import Head from "next/head";
|
||||
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 Resume from "../../../content/resources/internships/resume.mdx";
|
||||
import Interview from "../../../content/resources/internships/interview.mdx";
|
||||
import Resources from "../../../content/resources/internships/resources.mdx";
|
||||
|
||||
|
||||
import styles from "./index.module.css";
|
||||
|
||||
export default function Internships() {
|
||||
const [currentSubpage, setCurrentSubpage] = React.useState(1);
|
||||
export default function AdviceRedirect() {
|
||||
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}>
|
||||
<Resume />
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className={styles.subpageContainer}
|
||||
style={{
|
||||
maxHeight: currentSubpage === 1 ? "100%" : "0",
|
||||
}}
|
||||
>
|
||||
<div className={styles.subpage}>
|
||||
<Interview />
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className={styles.subpageContainer}
|
||||
style={{
|
||||
maxHeight: currentSubpage === 2 ? "100%" : "0",
|
||||
}}
|
||||
>
|
||||
<div className={styles.subpage}>
|
||||
<Resources />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
<Head>
|
||||
<meta httpEquiv="refresh" content="0;url=/resources/internships/internships" />
|
||||
</Head>
|
||||
);
|
||||
}
|
||||
|
||||
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;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,75 @@
|
|||
.titleContainer {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
padding-bottom: calc(32rem / 16);
|
||||
border-bottom: calc(1rem / 16) solid var(--border);
|
||||
}
|
||||
|
||||
.title {
|
||||
padding-right: calc(40rem / 16);
|
||||
color: var(--primary-title);
|
||||
}
|
||||
|
||||
.adviceBarContainer {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
padding-top: calc(24rem / 16);
|
||||
}
|
||||
|
||||
.adviceBarContainer > a {
|
||||
margin-right: calc(48rem / 16);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.adviceBarContainer a:link {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a.currentAdvice {
|
||||
color: var(--primary-accent);
|
||||
}
|
||||
|
||||
.adviceBarContainer a:hover {
|
||||
color: var(--link-hover);
|
||||
}
|
||||
|
||||
.content {
|
||||
padding-bottom: calc(48rem / 16);
|
||||
}
|
||||
|
||||
.content h3 {
|
||||
color: var(--primary-subtitle);
|
||||
}
|
||||
|
||||
.content h4 {
|
||||
color: var(--secondary-subtitle);
|
||||
}
|
||||
|
||||
@media only screen and (max-width: calc(768rem / 16)) {
|
||||
.titleContainer {
|
||||
flex-direction: column-reverse;
|
||||
align-items: center;
|
||||
padding-bottom: unset;
|
||||
}
|
||||
|
||||
.title {
|
||||
padding-right: unset;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.adviceBarContainer {
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.adviceBarContainer > a {
|
||||
margin: unset;
|
||||
}
|
||||
|
||||
.codey {
|
||||
width: calc(140rem / 16);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,70 @@
|
|||
import Link from "next/link";
|
||||
import { useRouter } from "next/router";
|
||||
import React, { ReactNode } from "react";
|
||||
|
||||
import { Image } from "@/components/Image";
|
||||
import { Title } from "@/components/Title";
|
||||
|
||||
import Content from "../../../content/resources/internships/interview.mdx";
|
||||
|
||||
import styles from "./internships.module.css";
|
||||
|
||||
export default function InternshipAdvice() {
|
||||
return (
|
||||
<>
|
||||
<Title>Co-op Advice</Title>
|
||||
<Internships>
|
||||
<Content />
|
||||
</Internships>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export function Internships(props: { children: ReactNode }) {
|
||||
const router = useRouter();
|
||||
const path = router.pathname;
|
||||
return (
|
||||
<>
|
||||
<div className={styles.titleContainer}>
|
||||
<h1 className={styles.title}>Internship Guide and Resources</h1>
|
||||
<Image src="/images/advice.svg" className={styles.codey} />
|
||||
</div>
|
||||
<div className={styles.adviceBarContainer}>
|
||||
<Link href="/resources/internships/resume">
|
||||
<a
|
||||
className={
|
||||
path == "/resources/internships/resume"
|
||||
? styles.currentAdvice
|
||||
: ""
|
||||
}
|
||||
>
|
||||
Creating Your Resume
|
||||
</a>
|
||||
</Link>
|
||||
<Link href="/resources/internships/interview">
|
||||
<a
|
||||
className={
|
||||
path == "/resources/internships/interview"
|
||||
? styles.currentAdvice
|
||||
: ""
|
||||
}
|
||||
>
|
||||
Acing Your Interview
|
||||
</a>
|
||||
</Link>
|
||||
<Link href="/resources/internships/resources">
|
||||
<a
|
||||
className={
|
||||
path == "/resources/internships/resources"
|
||||
? styles.currentAdvice
|
||||
: ""
|
||||
}
|
||||
>
|
||||
More Resources
|
||||
</a>
|
||||
</Link>
|
||||
</div>
|
||||
<div className={styles.content}>{props.children}</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
import React from "react";
|
||||
|
||||
import { Title } from "@/components/Title";
|
||||
|
||||
import Content from "../../../content/resources/internships/interview.mdx";
|
||||
import { Internships } from "./internships";
|
||||
|
||||
export default function Interview() {
|
||||
return (
|
||||
<>
|
||||
<Title>Interview Tips</Title>
|
||||
<Internships>
|
||||
<Content />
|
||||
</Internships>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
import React from "react";
|
||||
|
||||
import { Title } from "@/components/Title";
|
||||
|
||||
import Content from "../../../content/resources/internships/resources.mdx";
|
||||
import { Internships } from "./internships";
|
||||
|
||||
export default function Resources() {
|
||||
return (
|
||||
<>
|
||||
<Title>Resources</Title>
|
||||
<Internships>
|
||||
<Content />
|
||||
</Internships>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
import React from "react";
|
||||
|
||||
import { Title } from "@/components/Title";
|
||||
|
||||
import Content from "../../../content/resources/internships/resume.mdx";
|
||||
import { Internships } from "./internships";
|
||||
|
||||
export default function Resume() {
|
||||
return (
|
||||
<>
|
||||
<Title>Resume Tips</Title>
|
||||
<Internships>
|
||||
<Content />
|
||||
</Internships>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in New Issue