began introduction graphics

Author: JS-GitRepo

src/components/LandingPage.css

@@ -9,7 +9,7 @@
   overflow: hidden;
 }
 
-.LandingPage .LandingPage-container {
+.LandingPage .lp-content-ctr {
   /* . . . Positioning . . . */
   position: absolute;
   display: flex;
@@ -20,16 +20,16 @@
   height: 100%;
   max-height: 100%;
   width: 100%;
-  z-index: 1;
   /* . . . Fonts . . . */
   font-family: "munro";
   font-weight: 400;
   font-size: 16px;
   letter-spacing: 4px;
   font-smooth: never;
+  z-index: 1;
 }
 
-.LandingPage .bg-img-container {
+.LandingPage .bg-img-ctr {
   height: 100%;
   max-height: 100%;
   width: 100vw;
@@ -55,12 +55,23 @@
   z-index: 0;
 }
 
-.LandingPage-container a {
+.LandingPage .lp-content-ctr a {
   text-decoration: none;
   color: rgb(208, 247, 239);
 }
 
-.LandingPage-container .header-container {
+.LandingPage .lp-content-ctr .header-ctr {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  margin-bottom: 0%;
+  width: 100%;
+  z-index: 1;
+}
+
+.LandingPage .lp-content-ctr .PersonalIntro {
   display: flex;
   flex: 1;
   align-items: center;
@@ -71,7 +82,13 @@
   z-index: 1;
 }
 
-.LandingPage-container .link-container {
+.LandingPage .lp-content-ctr .PersonalIntro img {
+  border: 10px ridge rgba(0, 255, 221, 0.767);
+  padding: 3px;
+  width: 300px;
+}
+
+.LandingPage .lp-content-ctr .nav-ctr {
   display: flex;
   flex: 1;
   flex-direction: row;
@@ -81,13 +98,12 @@
   z-index: 1;
 }
 
-.LandingPage-container .lp-link h1,
-.LandingPage-container .lp-link h2 {
+.LandingPage .lp-content-ctr .lp-link h1,
+.LandingPage .lp-content-ctr .lp-link h2 {
   padding: 30px 20px;
-  z-index: 1;
 }
 
-.LandingPage .HomeView-container {
+.LandingPage .HomeView-ctr {
   position: absolute;
   display: flex;
   flex: 1;
@@ -97,7 +113,6 @@
   width: 100vw;
   height: 100%;
   max-height: 100%;
-  z-index: 0;
 }
 
 .LandingPage .hide {

src/components/LandingPage.tsx

@@ -7,6 +7,7 @@ import HomeView from "./HomeView";
 import AuthContext from "../contexts/AuthContext";
 import pixelBG from "../img/pixelBG_LowRes.png";
 import pixelFadeBG from "../img/animated-14fps.png";
+import PersonalIntro from "./PersonalIntro";
 
 interface Props {
   hueRotation: {
@@ -99,10 +100,10 @@ const LandingPage = ({ hueRotation, setHueDuration }: Props) => {
 
   return (
     <div className={`LandingPage`}>
-      <div className={`LandingPage-container ${hideLP}`}>
+      <div className={`lp-content-ctr ${hideLP}`}>
         {fadeOut((style: any, item: any) =>
           item ? (
-            <animated.div className={"header-container"} style={style}>
+            <animated.div className={"header-ctr"} style={style}>
               <LandingPageLink
                 currentDisplay={currentDisplay}
                 linkText={currentDisplay}
@@ -115,9 +116,10 @@ const LandingPage = ({ hueRotation, setHueDuration }: Props) => {
             ""
           )
         )}
+        <PersonalIntro />
         {fadeOut((style: any, item: any) =>
           item ? (
-            <animated.div className="link-container" style={style}>
+            <animated.div className='nav-ctr' style={style}>
               <LandingPageLink
                 currentDisplay={currentDisplay}
                 linkText={link1Text}
@@ -137,16 +139,16 @@ const LandingPage = ({ hueRotation, setHueDuration }: Props) => {
             ""
           )
         )}
-        <div className="bg-img-container">
+        <div className='bg-img-ctr'>
           <animated.img
             style={hueRotation}
             className={`bg-img`}
             src={currBG}
-            alt=""
+            alt=''
           />
         </div>
       </div>
-      <div className={`HomeView-container ${hideHV}`}>
+      <div className={`HomeView-ctr ${hideHV}`}>
         <HomeView hueRotation={hueRotation} setHueDuration={setHueDuration} />
       </div>
     </div>

src/components/PersonalIntro.css

@@ -0,0 +1,13 @@
+import "./PersonalIntro.css";
+import headshot from "../img/Headshot-PurpleFlannel.png";
+
+const PersonalIntro = () => {
+  return (
+    <div className='PersonalIntro'>
+      <img src={headshot} alt='jake-headshot-img' />
+      <p>Hi I'm Jake</p>
+    </div>
+  );
+};
+
+export default PersonalIntro;