Added hero header for each page.

.projectile

@@ -4,6 +4,7 @@
 -.txt
 -.png
 -.woff2
+-.md
 /fonts/
 /server/
 /public/

client/src/App.css

@@ -4,7 +4,7 @@
     --navbar-height: 68px;
 
     --page-bottom-margin: 120px;
-    --common-card-margin: 10vh;
+    --common-card-margin: 25vh;
 
     --dark-mode-black: #1e1e1e;
     --dark-mode-purple: #491ed3;
@@ -213,6 +213,10 @@ a {
     background: rgba(255, 255, 255, 0.2)
 }
 
+.box-shadow-large {
+    box-shadow: 1px 1px 4px rgba(139, 101, 77, 0.2), /* Bottom shadow */
+                1px 1px 4px rgba(139, 101, 77, 0.2); /* Right shadow */
+}
 
 .box-shadow-medium {
     box-shadow: 1px 1px 2px rgba(139, 101, 77, 0.2), /* Bottom shadow */

client/src/components/ExperienceSection/ExperienceSection.css

@@ -21,6 +21,7 @@
     position: sticky;
     top: var(--navbar-height);
     height: calc(95.5vh - var(--navbar-height));
+    transition: all .1s ease-in;
 }
 
 .experience-section-wrapper {

client/src/components/ExperienceSection/ExperienceSection.tsx

@@ -121,7 +121,7 @@ class ExperienceSection extends Component<IExperienceSectionProps, IExperienceSe
                     }
                 },
                 {
-                    dateTime: "2020",
+                    dateTime: "2021",
                     cardTitle: "Cisco",
                     url: "http://www.cisco.com",
                     cardSubtitle: "Network Engineer Intern",

client/src/components/ExperienceSection/ExperienceSectionEvent/ExperienceSectionEvent.tsx

@@ -12,50 +12,53 @@ interface ExperienceSectionEventProps {
 const ExperienceSectionEvent: React.FC<ExperienceSectionEventProps> = ({ item, index, alt }) => {
     const displayIsImage = item.display === "IMAGE";
     const defaultDisplay = item.display === "NORMAL" || !item.display;
-
     const experienceSectionCardIndexIsEvenNumber = index % 2 === 0;
-
     const experienceSectionCardClassName = ["card experience-section-card"];
 
     experienceSectionCardIndexIsEvenNumber ? experienceSectionCardClassName.push("above")
         : experienceSectionCardClassName.push("below");
 
-    const imageWrapperclassName = ["experience-section-card__image-wrapper"];
+    const imageWrapperClassName = ["experience-section-card__image-wrapper"];
+    const imageClassName = ["experience-section-card__image"];
 
-    displayIsImage ? imageWrapperclassName.push("experience-section-card__image-wrapper--image")
-        : imageWrapperclassName.push("experience-section-card__image-wrapper--experience");
+    if (displayIsImage)  {
+        imageWrapperClassName.push("experience-section-card__image-wrapper--image")
+        imageClassName.push("box-shadow-large")
+    } else {
+        imageWrapperClassName.push("experience-section-card__image-wrapper--experience")
+    };
 
     const experienceSectionCardTextExperienceBody = (): React.ReactElement => (
         <div className="experience-section-card__text-body">
             <h2>{item.cardTitle}</h2>
             <div className="experience-section-card__date">{item.dateTime}</div>
             <div className="experience-section-card__job-title">{item.cardSubtitle}</div>
-        </div>
+            </div>
     )
 
     const experienceSectionCardTextImageBody = (): React.ReactElement => (
         <div className="experience-section-card__text-body" style={{ marginBottom: 0 }}>
             <div className="experience-section-card__detailed-text">{item.cardDetailedText}</div>
             <div className="experience-section-card__location">
-                {item.location && (<PiMapPinLineThin />)}
-                <div>{item.location}</div>
+            {item.location && (<PiMapPinLineThin />)}
+            <div>{item.location}</div>
+            </div>
             </div>
-        </div>
     )
 
     return (
         <div
-            style={{ transform: `scale(${item.importance ?? 1})` }}
-            onMouseMove={cardGradientEffect}
-            className={experienceSectionCardClassName.join(" ")}>
+        style={{ transform: `scale(${item.importance ?? 1})` }}
+        onMouseMove={cardGradientEffect}
+        className={experienceSectionCardClassName.join(" ")}>
 
             {defaultDisplay && experienceSectionCardTextExperienceBody()}
 
-            <div className={imageWrapperclassName.join(" ")}>
-                <img className="experience-section-card__image box-shadow-medium"
-                    alt={alt}
-                    style={displayIsImage ? { maxHeight: "180px", objectFit: "cover", minWidth: "100%", marginBottom: "10px" } : {}}
-                    src={item.media.source.url} />
+            <div className={imageWrapperClassName.join(" ")}>
+            <img className={imageClassName.join(" ")}
+        alt={alt}
+        style={displayIsImage ? { maxHeight: "180px", objectFit: "cover", minWidth: "100%", marginBottom: "10px" } : {}}
+        src={item.media.source.url} />
             </div>
 
             {displayIsImage && experienceSectionCardTextImageBody()}

client/src/components/FeaturedContentSection/FeaturedContentSection.css

@@ -1,4 +1,4 @@
-.featured-section-content {
+.featured-section {
     --featured-section-height: 50vh;
     display: flex;
     justify-content: center;
@@ -7,8 +7,14 @@
     flex-wrap: wrap;
     position: relative;
     width: var(--home-container-small--width);
-    max-width: var(--home-container-small--max-width);
-    margin-bottom: 10vh; /* Leave room for the candles */
+    max-width: 1900px; /* Connascence of value with FeaturedContentSection.tsx */
+    margin-bottom: 10vh;
+}
+
+.featured-content__wrapper {
+    display: flex;
+    justify-content: center;
+    width: 100%;
 }
 
 @media screen and (max-width: 568px) {

client/src/components/FeaturedContentSection/FeaturedContentSection.tsx

@@ -41,8 +41,11 @@ class FeaturedContentSection extends Component<IFeaturedContentSectionProps, IFe
     }
 
     calculateElementsToShow = () => {
+        const windowWidth = window.innerWidth;
         const elementWidth = 400;
-        let numOfElementsToShow = Math.floor(window.innerWidth / elementWidth);
+        const wrapperWidth = 1900; // Connascence of value with FeaturedContentSection.css:10
+
+        let numOfElementsToShow = Math.floor(Math.min(windowWidth, wrapperWidth) / elementWidth);
         this.setState({ numOfElementsToShow: Math.max(numOfElementsToShow, 2) });
     }
 
@@ -55,6 +58,7 @@ class FeaturedContentSection extends Component<IFeaturedContentSectionProps, IFe
     renderTopPickedPostsSortedByDateDescending = (): React.ReactNode => {
         const sliceEnd = this.state.numOfElementsToShow - 2;
         return this.state.featuredPosts.slice(0, sliceEnd).map((content, idx) => {
+
             const imageURL = `http://llcode.tech/api/image/${content.image.$oid}`
 
             return (
@@ -65,7 +69,7 @@ class FeaturedContentSection extends Component<IFeaturedContentSectionProps, IFe
                         type="blog"
                         dateCreated={content.date_created}
                         minuteRead={content.reading_time_minutes}
-                        style={{ margin: "25px 20px" }}
+                        style={{ margin: "2px 20px" }}
                         link={`/digital_chronicles/blog?id=${content._id.$oid}`}
                         image={imageURL} />
                 </div>
@@ -97,8 +101,8 @@ class FeaturedContentSection extends Component<IFeaturedContentSectionProps, IFe
     render() {
         return (
             <LandingPageCard heading="Featured Content" landingPageCardType="fitContent" blendWithBackground={true}>
-                <div ref={this.currentComponentRef} className="featured-content-section">
-                    <div className="featured-section-content">
+                <div ref={this.currentComponentRef} className="featured-content__wrapper">
+                    <div className="featured-section">
                         <GalleryItem
                             name={this.getFeaturedToolHeading()}
                             type="tool"

client/src/components/Gallery/Gallery.tsx

@@ -37,7 +37,7 @@ class Gallery extends Component<IGalleryProps, IGalleryState> {
     render() {
         return (
             <>
-                <div className="heading__wrapper"><h1>{this.props.heading}</h1></div>
+                <div className="heading__wrapper"><h2>{this.props.heading}</h2></div>
                 <div ref={this.galleryContainerRef} className="gallery-item__container">
                     {this.renderGalleryItems()}
                     {this.state.shouldAddDummy && <GalleryItem style={{ visibility: "hidden" }} />}

client/src/components/HeroHeader/HeroHeader.css

@@ -0,0 +1,11 @@
+.hero-header {
+    width: 90vw;
+    padding: 2vh 5vw;
+    margin-bottom: 8vh;
+    background: rgba(230, 230, 230, 0.5);
+    backdrop-filter: blur(5px)
+}
+
+.hero-header>p {
+    width: 50%;
+}

client/src/components/HeroHeader/HeroHeader.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import IHeroHeaderProps from "./Interface/IHeroHeaderProps";
+import "./HeroHeader.css";
+
+const HeroHeader: React.FC<IHeroHeaderProps> = ({heading, description}) => {
+    return (
+        <div className="hero-header">
+            <h1>{heading}</h1>
+            <p>{description}</p>
+        </div>
+    );
+}
+
+export default HeroHeader;

client/src/components/HeroHeader/Interface/IHeroHeaderProps.ts

@@ -0,0 +1,8 @@
+import React from "react";
+
+interface IHeroHeaderProps {
+    heading: string;
+    description: string | JSX.Element
+}
+
+export default IHeroHeaderProps;

client/src/components/LandingPageCard/LandingPageCard.css

@@ -17,7 +17,7 @@
     --landing-page-card-large--height: calc(97vh - var(--landing-page-card-large--padding)*2);
     --landing-page-card-fit-under-navbar--max-height: 170vw;
     --landing-page-card-box-shadow:  .6px .5px 2.8px #A5A58C;
-    --landing-page-card-intro-animation: animate-slide-up-fade-in .5s ease-in;
+    --landing-page-card-intro-animation: animate-slide-up-fade-in .1s ease-in;
     position: relative;
     display: flex;
     justify-content: space-between;

client/src/components/LandingPageCard/LandingPageCard.tsx

@@ -53,8 +53,8 @@ class LandingPageCard extends Component<ILandingPageCardProps, any> {
         return (
             <div className={classArray.join(' ')}>
                 <div className="landing-page-card__content">
-                    <h1 className="landing-page-card__heading">{landingPageCardHeading}</h1>
-                    {this.props.children}
+                <h1 className="landing-page-card__heading">{landingPageCardHeading}</h1>
+                {this.props.children}
                 </div>
             </div>
         );

client/src/components/Navbar/Interface/INavbarState.tsx

@@ -1,26 +1,26 @@
 import { ReactNode } from "react";
 
+interface Link {
+    name: string;
+    icon?: ReactNode;
+    to: string;
+    isLocked?: boolean;
+    onClick?: () => void;
+}
+
+interface NavbarItem extends Link {
+    sublinks?: Link[];
+}
+
 interface INavbarState {
     name: string;
-    links: Link[];
+    links: NavbarItem[];
     currentlyHoveredNavbarLinkName: string | null;
     lastScrollY: number;
     isNavbarHidden: boolean;
     hideNavBarScrollSensitivity: number;
     navBarDetached: boolean;
-    dropdownMenuLinkDisplay: ReactNode[]
-}
-
-interface Link {
-    name: string;
-    to: string | null;
-    icon?: ReactNode;
-    onClick?: () => void;
-    sublinks?: {
-        name: string;
-        to: string;
-        onClick?: () => void
-    }[]
+    dropdownMenuLinkDisplay: ReactNode[];
 }
 
-export { INavbarState, Link };
+export { INavbarState, Link, NavbarItem };

client/src/components/Navbar/LoginButton/Interface/ILoginButtonState.ts

@@ -1,6 +1,6 @@
-import { Link } from "../../Interface/INavbarState";
+import { NavbarItem } from "../../Interface/INavbarState";
 
 export default interface ILoginButtonState {
-    loginButtonLoggedInState: Link;
-    loginButtonLoggedOffState: Link
+    loginButtonLoggedInState: NavbarItem;
+    loginButtonLoggedOffState: NavbarItem
 }

client/src/components/Navbar/Navbar.css

@@ -45,7 +45,7 @@
 
 .navbar {
     --navbar-width: 100%;
-    --navbar-height: 61px; /* Default value, real value determine inside Navbar.tsx */
+    --navbar-height: 61px; /* Default value, real value determined inside Navbar.tsx */
     --navbar-submenu-height: 120px;
     --navbar-max-height: 93px;
     --progress-height: 3.5px;
@@ -114,6 +114,7 @@
 .navbar-item__dropdown > .navbar-item {
     padding: var(--navbar-item-padding) 5px;
     width: 180px;
+    justify-content: space-between;
     margin-bottom: 1px;
 }
 
@@ -123,10 +124,10 @@
 }
 
 .detached .navbar-item__dropdown {
-    background: rgba(250,250,250,0.8);
-    backdrop-filter: blur(28px);
+    background: rgba(240,240,240,0.9);
 }
 
+
 @media screen and (max-width: 900px) {
     .navbar-left {
         display: none;