commit 3c4c52fe2b82b3881370c3d2761ffc6a4ea1ccf4 Author: Alex Selimov Date: Wed Sep 3 22:11:20 2025 -0400 Initial commit of LucentLink files diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..52e97c6 --- /dev/null +++ b/LICENSE @@ -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. \ No newline at end of file diff --git a/README.md b/README.md new file mode 100644 index 0000000..f9014dc --- /dev/null +++ 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://.github.io//" + 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. diff --git a/archetypes/default.md b/archetypes/default.md new file mode 100644 index 0000000..25b6752 --- /dev/null +++ b/archetypes/default.md @@ -0,0 +1,5 @@ ++++ +date = '{{ .Date }}' +draft = true +title = '{{ replace .File.ContentBaseName "-" " " | title }}' ++++ diff --git a/hugo.toml b/hugo.toml new file mode 100644 index 0000000..14fef94 --- /dev/null +++ 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"] diff --git a/images/screenshot.png b/images/screenshot.png new file mode 100644 index 0000000..c41ae45 Binary files /dev/null and b/images/screenshot.png differ diff --git a/images/tn.png b/images/tn.png new file mode 100644 index 0000000..2843b3f Binary files /dev/null and b/images/tn.png differ diff --git a/layouts/index.html b/layouts/index.html new file mode 100644 index 0000000..6b21cb0 --- /dev/null +++ b/layouts/index.html @@ -0,0 +1,40 @@ + + + {{ partial "head.html" . }} + + +
+ +
+ + {{ partial "profile.html" . }} + + + {{ partial "link-card.html" . }} + + + {{ partial "spotify-playlist.html" . }} + + + {{ partial "messaging-etiquette.html" . }} + + + + + + + + {{ partial "about.html" . }} + + + {{ partial "Instructions.html" . }} + +
+ © 2025 LucentLink | Made with ❤️ +
+ +
+ + + + 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 }} +
+

{{ .title }}

+
+ {{ range .sections }} +
+

{{ .heading }}

+

{{ .content }}

+
+ {{ end }} +
+
+{{ 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 @@ + + + + {{ .Site.Title }} + + + + + 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 @@ +
+

How to Customize This Page

+
+
+

Adding New Links

+

Copy one of the link cards and update the href, icon, title, and description.

+
+
+

Changing Icons

+

Replace the Font Awesome class (e.g., 'fa-twitter') with any icon from Font Awesome.

+
+
+

Updating Profile

+

Edit the profile section at the top with your name, bio, and profile image URL.

+
+
+

Theme Colors

+

Modify the Tailwind color classes (e.g., 'bg-blue-400') to match your brand.

+
+
+
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 @@ +
+ + {{ range .Params.links }} + + +
+ +
+
+

{{ .title }}

+

{{ .description }}

+
+ + + {{ end }} + +
\ 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 @@ +
+

{{ .Params.messaging.title }}

+
+ {{ range .Params.messaging.items }} +
+
+ +
+

{{ .text }}

+
+ {{ end }} +
+
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 */}} +
+ {{ with .Params.profileImage }} + {{/* strip leading “/” if present, otherwise leave as-is */}} + {{ $img := replaceRE "^/" "" . }} + {{ $.Params.name }} + {{ end }} +

+ {{ .Params.name }} +

+

{{ .Params.description }}

+ + +
\ 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 }} +
+
+ +

My Spotify Playlist

+
+ {{ . | safeHTML }} +
+{{ end }} \ No newline at end of file diff --git a/static/css/style.css b/static/css/style.css new file mode 100644 index 0000000..bdc7fba --- /dev/null +++ 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 */ + } +} \ No newline at end of file diff --git a/static/images/img.jpg b/static/images/img.jpg new file mode 100644 index 0000000..56dd529 Binary files /dev/null and b/static/images/img.jpg differ diff --git a/static/images/screenshot.png b/static/images/screenshot.png new file mode 100644 index 0000000..85b1c3b Binary files /dev/null and b/static/images/screenshot.png differ diff --git a/static/images/tn.png b/static/images/tn.png new file mode 100644 index 0000000..2843b3f Binary files /dev/null and b/static/images/tn.png differ diff --git a/static/js/script.js b/static/js/script.js new file mode 100644 index 0000000..c9f6fc0 --- /dev/null +++ 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(); +}); \ No newline at end of file diff --git a/theme.toml b/theme.toml new file mode 100644 index 0000000..d0c690d --- /dev/null +++ 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"