modified many filesHEADmaster

11 files changed, 220 insertions, 29 deletions

diff --git a/content/_index.md b/content/_index.md
index 7f63ddb..cdb73ec 100644
--- a/content/_index.md
+++ b/content/_index.md
@@ -1,42 +1,78 @@
+---
 title: "My Personal Website"
-#profileImage: "images/img.jpg"
-name: "Hitesh"
+# Profile settings
+profileImage: "images/img.jpg"        # path under static/
+name: "Hitesh Aggarwal"
 description: "Software Developer"
 socials:
-  - url: "mailto:sometestmail@gmail.com"
-    icon: "fab fa-gmail"
-# ...
-# messaging:
-#   title: "Messaging Etiquette"
-#   items:
-#     - icon: "fas fa-check-circle"
-#       color: "text-green-400"
-#       text: "Your guideline here."
-# ...
-about:
-  title: "About Me"
-  sections:
-    - heading: "Professional Background"
-      content: "Software Developer"
-# ...
-links:
-  - href: "https://github.com/hitesh-aggarwal"
+  - url: "https://github.com/hitesh-aggarwal"
     icon: "fab fa-github"
-    title: "GitHub"
-    description: "Explore my projects"
+  - url: "mailto:haggarwal@proton.me"
+    icon: "fas fa-envelope"
+
+# You can add as many links as you want!
+
+# Link cards
+links:
+  - href: "https://devlearnings.xyz"
+    icon: "fas fa-globe"
+    title: "Personal Website"
+    description: "My Website"
+  - href: "https://cgit.devlearnings.xyz"
+    icon: "fab fa-git"
+    title: "Cgit"
+    description: "Explore my self hosted repos"
   - href: "https://picoshare.devlearnings.xyz"
+    icon: "fas fa-share"
     title: "Picoshare"
     description: "Share files seamlessly"
   - href: "https://radicale.devlearnings.xyz"
+    icon: "fas fa-calendar"
     title: "Radicale"
     description: "CalDav Server"
-  - href: "https://bin.devlearnings.xyz"
-    title: "Pastebin"
-    description: "Minimal Pastebin"
   - href: "https://fusion.devlearnings.xyz"
+    icon: "fas fa-rss"
     title: "Fusion"
     description: "RSS reader"
-  - href: "https://cgit.devlearnings.xyz"
-    title: "Cgit"
-    description: "Explore my projects"
-# ...
+  - href: "https://bin.devlearnings.xyz"
+    icon: "fas fa-clipboard"
+    title: "Bin"
+    description: "A minimal pastebin"
+
+# Spotify playlist embed. You can add embed by rigth clicking on your spotify playlist -> Share -> Copy embed. After copying the embed, replace it with the iframe below.
+#spotifyPlaylist:
+#  iframe: '<iframe style="border-radius:12px" src="https://open.spotify.com/embed/playlist/6zcsSLDrLiCpX8KDzNiIhS?utm_source=generator" width="100%" height="152" frameborder="0" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe>'
+#
+## Messaging Etiquette. You can add new rules as per your needs.
+#messaging:
+#  title: "Messaging Etiquette"
+#  items:
+#    - icon: "fas fa-check-circle"
+#      color: "text-green-400"
+#      text: "Please include context about why you're reaching out and how I can help."
+#    - icon: "fas fa-check-circle"
+#      color: "text-green-400"
+#      text: "For collaboration requests, include details about the project scope and timeline."
+#    - icon: "fas fa-check-circle"
+#      color: "text-green-400"
+#      text: "I typically respond within 2-3 business days for professional inquiries."
+#    - icon: "fas fa-times-circle"
+#      color: "text-red-400"
+#      text: "Please don't send unsolicited sales pitches or recruitment messages."
+
+
+#  REMOVE "How to Customize This Page" section by removing the line "{{ partial "Instructions.html" . }}" in index.html file under layouts/
+
+
+# About section (optional section)
+
+# about:
+#   title: "About Me"
+#   sections:
+#     - heading: "Professional Background"
+#       content: "I'm a full-stack developer with 5+ years of experience building web applications. Specialized in JavaScript frameworks and cloud architecture."
+#     # - heading: "Current Focus"
+#     #   content: "Currently working on open-source tools to improve developer productivity and accessibility in web development."
+#     # - heading: "Personal Interests"
+#     #   content: "When not coding, I enjoy photography, hiking, and contributing to local tech communities through mentorship programs."
+---
diff --git a/hugo.toml b/hugo.toml
index e18e069..6a8fe78 100644
--- a/hugo.toml
+++ b/hugo.toml
@@ -2,3 +2,10 @@ baseURL = 'https://devlearnings.xyz/'
 languageCode = 'en-in'
 title = 'My Personal Website.'
 theme = 'LucentLink-Hugo'
+
+[params]
+  description     = "A clean, customizable, and responsive Linktree-style landing page built using HTML, Tailwind CSS, and Font Awesome."
+  googleAnalytics = ""    # your GA ID, if any
+
+[outputs]
+  home = ["HTML"]
diff --git a/layouts/index.html b/layouts/index.html
new file mode 100644
index 0000000..b7afe0f
--- /dev/null
+++ b/layouts/index.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+    {{ partial "head.html" . }}
+<body>
+    <!-- Background Animation -->
+    <div class="bg-animation" id="bgAnimation"></div>
+
+    <div class="container mx-auto px-4 py-12 max-w-md">
+        <!-- Profile Section -->
+        {{ partial "profile.html" . }}
+
+        <!-- Links Section -->
+        {{ partial "link-card.html" . }}
+
+        <!-- Spotify Embed -->
+	<!-- {{ partial "spotify-playlist.html" . }} -->
+
+        <!-- Messaging Etiquette section -->
+	<!-- {{ partial "messaging-etiquette.html" . }} -->
+          
+        
+        <!-- Embed with hue-shift filter -->
+        <!-- style="filter: hue-rotate(150deg) saturate(0.6) brightness(0.9);" -->
+
+
+        <!-- About Me section (If you want to write about yourself, uncomment the section below)--> 
+        {{ partial "about.html" . }}
+
+        <!-- Instructions section (After you're done adding your links, remove or comment the line below) -->
+	<!-- {{ partial "Instructions.html" . }} -->
+
+        <footer class="text-center text-xs opacity-60">
+            © 2025 LucentLink | Made with ❤️
+        </footer>
+        
+    </div>
+
+    <script src="js/script.js"></script>
+</body>
+</html>
diff --git a/layouts/partials/about.html b/layouts/partials/about.html
new file mode 100644
index 0000000..8d739f1
--- /dev/null
+++ b/layouts/partials/about.html
@@ -0,0 +1,13 @@
+{{ with .Params.about }}
+<div class="bg-white bg-opacity-10 rounded-lg p-6 mb-6 border border-white border-opacity-20">
+  <h2 class="text-xl font-bold mb-4">{{ .title }}</h2>
+  <div class="space-y-4">
+    {{ range .sections }}
+      <div>
+        <h3 class="font-semibold mb-2">{{ .heading }}</h3>
+        <p class="text-sm opacity-80">{{ .content }}</p>
+      </div>
+    {{ end }}
+  </div>
+</div>
+{{ end }}
\ No newline at end of file
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
new file mode 100644
index 0000000..f100897
--- /dev/null
+++ b/layouts/partials/head.html
@@ -0,0 +1,9 @@
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>{{ .Site.Title }}</title>
+    <link rel="stylesheet" href="css/style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+  </head>
+  
diff --git a/layouts/partials/instructions.html b/layouts/partials/instructions.html
new file mode 100644
index 0000000..6c13acc
--- /dev/null
+++ b/layouts/partials/instructions.html
@@ -0,0 +1,22 @@
+<div class="rounded-lg p-6 mb-8 text-white mt-6"
+     style="background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px);">
+    <h2 class="text-xl font-bold mb-4">How to Customize This Page</h2>
+    <div class="space-y-3">
+        <div>
+            <h3 class="font-semibold">Adding New Links</h3>
+            <p class="text-sm opacity-80">Copy one of the link cards and update the href, icon, title, and description.</p>
+        </div>
+        <div>
+            <h3 class="font-semibold">Changing Icons</h3>
+            <p class="text-sm opacity-80">Replace the Font Awesome class (e.g., 'fa-twitter') with any icon from <a href="https://fontawesome.com/icons" class="underline" target="_blank">Font Awesome</a>.</p>
+        </div>
+        <div>
+            <h3 class="font-semibold">Updating Profile</h3>
+            <p class="text-sm opacity-80">Edit the profile section at the top with your name, bio, and profile image URL.</p>
+        </div>
+        <div>
+            <h3 class="font-semibold">Theme Colors</h3>
+            <p class="text-sm opacity-80">Modify the Tailwind color classes (e.g., 'bg-blue-400') to match your brand.</p>
+        </div>
+    </div>
+</div>
diff --git a/layouts/partials/link-card.html b/layouts/partials/link-card.html
new file mode 100644
index 0000000..8440fa8
--- /dev/null
+++ b/layouts/partials/link-card.html
@@ -0,0 +1,17 @@
+<div class="space-y-4 mb-8">
+
+    {{ range .Params.links }}
+
+      <a href="{{ .href }}" class="block link-card p-4 flex items-center">
+        <div class="w-10 h-10 flex items-center justify-center mr-4">
+          <i class="{{ .icon }} icon text-xl"></i>
+        </div>
+        <div>
+          <h3 class="font-medium">{{ .title }}</h3>
+          <p class="text-sm opacity-70">{{ .description }}</p>
+        </div>
+      </a>
+
+    {{ end }}
+
+</div>
\ No newline at end of file
diff --git a/layouts/partials/messaging-etiquette.html b/layouts/partials/messaging-etiquette.html
new file mode 100644
index 0000000..7e7be95
--- /dev/null
+++ b/layouts/partials/messaging-etiquette.html
@@ -0,0 +1,14 @@
+<div class="rounded-lg p-6 mb-8 text-white mt-6"
+     style="background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px);">
+    <h2 class="text-xl font-bold mb-4">{{ .Params.messaging.title }}</h2>
+    <div class="space-y-3">
+      {{ range .Params.messaging.items }}
+        <div class="flex items-start">
+          <div class="flex-shrink-0 h-5 w-5 {{ .color }} mt-0.5 mr-2">
+            <i class="{{ .icon }}"></i>
+          </div>
+          <p class="text-sm opacity-80">{{ .text }}</p>
+        </div>
+      {{ end }}
+    </div>
+</div>
diff --git a/layouts/partials/profile.html b/layouts/partials/profile.html
new file mode 100644
index 0000000..d018103
--- /dev/null
+++ b/layouts/partials/profile.html
@@ -0,0 +1,22 @@
+{{/* layouts/partials/profile.html */}}
+<div class="flex flex-col items-center mb-8">
+    {{ with .Params.profileImage }}
+      {{/* strip leading “/” if present, otherwise leave as-is */}}
+      {{ $img := replaceRE "^/" "" . }}
+      <img src="{{ $img }}"
+           alt="{{ $.Params.name }}"
+           class="profile-pic mb-4">
+    {{ end }}
+    <h1 class="text-3xl font-bold mb-2 text-center" style="color: var(--text-color)">
+      {{ .Params.name }}
+    </h1>
+    <p class="text-center opacity-80 mb-6">{{ .Params.description }}</p>
+  
+    <div class="flex flex-wrap justify-center gap-4 mb-8 social-icons">
+      {{ range .Params.socials }}
+        <a href="{{ .url }}" class="text-xl" target="_blank" rel="noopener">
+          <i class="{{ .icon }} icon"></i>
+        </a>
+      {{ end }}
+    </div>
+</div>
\ No newline at end of file
diff --git a/layouts/partials/spotify-playlist.html b/layouts/partials/spotify-playlist.html
new file mode 100644
index 0000000..fea9c52
--- /dev/null
+++ b/layouts/partials/spotify-playlist.html
@@ -0,0 +1,11 @@
+{{/* layouts/partials/spotify-playlist.html */}}
+{{ with .Params.spotifyPlaylist.iframe }}
+<div class="spotify-widget pulsating-box border-trace h-auto rounded-lg p-6 mb-8 border text-white mt-6"
+     style="background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.1);">
+  <div class="flex items-center mb-4">
+      <i class="fab fa-spotify text-2xl mr-3 mb-1"></i>
+      <h3 class="text-xl font-bold">My Spotify Playlist</h3>
+    </div>
+    {{ . | safeHTML }}
+  </div>
+{{ end }}
\ No newline at end of file
diff --git a/static/images/img.jpg b/static/images/img.jpg
new file mode 100644
index 0000000..26002d4
--- /dev/null
+++ b/static/images/img.jpg