What is this?

A fully customizable guns.lol profile page clone built with vanilla HTML, CSS, and JavaScript. No frameworks, no build tools. Everything controlled from src/js/config.js.

Features

1. Get the project

Clone or download the repository. The project is a flat file structure — no framework, no bundler.

git clone https://github.com/6sfy/guns.lol.git
cd guns.lol

2. Open the config file

All configuration lives in src/js/config.js. Open it in any text editor.

3. Set your identity

Change the display name and user ID to your own.

const CONFIG = {
  username: "YourName",
  uid: "12,345",
  joinedDate: "Joined 3 months ago",
  // ...
};

4. Add badges

Badges appear beneath your avatar. Just use the icon key — color and name are automatic.

badges: ["verified", "premium"],

5. Add links

Each link gets an icon image and a shadow color.

links: [
  { url: "https://github.com/YourName", icon: "src/assets/icons/icon.png", color: "#ffffff" },
],

6. Choose a layout and theme

layout: { type: "glass", containerWidth: "44rem" },
theme: { preset: "dark" },

7. Open in browser

Open index.html in your browser (double-click or drag into a browser window).

If you're already editing, just hit Ctrl+R / Cmd+R to see changes.

Minimal working config

This is the smallest config that produces a working profile page.

const CONFIG = {
  username: "YourName",
  uid: "12,345",
  splash: { text: "hello", fontSize: "34px" },
  avatar: { type: "icon" },
  bio: { typewriter: false, staticBio: "Just vibing." },
  joinedDate: "Joined 3 months ago",
  badges: [],
  links: [],
  views: 0,
  layout: { type: "default", containerWidth: "44rem" },
  theme: { preset: "dark" },
  background: { color: "#000000", effects: {} },
};

guns.lol/
├── index.html              # Entry point — open this in your browser
├── src/
│   ├── js/
│   │   ├── config.js   # ★ Your configuration file
│   │   └── main.js     # Application logic and rendering
│   ├── css/
│   │   └── style.css   # Profile page styles
│   └── assets/     # Images, icons, cursors, fonts
│       ├── avatar/
│       ├── cursor/
│       └── icons/
└── docs/                    # Documentation site (you are here)

How it works

1. index.html loads config.js first, which defines the CONFIG object globally
2. main.js reads CONFIG, generates CSS custom properties, builds the HTML structure, and initializes effects
3. All rendering is purely client-side — no server, no API, no database
4. Edit config.js, refresh the browser, see changes instantly

The entire profile is controlled by a single CONFIG object in src/js/config.js. Every feature is optional — leave fields at their default, set values to false, or use empty arrays to disable anything.

Here is the actual config.js with all default values — use it as your starting template:

const CONFIG = {
  username: "Sixfy",
  uid: "20,028",
  splash: { text: "guns.lol", fontSize: "34px", fontFamily: "", fontWeight: "500", color: "" },
  avatar: { type: "icon" },
  bio: { typewriter: true, texts: ["love", "sex", "hate", "disgust"], staticBio: "disgust", typeSpeed: 80, deleteSpeed: 50, pauseDuration: 2000 },
  joinedDate: "Joined over 2 years ago",
  badges: ["premium"],
  links: [{ url: "https://example.com", icon: "src/assets/icons/icon.png", color: "#ffffff" }],
  views: 644,
  audio: { src: "", title: "Another One", artist: "DJ Khaled", autoplay: true, loop: true, volume: 0.3, showControls: false, playlist: [] },
  volumeControl: { enabled: false, position: "top-left" },
  progressBar: { height: 3, radius: 15, color: "#ffffff", bgColor: "rgba(255,255,255,0.3)", thumbSize: 10, gradient: [] },
  cursor: { enabled: true, src: "src/assets/cursor/cursor.png", hotspotX: 16, hotspotY: 16 },
  mouseEffect: { enabled: true, variant: "particles", color: "#ffffff" },
  card3d: { enabled: true, intensity: 8, perspective: 1000 },
  fonts: { enabled: true, families: ["Array", "Onest"], importUrl: "" },
  shuffleText: { enabled: false, text: "SIXFY", fontFamily: "Press Start 2P", fontSize: "4rem" },
  layout: { type: "glass", containerWidth: "44rem", containerPadding: "26px", containerRadius: "20px" },
  location: { enabled: false, text: "guns.lol HQ", timezone: "Europe/Berlin" },
  about: { enabled: false, text: "Hi. I own guns.lol." },
  portfolio: { enabled: false, skills: ["Python", "JavaScript"], projects: [{ name: "guns.lol", description: "Create feature-rich, customizable and modern link-in-bio pages.", url: "https://guns.lol" }] },
  theme: { preset: "", textColor: "#ffffff", backgroundColor: "#000000", glowColor: "#ffffff", usernameEffects: "", containerColor: "rgba(255,255,255,0)", containerBlur: "0px", containerBorderWidth: "2px", containerBorderColor: "rgba(200,130,255,0.5)", selectionBg: "#ffffff", selectionColor: "#000000", buttonBg: "rgba(255,255,255,0.22)", buttonBgHover: "rgba(255,255,255,0.32)", buttonBorder: "2px solid rgba(255,255,255,0.12)", buttonRadius: "12px", volumeBg: "rgba(255,255,255,0.2)", volumeBorder: "2px solid rgba(255,255,255,0.05)" },
  background: { src: "", color: "#000000", effects: { aurora: true, dither: false, plasma: false, snow: false, rain: false, stars: true, fireflies: false } },
};

Top-level properties

These fields control the identity section at the top of your profile — the username, avatar, splash text overlay, and join date stamp.

Fields

Splash

splash: {
  text: "guns.lol",
  fontSize: "34px",
  fontFamily: "",
  fontWeight: "500",
  color: "",
},

Avatar

// Icon mode (default)
avatar: { type: "icon" },

// Custom image mode
avatar: { type: "image", src: "src/assets/avatar/example.png" },

Joined Date

A simple text string. Set to empty to hide the element entirely.

joinedDate: "Joined over 2 years ago",

Badges appear in a row beneath your avatar. Each badge shows an icon with a color tint and displays the badge name in a tooltip on hover.

Badge fields

You can use just the icon key as a string — name and color are filled automatically:

badges: ["verified", "premium", "booster"],

Or use the full object format for custom names/colors:

badges: [
  { name: "Custom Badge", icon: "star", color: "#ff4500" },
],

Available icons

The bio sits below your badges. Choose between a static text line or an animated typewriter that types, pauses, deletes, and repeats through a list of phrases.

Fields

bio: {
  typewriter: true,
  texts: ["love", "sex", "hate", "disgust"],
  staticBio: "disgust",
  typeSpeed: 80,
  deleteSpeed: 50,
  pauseDuration: 2000,
},

How it works

1. First phrase types out, one character at a time (typeSpeed delay per char)
2. Pauses for pauseDuration ms
3. Deletes each character (deleteSpeed delay per char)
4. Moves to the next phrase and repeats
5. After the last phrase, loops back to the first

Static mode

Set typewriter: false. The staticBio value renders as plain text with no animation.

bio: {
  typewriter: false,
  staticBio: "Just vibing.",
},

Each link renders as a circular button with an icon image. Clicking opens the URL in a new tab. Links appear in a row beneath the bio.

Link fields

links: [
  { url: "https://github.com/6sfy", icon: "src/assets/icons/github.webp", color: "#ffffff" },
  { url: "https://instagram.com/izayvss", icon: "src/assets/icons/insta.webp", color: "#ffffff" },
],

The audio player sits inside the profile container. It supports a single track or a playlist, autoplay, looping, a draggable progress bar, and an optional volume slider.

Audio fields

audio: {
  src: "https://example.com/track.mp3",
  title: "My Track",
  artist: "Artist Name",
  autoplay: true,
  loop: true,
  volume: 0.3,
  showControls: false,
  playlist: [],
},

Playlist

Each playlist entry has the same shape as the main track. Tracks play in order and loop when the playlist ends.

playlist: [
  { src: "track1.mp3", title: "Song 1", artist: "Artist 1" },
  { src: "track2.mp3", title: "Song 2", artist: "Artist 2" },
],

Volume Control

A floating volume knob positioned relative to the profile container.

volumeControl: {
  enabled: true,
  position: "top-left",
},

Progress Bar

Customizable audio seek bar below the track info.

progressBar: {
  height: 3,
  radius: 15,
  color: "#ffffff",
  bgColor: "rgba(255,255,255,0.3)",
  thumbSize: 10,
  gradient: [],
},

The layout determines how your profile content is arranged — avatar position, container styling, spacing, and borders. Switch between presets with a single string.

Fields

layout: {
  type: "glass",
  containerWidth: "44rem",
  containerPadding: "26px",
  containerRadius: "20px",
},

Layout presets

The theme controls every visual color on the page — text, background, container, buttons, selection highlight, and glow effects. You can use a preset or set every value manually.

Theme fields

theme: {
  preset: "",
  textColor: "#ffffff",
  backgroundColor: "#000000",
  glowColor: "#ffffff",
  usernameEffects: "",
  containerColor: "rgba(255, 255, 255, 0)",
  containerBlur: "0px",
  containerBorderWidth: "2px",
  containerBorderColor: "rgba(200, 130, 255, 0.5)",
  selectionBg: "#ffffff",
  selectionColor: "#000000",
  buttonBg: "rgba(255, 255, 255, 0.22)",
  buttonBgHover: "rgba(255, 255, 255, 0.32)",
  buttonBorder: "2px solid rgba(255, 255, 255, 0.12)",
  buttonRadius: "12px",
  volumeBg: "rgba(255, 255, 255, 0.2)",
  volumeBorder: "2px solid rgba(255, 255, 255, 0.05)",
},

Theme presets

Set preset to one of these to auto-fill all theme values. Leave empty to define everything manually.

Fonts

Custom font families loaded via @import or Google Fonts.

fonts: {
  enabled: true,
  families: ["Array", "Onest"],
  importUrl: "",
},

The background fills the full viewport behind the profile container. You can set a solid color, an image via URL, and layer up to 7 canvas-based effects on top.

Fields

background: {
  src: "",
  color: "#000000",
  effects: { aurora: true, dither: false, plasma: false, snow: false, rain: false, stars: true, fireflies: false },
},

Available effects

A canvas-based effect that follows or reacts to your mouse. Choose from trail, particles, glow, or ripple variants. Only one variant can be active at a time.

Fields

mouseEffect: {
  enabled: true,
  variant: "particles",
  color: "#ffffff",
},

Variants

The profile container rotates in 3D space based on the mouse position relative to its center. Creates a physical, dimensional feel — like holding a card and tilting it toward the light.

Fields

card3d: {
  enabled: true,
  intensity: 8,
  perspective: 1000,
},

Hides the browser's default cursor and uses a PNG image instead. Applies to the entire page.

Fields

cursor: {
  enabled: true,
  src: "src/assets/cursor/cursor.png",
  hotspotX: 16,
  hotspotY: 16,
},

The username text cycles through random letters before settling on the final value. Creates a hacker/matrix aesthetic. Works best with a monospace or pixel font.

Fields

shuffleText: {
  enabled: true,
  text: "SIXFY",
  fontFamily: "Press Start 2P",
  fontSize: "4rem",
},

The particle system powers the particles variant of Mouse Effects. It's a real-time particle engine with gravity, friction, and velocity response — faster mouse movement produces more particles.

Behavior

• Velocity response: Moving the mouse faster emits more particles. Slow movement produces fewer, larger particles.
• 360° spread: Particles emit in all directions from the cursor position.
• Gravity & friction: Particles arc downward with simulated gravity and gradually slow down before fading out.
• Auto-scaling: Low-end devices get fewer max particles to maintain frame rate.
• Customizable color: Set via mouseEffect.color in the config.

mouseEffect: {
  enabled: true,
  variant: "particles",
  color: "#a749dd",
},

Shows a pin icon with a location label and a live digital clock that updates every second based on the configured timezone.

Fields

location: {
  enabled: true,
  text: "guns.lol HQ",
  timezone: "Europe/Berlin",
},

Displays a block of text beneath your profile. Great for a short bio, tagline, or description.

Fields

about: { enabled: true, text: "Hi. I own guns.lol." },

Displays your skills as tags and your projects as clickable cards. Each project links to its URL in a new tab.

Portfolio fields

Project entry

portfolio: {
  enabled: true,
  skills: ["Python", "JavaScript", "TypeScript"],
  projects: [
    {
      name: "guns.lol",
      description: "Create feature-rich, customizable link-in-bio pages.",
      url: "https://guns.lol",
    },
  ],
},

Blank page / nothing shows

• Make sure src/js/config.js loads before main.js in the HTML
• Check the browser console (F12) for JavaScript errors
• Verify CONFIG is defined and valid — missing commas or brackets will break the script

Effects not working

• Effects require enabled: true in their config object
• Background canvas effects stop if hardware acceleration is disabled in browser settings

Images not loading

• Use relative paths from index.html, not from the config file location
• Check that file paths exist and extensions match (case-sensitive on some servers)
• Link icon images should be ~64x64px for best appearance

Audio not playing

• Browsers block autoplay until the user interacts with the page. Click anywhere first.
• Use a direct MP3 URL (not a streaming page or playlist link)
• Check that the audio file supports CORS if hosted on a different domain

Performance issues

• Disable background effects you don't need — plasma is the heaviest
• Use trail or glow mouse effects instead of particles on low-end devices
• The page auto-detects low-end hardware and scales effects, but manual tuning helps

Config not applying

• Refresh the page (hard refresh: Ctrl+Shift+R / Cmd+Shift+R)
• Check for JSON syntax errors in the config file
• Some config changes (layout, theme) restructure the DOM — a full refresh may be needed

Layout looks wrong / card broken

• The card3d effect can clash with custom layouts — try setting card3d.enabled: false if the card container looks shifted or clipped
• Make sure containerWidth isn't too narrow for your content (minimum ~32rem on desktop)
• The glass layout requires containerBlur to be set (default 0px disables the glass effect entirely)
• If the card overflows on mobile, set containerPadding lower (e.g., 16px)

Fonts not showing

• Custom fonts require an active internet connection for the first load (they're loaded live from Google Fonts or external URLs)
• If using importUrl, make sure it's a valid CSS @import URL (e.g., https://fonts.googleapis.com/css2?family=...)
• Font names in families must match exactly what the imported stylesheet declares — check for typos or missing spaces
• Set fonts.enabled: false if you want to fall back to the system font stack

Shuffle text not animating

• shuffleText.enabled must be true (it's false by default)
• The animation runs once on page load and then settles — you won't see it again until you hard refresh
• It requires a font that supports the characters you're using; try Press Start 2P or another monospace/pixel font
• The effect overrides the username during the animation — if username is too long, the shuffle may look cut off with the default font size

Custom cursor not showing

• Verify cursor.enabled: true and a valid src path to a PNG file
• The path is relative to index.html, not to config.js
• Some browsers disable custom cursors in certain UI elements (form inputs, iframes) — this is normal
• PNG with transparency works best; avoid JPEG or BMP
• If the cursor appears tiny or giant, adjust hotspotX and hotspotY to match the image dimensions

3D card tilt not working

• Make sure card3d.enabled: true
• The tilt only activates on devices with a mouse — touch devices don't trigger hover, so the effect stays flat
• If the card jumps or glitches on hover, lower intensity (try 4) or raise perspective (try 1500)
• Some layouts (minimal) may need card3d disabled to keep the transparent container stable

Splash text not appearing

• Set splash.text to a non-empty string — empty string hides the splash entirely
• The splash renders above the profile card; if fontSize is too large, it may overflow or be clipped by the viewport
• If splash.color is empty, it inherits theme.textColor — if both end up matching the background, it's invisible

Links not opening

• Each link needs a valid url including the protocol (https://). Relative paths like /page won't work unless hosted on a server
• The icon color field only affects the drop-shadow filter — it won't break the link if missing
• Check the browser console for errors — the link opens in a new tab via window.open

Badge not showing correct color / tooltip

• String shorthand badges (e.g., "premium") auto-resolve name, color, and SVG from built-in maps — if the key doesn't exist in BADGE_SVGS, nothing renders
• For custom badges, use the full object format with name, icon, color
• Tooltips are driven by the name field — if it's missing, the tooltip is empty
• Badge SVGs are inlined in config.js — you can add new icons by extending the BADGE_SVGS map

Volume control not visible

• volumeControl.enabled must be true
• The volume slider is positioned outside the profile container at one of four corners — make sure there's enough viewport space around the card
• The position value is relative to the profile container, not the page. If the container is near the viewport edge, the slider may be partially off-screen

Container not centered / wrong width

• containerWidth sets the max-width — on very wide screens the container stays centered via margin: 0 auto
• If the container sticks to the left, check that index.html hasn't had its centering CSS removed
• On mobile, the container fills the full width regardless of containerWidth — this is intentional for small screens
• Set containerWidth in rem or px — percentage values like 90% are not tested and may behave unpredictably

Background image not showing with effects

• The background.src image sits behind the canvas effects — if effects are opaque (e.g., aurora fills the whole canvas), you won't see the image
• Disable opaque effects or set color to match the dominant color of your image so the transition between image and effects is seamless
• The image is set as background-image on the page body — use a URL that supports CORS if externally hosted

Avatar not showing

• If avatar.type is "image", avatar.src must point to a valid image file — otherwise nothing renders (no fallback icon)
• The path is relative to index.html, not to config.js
• Use avatar.type: "icon" to fall back to a generated avatar icon based on the username's first letter
• Square images work best — the avatar is displayed in a fixed-size circle with object-fit: cover

Typewriter bio stuck / not cycling

• bio.typewriter must be true — if it's false, it shows static text only
• bio.texts needs at least 2 entries for the cycling to be noticeable (with 1 entry it types once and pauses forever)
• Check typeSpeed and deleteSpeed — extremely high values (e.g., 5000) make the animation appear frozen
• The cursor blinking is part of the typewriter element — if the cursor is missing but text appears, verify the CSS .typing-cursor class isn't overridden

Complete Config Example

const CONFIG = {
  username: "Sixfy",
  uid: "20,028",
  splash: { text: "guns.lol", fontSize: "34px", fontFamily: "", fontWeight: "500", color: "" },
  avatar: { type: "icon" },
  bio: {
    typewriter: true,
    texts: ["love", "sex", "hate", "disgust"],
    staticBio: "disgust",
    typeSpeed: 80,
    deleteSpeed: 50,
    pauseDuration: 2000,
  },
  joinedDate: "Joined over 2 years ago",
  badges: ["premium", "staff", "bug", "verified"],
  links: [
    { url: "https://example.com", icon: "src/assets/icons/icon.png", color: "#ffffff" },
  ],
  views: 644,
  audio: {
    src: "https://example.com/track.mp3",
    title: "Another One",
    artist: "DJ Khaled",
    autoplay: true,
    loop: true,
    volume: 0.3,
    showControls: false,
    playlist: [],
  },
  volumeControl: { enabled: false, position: "top-left" },
  progressBar: {
    height: 3, radius: 15, color: "#ffffff",
    bgColor: "rgba(255,255,255,0.3)", thumbSize: 10, gradient: [],
  },
  cursor: {
    enabled: true,
    src: "src/assets/cursor/cursor.png",
    hotspotX: 16, hotspotY: 16,
  },
  mouseEffect: { enabled: true, variant: "particles", color: "#ffffff" },
  card3d: { enabled: true, intensity: 8, perspective: 1000 },
  fonts: { enabled: true, families: ["Array", "Onest"], importUrl: "" },
  shuffleText: { enabled: false, text: "SIXFY", fontFamily: "Press Start 2P", fontSize: "4rem" },
  layout: { type: "glass", containerWidth: "44rem", containerPadding: "26px", containerRadius: "20px" },
  location: { enabled: false, text: "guns.lol HQ", timezone: "Europe/Berlin" },
  about: { enabled: false, text: "Hi. I own guns.lol." },
  portfolio: {
    enabled: false,
    skills: ["Python", "JavaScript"],
    projects: [{ name: "guns.lol", description: "Create feature-rich, customizable and modern link-in-bio pages.", url: "https://guns.lol" }],
  },
  theme: {
    preset: "",
    textColor: "#ffffff",
    backgroundColor: "#000000",
    glowColor: "#ffffff",
    usernameEffects: "",
    containerColor: "rgba(255, 255, 255, 0)",
    containerBlur: "0px",
    containerBorderWidth: "2px",
    containerBorderColor: "rgba(200, 130, 255, 0.5)",
    selectionBg: "#ffffff",
    selectionColor: "#000000",
    buttonBg: "rgba(255, 255, 255, 0.22)",
    buttonBgHover: "rgba(255, 255, 255, 0.32)",
    buttonBorder: "2px solid rgba(255, 255, 255, 0.12)",
    buttonRadius: "12px",
    volumeBg: "rgba(255, 255, 255, 0.2)",
    volumeBorder: "2px solid rgba(255, 255, 255, 0.05)",
  },
  background: { src: "", color: "#000000", effects: { aurora: true, dither: false, plasma: false, snow: false, rain: false, stars: true, fireflies: false } },
};