Merge pull request #44 from PatilShreyas/optimization

Optimize site performance

Author: PatilShreyas

.github/workflows/hugo.yml .github/workflows/deploy-to-pages.yml.github/workflows/hugo.yml renamed to .github/workflows/deploy-to-pages.yml

@@ -1,4 +1,4 @@
-name: Deploy Hugo site to Pages
+name: Deploy to Pages
 
 on:
   push:
@@ -47,8 +47,6 @@ jobs:
       - name: Setup Pages
         id: pages
         uses: actions/configure-pages@v4
-      - name: Install Node.js dependencies
-        run: "[[ -f package-lock.json || -f npm-shrinkwrap.json ]] && npm ci || true"
       - name: Build with Hugo
         env:
           # For maximum backward compatibility with Hugo modules

README.md

@@ -17,9 +17,10 @@ A modern, minimalist portfolio website built with Hugo.
 
 ### Prerequisites
 - [Hugo Extended](https://gohugo.io/installation/) (v0.148.2 or later)
-- Node.js (for Tailwind CSS)
+- [Node.js](https://nodejs.org/) (v16 or later)
+- npm (comes with Node.js)
 
-### Local Development
+### Local Development Setup
 ```bash
 # Clone the repository
 git clone https://github.com/PatilShreyas/PatilShreyas.github.io.git
@@ -31,28 +32,56 @@ hugo server
 # Site will be available at http://localhost:1313
 ```
 
+### CSS Development (Optional)
+If you need to modify Tailwind CSS:
+
+```bash
+# Install dependencies (only needed for CSS changes)
+npm install
+
+# Build optimized CSS after making Tailwind changes
+npm run build-css
+
+# Commit the generated CSS file
+git add static/css/tailwind.css
+git commit -m "Update optimized CSS"
+```
+
+### Available npm Scripts (Development Only)
+```bash
+npm run build-css    # Build optimized Tailwind CSS
+npm run watch-css    # Watch for changes and rebuild CSS
+npm run build        # Build both CSS and Hugo site
+```
+
+### CSS Development Notes
+- **Source:** `src/input.css` (Tailwind directives and custom CSS)
+- **Output:** `static/css/tailwind.css` (committed to repository)
+- **Config:** `tailwind.config.js` (Tailwind configuration)
+- **Deployment:** CSS is pre-generated and committed, no build step needed
+
 ### Building for Production
 ```bash
-# Build the site
 hugo --minify
 
 # Output will be in the 'public/' directory
 ```
 
 ## 🚀 Deployment
 
+Both deployment platforms are configured for simple Hugo-only builds (no Node.js dependencies required).
+
 ### GitHub Actions (Recommended)
-The repository includes GitHub Actions workflow for automatic deployment:
+The repository includes GitHub Actions workflow for automatic deployment with optimized builds:
 
-[.github/workflows/hugo.yml](.github/workflows/hugo.yml)
+[.github/workflows/deploy-to-pages.yml](.github/workflows/deploy-to-pages.yml)
 
 ### Netlify
 Current deployment is on Netlify with automatic builds from the main branch.
 Configured in [netlify.toml](netlify.toml).
 
 ### Manual Deployment
 ```bash
-# Build the site
 hugo --minify
 
 # Deploy the 'public/' directory to your hosting provider

hugo.toml

@@ -13,14 +13,15 @@ disableKinds = ["taxonomy", "term"]
   # Profile information
   name = "Shreyas Sharad Patil"
   tagline = "Google Developer Expert for Android"
-  profile_image = "/Images/profile.png"
+  profile_image = "/Images/profile-optimized.webp"
   cv_url = "https://drive.google.com/file/d/1RMyErD4VNG2IhoHghwugXm0PGAxcGL0m/view?usp=sharing"
 
   # Social media links
   email = "hi@shreyaspatil.dev"
   facebook = "https://www.facebook.com/shreyaspatil99"
   twitter = "https://twitter.com/imShreyasPatil"
   instagram = "https://instagram.com/shreyaspatil.dev/"
+  threads = "https://www.threads.net/@shreyaspatil.dev"
   linkedin = "https://www.linkedin.com/in/patil-shreyas"
   github = "https://github.com/PatilShreyas"
   playstore = "https://play.google.com/store/apps/dev?id=7315706573700759915"

layouts/_default/baseof.html

@@ -10,11 +10,11 @@
     <meta name="keywords" content="{{ .Site.Params.keywords }}">
     <meta name="author" content="{{ .Site.Params.author }}">
     <link rel="canonical" href="{{ .Permalink }}" />
-    <link rel="shortcut icon" href="{{ .Site.BaseURL }}Images/profile.png" type="image/png" />
+    <link rel="shortcut icon" href="{{ .Site.BaseURL }}Images/profile-optimized.png" type="image/png" />
 
     <!-- Open Graph -->
     <meta property="og:title" content="{{ .Site.Title }}">
-    <meta property="og:image" content="{{ .Site.BaseURL }}Images/profile.png">
+    <meta property="og:image" content="{{ .Site.BaseURL }}Images/profile-optimized.png">
     <meta property="og:description" content="{{ .Site.Params.description }}">
     <meta property="og:url" content="{{ .Permalink }}">
     <meta property="og:type" content="website">
@@ -23,39 +23,21 @@
     <meta name="twitter:card" content="summary_large_image">
     <meta name="twitter:title" content="{{ .Site.Title }}">
     <meta name="twitter:description" content="{{ .Site.Params.description }}">
-    <meta name="twitter:image" content="{{ .Site.BaseURL }}Images/profile.png">
+    <meta name="twitter:image" content="{{ .Site.BaseURL }}Images/profile-optimized.png">
 
     <!-- Resource Hints -->
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link rel="preconnect" href="https://cdnjs.cloudflare.com">
-    <link rel="preconnect" href="https://cdn.tailwindcss.com">
+    
+    <!-- Preload Critical Resources -->
+    <link rel="preload" href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap" as="style" onload="this.onload=null;this.rel='stylesheet'">
+    <noscript><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap"></noscript>
+    <link rel="preload" href="{{ .Site.BaseURL }}{{ .Site.Params.profile_image }}" as="image">
+    <link rel="preload" href="{{ .Site.BaseURL }}Images/background-optimized.webp" as="image">
 
     <!-- Fonts and CSS -->
-    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap" rel="stylesheet">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
-    <script src="https://cdn.tailwindcss.com"></script>
-    <script>
-        tailwind.config = {
-            darkMode: 'class',
-            theme: {
-                extend: {
-                    colors: {
-                        primary: '#47d3f7',
-                        dark: {
-                            bg: '#000000',
-                            card: 'rgba(255, 255, 255, 0.05)',
-                            text: '#ffffff',
-                            muted: '#b7b6bb'
-                        }
-                    },
-                    fontFamily: {
-                        'montserrat': ['Montserrat', 'sans-serif']
-                    }
-                }
-            }
-        }
-    </script>
+    <link rel="stylesheet" href="{{ .Site.BaseURL }}css/fontawesome-minimal.css">
+    <link rel="stylesheet" href="{{ .Site.BaseURL }}css/tailwind.css">
     <link rel="stylesheet" href="{{ .Site.BaseURL }}css/custom.css">
 </head>
 <body class="dark bg-dark-bg text-dark-text font-montserrat">
@@ -72,19 +54,25 @@
 
     <!-- Image Loading Optimization Script -->
     <script>
-        // Load background image after page is fully loaded
-        window.addEventListener('load', function() {
-            setTimeout(function() {
-                const bgElement = document.getElementById('background-image');
-                if (bgElement) {
-                    const img = new Image();
-                    img.onload = function() {
-                        bgElement.style.backgroundImage = "url('/Images/background.png')";
-                        bgElement.style.opacity = '1';
-                    };
-                    img.src = '/Images/background.png';
-                }
-            }, 1000);
+        // Load background image with WebP support and fallback
+        document.addEventListener('DOMContentLoaded', function() {
+            const bgElement = document.getElementById('background-image');
+            if (bgElement) {
+                // Check WebP support and use appropriate image
+                const webpSupported = (function() {
+                    const canvas = document.createElement('canvas');
+                    canvas.width = 1;
+                    canvas.height = 1;
+                    return canvas.toDataURL('image/webp').indexOf('data:image/webp') === 0;
+                })();
+                
+                const imageUrl = webpSupported 
+                    ? '/Images/background-optimized.webp' 
+                    : '/Images/background-optimized.jpg';
+                
+                bgElement.style.backgroundImage = `url('${imageUrl}')`;
+                bgElement.style.opacity = '1';
+            }
         });
     </script>
 

layouts/index.html

@@ -14,15 +14,17 @@
         <div id="home" class="flex-1 lg:flex-none lg:w-2/5 flex items-center justify-center px-4 py-20 lg:py-0">
             <div class="text-center max-w-lg">
                 <!-- Profile Image with Loading Placeholder -->
-                <div class="mb-8 relative">
+                <div class="mb-8 mt-8 relative">
                     <!-- Placeholder circle while image loads -->
                     <div id="profile-placeholder" class="w-48 h-48 lg:w-64 lg:h-64 rounded-full mx-auto shadow-2xl bg-gradient-to-br from-primary to-blue-600 opacity-30 animate-pulse transition-opacity duration-500"></div>
-                    <!-- Actual profile image -->
-                    <img id="profile-image"
-                         src="{{ .Site.Params.profile_image }}"
-                         alt="{{ .Site.Params.name }}"
-                         class="w-48 h-48 lg:w-64 lg:h-64 rounded-full mx-auto shadow-2xl border-2 border-secondary hover:scale-105 transition-all duration-500 opacity-0 absolute inset-0"
-                         onload="this.style.opacity='1'; document.getElementById('profile-placeholder').style.opacity='0';">
+                    <!-- Actual profile image with WebP support -->
+                    <picture id="profile-image" class="opacity-0 absolute inset-0 transition-opacity duration-500">
+                        <source srcset="{{ .Site.Params.profile_image }}" type="image/webp">
+                        <img src="/Images/profile-optimized.png"
+                             alt="{{ .Site.Params.name }}"
+                             class="w-48 h-48 lg:w-64 lg:h-64 rounded-full mx-auto shadow-2xl border-2 border-secondary hover:scale-105 transition-all duration-500"
+                             onload="this.parentElement.style.opacity='1'; document.getElementById('profile-placeholder').style.opacity='0';">
+                    </picture>
                 </div>
 
                 <!-- Name -->
@@ -32,7 +34,7 @@ <h1 class="text-2xl md:text-3xl lg:text-4xl mb-4 text-white font-weight-normal">
 
                 <!-- Animated Headlines -->
                 <div class="mb-8">
-                    <h2 class="text-xl md:text-2xl font-medium text-secondary">
+                    <h2 class="text-xl md:text-2xl font-medium">
                         <span id="animated-text">❤️ Android</span>
                         <span class="animate-pulse">|</span>
                     </h2>
@@ -56,29 +58,24 @@ <h2 class="text-xl md:text-2xl font-medium text-secondary">
                         <i class="far fa-envelope"></i>
                     </a>
                     {{ end }}
-                    {{ with .Site.Params.facebook }}
-                    <a href="{{ . }}" target="_blank" class="social-icon bg-blue-600 hover:bg-blue-700">
-                        <i class="fab fa-facebook-f"></i>
+                    {{ with .Site.Params.github }}
+                    <a href="{{ . }}" target="_blank" class="social-icon bg-gray-600 hover:bg-gray-700">
+                        <i class="fab fa-github-alt"></i>
                     </a>
                     {{ end }}
                     {{ with .Site.Params.twitter }}
-                    <a href="{{ . }}" target="_blank" class="social-icon bg-blue-400 hover:bg-blue-500">
-                        <i class="fab fa-twitter"></i>
-                    </a>
-                    {{ end }}
-                    {{ with .Site.Params.instagram }}
-                    <a href="{{ . }}" target="_blank" class="social-icon bg-pink-600 hover:bg-pink-700">
-                        <i class="fab fa-instagram"></i>
+                    <a href="{{ . }}" target="_blank" class="social-icon bg-black hover:bg-gray-800">
+                        <span class="font-bold text-lg">𝕏</span>
                     </a>
                     {{ end }}
                     {{ with .Site.Params.linkedin }}
                     <a href="{{ . }}" target="_blank" class="social-icon bg-blue-800 hover:bg-blue-900">
                         <i class="fab fa-linkedin-in"></i>
                     </a>
                     {{ end }}
-                    {{ with .Site.Params.github }}
-                    <a href="{{ . }}" target="_blank" class="social-icon bg-gray-800 hover:bg-gray-900">
-                        <i class="fab fa-github-alt"></i>
+                    {{ with .Site.Params.threads }}
+                    <a href="{{ . }}" target="_blank" class="social-icon bg-gray-900 hover:bg-black">
+                        <span class="font-bold text-lg">@</span>
                     </a>
                     {{ end }}
                     {{ with .Site.Params.playstore }}
@@ -96,6 +93,16 @@ <h2 class="text-xl md:text-2xl font-medium text-secondary">
                         <i class="fas fa-blog"></i>
                     </a>
                     {{ end }}
+                    {{ with .Site.Params.facebook }}
+                    <a href="{{ . }}" target="_blank" class="social-icon bg-blue-600 hover:bg-blue-700">
+                        <i class="fab fa-facebook-f"></i>
+                    </a>
+                    {{ end }}
+                    {{ with .Site.Params.instagram }}
+                    <a href="{{ . }}" target="_blank" class="social-icon bg-pink-600 hover:bg-pink-700">
+                        <i class="fab fa-instagram"></i>
+                    </a>
+                    {{ end }}
                 </div>
             </div>
         </div>

package.json

@@ -0,0 +1,19 @@
+{
+  "name": "shreyas-patil-portfolio",
+  "version": "1.0.0",
+  "description": "Personal portfolio website of Shreyas Patil - Google Developer Expert for Android",
+  "scripts": {
+    "build-css": "tailwindcss -i ./src/input.css -o ./static/css/tailwind.css --minify",
+    "watch-css": "tailwindcss -i ./src/input.css -o ./static/css/tailwind.css --watch",
+    "dev": "hugo server --bind 0.0.0.0 --port 1313",
+    "build": "npm run build-css && hugo --minify"
+  },
+  "devDependencies": {
+    "tailwindcss": "^3.4.0",
+    "@tailwindcss/forms": "^0.5.7",
+    "@tailwindcss/typography": "^0.5.10"
+  },
+  "keywords": ["hugo", "portfolio", "tailwindcss", "android", "developer"],
+  "author": "Shreyas Patil",
+  "license": "MIT"
+}