diff --git a/package-lock.json b/package-lock.json index b1e2700e..de31050b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3560,9 +3560,9 @@ } }, "node_modules/@remix-run/router": { - "version": "1.18.0", - "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.18.0.tgz", - "integrity": "sha512-L3jkqmqoSVBVKHfpGZmLrex0lxR5SucGA0sUfFzGctehw+S/ggL9L/0NnC5mw6P8HUWpFZ3nQw3cRApjjWx9Sw==", + "version": "1.17.1", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.17.1.tgz", + "integrity": "sha512-mCOMec4BKd6BRGBZeSnGiIgwsbLGp3yhVqAD8H+PxiRNEHgDpZb8J1TnrSDlg97t0ySKMQJTHCWBCmBpSmkF6Q==", "engines": { "node": ">=14.0.0" } @@ -14736,11 +14736,11 @@ } }, "node_modules/react-router": { - "version": "6.25.1", - "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.25.1.tgz", - "integrity": "sha512-u8ELFr5Z6g02nUtpPAggP73Jigj1mRePSwhS/2nkTrlPU5yEkH1vYzWNyvSnSzeeE2DNqWdH+P8OhIh9wuXhTw==", + "version": "6.24.1", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.24.1.tgz", + "integrity": "sha512-PTXFXGK2pyXpHzVo3rR9H7ip4lSPZZc0bHG5CARmj65fTT6qG7sTngmb6lcYu1gf3y/8KxORoy9yn59pGpCnpg==", "dependencies": { - "@remix-run/router": "1.18.0" + "@remix-run/router": "1.17.1" }, "engines": { "node": ">=14.0.0" @@ -14750,12 +14750,12 @@ } }, "node_modules/react-router-dom": { - "version": "6.25.1", - "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.25.1.tgz", - "integrity": "sha512-0tUDpbFvk35iv+N89dWNrJp+afLgd+y4VtorJZuOCXK0kkCWjEvb3vTJM++SYvMEpbVwXKf3FjeVveVEb6JpDQ==", + "version": "6.24.1", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.24.1.tgz", + "integrity": "sha512-U19KtXqooqw967Vw0Qcn5cOvrX5Ejo9ORmOtJMzYWtCT4/WOfFLIZGGsVLxcd9UkBO0mSTZtXqhZBsWlHr7+Sg==", "dependencies": { - "@remix-run/router": "1.18.0", - "react-router": "6.25.1" + "@remix-run/router": "1.17.1", + "react-router": "6.24.1" }, "engines": { "node": ">=14.0.0" diff --git a/public/data/Jyothishree2k5.json b/public/data/Jyothishree2k5.json new file mode 100644 index 00000000..454d6267 --- /dev/null +++ b/public/data/Jyothishree2k5.json @@ -0,0 +1,13 @@ +{ + "name": "Jyothishree Rajkumar", + "location": "TamilNadu", + "bio": "I am a pre-final year IT student with knowledege in MERN stack and i do dsa in python. I am currently trying to do open source as it interests me the most.", + "avatar": "https://github.com/Jyothishree2k5.png", + "portfolio": "https://github.com/Jyothishree2k5", + "skills": ["HTML", "CSS", "JAVASCRIPT", "MONGODB", "NODEJS", "EXPRESSJS", "SQL"], + "social": { + "GitHub": "https://github.com/Jyothishree2k5", + "Twitter": "https://twitter.com/Jyothishree2k58", + "LinkedIn": "https://www.linkedin.com/in/jyothishree-rajkumar-055022243" + } +} diff --git a/public/data/Om-pawarr.json b/public/data/Om-pawarr.json new file mode 100644 index 00000000..474955e5 --- /dev/null +++ b/public/data/Om-pawarr.json @@ -0,0 +1,13 @@ +{ + "name": "Om pawar", + "location": "Maharashtra", + "bio": "A Web Developer specializing in HTML5,css, JavaScript, and front-end frameworks", + "avatar": "https://avatars.githubusercontent.com/u/124502159?s=400&u=3691e22cc07794bb421cee5c655dca4d8da244c9&v=4", + "portfolio": "", + "skills": ["Front end frameworks expertise", "AWS associate level certified", "..."], + "social": { + "GitHub": "https://github.com/Om-pawarr", + "Twitter": "https://twitter.com/@_Parth_Dwivedi_", + "LinkedIn": "" + } +} diff --git a/public/data/Saipradyumna Goud Chiragoni.json b/public/data/Saipradyumna Goud Chiragoni.json new file mode 100644 index 00000000..fc3742c6 --- /dev/null +++ b/public/data/Saipradyumna Goud Chiragoni.json @@ -0,0 +1,13 @@ +{ + "name": "Chiragoni Sai Pradyumna Goud", + "location": "Telangana, India", + "bio": "I am an aspiring full stack developer and very sincere about my work. I am pursuing my B.Tech at Kakatiya Institute of Technology and Science, and I am an open source contributor.", + "avatar": "https://github.com/saipradyumnagoud.png", + "portfolio": "https://github.com/saipradyumnagoud", + "skills": ["HTML", "CSS", "JAVASCRIPT", "REACT", "EXPRESS", "NODE", "MONGODB", "SQL", "C", "JAVA"], + "social": { + "GitHub": "https://github.com/saipradyumnagoud", + "Twitter": "https://x.com/saipradyumnaaaa", + "LinkedIn": "https://www.linkedin.com/in/saipradyumnagoudch/" + } +} diff --git a/public/data/Sanket176.json b/public/data/Sanket176.json new file mode 100644 index 00000000..9f82ec04 --- /dev/null +++ b/public/data/Sanket176.json @@ -0,0 +1,13 @@ +{ + "name": "Sanket Rinayat", + "location": "Gondia (MH), India", + "bio": "System Engineer @Infosys with 2 years of experience in web app development with industry standard. Interested in learning new technologies in new various environments with problem-solving attitude.", + "avatar": "https://github.com/Sanket176.png", + "portfolio": "https://github.com/Sanket176", + "skills": ["HTML", "CSS", "Javascript", "React", "NodeJS", "MongoDB", "Networking", "Problem Solving"], + "social": { + "GitHub": "https://github.com/Sanket176", + "My Portfolio": "https://66a7ce14a7aa1539cc2ec257--earnest-platypus-025bbc.netlify.app/", + "LinkedIn": "https://www.linkedin.com/in/sanket-rinayat-b253bb211" + } +} diff --git a/public/data/adityashah7867.json b/public/data/adityashah7867.json new file mode 100644 index 00000000..2dfe82a8 --- /dev/null +++ b/public/data/adityashah7867.json @@ -0,0 +1,28 @@ +{ + "name": "Aditya Nikunj Shah", + "location": "Mumbai, India 🇮🇳", + "bio": "FULL STACK DEV", + "avatar": "https://adityadevappweb.s3.ap-south-1.amazonaws.com/Untitled+design.png", + "portfolio": "https://adityanshah.netlify.app/", + "skills": [ + "Javascript", + "C++", + "Typescript", + "Nodejs", + "Expressjs", + "React", + "Next.Js", + "MySQL", + "MongoDB", + "Docker", + "Git", + "Tailwind CSS", + "REST APIs", + "GraphQL" + ], + "social": { + "GitHub": "https://github.com/adityashah7867", + "LinkedIn": "https://www.linkedin.com/in/adi-tya-shah" + } + } + \ No newline at end of file diff --git a/public/data/boytur.json b/public/data/boytur.json new file mode 100644 index 00000000..d4dc9f77 --- /dev/null +++ b/public/data/boytur.json @@ -0,0 +1,12 @@ +{ + "name": "Piyawat Wongyat", + "location": "Bangkok/Thailand", + "bio": "I'm a software engineering student at Burapha University. I'm not very passionate about coding but work in this field to earn a living.", + "avatar": "https://avatars.githubusercontent.com/u/104257779?s=400&u=4e9c1cc0d7c1530af16a0293b5338375fb4af27e&v=4", + "portfolio": "https://piyawat-portfolio.onrender.com/", + "skills": ["React.js", "Express.js", "Tailwind", "TypeScript", "JavaScript", "Linux"], + "social": { + "GitHub": "https://github.com/boytur", + "LinkedIn": "https://www.linkedin.com/in/piyawat-wongyat-a74b52270/" + } +} diff --git a/public/data/dylan-dot-c.json b/public/data/dylan-dot-c.json new file mode 100644 index 00000000..80e40a19 --- /dev/null +++ b/public/data/dylan-dot-c.json @@ -0,0 +1,25 @@ +{ + "name": "Dylan Heslop", + "location": "New York, USA", + "bio": "Full Stack Software Developer, specializes in React, Vue, Supabase, TypsScript, Node.JS. Love making functional web applications and learning new things everyday.", + "avatar": "https://github.com/dylan-dot-c.png", + "portfolio": "https://www.frontendmentor.io/profile/dylan-dot-c", + "skills": [ + "HTML", + "CSS", + "JS", + "TypeScript", + "React", + "Vue", + "Supabase", + "Python", + "Node.JS", + "Flask", + "Responsive Web Design", + "Mobile-First Design" + ], + "social": { + "GitHub": "https://github.com/dylan-dot-c", + "LinkedIn": "https://www.linkedin.com/in/heslopd23/" + } +} diff --git a/public/data/giuliarappo.json b/public/data/giuliarappo.json new file mode 100644 index 00000000..614234a9 --- /dev/null +++ b/public/data/giuliarappo.json @@ -0,0 +1,12 @@ +{ + "name": "Giulia", + "location": "Italy", + "bio": "Junior fullstack delevoper searching a project to collaborate for improve skills", + "avatar": "https://github.com/giuliarappo.png", + "portfolio": "https://github.com/giuliarappo", + "skills": ["Java", "Spring boot", "Angular", "React"], + "social": { + "GitHub": "https://github.com/", + "LinkedIn": "https://www.linkedin.com/in/" + } +} diff --git a/public/data/mayurr7.json b/public/data/mayurr7.json new file mode 100644 index 00000000..66497b24 --- /dev/null +++ b/public/data/mayurr7.json @@ -0,0 +1,13 @@ +{ + "name": "Mayur Tekale", + "location": "Maharashtra, India", + "bio": "A passionate web developer from India.", + "avatar": "https://avatars.githubusercontent.com/u/147367560?s=400&u=fc01c0ff31e5b5d0f5bddd5e9a99ba5d7d2634fa&v=4", + "portfolio": "https://mayurr7.github.io/mayurPortfolio/", + "skills": ["HTML5", "CSS3", "JavaScript", "ReactJs", "TailwindCss", "NodeJs", "Java", "DSA"], + "social": { + "GitHub": "https://github.com/mayurr7", + "Twitter": "https://twitter.com/mayur_b_tekale", + "LinkedIn": "https://www.linkedin.com/in/mayur-tekale-1540a023b" + } +} diff --git a/public/data/samah554.json b/public/data/samah554.json new file mode 100644 index 00000000..608284a4 --- /dev/null +++ b/public/data/samah554.json @@ -0,0 +1,13 @@ +{ + "name": "Samah Shakir Ali", + "location": "India", + "bio": "CS Grad, Web dev, Full Stack Developer expertise in .Net and MERN Stack", + "avatar": "https://github.com/samah554.png", + "portfolio": "https://getssa.framer.website", + "skills": ["Javascript", "ReactJS", "Node.js", ".Net", "MongoDB", "MySql", "MSSql", "C#", "RestApi", "Express.js"], + "social": { + "GitHub": "https://github.com/samah554", + "Twitter": "https://twitter.com/samah554>", + "LinkedIn": "https://www.linkedin.com/in/samahshakir" + } +} diff --git a/public/data/swarnendu19.json b/public/data/swarnendu19.json new file mode 100644 index 00000000..1196c154 --- /dev/null +++ b/public/data/swarnendu19.json @@ -0,0 +1,27 @@ +{ + "name": "Swarnendu Maity", + "location": "India", + "bio": "Aspiring Full Stack Developer | Integrating Frontend Proficiency with Expanding Backend Knowledge", + "avatar": "https://github.com/swarnendu19.png", + "portfolio": "https://github.com/swarnendu19", + "skills": [ + "HTML", + "CSS", + "JavaScript", + "ReactJS", + "Redux Toolkit", + "SASS", + "TailwindCSS", + "NodeJS", + "ExpressJS", + "MongoDB", + "Docker", + "Git", + "GitHub" + ], + "social": { + "GitHub": "https://github.com/swarnendu19", + "Twitter": "https://x.com/swarnendu_dev", + "LinkedIn": "https://www.linkedin.com/in/swarnendu-maity-34111624b/" + } +} diff --git a/public/data/tainguyenphat74.json b/public/data/tainguyenphat74.json new file mode 100644 index 00000000..2f9b9c4f --- /dev/null +++ b/public/data/tainguyenphat74.json @@ -0,0 +1,13 @@ +{ + "name": "tainguyenphat74", + "location": "Viet Nam", + "bio": "Fullstack Software Engineer with 3+ years. Lovely build SaaS product.", + "avatar": "https://github.com/tainguyenphat74.png", + "portfolio": "https://github.com/tainguyenphat74", + "skills": ["Next.js", "TailwindCSS", "Java", "Quarkus", "Docker"], + "social": { + "GitHub": "https://github.com/tainguyenphat74", + "Twitter": "https://twitter.com/tainguyenphat74", + "LinkedIn": "https://www.linkedin.com/in/tainguyenphat74" + } +} diff --git a/public/data/vitormarinheiro.json b/public/data/vitormarinheiro.json new file mode 100644 index 00000000..e3e274e0 --- /dev/null +++ b/public/data/vitormarinheiro.json @@ -0,0 +1,13 @@ +{ + "name": "Vitor Marinheiro", + "location": "São Paulo - Brasil", + "bio": "Hello, my name is Vitor Marinheiro and I'am Frontend Developer. My motivation is to solve problems and be involved in projects where I can apply my knowledge and learn continuously. In my free time, I enjoy contributing to open source projects and helping others get involved in programming.", + "avatar": "https://github.com/vitormarinheiro1.png", + "portfolio": "https://vitormarinheiro.vercel.app/", + "skills": ["React", "Nextjs", "Angular", "Typescript", "Python", "Nest", "MySQL"], + "social": { + "GitHub": "https://github.com/vitormarinheiro1", + "Twitter": "#", + "LinkedIn": "https://br.linkedin.com/in/vitor-marinheiro-590a461ba" + } +} diff --git a/src/App.js b/src/App.js index 6a20d15a..bbda86bf 100644 --- a/src/App.js +++ b/src/App.js @@ -20,6 +20,7 @@ function App() { const recordsPerPage = 20; const currentUrl = window.location.pathname; + useEffect(() => { const fetchData = async (file) => { try { @@ -36,7 +37,7 @@ function App() { setLoadingProfiles(true); try { const promises = filenames.map((file) => fetchData(`/data/${file}`)); - const combinedData = await Promise.all(promises); + const combinedData = await Promise.all(promises).then((results) => results.flat()); setCombinedData(combinedData); setShuffledProfiles(shuffleProfiles(combinedData)); } catch (error) { @@ -58,26 +59,34 @@ function App() { return array; }; - const handleSearch = (searchValue) => { - const lowercaseSearch = searchValue.toLowerCase().trim(); - const results = combinedData.filter((object) => { - const lowercaseName = object.name.toLowerCase(); - const lowercaseLocation = object.location.toLowerCase(); - const matchingSkills = object.skills.filter((skill) => skill.toLowerCase().includes(lowercaseSearch)); - return ( - matchingSkills.length > 0 || - lowercaseName.includes(lowercaseSearch) || - lowercaseLocation.includes(lowercaseSearch) - ); + const handleSearch = ({ value, criteria }) => { + const normalizeString = (str) => + str + .toLowerCase() + .replace(/\s*,\s*/g, ' ') + .replace(/\s+/g, ' ') + .trim(); + + const normalizedValue = normalizeString(value); + + const filteredResults = combinedData.filter((user) => { + if (criteria === 'name') { + return normalizeString(user.name).includes(normalizedValue); + } else if (criteria === 'location') { + return normalizeString(user.location).includes(normalizedValue); + } else if (criteria === 'skill') { + return user.skills.some((skill) => normalizeString(skill).includes(normalizedValue)); + } + return false; }); - setSearching(true); - setProfiles(results); + setProfiles(filteredResults); setCurrentPage(1); + setSearching(true); }; const handleNextPage = () => { - const totalPages = Math.ceil((searching ? profiles.length : combinedData.length) / recordsPerPage); + const totalPages = Math.ceil((searching ? profiles.length : shuffledProfiles.length) / recordsPerPage); if (currentPage < totalPages) { setCurrentPage(currentPage + 1); } @@ -125,7 +134,7 @@ function App() {
{profiles.length === 0 && searching ? : renderProfiles()} - {combinedData.length > 0 && ( + {(searching ? profiles.length : shuffledProfiles.length) > 0 && ( ; @@ -8,6 +9,10 @@ function Profile({ data }) { function Card({ data }) { const cardRef = React.useRef(); + // const [imageSrc, setImageSrc] = useState(data.avatar); + // const handleImageError = () => { + // setImageSrc(defaultAvatar); // Fallback to default image + // }; const handleWheel = (event) => { event.stopPropagation(); @@ -29,9 +34,9 @@ function Card({ data }) { return (
-
+
- User logo + User logo

@@ -49,7 +54,7 @@ function Card({ data }) { {data.location}

{data.skills && @@ -66,7 +71,7 @@ function Card({ data }) {

diff --git a/src/components/Profile/image.png b/src/components/Profile/image.png new file mode 100644 index 00000000..9f062f95 Binary files /dev/null and b/src/components/Profile/image.png differ diff --git a/src/components/Search/Search.jsx b/src/components/Search/Search.jsx index 16342b40..a43132cf 100644 --- a/src/components/Search/Search.jsx +++ b/src/components/Search/Search.jsx @@ -6,25 +6,30 @@ import { faMagnifyingGlass, faXmark } from '@fortawesome/free-solid-svg-icons'; function Search({ onSearch }) { const [searchValue, setSearchValue] = useState(''); const [prevSearchValue, setPrevSearchValue] = useState(''); + const [searchCriteria, setSearchCriteria] = useState('name'); const searchInput = useRef(null); const handleInputChange = (event) => { setSearchValue(event.target.value); }; + const handleCriteriaChange = (event) => { + setSearchCriteria(event.target.value); + }; + const debouncedValue = useDebounce(searchValue, 500); useEffect(() => { - if (searchValue !== prevSearchValue) { - onSearch(debouncedValue); - setPrevSearchValue(searchValue); + if (debouncedValue !== prevSearchValue) { + onSearch({ value: debouncedValue, criteria: searchCriteria }); + setPrevSearchValue(debouncedValue); } // eslint-disable-next-line react-hooks/exhaustive-deps }, [debouncedValue]); const handleSearch = () => { if (searchValue !== prevSearchValue) { - onSearch(searchValue); + onSearch({ value: searchValue, criteria: searchCriteria }); setPrevSearchValue(searchValue); } }; @@ -43,7 +48,7 @@ function Search({ onSearch }) { if (searchValue) { setSearchValue(''); setPrevSearchValue(''); - onSearch(''); + onSearch({ value: '', criteria: searchCriteria }); searchInput.current.focus(); } }; @@ -53,30 +58,40 @@ function Search({ onSearch }) { }, []); return ( -
- - {searchValue && ( - - )} - {!searchValue && ( - + +
+ - )} + {searchValue ? ( + + ) : ( + + )} +
); } diff --git a/src/components/Sidebar/Sidebar.jsx b/src/components/Sidebar/Sidebar.jsx index 463d2714..5209e14b 100644 --- a/src/components/Sidebar/Sidebar.jsx +++ b/src/components/Sidebar/Sidebar.jsx @@ -4,7 +4,6 @@ import { faCode, faMoon, faSun } from '@fortawesome/free-solid-svg-icons'; function Sidebar() { const [theme, setTheme] = useState('dark'); - const [showContactForm, setShowContactForm] = useState(false); function toggleTheme() { const htmlElement = document.documentElement; @@ -19,18 +18,14 @@ function Sidebar() { } } - function toggleContactForm() { - setShowContactForm(!showContactForm); - } - return ( -
+
- -
- -
- {showContactForm && ( -
-

Contact Us

-

Please fill out the form below to get in touch with us.

-
-
- - -
- -
- - -
- -
- -