From 8adee90f5e5ebdd249e38c0f1f010d7726c49ff2 Mon Sep 17 00:00:00 2001 From: S4NKALP Date: Mon, 20 Jan 2025 12:56:00 +0545 Subject: [PATCH] updates --- index.html | 7 +- script.js | 259 ++++++++++++++++++++++++++--------------------------- style.css | 54 ++++++----- 3 files changed, 163 insertions(+), 157 deletions(-) diff --git a/index.html b/index.html index 226b6a3..f020e8c 100644 --- a/index.html +++ b/index.html @@ -5,7 +5,7 @@ S4NKALP's Links - +

Made with ❤ by - Z4CKX + S4NKALP

diff --git a/script.js b/script.js index f8387e7..fb06eab 100644 --- a/script.js +++ b/script.js @@ -1,31 +1,31 @@ -const username = 'S4NKALP'; -const linkList = document.querySelector('.link-list'); -const linksSection = document.querySelector('.links'); -const filterInput = document.querySelector('.filter-links'); +const username = "S4NKALP"; +const linkList = document.querySelector(".link-list"); +const linksSection = document.querySelector(".links"); +const filterInput = document.querySelector(".filter-links"); -const buildIcon = (link) => { - return ` - - `; +// Function to build an icon element with appropriate color styling +const buildIcon = (linkk) => { + return ``; }; -const buildUrl = (link) => { - if (link.url.includes('http')) { - return link.url; +// Function to construct the correct URL format based on its type +const buildUrl = (linkk) => { + if (linkk.url.startsWith("http") || linkk.url.startsWith("mailto")) { + return linkk.url; } - if (link.url.includes('mailto')) { - return link.url; - } - return 'https://' + link.url + username; + return `https://${linkk.url}${linkk.url.endsWith("/") ? "" : "/"}${username}`; }; -const displayLinks = (links) => { - filterInput.classList.remove('hide'); - for (const link of links) { - let listItem = document.createElement('li'); - listItem.classList.add('link'); +// Function to display the links dynamically +const displayLinks = (linkk) => { + filterInput.classList.remove("hide"); + linkList.innerHTML = ""; // Clear existing links before adding new ones + + for (const link of linkk) { + let listItem = document.createElement("li"); + listItem.classList.add("link"); listItem.innerHTML = ` - +

${buildIcon(link)} @@ -34,160 +34,151 @@ const displayLinks = (links) => {

${link.description}

`; - linkList.append(listItem); + linkList.appendChild(listItem); } }; -// dynamic search -filterInput.addEventListener('input', (e) => { - const search = e.target.value; - const links = document.querySelectorAll('.link'); - const searchLowerText = search.toLowerCase(); +// Dynamic search functionality +filterInput.addEventListener("input", (e) => { + const searchText = e.target.value.toLowerCase(); + const links = document.querySelectorAll(".link"); - for (const link of links) { - const lowerText = link.innerText.toLowerCase(); - if (lowerText.includes(searchLowerText)) { - link.classList.remove('hide'); - } else { - link.classList.add('hide'); - } - } + links.forEach((link) => { + link.textContent.toLowerCase().includes(searchText) + ? link.classList.remove("hide") + : link.classList.add("hide"); + }); }); -const links = [ +// Array of links with details +const linkk = [ { - name: 'Mail', - description: 'Want to talk? Write me a mail', - url: 'mailto:sankalptharu50028@gmail.com', - icon: 'fa-brands fa-telegram', - color: '#0088cc' + name: "Mail", + description: "Want to talk? Write me a mail", + url: "mailto:sankalptharu50028@gmail.com", + icon: "fa-brands fa-telegram", + color: "#0088cc", }, { - name: 'Facebook', - description: 'Glimpse of my life and journey', - url: 'https://facebook.com/sankalptharu50028', - icon: 'fa-brands fa-facebook', - color: '#1877F2', + name: "Facebook", + description: "Glimpse of my life and journey", + url: "https://facebook.com/sankalptharu50028", + icon: "fa-brands fa-facebook", + color: "#1877F2", }, { - name: 'GitHub', - description: 'My favourite place :)', - url: 'github.com/', - icon: 'fa-brands fa-github', - color: '#fff' + name: "GitHub", + description: "My favourite place :)", + url: "github.com/", + icon: "fa-brands fa-github", + color: "#fff", }, { - name: 'Resume', - description: 'What I have done so far', - url: 'https://github.com/S4NKALP/resume/blob/main/resume.pdf', - icon: 'fa-brands fa-wpforms', - color: '#008abd' + name: "GitLab", + description: "My favourite place :)", + url: "gitlab.com/", + icon: "fa-brands fa-gitlab", + color: "#f57c00", }, { - name: 'Twitter', - description: 'Tech, rants, philosophy, memes', - url: 'twitter.com/', - icon: 'fa-brands fa-twitter', - color: '#1da1f2' + name: "Resume", + description: "What I have done so far", + url: "https://github.com/S4NKALP/resume/blob/main/resume.pdf", + icon: "fa-brands fa-wpforms", + color: "#008abd", }, { - name: 'YouTube', - description: 'I make tooling videos for devs', - url: 'youtube.com/c/', - icon: 'fa-brands fa-youtube', - color: '#ff0000' + name: "Twitter", + description: "Tech, rants, philosophy, memes", + url: "twitter.com/", + icon: "fa-brands fa-twitter", + color: "#1da1f2", }, { - name: 'LinkedIn', - description: 'Career updates and thoughts', - url: 'linkedin.com/in/', - icon: 'fa-brands fa-linkedin', - color: '#0077B5' + name: "YouTube", + description: "I make tooling videos for devs", + url: "youtube.com/", + icon: "fa-brands fa-youtube", + color: "#ff0000", }, { - name: 'Blog', - description: 'About things I build and learn', - url: 'https://S4NKALP.github.io/blog', - icon: 'fa-brands fa-blogger', - color: '#f57c00' + name: "LinkedIn", + description: "Career updates and thoughts", + url: "linkedin.com/", + icon: "fa-brands fa-linkedin", + color: "#0077B5", }, { - name: 'Portfolio', - description: '/home/S4NKALP', - url: 'https://S4NKALP.github.io/Protofolio', - icon: 'fa-brands fa-fort-awesome', - color: '#1688f0' + name: "Blog", + description: "About things I build and learn", + url: "https://S4NKALP.github.io/blog", + icon: "fa-brands fa-blogger", + color: "#f57c00", }, { - name: 'Projects', - description: 'All my projects!', - url: 'https://S4NKALP.github.io/projects', - icon: 'fa-brands fa-product-hunt', - color: '#da552f' + name: "Portfolio", + description: "/home/S4NKALP", + url: "https://S4NKALP.github.io/Protofolio", + icon: "fa-brands fa-fort-awesome", + color: "#1688f0", }, { - name: 'Instagram', - description: 'Glimpse of my life and journey', - url: 'https://instagram.com/o0xsankalp', - icon: 'fa-brands fa-instagram', - color: '#e1306c' + name: "Projects", + description: "All my projects!", + url: "https://S4NKALP.github.io/projects", + icon: "fa-brands fa-product-hunt", + color: "#da552f", }, { - name: 'Reddit', - description: 'Lurk mostly, sometimes I post', - url: 'reddit.com/user/', - icon: 'fa-brands fa-reddit', - color: '#ff4500' + name: "Instagram", + description: "Glimpse of my life and journey", + url: "https://instagram.com/", + icon: "fa-brands fa-instagram", + color: "#e1306c", }, { - name: 'Dev', - description: 'Where I connect with Devs', - url: 'dev.to/', - icon: 'fa-brands fa-dev', - color: '#ccc' + name: "Reddit", + description: "Lurk mostly, sometimes I post", + url: "reddit.com/user/", + icon: "fa-brands fa-reddit", + color: "#ff4500", }, { - name: 'HackerRank', - description: 'For problem solving skills', - url: 'hackerrank.com/', - icon: 'fa-brands fa-hackerrank', - color: '#1ba94c' + name: "Dev", + description: "Where I connect with Devs", + url: "dev.to/", + icon: "fa-brands fa-dev", + color: "#ccc", }, { - name: 'Exercism', - description: 'For learning new languages', - url: 'exercism.org/profiles/', - icon: 'fa-brands fa-font-awesome', - color: '#1b51d2' + name: "HackerRank", + description: "For problem-solving skills", + url: "hackerrank.com/", + icon: "fa-brands fa-hackerrank", + color: "#1ba94c", }, { - name: 'freeCodeCamp', - description: 'Where I started web dev', - url: 'freecodecamp.org/', - icon: 'fa-brands fa-free-code-camp', - color: '#006400' + name: "Exercism", + description: "For learning new languages", + url: "exercism.org/profiles/", + icon: "fa-brands fa-font-awesome", + color: "#1b51d2", }, { - name: 'Twitch', - description: 'I stream my side projects!', - url: 'twitch.tv/', - icon: 'fa-brands fa-twitch', - color: '#6441a5' + name: "freeCodeCamp", + description: "Where I started web dev", + url: "freecodecamp.org/", + icon: "fa-brands fa-free-code-camp", + color: "#006400", }, { - name: 'Leetcode', - description: 'More problem solving', - url: 'leetcode.com/', - icon: 'fa-brands fa-black-tie', - color: '#e08b32' + name: "Leetcode", + description: "More problem-solving", + url: "leetcode.com/", + icon: "fa-brands fa-black-tie", + color: "#e08b32", }, - { - name: 'Codepen', - description: 'For trying out design ideas', - url: 'codepen.io/', - icon: 'fa-brands fa-codepen', - color: '#888' - } ]; -displayLinks(links); +// Display all links initially +displayLinks(linkk); diff --git a/style.css b/style.css index ee0d9a5..52caf26 100644 --- a/style.css +++ b/style.css @@ -2,9 +2,9 @@ :root { --text: #111; --accent: #1688f0; - --bg-main: #fff; - --bg-link: #f0f0f0; - --bg-alt: #f5f5f5; + --bg-main: linear-gradient(to bottom right, #fff, #f0f0f0); + --bg-link: linear-gradient(to bottom right, #f0f0f0, #e0e0e0); + --bg-alt: linear-gradient(to bottom right, #f5f5f5, #e0e0e0); } } @@ -12,9 +12,9 @@ :root { --text: #e5e5e5; --accent: #1688f0; - --bg-main: #000; - --bg-link: #0f0f1a; - --bg-alt: #0a0a0f; + --bg-main: linear-gradient(to bottom right, #000, #0a0a0f); + --bg-link: linear-gradient(to bottom right, #0f0f1a, #1a1a2e); + --bg-alt: linear-gradient(to bottom right, #0a0a0f, #1a1a2e); } } @@ -27,10 +27,11 @@ body { align-items: center; justify-content: center; margin: 0; - font-family: 'Open Sans', sans-serif; - background-color: var(--bg-main); + font-family: "Open Sans", sans-serif; + background: var(--bg-main); color: var(--text); font-size: 16px; + min-height: 100vh; } .container { @@ -44,7 +45,6 @@ body { } .hide { - /* '!important' is to make sure that when we add the class using JS, it takes precendence */ display: none !important; } @@ -75,15 +75,21 @@ h2 { img { border: 2px solid var(--accent); box-shadow: - 0 0px 6px var(--accent), - 0 0px 6px var(--accent); + 0 0 8px rgba(22, 136, 240, 0.8), + 0 0 12px rgba(22, 136, 240, 0.6); max-width: 100%; height: auto; + border-radius: 8px; } a { color: var(--accent); text-decoration: none; + transition: color 0.3s ease-in-out; +} + +a:hover { + color: #125ea8; } ul { @@ -103,18 +109,21 @@ input { border: 2px solid var(--accent); color: var(--text); text-align: center; + box-shadow: + 0 4px 6px rgba(22, 136, 240, 0.4), + 0 1px 3px rgba(22, 136, 240, 0.3); } .links { display: flex; flex-wrap: wrap; justify-content: center; - background-color: var(--bg-link); - margin-top: 0; + background: var(--bg-link); padding: 2em; - border-bottom-left-radius: 20px; - border-bottom-right-radius: 20px; - margin-bottom: 4em; + border-radius: 20px; + box-shadow: + 0 4px 10px rgba(22, 136, 240, 0.4), + 0 1px 3px rgba(22, 136, 240, 0.3); } h3 { @@ -140,14 +149,19 @@ h3 { border: 1px solid var(--accent); padding: 1em; text-align: center; - background-color: var(--bg-alt); + background: var(--bg-alt); + transition: all 0.3s ease-in-out; + box-shadow: + 0 4px 6px rgba(22, 136, 240, 0.2), + 0 1px 3px rgba(22, 136, 240, 0.2); } .link-list li:hover { - background-color: var(--bg-main); + background: var(--bg-main); + transform: scale(1.02); box-shadow: - 0 3px 6px var(--accent), - 0 3px 6px var(--accent); + 0 6px 12px rgba(22, 136, 240, 0.5), + 0 3px 8px rgba(22, 136, 240, 0.4); } @media (min-width: 700px) {