diff --git a/src/api.js b/src/api.js new file mode 100644 index 0000000..2962f37 --- /dev/null +++ b/src/api.js @@ -0,0 +1,33 @@ +export async function getProjectRepo() { + try { + const res = await fetch('https://api.npoint.io/8a1ae503884eede2a37f/projects_repo/'); + const data = await res.json(); + return data; + } catch (err) { + console.error(err); + return "Failed to fetch Projects Data" + } +} + +export async function getLanguages() { + try { + + const res = await fetch('https://api.npoint.io/8a1ae503884eede2a37f/languages/'); + const data = await res.json(); + return data; + } catch (err) { + console.error(err); + return "Failed to fetch Languages Data" + } +} + +export async function getAbout() { + try { + const res = await fetch('https://api.npoint.io/8a1ae503884eede2a37f/about_list/'); + const data = await res.json(); + return data; + } catch (err) { + console.error(err); + return "Failed to fetch About Data" + } +} \ No newline at end of file diff --git a/src/components/ChartImageLoader.jsx b/src/components/ChartImageLoader.jsx index 205e34d..b1d21cc 100644 --- a/src/components/ChartImageLoader.jsx +++ b/src/components/ChartImageLoader.jsx @@ -1,5 +1,6 @@ import { ChartBar } from "@phosphor-icons/react"; import { useState, useEffect } from "react"; +import LoadingSpinner from "./LoadingSpinner"; const ChartImageLoader = ({ imageUrl, ...props }) => { const [loading, setLoading] = useState(true); @@ -27,7 +28,7 @@ const ChartImageLoader = ({ imageUrl, ...props }) => { }, [imageUrl]); if (loading) { - return ; + return ; } if (error) { @@ -50,28 +51,3 @@ function ErrorElement() { ); } -function LoadingElement() { - return ( -
-
- - Loading... -
-
- ); -} diff --git a/src/components/LoadingSpinner.jsx b/src/components/LoadingSpinner.jsx new file mode 100644 index 0000000..2e409c1 --- /dev/null +++ b/src/components/LoadingSpinner.jsx @@ -0,0 +1,25 @@ +export default function LoadingSpinner() { + return ( +
+
+ + Loading... +
+
+ ); +} \ No newline at end of file diff --git a/src/data.js b/src/data.js deleted file mode 100644 index a497b0c..0000000 --- a/src/data.js +++ /dev/null @@ -1,130 +0,0 @@ -export const projects = [ - { - title:"a1x5h04.github.io", - description:"Personal website hosted on github pages", - tags:['reactjs','portfolio','pages'], - language:{text:"Javascript" , color:"#facc15"}, - link:"https://a1x5h04.github.io" - }, - { - title:"quizzapp", - description:"Personal website hosted on github pages", - tags:['reactjs','api','javascript', 'figma'], - language:{text:"Javascript" , color:"#facc15"}, - link:"https://a1x5h04-quizzapp.netlify.app" - }, - { - title:"watchflick", - description:"A Movie Streaming App Made With React, Ionic and Tailwind CSS", - tags:['ionic','reactjs','watchlist', 'tailwindcss', 'streaming-web'], - language:{text:"Javascript", color:"#facc15"}, - link:"https://watchflick.netlify.app" - }, - { - title:"dictionary-app", - description:"A beautiful dictionary app made with React and Urban Dictionary API", - tags:['web', 'reactjs', 'dictionary', 'urban', 'vitejs'], - language:{text:"Javascript" , color:"#facc15"}, - link:"https://a1x5h04-dictionary.netlify.app/" - }, - -] - -export const languages = [ - { - link: "https://www.javascript.com/", - imgAltText: "Javascript", - imgSrc: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/javascript/javascript-original.svg", - skillName: "Javascript", - }, - { - link: "https://www.typescriptlang.org/", - imgAltText: "TypeScript", - imgSrc: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/typescript/typescript-original.svg", - skillName: "TypeScript", - }, - { - link: "https://developer.mozilla.org/en-US/docs/Web/CSS", - imgAltText: "CSS 3", - imgSrc: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/css3/css3-original.svg", - skillName: "CSS3", - }, - { - link: "https://tailwindcss.com/", - imgAltText: "Tailwind CSS", - imgSrc: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/tailwindcss/tailwindcss-plain.svg", - skillName: "Tailwind CSS", - }, - { - link: "https://getbootstrap.com/", - imgAltText: "Bootstrap", - imgSrc: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/bootstrap/bootstrap-original.svg", - skillName: "Bootstrap", - }, - { - link: "https://reactjs.org/", - imgAltText: "React JS", - imgSrc: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/react/react-original.svg", - skillName: "React JS", - }, - { - link: "https://docs.microsoft.com/en-us/cpp/?view=msvc-170", - imgAltText: "C", - imgSrc: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/c/c-original.svg", - skillName: "C", - }, - { - link: "https://docs.microsoft.com/en-us/cpp/?view=msvc-170", - imgAltText: "C++", - imgSrc: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/cplusplus/cplusplus-original.svg", - skillName: "C++", - }, - { - link: "https://kotlinlang.org/", - imgAltText: "Kotlin", - imgSrc: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/kotlin/kotlin-original.svg", - skillName: "Kotlin", - }, - { - link: "https://developer.mozilla.org/en-US/docs/Web/HTML", - imgAltText: "HTML 5", - imgSrc: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/html5/html5-original.svg", - skillName: "HTML5", - }, - { - link: "https://nodejs.org/en/", - imgAltText: "Node.js", - imgSrc: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/nodejs/nodejs-original.svg", - skillName: "Node.js", - }, - { - link: "https://www.mysql.com/", - imgAltText: "MySQL", - imgSrc: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/mysql/mysql-original.svg", - skillName: "MySQL", - }, - { - link: "https://firebase.google.com/", - imgAltText: "Firebase", - imgSrc: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/firebase/firebase-plain.svg", - skillName: "Firebase", - }, - { - link: "https://www.figma.com/", - imgAltText: "Figma", - imgSrc: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/figma/figma-original.svg", - skillName: "Figma", - }, - { - link: "https://git-scm.com/", - imgAltText: "Git", - imgSrc: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/git/git-original.svg", - skillName: "Git", - }, - { - link: "https://dart.dev", - imgAltText: "Dart", - imgSrc: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/dart/dart-original.svg", - skillName: "Dart", - } -] diff --git a/src/pages/Dashboard.jsx b/src/pages/Dashboard.jsx index 64ec661..5083d13 100644 --- a/src/pages/Dashboard.jsx +++ b/src/pages/Dashboard.jsx @@ -1,26 +1,32 @@ import React from "react"; -import { languages } from "../data"; import ChartImageLoader from "../components/ChartImageLoader"; import GridPattern from "../components/GridPattern"; import { twMerge } from "tailwind-merge"; import { clsx } from "clsx"; import { Fade } from "react-awesome-reveal"; +import { getLanguages, getAbout } from "../api"; function cn(...inputs) { return twMerge(clsx(inputs)); } -const aboutArray = [ - "👋 Hi I am Alish.", - "🖥️ See my portfolio at A1X5H04.github.com", - "👨‍💻 I'm currently working on contributing to Open Source projects.", - "✉️ You can reach me at alishbaig2004@gmail.com", - "🧠 I'm currently learning Android Development", - "🤝 I'm open to collaborating on anything?", - "⚡ Fun fact: I like phonk music", -]; - function Dashboard() { + + const [languagesArray, setLanguagesArray] = React.useState([]); + const [aboutArray, setAboutArray] = React.useState([]); + + React.useEffect(() => { + const data = async () => { + const languages = await getLanguages(); + setLanguagesArray(languages); + const about = await getAbout(); + setAboutArray(about); + console.log(about); + } + data(); + }, []); + + return (
@@ -57,7 +63,7 @@ function Dashboard() {