From a3d36e7ee43e77731ada46dcb8308eac7c02c6ad Mon Sep 17 00:00:00 2001 From: Priyansh Prajapat Date: Thu, 20 Jun 2024 19:21:02 +0530 Subject: [PATCH] New JSON format rendering --- .vscode/settings.json | 3 - 404.html | 12 +- data.json | 0 index.html | 2033 +------------------------------------ js/cyear.js | 1 - js/search.js | 24 - js/theme.js | 38 - {js => scripts}/404.js | 1 + scripts/app.js | 148 +++ {css => styles}/404.css | 0 {css => styles}/style.css | 15 +- 11 files changed, 196 insertions(+), 2079 deletions(-) delete mode 100644 .vscode/settings.json create mode 100644 data.json delete mode 100644 js/cyear.js delete mode 100644 js/search.js delete mode 100644 js/theme.js rename {js => scripts}/404.js (99%) create mode 100644 scripts/app.js rename {css => styles}/404.css (100%) rename {css => styles}/style.css (97%) diff --git a/.vscode/settings.json b/.vscode/settings.json deleted file mode 100644 index b95604a..0000000 --- a/.vscode/settings.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "liveServer.settings.port":5501 -} \ No newline at end of file diff --git a/404.html b/404.html index 26cf65e..2c45745 100644 --- a/404.html +++ b/404.html @@ -9,16 +9,16 @@ - - + + - + - + - + @@ -30,6 +30,6 @@
- + diff --git a/data.json b/data.json new file mode 100644 index 0000000..e69de29 diff --git a/index.html b/index.html index e9a19ea..140d48c 100644 --- a/index.html +++ b/index.html @@ -1,6 +1,5 @@ - @@ -17,2044 +16,68 @@ - + - - + + - + -
-

Dev Profiles

- +

DevProfiles

- +
-
+
-
No Profile Found
- -
- - -
-
User Image
-

Priyansh Prajapat

-
- Javascript - NodeJS - Python -
- -
- -
-
User Image
-

Arman

-
- Javascript - HTML/CSS - React.js - Next.js - Python -
- -
- -
-
User Image
-

Sahil Khan

-
- HTML - JavaScript - Python -
- -
- -
-
Juan Diaz
-

Juan Diaz

-
- React - Next.js - JavaScript -
- -
- -
-
User Image
-

Gangadhara Rao Ande

-
- HTML - CSS - Bootstrap - JavaScript - SQL - Python -
- -
- -
-
User Image
-

cvyl / Mikka

-
- i18n - Problem solving - Amateur FSD -
- -
- -
-
User Image
-

AQUEEL UR RAHMAN KHAN

-
- JavaScript - TypeScript - Reactjs - Python -
- -
-
-
User Image
-

Shrut Sureja

-
- MERN Stack - DSA - NextJS - LLMOps -
- -
-
-
User Image
-

Himanshu Chandola

-
- Javascript - React JS - Next JS -
- -
- -
-
User Image
-

Juliana Praxedes

-
- Elixir - React - Vuejs -
- -
- -
-
User Image
-

Robert Dixon

-
- HTML - CSS - Bootstrap - JavaScript - Python - PHP - MySQL -
- -
- -
-
User Image
-

Hemang Yadav

-
- Javascript - Typescript - Python - HTML - MongoDB -
- -
- -
-
User Image
-

Lakshay Joshi

-
- Javascript - ReactJS - HTML - CSS - TailwindCSS - NodeJS - ExpressJS - MongoDB - C++ -
- -
- - -
-
User Image
-

Nelson Uprety

-
- HTML - CSS - Javascript - React JS - Open Source -
- -
- -
-
User Image
-

Rohit Kumar Dey

-
- HTML - CSS - TailwindCSS - JavaScript - ReactJS - NodeJS - ExpressJS - MongoDB -
- -
- -
-
User Image
-

Ajay Dhangar

-
- MERN - JAVA - Open Source -
- -
- -
-
User Image
-

Rémi JARA

-
- Python - TypeScript - Vue.js - React.js - Tailwind CSS - Java - MySQL - Docker -
- -
- -
-
User Image
-

DARK DEVIL

-
- FUNNY CODER - FAST LEARNER - SUPER DARK - FAST CODE MAKER - html css javascript - Python - Node.js -
- -
- -
-
User Image
-

Akansh Bende

-
- C++ - Javascript - React - NodeJS - MongoDB - MUI - TailwindCSS -
- -
-
-
User Image
-

Rohit Singh

-
- JAVA - Web Development - Python -
- -
- -
-
User Image
-

Pradeep Pawar

-
- Javascript - NodeJS - Python -
- -
- -
-
User Image
-

Dev Sanghvi

-
- ReactJS - NodeJS - JavaScript - OpenSource - -
- -
- -
-
User Image
-

Vishal Kumar

-
- Frontend Developer - OpenSource - DBMS - C++ - Python -
- -
- - -
-
User Image
-

now.sh

-
- C++ - C - Python - Fullstack Developer - Mobile App Developer - Cyber Secrity - CTF -
- -
+
No Profile Found
-
-
User Image
-

Septian Maulana

-
- JavaScript - TypeScript - Solidity -
- -
- -
-
Aayu5h's COOL IMAGE
-

Aayush Agrawal

-
- Html - Css - JavaScript - Node.js -
- -
- -
-
Shivam
-

Kumar Shivam

-
- C++ - Python - JavaScript - MERN -
- -
- - -
-
ash-codes18 pfp
-

Ashmit Mehta

-
- C++ - C - Python - My SQL - Javascript - HTML - CSS -
- -
- - -
-
Cool
-

Priyanshu Singh

-
- Java - C++ - Python - Html - Css - JavaScript - React.js -
- -
-
-
User Image
-

Arnab Barua

-
- Competitive Coding - Data Structures and Algorithms - Frontend Developement - Machine Learning - Prompt Engineering - -
- -
-
-
User Image
-

Shail Patel

-
- DSA - Linux-Programming - Frontend Web development -
- -
- -
-
Hitesh Profile Image
-

Hitesh Kumar

-
- Html - Css - JavaScript -
- -
- -
-
User Image
-

Charles Luguda

-
- HTML - CSS - JS - BOOTSTRAP - PYTHON -
- -
- -
-
Dheeraj Sarana Image
-

Dheeraj Sarana

-
- JAVA - HTML - CSS - BOOTSTRAP - JAVASCRIPT - AJAX -
- -
- -
-
Rohith's profile image
-

Rohith Pradeep

-
- Html - Css - C++ - C - Java -
- -
- -
-
User Image
-

Joseph Gonzalez

-
- Fullstack Developer - NodeJs - Angular - Flutter -
- -
- -
-
User Image
-

Aman Pathan

-
- MERN Stack - C++ - Python -
- -
- -
-
User Image
-

Kishlay Krishna

-
- Javascript - ReactJs - C++ - Python -
- -
- -
-
User Image
-

Ankit Gadling

-
- Python - Django - BOOTSTRAP -
- -
- -
-
User Image
-

Maida

-
- MERN stack - C++ - Javascript -
- -
- -
-
User Image
-

Abayomi Ogunnusi

-
- Dotnet - JavaScript - SQL -
- -
- -
-
User Image
-

Dhiman Nayak

-
- JavaScript - NodeJs - MongoDB -
- -
- -
-
User Image
-

Vinay S

-
- HTML - CSS - JS - Python - Java -
- -
- -
-
User Image
-

Vxnsin

-
- Java - JavaScript - NodeJS - Python - Lua - MySQL - MongoDB - Web Dev -
- -
- -
-
User Image
-

Afraz Khan

-
- Spring - NodeJS - MongoDB -
- -
- -
-
User Image
-

Harsh Chauhan

-
- C++ - C - Java Script -
- -
- -
-
User Image
-

Gurudayal Maurya

-
- Frontend Developer - React - OpenSource - DBMS - C++ - Python -
- -
- -
-
User Image
-

Vishal Singh

-
- C++ - C - Java - Python - AI/ML - HTML5/CSS -
- -
- -
-
User Image
-

Udayan Sharma

-
- Javascript - Python - AI/ML - HTML5/CSS - Graphic Designing -
- -
- -
-
User Image
-

Olatunji-Aresa Ariyo

-
- HTML - CSS - JavaScript -
- -
- -
-
User Image
-

Garima

-
- HTML5 - CSS3 - React -
- -
- -
-
User Image
-

Anurag Kumar

-
- Javascript - NodeJS - Reactjs -
- -
- -
-
User Image
-

Sunil

-
- Javascript - Typscript - HTML5/CSS - NodeJS - React -
- -
- -
-
User Image
-

Jan-FCloud

-
- C++ - JS - VR -
- -
- -
-
User Image
-

Deepak Verma

-
- C++ - UI/UX - HTML5/CSS - JavaScript - TAILWIND - Python - REACT - NodeJS -
- -
- -
-
User Image
-

Shreyansh Khaitan

-
- Java - Python - AI/ML -
- -
- -
-
User Image
-

Deren Losel

-
- Python - ReactJS - MongoDB -
- -
- -
-
User Image
-

Piyush

-
- Web Development - Dynamic Programming - Full Stack Developer - -
- -
- -
-
User Image
-

Sammie

-
- HTML - CSS - Javascript - React - Graphics Design -
- -
- -
-
User Image
-

Kirtesh Admute

-
- Core Java - HTML5/CSS - JavaScript - React -
- -
- -
-
User Image
-

Rushikesh Shelar

-
- React - NodeJS - ExpressJS - MongoDB - Material UI -
- -
- -
-
User Image
-

Anurag Srivastav

-
- Next Js - CPP - Express js -
- -
- -
-
User Image
-

Ashish Khare

-
- HTML - Javascript - Python -
- -
- -
-
User Image
-

Khushi Shroff

-
- Ui/Ux - HTML5/CSS - JavaScript - React -
- -
- -
-
User Image
-

rudy3(333)

-
- Python - SQL - PHP -
- -
- -
-
User Image
-

Michael Ortiz

-
- NodeJS - Python - HTML5/CSS -
- -
-
-
User Image
-

Emmanuella Okafor

-
- React.js - core Java - Springboot - Html5/css3 - MySql - MongoDB -
- -
- -
-
User Image
-

Mehmet Salih Bozkir

-
- HTML5/CSS - Javascript - Typscript - NodeJS - React -
- -
- -
-
User Image
-

Reayz

-
- ASP.NET - Entity Framework - JavaScript - MS SQL -
- -
- -
-
User Image
-

Chirag Aggarwal

-
- Python - ReactJS - TailwindCSS - MongoDB -
- -
- -
-
User Image
-

Srinanda Das

-
- Java - JavaScript - HTML5/CSS - MySQL -
- -
- -
-
User Image
-

Michael Ortiz

-
- Web Dev - Python - Java -
- -
- -
-
User Image
-

Atharvan Pohnerkar

-
- Front-End Web Development - MongoDB - ExpressJS, NodeJS - Competitive Programming -
- -
- -
-
User Image
-

Shiva Prasad

-
- Javascript - NodeJS - Kotlin - NativeScript - Vue - AI/ML - Mobile App Development -
- -
- -
-
Yash Profile
-

Yash Kumar Shrivas

-
- C++ - DSA - SQL - ReactJs - JavaScript -
- -
- - -
-
User Image
-

Gyan Pratap Singh

-
- Javascript - ReactJs - C++ -
- -
- -
-
User Image
-

Utkarsh Patil

-
- C++ - Python - JavaScript - Dart -
- -
- -
-
User Image
-

Ahasas Jain

-
- React - NodeJS - ExpressJS - Javascript - Core Java - MySQL -
- -
- -
-
User Image -
-

Alit Indrawan

-
- PHP - Javascript - Go -
- -
- -
-
User Image
-

Ralph Rosael

-
- Python - JavaScript - Arduino -
- -
- -
-
User Image
-

Loensh

-
- JavaScript - C/C++ - Godot Engine -
- -
- -
-
User Image
-

Sandeep Kumar Sharma

-
- HTML - CSS - TAILWIND - JAVASCRIPT - REACT -
- -
- -
-
User Image
-

Shubham Kamboj

-
- C++ - HTML - CSS - JavaScript - TAILWIND - Python - REACT -
- -
- -
-
User Image
-

Balaji Prakasam

-
- C++ - NODEJS - HTML5/CSS - JavaScript - Machine Learning - Python - REACT -
- -
- -
-
User Image
-

Kakkerla Manideep

-
- HTML - CSS - JavaScript - c - c++ - Python - Java -
- -
- -
-
User image
-

Abrar Hussain

-
- Javascript - ReactJs - Java -
- -
- -
-
User image
-

Kanchan Rai

-
- Python - C++ - HTML - CSS - C -
- -
- -
-
User Image
-

Rohit Roy

-
- MERN Stack - JavaScript - Blockchain - Solidity -
- -
- -
-
User Image
-

Sravan Kumar

-
- NodeJs - ReactJs - MongoDB - AWS - C++ -
- -
- -
-
User Image
-

Samuel Peters

-
- REACT JS - TypeScript - Python - C++ -
- -
- -
-
User Image
-

Ahnaf Hasan Shifat

-
- REACT JS - TypeScript - NodeJS - C++ - Postgresql - TailwindCSS -
- -
- -
-
User Image
-

Prashant Jagtap

-
- DSA - C++ - Web development -
- -
- -
-
User image
-

Atul Gawade

-
- JAVA - C# - PHP -
- -
- -
-
User Image
-

Nong Snail

-
- Python - SQL - Data Engineering -
- -
- -
-
User Image
-

Ujjwal Gupta

-
- Next.Js - C++ - DSA -
- -
- -
-
User Image
-

Astha Tripathi

-
- Cpp Programming - Website Designing - Flutter Development -
- -
- -
-
User Image
-

Shashwat Bajpai

-
- HTML - CSS - JAVASCRIPT -
- -
- -
-
User Image
-

Piyush Kumar Das

-
- HTML - CSS - JavaScript - ReactJS - NodeJS - ExpressJS -
- -
- -
-
User Image
-

Akshat Mishra

-
- Java - Python - React -
- -
- -
-
User Image
-

「 」Data

-
- HTML - Java - Java Script - Python -
- -
- -
-
User Image
-

SyntaxSmiler03

-
- HTML - CSS - Python - JAVASCRIPT - JAVA - C/C++ -
- -
- -
-
User Image
-

Srikar

-
- Java - Python - React JS - Angular JS - C - MERN Stack - Micromedia Flash 8 - Django - SQL -
- -
- -
-
User Image
-

Harshal Kahar

-
- NextJS - ReactJS - NodeJS - Tailwind Css -
- -
- -
-
User Image
-

Dibya Jyoti Dutta

-
- NodeJS - ExpressJS - JavaScript - C++ - MongoDB -
- -
- -
-
Shrimad Bhagwat Profile
-

Shrimad Bhagwat

-
- C++ - Android Development - Flutter -
- -
- -
-
User Image
-

Anmol Anand

-
- Java - JavaScript - Flutter -
- -
- -
-
User Image
-

Muhamad Dian Rahendra

-
- JavaScript - Mendix - React -
- -
- -
-
Vivek Gurudutt Profile
-

Vivek Gurudutt

-
- Java - Python - C++ -
- -
- -
-
Guilherme Berson Profile
-

Guilherme Berson

-
- Java - Android Development - Kotlin -
- -
- -
-
User Image
-

Yash Sinha

-
- NextJs - Tailwind Css - JavaScript -
- -
- - -
-
Prasanna's profile image
-

Prasanna Donga

-
- Html - Css - JavaScript - React - NodeJS -
- -
- - - - -
-
Aziz Arif Rizaldi
-

Aziz Arif Rizaldi

-
- Mobile App Development - Web App Developement - Desktop App Developement -
- -
-
-
User Image
-

YouFoundAlpha

-
- Node.JS - JavaScript - HTML -
- -
- -
-
User Image
-

Ayush Anshu

-
- MERN - C++ - Machine Learning -
- -
- -
-
User Image
-

Farhan Muzaffar

-
- React - JavaScript - HTML -
- -
- -
-
User Image
-

Guilherme Orcezi

-
- ReactJS - React Native - NodeJS -
- -
- -
-
User Image
-

Tanakorn

-
- Node.JS - JavaScript - HTML -
- -
- -
-
User Image
-

Bilal Mirza

-
- MERN Stack - Devops - Python -
- -
- -
-
User Image
-

Irfan habeeeb p

-
- Flutter - Frontend Developer - MI -
- -
- - -
-
User Image
-

Alekhya Dharam

-
- Java - Front-end developer - MySQL - MongoDB - Node.js - Express.js -
- -
- -
-
bieefilled
-

K Koyal

-
- DSA - Java - Python - Node JS - MERN Stack -
- -
- -
-
User Image
-

uuphoria2

-
- Docker - Frontend Developer - Node.js - PostgreSQL - Backend Developer -
- -
- - -
+
-
-

DevProfiles is a platform for developers to easily share their profiles, spotlight your skills, and connect with fellow developers in the community.

-
- -
- GitHub - License - Checkout DevTweet -
+
+

DevProfiles is a platform for developers to easily share their profiles, spotlight your skills, and connect with fellow developers in the community.

+
+
+ GitHub + License +
-
-
- -

Copyright © DevProfiles | All rights reserved.

-
- - - - - - + - + \ No newline at end of file diff --git a/js/cyear.js b/js/cyear.js deleted file mode 100644 index 52582ae..0000000 --- a/js/cyear.js +++ /dev/null @@ -1 +0,0 @@ -document.getElementById("currentYear").textContent = new Date().getFullYear(); \ No newline at end of file diff --git a/js/search.js b/js/search.js deleted file mode 100644 index 08c0937..0000000 --- a/js/search.js +++ /dev/null @@ -1,24 +0,0 @@ -const searchInput = document.getElementById('searchInput'); -const profiles = document.querySelectorAll('.profile'); -const noProfileDiv = document.getElementById('no-profile'); -searchInput.addEventListener('input', filterProfiles); - -function filterProfiles() { - const query = searchInput.value.toLowerCase(); - let hasMatchingProfile = false; - profiles.forEach((profile) => { - const name = profile.querySelector('.name').textContent.toLowerCase(); - const skills = profile.querySelector('.skills').textContent.toLowerCase(); - if (name.includes(query) || skills.includes(query)) { - hasMatchingProfile = true; - profile.style.display = 'block'; // Show matching profiles - } else { - profile.style.display = 'none'; // Hide non-matching profiles - } - }); - if (hasMatchingProfile) { - noProfileDiv.style.display = 'none'; - } else { - noProfileDiv.style.display = 'block'; - } -} \ No newline at end of file diff --git a/js/theme.js b/js/theme.js deleted file mode 100644 index d800047..0000000 --- a/js/theme.js +++ /dev/null @@ -1,38 +0,0 @@ -const colorSwitch = document.getElementById("input-toggle-button"); -colorSwitch.addEventListener("click", checkMode); - -const btn = document.querySelector('.add-col'); - -function checkMode() { - console.log("checking..."); - if (colorSwitch.checked) { - console.log("dark on"); - darkModeOn(); - btn.style.color = "black"; - btn.addEventListener('mouseover', () => { - btn.style.color = "white"; - }) - btn.addEventListener('mouseout', () => { - btn.style.color = "black"; - }) - } else { - console.log("dark off"); - darkModeOff(); - btn.style.color = "white"; - btn.addEventListener('mouseout', () => { - btn.style.color = "white"; - }) - - btn.addEventListener('mouseover', () => { - btn.style.color = "white"; - }) - } -} - -function darkModeOn() { - document.body.classList.add("dark-mode"); -} - -function darkModeOff() { - document.body.classList.remove("dark-mode"); -} \ No newline at end of file diff --git a/js/404.js b/scripts/404.js similarity index 99% rename from js/404.js rename to scripts/404.js index 82ac58e..648f741 100644 --- a/js/404.js +++ b/scripts/404.js @@ -1,3 +1,4 @@ + 'use strict'; var e, t; new function(e) { diff --git a/scripts/app.js b/scripts/app.js new file mode 100644 index 0000000..f385079 --- /dev/null +++ b/scripts/app.js @@ -0,0 +1,148 @@ +const container = document.querySelector('.container'); +const defaultImage = "https://oyepriyansh.pages.dev/i/5nf5fd.png"; + +const loadProfiles = async () => { + let data = await fetch('/data.json'); + let profiles = await data.json(); + + profiles = shuffleArray(profiles); + + profiles.forEach((profile) => { + let profileDiv = document.createElement('div'); + profileDiv.classList.add('profile'); + + let skills = profile.skills.map(skill => `${skill}`).join(''); + + let social = ''; + + if (profile.github) { + social += ` + + `; + } + + if (profile.twitter) { + social += ` + + `; + } + + if (profile.linkedin) { + social += ` + + `; + } + + profileDiv.innerHTML = ` +
+ User Image +
+

${profile.name}

+
${skills}
+ + `; + + container.append(profileDiv); + }); +}; + +const shuffleArray = (array) => { + for (let i = array.length - 1; i > 0; i--) { + const j = Math.floor(Math.random() * (i + 1)); + [array[i], array[j]] = [array[j], array[i]]; + } + return array; +}; + +loadProfiles(); + + +// dark light mode + +const colorSwitch = document.getElementById("input-toggle-button"); +colorSwitch.addEventListener("click", checkMode); + +const btn = document.querySelector('.add-col'); + +function checkMode() { + console.log("checking..."); + if (colorSwitch.checked) { + console.log("dark on"); + darkModeOn(); + btn.style.color = "black"; + btn.addEventListener('mouseover', () => { + btn.style.color = "white"; + }) + btn.addEventListener('mouseout', () => { + btn.style.color = "black"; + }) + } else { + console.log("dark off"); + darkModeOff(); + btn.style.color = "white"; + btn.addEventListener('mouseout', () => { + btn.style.color = "white"; + }) + + btn.addEventListener('mouseover', () => { + btn.style.color = "white"; + }) + } +} + +function darkModeOn() { + document.body.classList.add("dark-mode"); +} + +function darkModeOff() { + document.body.classList.remove("dark-mode"); +} + + +//search + +searchInput.addEventListener('keyup', () => { + const searchTerm = searchInput.value.trim().toLowerCase(); + + const profiles = document.querySelectorAll('.profile'); + + let visibleProfiles = 0; + + profiles.forEach((profile) => { + const profileName = profile.querySelector('.name').innerText.trim().toLowerCase(); + + if (profileName.includes(searchTerm)) { + profile.style.display = 'flex'; + visibleProfiles++; + } else { + profile.style.display = 'none'; + } + }); + + const noProfileMessage = document.querySelector('.no-profile'); + if (visibleProfiles > 0) { + noProfileMessage.style.display = 'none'; + } else { + noProfileMessage.style.display = 'block'; + } +}); + +// scroll top button + +var fabButton = document.getElementById("backToTopBtn"); + +window.onscroll = function () { + if (window.scrollY > 20) { + fabButton.style.display = "block"; + } else { + fabButton.style.display = "none"; + } +}; + +fabButton.addEventListener("click", function () { + window.scrollTo({ top: 0, behavior: "smooth" }); +}); + +// copyright year +document.getElementById("currentYear").textContent = new Date().getFullYear(); + diff --git a/css/404.css b/styles/404.css similarity index 100% rename from css/404.css rename to styles/404.css diff --git a/css/style.css b/styles/style.css similarity index 97% rename from css/style.css rename to styles/style.css index 5fe8f26..1d67778 100644 --- a/css/style.css +++ b/styles/style.css @@ -76,7 +76,7 @@ h1 { padding: 5px; } -#no-profile { +.no-profile { text-align: center; padding: 20px; font-family: "PT Serif", serif; @@ -209,6 +209,10 @@ button { box-shadow: 0px 0px 5px var(--clr-search-focus); } +.addprofilebutton { + display: inline-block; +} + .dark-mode { --clr-background: #ffffff; --clr-secondary: #f0f0f0; @@ -371,4 +375,11 @@ footer { } .top-btn{ background-color: var(--clr-secondary) -} \ No newline at end of file +} + +.flinks a { + align-self: center; + color: #3498db; + text-decoration: none; + margin: 5px 0; + } \ No newline at end of file