fixing typing line break bug

Author: cxjohn

src/components/HeadingText.js

@@ -1,30 +1,20 @@
 import LoadOnView from "../utils/LoadOnView";
 import Typing from "./Typing";
 
-export default function HeadingText({ text, title, subheading, classes, idx }) {
+export default function HeadingText({ text, subheading, classes, idx }) {
   return (
-    <>
-      {title ? (
-        <h1 className="text-[50px] lg:text-[100px] tracking-tight font-heading leading-tight min-h-[187.5px] md:min-h-0 lg:min-h-[250px] lg:max-w-4xl pr-20 sm:pr-0">
-          <Typing text={text} />
-        </h1>
-      ) : (
-        <h2
-          className={`tracking-tight font-heading leading-tight ${
-            subheading
-              ? `text-[34px] lg:text-[50px] lg:pt-12 pb-8 lg:pb-10 lg:min-h-[0px] lg:h-[150.5px] ${
-                  idx === 0
-                    ? "min-h-[117px] sm:min-h-[74.5px]"
-                    : "min-h-[74.5px]"
-                } `
-              : "text-[50px] lg:text-[100px] lg:pl-20 lg:pb-16 h-[62.5px] lg:h-[189px]"
-          } ${classes ? classes : ""}`}
-        >
-          <LoadOnView>
-            <Typing text={text} />
-          </LoadOnView>
-        </h2>
-      )}
-    </>
+    <h2
+      className={`tracking-tight font-heading leading-tight ${
+        subheading
+          ? `text-[34px] lg:text-[50px] lg:pt-12 pb-8 lg:pb-10 lg:min-h-[0px] lg:h-[150.5px] ${
+              idx === 0 ? "min-h-[117px] sm:min-h-[74.5px]" : "min-h-[74.5px]"
+            } `
+          : "text-[50px] lg:text-[100px] lg:pl-20 lg:pb-16 h-[62.5px] lg:h-[189px]"
+      } ${classes ? classes : ""}`}
+    >
+      <LoadOnView>
+        <Typing text={text} />
+      </LoadOnView>
+    </h2>
   );
 }

src/components/Project.js

@@ -6,6 +6,7 @@ import Underline from "./Underline";
 
 export default function Project({
   title,
+  brokenTitle,
   img,
   subtitle,
   description,
@@ -24,7 +25,18 @@ export default function Project({
   return (
     <div className="lg:pl-20">
       <Line classes="pl-8 lg:pl-0" />
-      <HeadingText subheading text={title} idx={idx} />
+      {!brokenTitle ? (
+        <HeadingText subheading text={title} idx={idx} />
+      ) : (
+        <>
+          <div className="block sm:hidden">
+            <HeadingText subheading text={brokenTitle} idx={idx} />
+          </div>
+          <div className="hidden sm:block">
+            <HeadingText subheading text={title} idx={idx} />
+          </div>
+        </>
+      )}
       <div className="flex flex-col lg:flex-row">
         <div className="w-full lg:w-1/2 pb-4 lg:pb-0 lg:pr-10">
           <img

src/components/TitleText.js

@@ -0,0 +1,9 @@
+import Typing from "./Typing";
+
+export default function TitleText({ text }) {
+  return (
+    <h1 className="text-[50px] lg:text-[100px] tracking-tight font-heading leading-tight min-h-[187.5px] md:min-h-0 lg:min-h-[250px] lg:max-w-4xl">
+      <Typing text={text} />
+    </h1>
+  );
+}

src/components/Typing.js

@@ -1,5 +1,12 @@
 import Typed from "react-typed";
 
 export default function Typing({ text }) {
-  return <Typed strings={[text]} typeSpeed={30} showCursor={false} />;
+  return (
+    <Typed
+      strings={[text]}
+      typeSpeed={20}
+      showCursor={false}
+      className="whitespace-pre"
+    />
+  );
 }

src/sections/Hero.js

@@ -1,12 +1,17 @@
-import HeadingText from "../components/HeadingText";
-import ImageGrid from "../components/ImageGrid";
 import Container from "../layout/Container";
+import TitleText from "../components/TitleText";
+import ImageGrid from "../components/ImageGrid";
 
 export default function Hero() {
   return (
     <section id="hero" className="pt-16 lg:pt-24">
       <Container>
-        <HeadingText title text="Fullstack Developer in Toronto" />
+        <div className="block sm:hidden">
+          <TitleText title text={`Fullstack\nDeveloper\nin Toronto`} />
+        </div>
+        <div className="hidden sm:block">
+          <TitleText title text={`Fullstack Developer\nin Toronto`} />
+        </div>
         <ImageGrid img="rainbow.jpeg" alt="Rainbow in sky" />
       </Container>
     </section>

src/sections/Portfolio.js

@@ -8,6 +8,7 @@ export default function Portfolio() {
   const projects = [
     {
       title: "↳ Climate Change Podcasting",
+      brokenTitle: "↳ Climate Change\nPodcasting",
       img: "spot",
       subtitle:
         "Climate Education Credits - Built for New Relic x DEV's “Hack the Planet” Hackathon",