Initial commit of LucentLink files

2025-09-03 22:11:20 -04:00 · 2025-09-03 22:11:20 -04:00 · 3c4c52fe2b
commit 3c4c52fe2b
20 changed files with 569 additions and 0 deletions
--- a/21
+++ b/21
@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 cx48
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
--- a/README.md
+++ b/README.md
@ -0,0 +1,171 @@
+# LucentLink
+
+A clean, customizable, and responsive Linktree-style landing page built using HTML, Tailwind CSS, and Font Awesome. Easily manage your profile, social links, messaging guidelines, About section, and link cards directly from Markdown front matter.
+
+## Live Preview
+
+[LucentLink](https://cx48.github.io/LucentLink-Hugo") can be deployed for free using Vercel or GitHub Pages
+
+![LucentLink Screenshot](https://raw.githubusercontent.com/cx48/LucentLink-Hugo/refs/heads/main/static/images/screenshot.png)
+
+## Features
+
+- **Profile Section**: Display a profile image, name, description, and social icons.
+- **Messaging Etiquette**: Optional section to share guidelines on how to contact you.
+- **About Section**: Optional section to highlight professional background, current focus, and personal interests.
+- **Link Cards**: Styled link cards with icons, titles, and descriptions.
+- **Tailwind CSS**: Uses Tailwind utility classes for styling.
+- **Font Awesome**: Include any Font Awesome icon for links and social icons.
+- **Modular Partials**: All HTML markup is in Hugo partials for easy customization.
+
+## Getting Started
+
+### Prerequisites
+
+- [Hugo (Extended)](https://gohugo.io/getting-started/installation/)
+- Git (To track changes)
+
+### Quick Setup
+
+1. Create a new Hugo site (if you haven’t already)
+
+```
+hugo new site my-site
+cd my-site
+```
+
+2. Clone this repo into your Hugo site’s themes folder
+
+```
+git clone https://github.com/cx48/LucentLink-Hugo.git themes/LucentLink-Hugo
+```
+
+3. Enable the theme in your new site’s `config.toml`. If `config.toml` doesn't exists, then edit `hugo.toml` by adding the following code.
+
+```
+baseURL = "https://yourdomain.com/"
+languageCode = "en-us"
+title = "LucentLink"
+theme = "LucentLink-Hugo"
+minVersion = "0.115.0"
+
+[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"]
+```
+
+4. Copy or edit `content/_index.md`—that’s the only file you ever need to touch.
+
+5. Run the dev server
+
+```
+hugo server -D
+```
+
+## Configuration
+
+All content is driven by front matter in `content/_index.md`:
+
+```yaml
+title: "LucentLink"
+profileImage: "images/img.jpg"
+name: "Your Name"
+description: "Your tagline or role"
+socials:
+  - url: "https://twitter.com/you"
+    icon: "fab fa-twitter"
+# ...
+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: "Your background text."
+# ...
+links:
+  - href: "https://github.com/you"
+    icon: "fab fa-github"
+    title: "GitHub"
+    description: "Explore my projects"
+# ...
+```
+
+- **Add/Remove Sections**: Simply remove or comment out `messaging:` or `about:` blocks to toggle those sections.
+- **Add Links**: Append to the `links:` array.
+- **Add Socials**: Append to the `socials:` array.
+
+## Partials
+
+- `layouts/partials/profile.html`
+- `layouts/partials/messaging.html`
+- `layouts/partials/about.html`
+- `layouts/partials/link-card.html`
+
+You can override any partial by copying it into your project’s `layouts/partials/` folder and editing.
+
+## Development
+
+Run Hugo’s development server:
+
+```bash
+hugo server -D
+```
+
+Navigate to [http://localhost:1313](http://localhost:1313) to preview changes live.
+
+## Deployment
+
+### Vercel
+
+1. Push your repo to GitHub.
+2. Sign in to [Vercel](https://vercel.com/) and import the project.
+3. Set the **Framework Preset** to **Hugo**.
+4. Use the build command:
+   ```bash
+   hugo --gc --minify
+   ```
+5. Output directory: `public`
+6. Deploy and visit your Vercel URL.
+
+### GitHub Pages
+
+1. In `config.toml`, set:
+   ```toml
+   baseURL = "https://<username>.github.io/<repo>/"
+   publishDir = "public"
+   ```
+2. Build the site:
+   ```bash
+   hugo --gc --minify
+   ```
+3. Push the `public/` folder to the `gh-pages` branch:
+   ```bash
+   git subtree push --prefix public origin gh-pages
+   ```
+
+## Customization
+
+- **CSS**: Update Tailwind config or your custom CSS in `assets/css` or `static/css`.
+- **Icons**: Change any Font Awesome icon class in front matter.
+- **Templates**: Edit partials or create new ones in `layouts/partials/`.
+
+## Contributing
+
+1. Fork this repo.
+2. Create a feature branch: `git checkout -b feature/my-change`
+3. Commit your changes: `git commit -m "feat: add new ..."
+4. Push to branch: `git push origin feature/my-change`
+5. Open a Pull Request.
+
+## License
+
+This project is licensed under the MIT License - see the LICENSE file for details.
--- a/archetypes/default.md
+++ b/archetypes/default.md
@ -0,0 +1,5 @@
+++
+date = '{{ .Date }}'
+draft = true
+title = '{{ replace .File.ContentBaseName "-" " " | title }}'
+++
--- a/hugo.toml
+++ b/hugo.toml
@ -0,0 +1,12 @@
+baseURL      = "https://yourdomain.com/"
+languageCode = "en-us"
+title        = "LucentLink"
+theme        = "LucentLink-Hugo"
+minVersion   = "0.115.0"
+
+[params]
+  description     = "A simple, customizable, and responsive Linktree-style landing page built using Hugo, Tailwind CSS, and Font Awesome."
+  googleAnalytics = "" 
+
+[outputs]
+  home = ["HTML"]
--- a/images/screenshot.png
+++ b/images/screenshot.png
--- a/images/tn.png
+++ b/images/tn.png
--- a/layouts/index.html
+++ 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>
--- a/layouts/partials/about.html
+++ 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 }}
--- a/layouts/partials/head.html
+++ 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>
+  
--- a/layouts/partials/instructions.html
+++ 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>
--- a/layouts/partials/link-card.html
+++ 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>
--- a/layouts/partials/messaging-etiquette.html
+++ 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>
--- a/layouts/partials/profile.html
+++ 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>
--- a/layouts/partials/spotify-playlist.html
+++ 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 }}
--- a/static/css/style.css
+++ b/static/css/style.css
@ -0,0 +1,162 @@
+:root {
+  --bg-color: #1a1a2e;
+  --text-color: rgba(255, 255, 255, 0.85);
+  --icon-color: rgba(255, 255, 255, 0.7);
+}
+
+body {
+  font-family: 'Poppins', sans-serif;
+  background-color: var(--bg-color);
+  color: var(--text-color);
+  min-height: 100vh;
+  margin: 0;
+  padding: 0;
+  overflow-x: hidden;
+}
+
+.profile-pic {
+  width: 120px;
+  height: 120px;
+  border-radius: 50%;
+  object-fit: cover;
+  border: 3px solid rgba(255, 255, 255, 0.2);
+  transition: all 0.3s ease;
+}
+
+.profile-pic:hover {
+  transform: scale(1.05);
+  border-color: rgba(255, 255, 255, 0.4);
+}
+
+.link-card {
+  background: rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(10px);
+  border-radius: 12px;
+  transition: all 0.3s ease;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.link-card:hover {
+  transform: translateY(-5px);
+  background: rgba(255, 255, 255, 0.15);
+  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
+}
+
+.icon {
+  color: var(--icon-color);
+  transition: all 0.3s ease;
+}
+
+.link-card:hover .icon {
+  transform: scale(1.1);
+  color: rgba(255, 255, 255, 0.9);
+}
+
+.bg-animation {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: -1;
+  overflow: hidden;
+}
+
+.circle {
+  position: absolute;
+  border-radius: 50%;
+  background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 70%);
+  animation: float 15s infinite linear;
+}
+
+@keyframes float {
+  0% {
+      transform: translateY(0) rotate(0deg);
+      opacity: 1;
+  }
+  100% {
+      transform: translateY(-1000px) rotate(720deg);
+      opacity: 0;
+  }
+}
+
+.info-box {
+  background: rgba(0, 0, 0, 0.3);
+  backdrop-filter: blur(5px);
+  border-left: 3px solid var(--icon-color);
+}
+
+.social-icons a {
+  transition: all 0.3s ease;
+}
+
+.social-icons a:hover {
+  transform: translateY(-3px) scale(1.1);
+}
+
+/* Generate random circles for background */
+.generate-circles {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}
+
+.pulsating-box {
+  animation: glowWave 4s infinite;
+}
+
+@keyframes glowWave {
+  0% {
+    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.2);
+  }
+  50% {
+    box-shadow: 0 0 20px 20px rgba(255, 255, 255, 0);
+  }
+  100% {
+    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
+  }
+}
+
+.border-trace::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 12px; /* match your card radius */
+  box-sizing: border-box;
+  pointer-events: none;
+
+  /* Gradient border using a mask trick */
+  border: 3px solid transparent;
+  background: linear-gradient(90deg, rgba(255, 255, 255, 0.8), rgba(209, 77, 77, 0.224), rgba(255, 255, 255, 0.8));
+  -webkit-mask: 
+    linear-gradient(#fff 0 0) content-box, 
+    linear-gradient(#fff 0 0);
+  -webkit-mask-composite: xor;
+  mask-composite: exclude;
+  padding: 3px; /* same as border thickness */
+
+  /* Animation */
+  clip-path: inset(0 100% 0 0); /* start hidden */
+  animation: drawBorder 10s linear infinite; /* slower: 10s */
+}
+
+@keyframes drawBorder {
+  0% {
+    clip-path: inset(0 100% 0 0); /* hidden */
+  }
+  25% {
+    clip-path: inset(0 0 0 0); /* fully visible */
+  }
+  50% {
+    clip-path: inset(100% 0 0 0); /* start hiding from top */
+  }
+  75% {
+    clip-path: inset(0 0 0 100%); /* hide from right */
+  }
+  100% {
+    clip-path: inset(0 100% 0 0); /* back to hidden */
+  }
+}
--- a/static/images/img.jpg
+++ b/static/images/img.jpg
--- a/static/images/screenshot.png
+++ b/static/images/screenshot.png
--- a/static/images/tn.png
+++ b/static/images/tn.png
--- a/static/js/script.js
+++ b/static/js/script.js
@ -0,0 +1,30 @@
+// Generates floating circles for background
+document.addEventListener('DOMContentLoaded', function() {
+    const bgAnimation = document.getElementById('bgAnimation');
+    
+    for (let i = 0; i < 15; i++) {
+        const circle = document.createElement('div');
+        circle.classList.add('circle');
+        
+        // Random size between 50px and 200px
+        const size = Math.random() * 150 + 50;
+        circle.style.width = `${size}px`;
+        circle.style.height = `${size}px`;
+        
+        // Random position
+        circle.style.left = `${Math.random() * 100}%`;
+        circle.style.top = `${Math.random() * 100}%`;
+        
+        // Random animation duration
+        circle.style.animationDuration = `${Math.random() * 20 + 10}s`;
+        circle.style.animationDelay = `${Math.random() * 5}s`;
+        
+        bgAnimation.appendChild(circle);
+    }
+
+    function updateColors() {
+        document.documentElement.style.setProperty('--text-color', 'rgba(255, 255, 255, 0.85)');
+        document.documentElement.style.setProperty('--icon-color', 'rgba(255, 255, 255, 0.7)');
+    }
+    updateColors();
+});
--- a/theme.toml
+++ b/theme.toml
@ -0,0 +1,20 @@
+name        = "LucentLink"
+license     = "MIT"
+licenseURL  = "https://github.com/cx48/LucentLink-Hugo/blob/main/LICENSE"
+min_version = "0.115.0"  
+homepage    = "https://github.com/cx48/LucentLink-Hugo"
+repository  = "https://github.com/cx48/LucentLink-Hugo"
+demosite        = "https://cx48.github.io/LucentLink-Hugo"
+description = "A simple, Tailwind-powered Linktree-style Hugo theme with profile, messaging, About and link cards."
+tags        = ["linktree", "tailwind", "responsive", "onepage"]
+features    = ["assetsMinification", "imageProcessing", "markdownRendering"]
+
+[author]
+    name = "cx48"
+    homepage = "https://cx48.dev"
+    
+[original]
+  name = "LucentLink"
+  author = "cx48"
+  homepage = "https://github.com/cx48/LucentLink"
+  repo = "https://github.com/cx48/LucentLink"