add: server-based to serverless project

Author: cliffable

about.html

@@ -95,6 +95,12 @@ <h1>About Cliff Smith and Cliffable</h1>
               Every project on Cliffable is designed, built and documented by me, with a focus on architecture,
               implementation decisions, trade-offs and lessons learned.
             </p>
+
+            <p>
+              I also designed the Cliffable name, logo and visual identity, applying the same structured approach
+              to creating the portfolio itself. You can read more in the
+              <a href="/projects/designing-the-cliffable-brand.html">Cliffable Brand Design</a> project.
+            </p>
           </div>
         </div>
       </div>

assets/images/server-based-website-architecture.png

@@ -88,16 +88,17 @@ <h2>Featured Projects</h2>
 
         <div class="featured-projects-grid">
           <!-- Project 1 -->
-          <a href="/projects/static-site-on-aws.html" class="project-card-link">
+          <a href="/projects/server-based-to-serverless-website-hosting-on-aws.html" class="project-card-link">
             <div class="project-card">
-              <h4>Static Website on AWS with Automated CI/CD Pipeline</h4>
+              <h4>Server-Based to Serverless Website Hosting on AWS</h4>
 
-              <img src="/assets/images/cloudfront-s3-static-site-architecture.png"
-                alt="AWS architecture diagram showing S3 static website hosting with CloudFront and Route 53">
+              <img src="/assets/images/server-based-website-architecture.png"
+                alt="Highly available AWS website architecture using CloudFront, an Application Load Balancer, Auto Scaling and EC2 instances across two Availability Zones">
 
               <p>
-                Designed and deployed a static website on AWS using S3, CloudFront, Route 53, ACM and GitHub Actions,
-                with automated CI/CD, HTTPS and DNS routing.
+                Built a highly available EC2-based website with multi-AZ networking, load balancing,
+                Auto Scaling and serverless microservices, then migrated the static frontend to
+                Amazon S3 and CloudFront to reduce complexity and operational overhead.
               </p>
             </div>
           </a>
@@ -107,7 +108,7 @@ <h4>Static Website on AWS with Automated CI/CD Pipeline</h4>
             <div class="project-card">
               <h4>Migrating a WordPress Website to AWS Lightsail</h4>
 
-              <img src="/assets/images/csgl-lightsail-architecture.png"
+              <img src="/assets/images/csgl-lightsail-production-architecture.png"
                 alt="AWS Lightsail WordPress hosting architecture with DNS, SSL, static IP and backups">
 
               <p>

assets/images/serverless-website-architecture.png

@@ -76,6 +76,22 @@ <h2>All Projects</h2>
         <div class="projects-grid">
 
           <!-- Project 1 -->
+          <a href="/projects/server-based-to-serverless-website-hosting-on-aws.html" class="project-card-link">
+            <div class="project-card">
+              <h3>Server-Based to Serverless Website Hosting on AWS</h3>
+
+              <img src="/assets/images/server-based-website-architecture.png"
+                alt="AWS architecture diagram showing migration from an EC2-based website to serverless hosting with Amazon S3 and CloudFront">
+
+              <p>
+                A case study comparing highly available EC2 hosting with a serverless architecture, covering multi-AZ
+                infrastructure, load balancing, Auto Scaling, microservice integration and migration to Amazon S3 and
+                CloudFront.
+              </p>
+            </div>
+          </a>
+
+          <!-- Project 2 -->
           <a href="/projects/static-site-on-aws.html" class="project-card-link">
             <div class="project-card">
               <h3>Static Website with CI/CD (S3 + CloudFront)</h3>
@@ -90,7 +106,7 @@ <h3>Static Website with CI/CD (S3 + CloudFront)</h3>
             </div>
           </a>
 
-          <!-- Project 2 -->
+          <!-- Project 3 -->
           <a href="/projects/csgl-lightsail-wordpress.html" class="project-card-link">
             <div class="project-card">
               <h3>WordPress Migration to AWS Lightsail</h3>
@@ -105,25 +121,10 @@ <h3>WordPress Migration to AWS Lightsail</h3>
             </div>
           </a>
 
-          <!-- Project 3 -->
-          <a href="/projects/designing-the-cliffable-brand.html" class="project-card-link">
-            <div class="project-card">
-              <h3>Cliffable Brand Design</h3>
-
-              <img src="/assets/images/cliffable-brand-system.png"
-                alt="Cliffable brand system including logo, typography and visual identity">
-
-              <p>
-                Cliffable brand design covering naming, logo creation, visual identity and a minimal portfolio website
-                for AWS architecture projects.
-              </p>
-            </div>
-          </a>
-
           <!-- Project 4 -->
           <a href="/projects/secure-aws-vpc-with-bastion-host.html" class="project-card-link">
             <div class="project-card">
-              <h3>Secure VPC with Bastion Host</h3>
+              <h3>Secure Virtual Private Cloud with Bastion Host</h3>
 
               <img src="/assets/images/Secure-AWS-VPC-with-bastion-host.png"
                 alt="AWS VPC architecture with bastion host, private subnet, NAT Gateway and route tables">