Update to v2.1.1: Dynamic nametag svg and new photo

Author: jacobkrol

package.json

@@ -1,6 +1,6 @@
 {
   "name": "kroljs",
-  "version": "2.1.0",
+  "version": "2.1.1",
   "private": true,
   "homepage": "https://kroljs.com/",
   "dependencies": {

src/components/pages/HomePage.js

@@ -5,13 +5,14 @@ import CornerImg from '../utilities/CornerImg';
 import ContentBlock from '../utilities/ContentBlock';
 
 import UICImg from '../../graphics/chicago-uic-small-3.jpg';
-import PortraitImg from '../../graphics/jacob-2.jpeg';
+import PortraitImg from '../../graphics/jacob-3.jpg';
+import NameTag from '../utilities/NameTag';
 
 function HomePage() {
     return (
         <div>
             <Backdrop imgName={UICImg} />
-            <TitleCard title="Jacob Krol" subtitle={["Full-Stack Web Developer","Short-Stack Pancake Lover"]} />
+            <TitleCard Icon={NameTag} subtitle={["Full-Stack Web Developer","Short-Stack Pancake Lover"]} />
             <CornerImg />
             <ContentBlock key={0} bg={0} title="bio." >
                 <div className="content-row">

src/components/utilities/NameTag.js

@@ -0,0 +1,19 @@
+import React from 'react';
+
+export default function NameTag() {
+    return (
+        <svg width="340" height="60" viewBox="0 0 340 60" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <g id="nametag" clipPath="url(#clip0)">
+                <text id="krol" fill="white" xmlSpace="preserve" style={{whiteSpace: "pre"}} fontFamily="Source Sans" font-size="64" letterSpacing="0em"><tspan x="226" y="52.752">Krol</tspan></text>
+                <text id="s" fill="white" xmlSpace="preserve" style={{whiteSpace: "pre"}} fontFamily="Source Sans" font-size="64" letterSpacing="0em"><tspan x="179" y="52.752">S</tspan></text>
+                <text id="acob" fill="white" xmlSpace="preserve" style={{whiteSpace: "pre"}} fontFamily="Source Sans" font-size="64" letterSpacing="0em"><tspan x="36" y="52.752">acob</tspan></text>
+                <text id="j" fill="white" xmlSpace="preserve" style={{whiteSpace: "pre"}} fontFamily="Source Sans" font-size="64" letterSpacing="0em"><tspan x="5" y="52.752">J</tspan></text>
+            </g>
+            <defs>
+                <clipPath id="clip0">
+                    <rect width="340" height="60" fill="white"/>
+                </clipPath>
+            </defs>
+        </svg>
+    )
+}

src/components/utilities/TitleCard.js

@@ -8,10 +8,16 @@ import '../../styles/TitleCard.css';
 // props.subtitle (opt.) = string or array of strings for subtitles
 
 function TitleCard(props) {
+    const { Icon } = props;
     return (
         <div className="title-container" style={{minHeight: (props.size || 100) + "vh"}}>
             <div className="title-cell">
-                <h1 className="title">{props.title}</h1>
+                {props.title
+                    ? <h1 className="title">{props.title}</h1>
+                    : Icon
+                        ? <h1 className="title"><Icon /></h1>
+                        : null
+                }
                 <HLine />
                 {typeof props.subtitle === "object"
                     ? props.subtitle.map((s,i) => <h2 className="subtitle" key={i}>{s}</h2>)

src/graphics/jacob-3.jpg

@@ -58,11 +58,24 @@
     }
     .content-box {
         text-align: left !important;
-        font-size: 0.9rem !important;
+        padding: 10px !important;
+        /* font-size: 0.9rem !important; */
+    }
+    .media-box {
+        padding: 0 !important;
+    }
+    .content-block-container {
+        margin: 0 !important;
+    }
+    .content-column {
+        margin: 0 !important;
     }
     .content-box ul {
         padding-left: 20px;
     }
+    .content-block {
+        margin: 10px !important;
+    }
     .content-block.medium {
         min-width: 225px;
     }
@@ -71,6 +84,12 @@
     }
 }
 
+@media only screen and (max-width: 350px) {
+    .content-box * {
+        padding: 0.2em;
+    }
+}
+
 .content-block a {
 	color: #333;
 	font-weight: bold;

src/styles/ContentBlock.css

@@ -1,4 +1,4 @@
-/* START NAME TAG */
+/* START GENERIC NAME TAG */
 
 .title-container {
 	position: relative;
@@ -38,4 +38,84 @@
 	font-size: 22px;
 }
 
-/* END NAME TAG */
+/* END GENERIC NAME TAG */
+
+/* START SVG NAME TAG */
+
+.title > svg {
+	height: 60px;
+	width: 340px;
+}
+
+#j, #acob, #s, #krol {
+	animation-duration: 10s;
+	animation-delay: 0s;
+	animation-timing-function: ease-in-out;
+	animation-iteration-count: infinite;
+}
+
+#acob {
+	animation-name: animate-acob;
+}
+
+#j {
+	animation-name: animate-j;
+}
+
+#s {
+	animation-name: animate-s;
+}
+
+#krol {
+	animation-name: animate-krol;
+}
+
+@keyframes animate-acob {
+	0%,30% {
+		opacity: 1;
+	}
+	50%,80% {
+		opacity: 0;
+	}
+	100% {
+		opacity: 1;
+	}
+}
+
+@keyframes animate-j {
+	0%,30% {
+		transform: translateX(0);
+	}
+	50%,80% {
+		transform: translateX(189px);
+	}
+	100% {
+		transform: translateX(0);
+	}
+}
+
+@keyframes animate-s {
+	0%,30% {
+		transform: translateX(0);
+	}
+	50%,80% {
+		transform: translateX(46px);
+	}
+	100% {
+		transform: translateX(0);
+	}
+}
+
+@keyframes animate-krol {
+	0%,30% {
+		transform: translateX(0);
+	}
+	50%,80% {
+		transform: translateX(-146px);
+	}
+	100% {
+		transform: translateX(0);
+	}
+}
+
+/* END SVG NAME TAG */