Merge pull request #45 from ugglr/wizards/remote-ready-test

Wizards/remote-ready-test

components/Card.module.scss

@@ -1,49 +1,52 @@
 @import "../styles/colors";
 
-.link {
-  border-radius: 20px;
-  display: flex;
-  max-width: 50vw;
-  margin-bottom: 3rem;
-  padding: 1.5rem;
-  background-color: $offBlack;
-
-  border: 2px solid $offBlack;
-
-  &:hover {
-    border-color: $lightPurple;
-  }
-}
-
 .card {
-  flex: 1;
   align-items: center;
+  background-color: $offBlack;
+  border-radius: 20px;
   display: flex;
+  padding: 12px 16px;
+  max-width: 600px;
   justify-content: space-between;
+  margin-bottom: 16px;
 }
-
-.left {
-  flex: 9;
+.leftContainer {
+  max-width: 82%;
 }
 .title {
-  font-size: 2vw;
-  margin-bottom: 1rem;
+  font-size: 1.5rem;
+  margin-bottom: 4px;
 }
-
-.body {
-  font-size: 1.3rem;
+.subtitle {
+  font-size: 0.8rem;
+  font-style: italic;
+  margin: 0;
 }
 
-.middleMargin {
-  flex: 0.5;
+.arrow {
+  align-items: center;
+  background-color: $lightBlack;
+  border-radius: 25px;
+  font-size: 1.5rem;
+  display: flex;
+  height: 50px;
+  flex-shrink: 0;
+  justify-content: center;
+  width: 50px;
+}
+.arrow:hover {
+  border: 2px solid $pink;
 }
 
-.right {
-  display: flex;
-  flex: 1;
-  justify-content: flex-end;
+.body {
+  height: 0;
+  overflow: hidden;
+}
+.bodyExpanded {
+  height: auto;
 }
 
-.arrow {
-  font-size: 2vw;
+.btn {
+  color: $purple;
+  margin-top: 8px;
 }

components/Card.tsx

@@ -1,24 +1,43 @@
+import { useState } from "react";
 import styles from "./Card.module.scss";
 
 type Props = {
   title: string;
   body: string;
   link: string;
 };
-const Card: React.FC<Props> = ({ title, body, link }) => (
-  // Keep referrer so sites can see where traffic is coming from.
-  // eslint-disable-next-line react/jsx-no-target-blank
-  <a href={link} className={styles.link} target="_blank" rel="noopener">
+const Card: React.FC<Props> = ({ title, body, link }) => {
+  const [expanded, setExpanded] = useState<boolean>(false);
+
+  return (
     <div className={styles.card}>
-      <div className={styles.left}>
+      <div className={styles.leftContainer}>
         <h3 className={styles.title}>{title}</h3>
-        <p className={styles.body}>{body}</p>
+        <p className={styles.subtitle}>{link}</p>
+
+        <div
+          className={[styles.body, expanded && styles.bodyExpanded].join(" ")}
+        >
+          <p>{body}</p>
+        </div>
+
+        <button
+          className={styles.btn}
+          type="button"
+          onClick={() => setExpanded((e) => !e)}
+        >
+          {expanded ? "collapse" : "See short description..."}
+        </button>
       </div>
-      <div className={styles.right}>
-        <h3 className={styles.arrow}>→</h3>
+
+      <div>
+        {/* eslint-disable-next-line react/jsx-no-target-blank */}
+        <a href={link} className={styles.link}>
+          <div className={styles.arrow}>→</div>
+        </a>
       </div>
     </div>
-  </a>
-);
+  );
+};
 
 export default Card;

components/CategoryCard.module.scss

@@ -0,0 +1,55 @@
+@import "../styles/colors";
+
+.link {
+  margin-bottom: 16px;
+  :hover {
+    border-color: $pink;
+
+    .btn {
+      border: 2px solid $pink;
+    }
+  }
+}
+
+.content {
+  display: flex;
+  justify-content: space-between;
+  background-color: $offBlack;
+  border: 2px solid $lightPurple;
+  border-radius: 20px;
+  padding: 2rem 1.5rem;
+  width: 400px;
+  height: 210px;
+}
+
+.title {
+  font-size: 1.8rem;
+  margin-bottom: 1.5rem;
+}
+.body {
+  font-size: 1.1rem;
+  max-width: 80%;
+}
+
+.spacing {
+  width: 2rem;
+}
+
+.btn {
+  align-self: center;
+  align-items: center;
+  background-color: $lightBlack;
+  border-radius: 25px;
+  display: flex;
+  flex-shrink: 0;
+  height: 50px;
+  font-size: 2rem;
+  justify-content: center;
+  width: 50px;
+}
+@media only screen and (max-width: 1000px) {
+  .content {
+    height: auto;
+    width: 80vw;
+  }
+}

components/CategoryCard.tsx

@@ -0,0 +1,24 @@
+import Link from "next/link";
+import styles from "./CategoryCard.module.scss";
+
+type Props = {
+  title: string;
+  body: string;
+  href: string;
+};
+const CategoryCard: React.FC<Props> = ({ title, body, href = "/" }) => (
+  <Link {...{ href }}>
+    <a className={styles.link}>
+      <div className={styles.content}>
+        <div>
+          <h3 className={styles.title}>{title}</h3>
+          <p className={styles.body}>{body}</p>
+        </div>
+
+        <div className={styles.btn}>→</div>
+      </div>
+    </a>
+  </Link>
+);
+
+export default CategoryCard;

components/PageHero.module.scss

@@ -0,0 +1,29 @@
+.container {
+  padding: 5rem 0;
+}
+
+.title {
+  font-size: 5rem;
+}
+
+.subtitle {
+  font-size: 2rem;
+  margin-top: 3rem;
+  max-width: 70%;
+}
+
+@media only screen and (max-width: 900px) {
+  .container {
+    padding: 2.5rem 0;
+  }
+}
+
+@media only screen and (max-width: 650px) {
+  .title {
+    font-size: 4rem;
+  }
+  .subtitle {
+    font-size: 1.5rem;
+    max-width: 100%;
+  }
+}

components/PageHero.tsx

@@ -0,0 +1,16 @@
+import styles from "./PageHero.module.scss";
+
+type Props = {
+  title: string;
+  title2?: string;
+  subtitle?: string;
+};
+const PageHero: React.FC<Props> = ({ title, title2 = "", subtitle = "" }) => (
+  <div className={styles.container}>
+    <h1 className={styles.title}>{title}</h1>
+    {title2 && <h1 className={styles.title}>{title2}</h1>}
+    {subtitle && <h2 className={styles.subtitle}>{subtitle}</h2>}
+  </div>
+);
+
+export default PageHero;

content/checklists/remoteReady.ts

@@ -0,0 +1,104 @@
+export type Step = {
+  title: string;
+  body: string;
+  question: string;
+};
+
+export const stepsMap = new Map<string, Step>([
+  [
+    "github",
+    {
+      title: "Github",
+      body: "Those green squares matter because they can showcase consistent code pushing for long periods of time. Pick projects with intent. E.g. If you want to land a frontend web development position, then pick projects related to that with increasing difficulty",
+      question: "Are you pushing code consistently to git?",
+    },
+  ],
+  [
+    "open-source",
+    {
+      title: "Open-source",
+      body: "This might sound daunting for anyone to get into but it truly makes all the difference. It does not matter how small of a contribution you are making, correct some docs, fix grammar problems. You can make repositories where you collect resources (like this one), learnings, developer logs, etc. These things are the fundamentals that you can build upon right when you start.",
+      question: "Are you engaging in open-source?",
+    },
+  ],
+  [
+    "portfolio",
+    {
+      title: "Portfolio / Personal Site",
+      body: "Make sure that your personal site looks alright, all links working, no typos, easy structure for visitors to find the information they are looking for. All projects linked should have a GitHub link for the source code and hosted version.",
+      question: "Do you have a nice portfolio?",
+    },
+  ],
+  [
+    "blog",
+    {
+      title: "Start blogging",
+      body: "Writing about your daily progress is a win-win situation. You help others struggling with the same thing, you help yourself understand it better, and you take steps towards building your developer brand. A potential hiring party can go in and see your progress and they can see how you communicate ideas or code to others, further they can see a glimpse of who you are and build a perception of you as a person.",
+      question: "Do you write technical blog posts?",
+    },
+  ],
+  [
+    "internet",
+    {
+      title: "Stable internet",
+      body: "It sounds like a no-brainer but when working remotely it becomes very clear when someones connection is not great. Would you hire someone to work for you remotely if they keep disconnecting? probably not.",
+      question: "Do you have a stable internet connection?",
+    },
+  ],
+  [
+    "screen-sharing",
+    {
+      title: "Screen sharing",
+      body: "As a remote developer, you'll be sharing your screen a lot. Our computers are very private, and normally no one sees the things you keep there. Keep an SFW version of it, in case you need to share it unexpectedly.",
+      question: "Are you comfortable sharing your screen?",
+    },
+  ],
+  [
+    "communication",
+    {
+      title: "Communication",
+      body: "The ability to explain code clearly and concisely and talk about complex topics. Code is sometimes difficult to explain because we are not used to talking while we code and our mind-maps of how things fit together will be unique to you. However, no one will hire you if you can not explain what you are doing.",
+      question: "Are you able to communicate clearly with people remotely?",
+    },
+  ],
+  [
+    "responsiveness",
+    {
+      title: "Responsiveness",
+      body: "Be alert, be present, and answer questions within a reasonable amount of time on Slack or Email. And turn everything off during your interview.",
+      question: "Are you able to be very responsive?",
+    },
+  ],
+  [
+    "environment",
+    {
+      title: "Calm Environment",
+      body: "If you have constant background noise, like motorcycles, trucks, vacuum cleaners, and screaming, (you get the point), You will not be liked in your everyday meetings. Dare I say low-key hated? So, find a quiet spot to work.",
+      question: "Do you have access to a calm work environment?",
+    },
+  ],
+  [
+    "voice-quality",
+    {
+      title: "Voice Quality",
+      body: "This ties into the above row, but if your microphone is bad, buy a new one. Record yourself, listen to it and you'll understand what the other side is hearing.",
+      question: "Do you have good voice quality?",
+    },
+  ],
+  [
+    "energy",
+    {
+      title: "Energy",
+      body: "You want to send a lot of positive energy to the person you are talking to. You have to be interested in what you do and like to talk about things related to the field. Don't be a bigot, asshole, racist, or show other negative characteristics. At least pretend...",
+      question: "Are you able to send positive energy through a computer?",
+    },
+  ],
+  [
+    "mindset",
+    {
+      title: "Growth mindset",
+      body: "If there's something you don't know, come clean and say that you have not used that technology yet. It shows that you know what you don't know, and explain that you are willing to learn that asap if that's a required skill. Maybe fire up a new repo and do something with it, and send it soon after the meeting ended. It shows you are a self-starter and can learn new things when required.",
+      question: "Are you willing to continuously learn?",
+    },
+  ],
+]);

content/slackChannels.ts → content/communities.ts

@@ -1,4 +1,4 @@
-const slackChannels: Array<{ name: string; body: string; url: string }> = [
+const communities: Array<{ name: string; body: string; url: string }> = [
   {
     name: "Remotive",
     body: "Paid community, but active and friendly, the founder is always out looking for new companies and quite a bit of recruiting people are sitting in the channels.",
@@ -7,7 +7,7 @@ const slackChannels: Array<{ name: string; body: string; url: string }> = [
   {
     name: "CodingCoach",
     body: "Not so much a community for job-hunting but a great place to find help from more experienced software developers.",
-    url: "https://join.slack.com/t/coding-coach/shared_invite/enQtNDYxNTcwMjk4MDcwLThiZjY1MTM2YTU1YzM2MGI1N2Y1NDI3ZGM1MGRhNjdiZjU0MzE1YjMxZjdlZmVlNDdhNmFhN2RhNGIxZmE1YTI",
+    url: "https://join.slack.com/t/coding-coach/shared_invite/zt-15kky1m4x-JrrLzQevCLkdyZiaqT_DTg",
   },
   {
     name: "DevChat",
@@ -21,4 +21,4 @@ const slackChannels: Array<{ name: string; body: string; url: string }> = [
   },
 ];
 
-export default slackChannels;
+export default communities;

content/index.ts

@@ -1,4 +1,4 @@
 export { default as companies } from "./companies";
 export { default as freelancePlatforms } from "./freelancePlatforms";
 export { default as jobBoards } from "./jobBoards";
-export { default as slackChannels } from "./slackChannels";
+export { default as communities } from "./communities";