Tweaked template

Created business apps blog post
crmcguire74 · Nov 14, 2024 · 6e7d74e · 6e7d74e
1 parent cf54558
commit 6e7d74e
Show file tree

Hide file tree

Showing 10 changed files with 117 additions and 21 deletions.
diff --git a/blog/articles/.DS_Store b/blog/articles/.DS_Store
diff --git a/blog/articles/Custom_Icons_and_User_Interface_Design_Tips.html b/blog/articles/Custom_Icons_and_User_Interface_Design_Tips.html
@@ -101,11 +101,10 @@
         <img src="../../images/logo.svg" alt="Logo" class="logoImage" />
       </div>
       <nav class="menu">
-        <a href="../../index.html">Home</a>
-        <a href="../blogDashboard.html">Blog</a>
-        <a href="mailto:[email protected]">Contact</a>
+        <a href="../../index.html" style="margin-right:15px">Home</a> &gt; <a href="../blogDashboard.html" style="margin-right:15px;">Blog</a> &gt; <span style="margin-left:10px;">Custom Icons and User Interface Design Tips</span>
       </nav>
     </header>
+
 
     <!-- Hero Section -->
     <section class="hero">
@@ -776,6 +775,7 @@ <h3 itemprop="name">
             </div>
           </section>
 
+
           <div class="author-bio">
             <div class="author-avatar">
               <img
@@ -784,7 +784,15 @@ <h3 itemprop="name">
               />
             </div>
             <div>
-              <h3>Christopher R McGuire</h3>
+              <div class="email-container">
+                <a href="mailto:[email protected]" class="email-link">
+                    <h3 class="name">Christopher R McGuire</h3>
+                    <svg class="icon" viewBox="0 0 24 24" stroke-width="2" data-icon-detailed="true">
+                        <polygon points="22 2 15 22 11 13 2 9 22 2" data-stroke="primary"></polygon>
+                        <line x1="22" y1="2" x2="11" y2="13" data-stroke="primary"></line>
+                    </svg>
+                </a>
+            </div>
               <p>
                 Senior VP and Head of Application Design and Development with
                 over 25 years of UX, UI experience.

diff --git a/blog/articles/sandbox.html → ...gn_in_Internal_Business_Applications.html b/blog/articles/sandbox.html → ...gn_in_Internal_Business_Applications.html
@@ -76,9 +76,7 @@
         <img src="../../images/logo.svg" alt="Logo" class="logoImage" />
       </div>
       <nav class="menu">
-        <a href="../../index.html">Home</a>
-        <a href="../blogDashboard.html">Blog</a>
-        <a href="mailto:[email protected]">Contact</a>
+        <a href="../../index.html" style="margin-right:15px">Home</a> &gt; <a href="../blogDashboard.html" style="margin-right:15px;">Blog</a> &gt; <span style="margin-left:10px;">The Hidden ROI of UX/UI Design in Internal Business Applications</span>
       </nav>
     </header>
 
@@ -133,7 +131,7 @@ <h1>
           <div class="article-image-wrapper">
             <div class="article-image-banner">
               <img
-                src="./images/InternalBusinessApplications.jpg"
+                src="./images/InternalBusinessApplications.png"
                 alt="Modern internal business application interface showing clean design and intuitive navigation"
               />
             </div>
@@ -375,7 +373,7 @@ <h3>2. Consistency Across Platforms</h3>
           <div class="article-image-wrapper">
             <div class="article-image-banner">
               <img
-                src="./images/cross-platform-consistency.jpg"
+                src="./images/ResponsiveApps.png" 
                 alt="Internal application showing consistent design across desktop and mobile interfaces"
               />
             </div>
@@ -507,7 +505,7 @@ <h3>3. Testing and Optimization</h3>
           <div class="article-image-wrapper">
             <div class="article-image-banner">
               <img
-                src="./images/implementation-process.jpg"
+                src="./images/UserExperienceProcess.png"
                 alt="Visual representation of the implementation process for internal application design"
               />
             </div>
@@ -776,6 +774,7 @@ <h3 itemprop="name">
             </div>
           </section>
 
+
           <div class="author-bio">
             <div class="author-avatar">
               <img
@@ -784,7 +783,15 @@ <h3 itemprop="name">
               />
             </div>
             <div>
-              <h3>Christopher R McGuire</h3>
+              <div class="email-container">
+                <a href="mailto:[email protected]" class="email-link">
+                    <h3 class="name">Christopher R McGuire</h3>
+                    <svg class="icon" viewBox="0 0 24 24" stroke-width="2" data-icon-detailed="true">
+                        <polygon points="22 2 15 22 11 13 2 9 22 2" data-stroke="primary"></polygon>
+                        <line x1="22" y1="2" x2="11" y2="13" data-stroke="primary"></line>
+                    </svg>
+                </a>
+            </div>
               <p>
                 Senior VP and Head of Application Design and Development with
                 over 25 years of UX, UI experience.

diff --git a/blog/articles/User_Interface_Design_for_Web_Applications.html b/blog/articles/User_Interface_Design_for_Web_Applications.html
@@ -135,16 +135,14 @@
   <!-- <body class="loaded dark-mode"> -->
 
   <body>
-    body>
+
     <!-- Header Section -->
     <header class="header">
       <div class="logo">
         <img src="../../images/logo.svg" alt="Logo" class="logoImage" />
       </div>
       <nav class="menu">
-        <a href="../../index.html">Home</a>
-        <a href="../blogDashboard.html">Blog</a>
-        <a href="mailto:[email protected]">Contact</a>
+        <a href="../../index.html" style="margin-right:15px">Home</a> &gt; <a href="../blogDashboard.html" style="margin-right:15px;">Blog</a> &gt; <span style="margin-left:10px;">User Interface Design for Web Applications</span>
       </nav>
     </header>
 
@@ -1415,7 +1413,15 @@ <h3>
               />
             </div>
             <div>
-              <h3>Christopher R McGuire</h3>
+              <div class="email-container">
+                <a href="mailto:[email protected]" class="email-link">
+                    <h3 class="name">Christopher R McGuire</h3>
+                    <svg class="icon" viewBox="0 0 24 24" stroke-width="2" data-icon-detailed="true">
+                        <polygon points="22 2 15 22 11 13 2 9 22 2" data-stroke="primary"></polygon>
+                        <line x1="22" y1="2" x2="11" y2="13" data-stroke="primary"></line>
+                    </svg>
+                </a>
+            </div>
               <p>
                 Senior VP and Head of Application Design and Development with
                 over 25 years of UX, UI experience.

diff --git a/blog/articles/css/styles.css b/blog/articles/css/styles.css
@@ -589,6 +589,53 @@ body.dark-mode .video-container iframe {
   box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
 }
 
+..email-container {
+            display: flex;
+            align-items: center;
+        }
+
+        .email-link {
+            display: flex;
+            align-items: center;
+            text-decoration: none;
+            gap: 10px;
+        }
+
+        .name {
+            margin: 0;
+            color: black;
+            font-size: 1.5rem;
+            transition: color 0.3s ease;
+        }
+
+        .icon {
+            width: 32px;
+            height: 32px;
+            stroke-linecap: round;
+            stroke-linejoin: round;
+            cursor: pointer;
+        }
+
+        .icon polygon,
+        .icon line {
+            transition: stroke 0.3s ease;
+            stroke: black;
+            fill: #ffffff;
+            stroke-width: 2;
+        }
+
+        .email-link:hover .name,
+        .email-link:focus .name {
+            color: #007bff;
+        }
+
+        .email-link:hover .icon polygon,
+        .email-link:hover .icon line,
+        .email-link:focus .icon polygon,
+        .email-link:focus .icon line {
+            stroke: #007bff;
+        }
+
 /* Media Queries */
 @media (min-width: 1024px) {
   .blog-content {

diff --git a/...s/images/InternalBusinessApplications.jpg → ...s/images/InternalBusinessApplications.png b/...s/images/InternalBusinessApplications.jpg → ...s/images/InternalBusinessApplications.png
diff --git a/blog/articles/images/ResponsiveApps.png b/blog/articles/images/ResponsiveApps.png
diff --git a/blog/articles/images/UserExperienceProcess.png b/blog/articles/images/UserExperienceProcess.png
diff --git a/blog/articles/template.html b/blog/articles/template.html
@@ -73,9 +73,7 @@
         <img src="../../images/logo.svg" alt="Logo" class="logoImage" />
       </div>
       <nav class="menu">
-        <a href="../../index.html">Home</a>
-        <a href="../blogDashboard.html">Blog</a>
-        <a href="mailto:[email protected]">Contact</a>
+        <a href="../../index.html" style="margin-right:15px">Home</a> &gt; <a href="../blogDashboard.html" style="margin-right:15px;">Blog</a> &gt; <span style="margin-left:10px;">Page Title</span>
       </nav>
     </header>
 
@@ -165,7 +163,15 @@ <h4>[SECTION TITLE]</h4>
               />
             </div>
             <div>
-              <h3>Christopher R McGuire</h3>
+              <div class="email-container">
+                <a href="mailto:[email protected]" class="email-link">
+                    <h3 class="name">Christopher R McGuire</h3>
+                    <svg class="icon" viewBox="0 0 24 24" stroke-width="2" data-icon-detailed="true">
+                        <polygon points="22 2 15 22 11 13 2 9 22 2" data-stroke="primary"></polygon>
+                        <line x1="22" y1="2" x2="11" y2="13" data-stroke="primary"></line>
+                    </svg>
+                </a>
+            </div>
               <p>
                 Senior VP and Head of Application Design and Development with
                 over 25 years of UX, UI experience.

diff --git a/blog/blogDashboard.html b/blog/blogDashboard.html
@@ -859,7 +859,7 @@ <h2 class="article-title">
         <article class="article-card">
           <div class="article-content">
             <div class="article-text">
-              <div class="article-meta">November 8, 2024</div>
+              <div class="article-meta">November 9, 2024</div>
               <h2 class="article-title">
                 Custom Icons and User Interface Design Tips and Methods
               </h2>
@@ -876,6 +876,28 @@ <h2 class="article-title">
             >
           </div>
         </article>
+
+        <article class="article-card">
+          <div class="article-content">
+            <div class="article-text">
+              <div class="article-meta">November 13, 2024</div>
+              <h2 class="article-title">
+                The Hidden ROI of UX/UI Design in Internal Business Applications
+              </h2>
+              <p class="article-excerpt">
+                Discover how thoughtful design and branding in internal business
+          applications can transform employee experience, boost productivity,
+          and drive organizational success.
+              </p>
+            </div>
+            <a
+              href="./articles/Hidden_ROI_of_UXUI_Design_in_Internal_Business_Applications.html"
+              class="read-more"
+              >Read More</a
+            >
+          </div>
+        </article>
+
         <!--
         <article class="article-card">
           <div class="article-content">