add video link support to projects and automate conversion of image assets to WebP format

Author: GoJo-Rika

css/main.css

@@ -171,6 +171,7 @@ section {
 .page-header,
 .page-footer {
   background-color: var(--header-footer-bg-color);
+
   color: var(--text-color);
   /* This ensures text in header/footer also changes color */
   border-color: var(--border-color);

css/post-layout.css

@@ -268,23 +268,45 @@ html[data-theme='dark'] .post-sidebar-right::-webkit-scrollbar-thumb {
 
 /* ===== Mobile breakpoint ===== */
 @media (max-width: 48rem) {
+    .page-content {
+        overflow-x: hidden;
+    }
+
     .post-layout {
         max-width: 100% !important;
+        width: 100% !important;
         padding: 0 1rem !important;
+        min-width: 0;
+        box-sizing: border-box;
+        overflow-x: hidden;
     }
 
     .post-center-column {
         max-width: 100%;
+        min-width: 0;
         overflow-x: hidden;
     }
 
     .post-content-main {
         padding: 1rem 0 0 0 !important;
+        max-width: 100%;
+        min-width: 0;
+        overflow-x: hidden;
+        word-wrap: break-word;
+        overflow-wrap: break-word;
     }
 
-    .post-content-main pre {
+    .post-content-main pre,
+    .code-block-wrapper {
         max-width: 100%;
         overflow-x: auto;
+        box-sizing: border-box;
+    }
+
+    .post-content-main p > code,
+    .post-content-main li > code {
+        word-break: break-word;
+        white-space: pre-wrap;
     }
 
     .post-content-main img {

css/projects.css

@@ -134,3 +134,20 @@ body.dark .tech-icons img {
 .project-button.blog-link:hover {
     filter: brightness(1.1);
 }
+
+.project-button.video-link {
+    width: 42px;
+    height: 42px;
+    border-radius: 50%;
+    padding: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 2px solid var(--link-color);
+    font-size: 1.2rem;
+    flex-shrink: 0;
+}
+
+.project-button.video-link i {
+    margin-left: 3px;
+}

generate_portfolio_modified.py

@@ -76,7 +76,9 @@ def strip_html_tags(text):
             "summary": project.get("summary", {}).get("project_card", ""),
             "technologies": project.get("core_technologies", []),
             "github_url": project.get("github_url", ""),
-            "live_demo_url": None,
+            "live_demo_url": project.get("live_demo_url", None),
+            "video_url": project.get("video_url", ""),
+            "video_exists": project.get("video_exists", False),
         })
 data["featured_projects"] = featured_projects
 
@@ -174,6 +176,9 @@ def strip_html_tags(text):
     if md_filepath.exists():
         with md_filepath.open("r", encoding="utf-8") as f:
             markdown_content = f.read()
+
+        markdown_content = re.sub(r'\.(png|jpe?g)(?=[)""\'\s>])', '.webp', markdown_content, flags=re.IGNORECASE)
+
         post["detailed_content"] = markdown2.markdown(
             markdown_content, extras=["fenced-code-blocks", "code-friendly"]
         )

portfolio.json

@@ -355,6 +355,8 @@
       "image": "project_images/network_security_architecture_thumbnail.jpg",
       "featured": true,
       "show_in_resume": true,
+      "video_exists": false,
+      "video_url": "",
       "core_technologies": [
         "Python",
         "AWS",
@@ -416,7 +418,8 @@
           ],
           "previous_part_slug": "from-messy-data-to-production-mlops-my-network-security-journey-part-1"
         }
-      ]    },
+      ]
+    },
     "end-to-end-foodvision-mlops-pipeline": {
       "title": "End-to-End FoodVision MLOps Pipeline",
       "github_url": "https://github.com/GoJo-Rika/PyTorch-FoodVision-Mini",
@@ -427,6 +430,8 @@
       "image": "project_images/effnet-feature-extraction-diagram.png",
       "featured": true,
       "show_in_resume": true,
+      "video_exists": false,
+      "video_url": "",
       "core_technologies": [
         "PyTorch",
         "FastAPI",
@@ -492,6 +497,8 @@
       "image": "tech_icons/aws-sagemaker.svg",
       "featured": true,
       "show_in_resume": true,
+      "video_exists": false,
+      "video_url": "",
       "core_technologies": [
         "AWS SageMaker",
         "Scikit-learn",
@@ -562,6 +569,8 @@
       "image": "tech_icons/hugging-face.svg",
       "featured": true,
       "show_in_resume": true,
+      "video_exists": false,
+      "video_url": "",
       "core_technologies": [
         "HuggingFace Transformers",
         "PyTorch",
@@ -663,6 +672,8 @@
       "image": "posts_assets/pipeline_workflow_diagram.png",
       "featured": true,
       "show_in_resume": true,
+      "video_exists": false,
+      "video_url": "",
       "core_technologies": [
         "AWS",
         "Python",
@@ -723,6 +734,8 @@
       "image": "project_images/financial-ai.jpg",
       "featured": true,
       "show_in_resume": true,
+      "video_exists": false,
+      "video_url": "",
       "core_technologies": [
         "Python",
         "Agno",
@@ -767,6 +780,8 @@
       "image": "project_images/video-summarizer-thumbnail.png",
       "featured": true,
       "show_in_resume": true,
+      "video_exists": false,
+      "video_url": "",
       "core_technologies": [
         "Python",
         "Streamlit",
@@ -836,6 +851,8 @@
       "image": "",
       "featured": false,
       "show_in_resume": true,
+      "video_exists": false,
+      "video_url": "",
       "core_technologies": [
         "AWS Bedrock",
         "AWS Lambda",
@@ -868,6 +885,8 @@
       "image": "",
       "featured": false,
       "show_in_resume": true,
+      "video_exists": false,
+      "video_url": "",
       "core_technologies": [
         "Python",
         "Agno",
@@ -895,6 +914,8 @@
       "image": "",
       "featured": false,
       "show_in_resume": true,
+      "video_exists": false,
+      "video_url": "",
       "core_technologies": [
         "Python",
         "LangChain",
@@ -912,7 +933,8 @@
         "Document Processing",
         "Semantic Search"
       ],
-      "blogs": []    }
+      "blogs": []
+    }
   },
   "volunteer_experience": [],
   "references": [],

posts/from-messy-data-to-production-mlops-my-network-security-journey-part-1.html

@@ -89,7 +89,7 @@ <h1>Building a Bulletproof ML Pipeline: The Unseen Engineering (Part 1)</h1>
 
 <p>This is the story of building a production-ready machine learning system that detects phishing URLs. In this first part, we'll focus on laying a robust foundation: designing a modular architecture, implementing crucial safeguards like custom logging and data validation, and establishing a reproducible experiment-driven workflow.</p>
 
-<p><img src="posts_assets/pipeline_workflow_diagram.png" alt="A diagram showing the MLOps pipeline flow from Data Ingestion to Model Pusher." /></p>
+<p><img src="posts_assets/pipeline_workflow_diagram.webp" alt="A diagram showing the MLOps pipeline flow from Data Ingestion to Model Pusher." /></p>
 
 <h2>The Vision: More Than Just Another ML Project</h2>
 

posts/from-messy-data-to-production-mlops-my-network-security-journey-part-2.html

@@ -89,7 +89,7 @@ <h1>The Deployment Gauntlet: From <code>localhost</code> to Live on AWS (Part 2)
 
 <p>This is where theory meets the harsh, humbling reality of production infrastructure. This is the story of the deployment gauntlet.</p>
 
-<p><img src="posts_assets/network-architecture-diagram.jpg" alt="A diagram showing the overall project architecture including AWS services, MLflow, and the FastAPI application." /></p>
+<p><img src="posts_assets/network-architecture-diagram.webp" alt="A diagram showing the overall project architecture including AWS services, MLflow, and the FastAPI application." /></p>
 
 <h2>The AWS Deployment Nightmare: When the Cloud Humbles You</h2>
 

posts/from-notebook-to-ui-the-local-development-journey-part-1.html

@@ -96,7 +96,7 @@ <h3>The First Big Question: Is My Model Actually Any Good?</h3>
 <p><strong>Problem #1: My experiments were chaotic and biased.</strong>
 My first attempt at a solution was to bring order to the chaos. I wrote a nested loop to systematically iterate through every combination of model (<code>EfficientNetB0</code>, <code>B2</code>, <code>B4</code>), dataset size, and training duration.</p>
 
-<p><img src="posts_assets/experiments-table.png" alt="A table showing the structured plan for all 8 experiments, varying model type, data size, and epochs." />
+<p><img src="posts_assets/experiments-table.webp" alt="A table showing the structured plan for all 8 experiments, varying model type, data size, and epochs." />
 <em>Moving from random tweaks to a structured experiment plan like this was the first step toward building a reliable model.</em></p>
 
 <p>This was a huge step forward! But it created a new problem: I was drowning in a sea of <code>print()</code> statements. Comparing the results of run #3 with run #17 was a nightmare of scrolling and squinting.</p>
@@ -111,7 +111,7 @@ <h3>The First Big Question: Is My Model Actually Any Good?</h3>
 <p><strong>Problem #2: I couldn't visualize the story of my training.</strong>
 I realized I didn't just need results; I needed a narrative. I needed to see the learning curves to understand <em>how</em> each model was behaving. This is where TensorBoard came in. But my first attempt was, again, a mess. All my logs were jumbled into one confusing timeline.</p>
 
-<p><img src="posts_assets/tensorboard-accuracy-chart.png" alt="A screenshot of the TensorBoard dashboard showing accuracy curves for multiple experiments." />
+<p><img src="posts_assets/tensorboard-accuracy-chart.webp" alt="A screenshot of the TensorBoard dashboard showing accuracy curves for multiple experiments." />
 <em>TensorBoard made it easy to visually compare all eight experiments. The superiority of the <code>EffNetB2</code> model trained on 20% of the data (the top-performing line) became immediately obvious.</em></p>
 
 <p>The insight wasn't just to <em>use</em> TensorBoard, but to be deliberate about <em>how</em> I organized my logs. I wrote a small utility function to create a clean, timestamped directory structure for every single run, which made the above visualization possible.</p>
@@ -129,15 +129,15 @@ <h3>The Second Big Question: How Do I Squeeze Out More Performance?</h3>
 
 <p>My experiments were now reliable, but the best model's accuracy was still just "okay." I knew the answer was <strong>Transfer Learning</strong>, but I soon learned that knowing the name of a technique is very different from implementing it correctly.</p>
 
-<p><img src="posts_assets/feature-extraction-diagram.png" alt="A diagram showing a large pre-trained model being adapted for a new, smaller task." />
+<p><img src="posts_assets/feature-extraction-diagram.webp" alt="A diagram showing a large pre-trained model being adapted for a new, smaller task." />
 <em>The core concept of feature extraction: keep the pre-trained 'backbone' (the feature learner) and only train a new, small 'head' (the classifier) on our specific data.</em></p>
 
 <p><strong>Problem #3: My GPU was crying and my training was slow.</strong>
 My first attempt was naive. I loaded a pre-trained <code>EfficientNet</code>, swapped the final layer for my 3-class classifier, and hit "train." My GPU fan spun up like a jet engine, and the estimated training time was in hours, not minutes.</p>
 
 <p>The "aha!" moment came after digging into how transfer learning truly works. I was trying to retrain the entire network. The solution was to <strong>freeze the backbone</strong>.</p>
 
-<p><img src="posts_assets/torchinfo-frozen-layers.png" alt="A screenshot of the torchinfo summary showing a massive reduction in trainable parameters." />
+<p><img src="posts_assets/torchinfo-frozen-layers.webp" alt="A screenshot of the torchinfo summary showing a massive reduction in trainable parameters." />
 <em>The proof is in the numbers. After freezing the backbone, the number of trainable parameters dropped from over 4 million to just 3,843, dramatically speeding up training.</em></p>
 
 <pre><code># The crucial insight: only train the tiny new part of the model

projects_template.html

@@ -94,6 +94,11 @@ <h3 class="project-title">{{ project.title }}</h3>
                                     <a href="{{ project.github_url }}" class="project-button" target="_blank"
                                         rel="noopener noreferrer">View on GitHub</a>
                                     {% endif %}
+                                    {% if project.video_exists and project.video_url %}
+                                    <a href="{{ project.video_url }}" class="project-button video-link" target="_blank" rel="noopener noreferrer" title="Watch Video">
+                                        <i class="fa-solid fa-play"></i>
+                                    </a>
+                                    {% endif %}
                                     {% if project.blog_slug %}
                                     <a href="posts/{{ project.blog_slug }}.html" class="project-button blog-link">Read
                                         the Story</a>

sitemap.xml

@@ -2,37 +2,37 @@
 <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
   <url>
     <loc>https://gojo-rika.github.io/</loc>
-    <lastmod>2026-04-04</lastmod>
+    <lastmod>2026-04-11</lastmod>
     <changefreq>monthly</changefreq>
     <priority>1.0</priority>
   </url>
   <url>
     <loc>https://gojo-rika.github.io/resume.html</loc>
-    <lastmod>2026-04-04</lastmod>
+    <lastmod>2026-04-11</lastmod>
     <changefreq>monthly</changefreq>
     <priority>0.8</priority>
   </url>
   <url>
     <loc>https://gojo-rika.github.io/projects.html</loc>
-    <lastmod>2026-04-04</lastmod>
+    <lastmod>2026-04-11</lastmod>
     <changefreq>monthly</changefreq>
     <priority>0.8</priority>
   </url>
   <url>
     <loc>https://gojo-rika.github.io/blog.html</loc>
-    <lastmod>2026-04-04</lastmod>
+    <lastmod>2026-04-11</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.9</priority>
   </url>
   <url>
     <loc>https://gojo-rika.github.io/contact.html</loc>
-    <lastmod>2026-04-04</lastmod>
+    <lastmod>2026-04-11</lastmod>
     <changefreq>yearly</changefreq>
     <priority>0.6</priority>
   </url>
   <url>
     <loc>https://gojo-rika.github.io/tech-stack.html</loc>
-    <lastmod>2026-04-04</lastmod>
+    <lastmod>2026-04-11</lastmod>
     <changefreq>monthly</changefreq>
     <priority>0.7</priority>
   </url>