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 (
-
- );
-}
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 (
+
+ );
+}
\ 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() {