updates
This commit is contained in:
sankalp committed
1 parent
ae9337f78a
commit
8adee90f5e
3 files changed
+163
-157
No files matched your search
+4
-3
@@ -5,7 +5,7 @@
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>S4NKALP's Links</title>
|
||||
<link rel="icon" href="images/favicon.svg" type="image/png" />
|
||||
<link rel="icon" href="images/favicon.svg" type="image/svg+xml" />
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
@@ -25,13 +25,14 @@
|
||||
<input
|
||||
type="text"
|
||||
class="filter-links hide"
|
||||
placeholder="Search Links"
|
||||
placeholder="Search links by name or description..."
|
||||
arial-label="Search links"
|
||||
/>
|
||||
<ul class="link-list"></ul>
|
||||
</section>
|
||||
<h4>
|
||||
Made with ❤ by
|
||||
<a href="https://github.com/S4NKALP/links">Z4CKX</a>
|
||||
<a href="https://github.com/S4NKALP/links">S4NKALP</a>
|
||||
</h4>
|
||||
</main>
|
||||
</body>
|
||||
|
||||
@@ -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 `
|
||||
<span class='${link.icon}' style='color: ${link.color};'></span>
|
||||
`;
|
||||
// Function to build an icon element with appropriate color styling
|
||||
const buildIcon = (linkk) => {
|
||||
return `<span class='${linkk.icon}' style='color: ${linkk.color};'></span>`;
|
||||
};
|
||||
|
||||
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 = `
|
||||
<a href=${buildUrl(link)} target='_blank'>
|
||||
<a href="${buildUrl(link)}" target="_blank" rel="noopener noreferrer">
|
||||
<div>
|
||||
<h3>
|
||||
${buildIcon(link)}
|
||||
@@ -34,160 +34,151 @@ const displayLinks = (links) => {
|
||||
<p>${link.description}</p>
|
||||
</div>
|
||||
</a>`;
|
||||
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);
|
||||
@@ -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) {
|
||||
|
||||
Reference in new issue
Block a user