loader and about updates

HassanChowdhry · Apr 27, 2024 · c963cf1 · c963cf1
1 parent f3837f2
commit c963cf1
Show file tree

Hide file tree

Showing 9 changed files with 66 additions and 111 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -18,6 +18,7 @@
     "maath": "^0.10.7",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-icons": "^5.1.0",
     "react-router-dom": "^6.22.3",
     "react-tilt": "^1.0.2",
     "react-vertical-timeline-component": "^3.6.0",

diff --git a/src/App.jsx b/src/App.jsx
@@ -1,9 +1,7 @@
 import { BrowserRouter } from "react-router-dom";
 import {About, Contact, Experience, Hero, Navbar, Tech, Works, StarsCanvas} from "./components";
 
-function App() {
-  // TODO: socials linked, leet, gh, upwork
-
+function App() {  
   // TODO: Pacman loader
   // TODO: Remove comp for animated letters
   return (

diff --git a/src/assets/index.js b/src/assets/index.js
@@ -54,6 +54,12 @@ import links from './projects/links.png';
 import tweet from './projects/tweet.png';
 import resume from './resume/HassanChowdhry_Resume.pdf';
 
+import { FaLinkedin } from "react-icons/fa";
+import { SiLeetcode } from "react-icons/si";
+import { FaGithub } from "react-icons/fa";
+import { FaUpwork } from "react-icons/fa6";
+
+
 export {
   logo,
   backend,
@@ -106,5 +112,9 @@ export {
   postman,
   mysql,
   postgresql,
-  resume
+  resume,
+  FaLinkedin,
+  FaGithub,
+  FaUpwork,
+  SiLeetcode
 };
diff --git a/src/components/About.jsx b/src/components/About.jsx
@@ -6,18 +6,20 @@ import { services } from '../constants';
 import { fadeIn } from '../utils/motion'
 import { SectionWrapper } from '../hoc';
 
-const ServiceCard = ({index, title, icon }) => {
+const ServiceCard = ({index, title, Icon, link }) => {
   return (
     <Tilt className="xs:w-[250px] w-full">
       <motion.div 
         variants={fadeIn("right", "spring", 0.5 * index, 0.75)}
-        className='w-full green-pink-gradient p-[1px] rounded-[20px] shadow-card'
+        className='w-full green-pink-gradient p-[1px] rounded-[20px] shadow-card cursor-pointer'
+        onClick={() => window.open(link, "_blank")}
         >
           <div options={{ max:45, scale: 1, speed: 450 }}
             className='bg-tertiary rounded-[20px] py-5 px-12 min-h-[280px] flex justify-evenly
               items-center flex-col'
           >
-            <img src={icon} alt={title} className='w-16 h-16 object-contain'/>
+            <Icon className='w-16 h-16 object-contain' />
+            {/* <img src={icon} alt={title} className='w-16 h-16 object-contain'/> */}
             <h3 className='text-white text-[20px] font-bold text-center'>{title}</h3>
           </div>
       </motion.div>

diff --git a/src/components/Loader.jsx b/src/components/Loader.jsx
@@ -1,16 +1,15 @@
 import { Html, useProgress } from '@react-three/drei';
 
-// TODO:make into circle loader instead
 const Loader = () => {
   const { progress } = useProgress();
   return (
     <Html>
-      <span className='canvas-load'></span>
+      <div className='loader'></div>
       <p style={{
         fontSize: 14,
         color: '#fff',
         fontWeight: 800,
-        marginTop: 40,
+        marginTop: 25
       }}>
         {progress.toFixed(2)}%
       </p>

diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
@@ -18,10 +18,6 @@ const [toggle, setToggle] = useState(false);
           <img src={logo} alt="logo" className='w-9 h-9 object-contain'/>
           <p className='text-white text-[18px] font-bold cursor-pointer flex'>Hassan Chowdhry&nbsp; </p>
         </Link>
-
-
-        {/* Add list of socials here */}
-
 
         <ul className='list-none hidden sm:flex flex-row gap-10'>
           {navLinks.map(({ id, title}) => (

diff --git a/src/constants/index.js b/src/constants/index.js
@@ -46,7 +46,11 @@ import {
   gitlab,
   postman,
   mysql,
-  postgresql
+  postgresql,
+  FaLinkedin,
+  FaGithub,
+  FaUpwork,
+  SiLeetcode
 } from "../assets";
 
 export const navLinks = [
@@ -70,20 +74,24 @@ export const navLinks = [
 
 const services = [
   {
-    title: "Full-Stack Developer",
-    icon: web,
+    title: "LinkedIn",
+    Icon: FaLinkedin,
+    link: "https://www.linkedin.com/in/hassanchowdhry/"
   },
   {
-    title: "Teaching Assistant",
-    icon: mobile,
+    title: "Github",
+    Icon: FaGithub,
+    link: "https://github.com/HassanChowdhry"
   },
   {
-    title: "Software Developer",
-    icon: creator,
+    title: "Leetcode",
+    Icon: SiLeetcode,
+    link: "https://leetcode.com/u/HassanChowdhry/"
   },
   {
-    title: "Student",
-    icon: backend,
+    title: "Upwork",
+    Icon: FaUpwork,
+    link: "https://www.upwork.com/freelancers/~013df04d0a3432d810"
   },
 ];
 

diff --git a/src/index.css b/src/index.css
@@ -340,92 +340,18 @@
     bottom: 0;
     background: transparent;
 }
-
-/* canvas- styles */
-.canvas-loader {
-  font-size: 10px;
-  width: 1em;
-  height: 1em;
+
+/* HTML: <div class="loader"></div> */
+.loader {
+  width: 50px;
+  aspect-ratio: 1;
   border-radius: 50%;
-  position: relative;
-  text-indent: -9999em;
-  animation: mulShdSpin 1.1s infinite ease;
-  transform: translateZ(0);
+  background: 
+    radial-gradient(farthest-side,#fff 94%,#0000) top/8px 8px no-repeat,
+    conic-gradient(#0000 30%,#fff);
+  -webkit-mask: radial-gradient(farthest-side,#0000 calc(100% - 8px),#000 0);
+  animation: l13 1s infinite linear;
 }
-
-@keyframes mulShdSpin {
-  0%,
-  100% {
-    box-shadow: 0em -2.6em 0em 0em #ffffff,
-      1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
-      2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
-      1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
-      0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
-      -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
-      -2.6em 0em 0 0em rgba(255, 255, 255, 0.5),
-      -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7);
-  }
-  12.5% {
-    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.7),
-      1.8em -1.8em 0 0em #ffffff, 2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
-      1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
-      0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
-      -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
-      -2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
-      -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5);
-  }
-  25% {
-    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.5),
-      1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7), 2.5em 0em 0 0em #ffffff,
-      1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
-      0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
-      -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
-      -2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
-      -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
-  }
-  37.5% {
-    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
-      1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5),
-      2.5em 0em 0 0em rgba(255, 255, 255, 0.7), 1.75em 1.75em 0 0em #ffffff,
-      0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
-      -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
-      -2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
-      -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
-  }
-  50% {
-    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
-      1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
-      2.5em 0em 0 0em rgba(255, 255, 255, 0.5),
-      1.75em 1.75em 0 0em rgba(255, 255, 255, 0.7), 0em 2.5em 0 0em #ffffff,
-      -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
-      -2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
-      -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
-  }
-  62.5% {
-    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
-      1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
-      2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
-      1.75em 1.75em 0 0em rgba(255, 255, 255, 0.5),
-      0em 2.5em 0 0em rgba(255, 255, 255, 0.7), -1.8em 1.8em 0 0em #ffffff,
-      -2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
-      -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
-  }
-  75% {
-    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
-      1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
-      2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
-      1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
-      0em 2.5em 0 0em rgba(255, 255, 255, 0.5),
-      -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.7), -2.6em 0em 0 0em #ffffff,
-      -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
-  }
-  87.5% {
-    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
-      1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
-      2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
-      1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
-      0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
-      -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.5),
-      -2.6em 0em 0 0em rgba(255, 255, 255, 0.7), -1.8em -1.8em 0 0em #ffffff;
-  }
+@keyframes l13{ 
+  100%{transform: rotate(1turn)}
 }