updated

TiwariAbhishek23 · May 8, 2024 · d87d230 · d87d230
1 parent 17f34e9
commit d87d230
Show file tree

Hide file tree

Showing 32 changed files with 375 additions and 130 deletions.
diff --git a/index.html b/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="./logo.svg" />
+    <link rel="icon" type="image/svg+xml" href="./src/assets/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Three.js 3D Portfolio</title>
   </head>

diff --git a/src/App.tsx b/src/App.tsx
@@ -10,6 +10,8 @@ import {
   Tech,
   Works,
   StarsCanvas,
+  Education,
+  Footer,
 } from "./components";
 import { useEffect } from "react";
 import { config } from "./constants/config";
@@ -32,11 +34,13 @@ const App = () => {
         <Experience />
         <Tech />
         <Works />
+        <Education />
         <Feedbacks />
         <div className="relative z-0">
           <Contact />
           <StarsCanvas />
         </div>
+        <Footer />
       </div>
     </BrowserRouter>
   );

diff --git a/src/assets/carrent.png b/src/assets/carrent.png
diff --git a/src/assets/company/incf.png b/src/assets/company/incf.png
diff --git a/src/assets/company/nsut.png b/src/assets/company/nsut.png
diff --git a/src/assets/company/passbolt.png b/src/assets/company/passbolt.png
diff --git a/src/assets/company/shopify.png b/src/assets/company/shopify.png
diff --git a/src/assets/company/starbucks.png b/src/assets/company/starbucks.png
diff --git a/src/assets/company/tesla.png b/src/assets/company/tesla.png
diff --git a/src/assets/favicon.ico b/src/assets/favicon.ico
diff --git a/src/assets/index.ts b/src/assets/index.ts
@@ -1,62 +1,72 @@
-import logo from "./logo.png";
 import backend from "./backend.png";
 import creator from "./creator.png";
 import mobile from "./mobile.png";
 import web from "./web.png";
-import github from "./github.png";
 import menu from "./menu.svg";
 import close from "./close.svg";
 
 import css from "./tech/css.png";
 import docker from "./tech/docker.png";
-import figma from "./tech/figma.png";
+import python from "./tech/python.png";
 import git from "./tech/git.png";
 import html from "./tech/html.png";
 import javascript from "./tech/javascript.png";
 import mongodb from "./tech/mongodb.png";
 import nodejs from "./tech/nodejs.png";
 import reactjs from "./tech/reactjs.png";
-import redux from "./tech/redux.png";
+import fastapi from "./tech/fastapi.png";
 import tailwind from "./tech/tailwind.png";
 import typescript from "./tech/typescript.png";
-import threejs from "./tech/threejs.svg";
+import nextjs from "./tech/nextjs.png";
+import googleCloud from "./tech/googleCloud.png";
 
 import meta from "./company/meta.png";
-import shopify from "./company/shopify.png";
-import starbucks from "./company/starbucks.png";
-import tesla from "./company/tesla.png";
+import incf from "./company/incf.png";
+import nsut from "./company/nsut.png";
+import passbolt from "./company/passbolt.png";
+
+
+import gitspotlight from "./projects/gitspotlight.png";
+import calorico from "./projects/calorico.png";
+import brian from "./projects/brian.png";
+
+import github from "./socials/github.png";
+import linkedin from "./socials/linkedin.png";
 
-import carrent from "./carrent.png";
-import jobit from "./jobit.png";
-import tripguide from "./tripguide.png";
 
 export {
-  logo,
   backend,
   creator,
   mobile,
   web,
-  github,
   menu,
   close,
   css,
   docker,
-  figma,
+  python,
   git,
   html,
   javascript,
   mongodb,
   nodejs,
-  reactjs,
-  redux,
+
+  fastapi,
   tailwind,
+  nextjs,
+  googleCloud,
+  reactjs,
   typescript,
-  threejs,
+
   meta,
-  shopify,
-  starbucks,
-  tesla,
-  carrent,
-  jobit,
-  tripguide,
+  incf,
+  nsut,
+  passbolt,
+
+  gitspotlight,
+  calorico,
+  brian,
+
+  github,
+  linkedin,
+
 };
diff --git a/src/assets/jobit.png b/src/assets/jobit.png
diff --git a/src/assets/logo.png b/src/assets/logo.png
diff --git a/src/assets/logo.svg b/src/assets/logo.svg
diff --git a/src/assets/projects/brian.png b/src/assets/projects/brian.png
diff --git a/src/assets/projects/calorico.png b/src/assets/projects/calorico.png
diff --git a/src/assets/projects/gitspotlight.png b/src/assets/projects/gitspotlight.png
diff --git a/src/assets/socials/github.png b/src/assets/socials/github.png
diff --git a/src/assets/socials/linkedin.png b/src/assets/socials/linkedin.png
diff --git a/src/assets/tech/fastapi.png b/src/assets/tech/fastapi.png
diff --git a/src/assets/tech/googleCloud.png b/src/assets/tech/googleCloud.png
diff --git a/src/assets/tech/nextjs.png b/src/assets/tech/nextjs.png
diff --git a/src/assets/tech/python.png b/src/assets/tech/python.png
diff --git a/src/assets/tripguide.png b/src/assets/tripguide.png
diff --git a/src/components/index.ts b/src/components/index.ts
@@ -10,8 +10,10 @@ import Navbar from "./layout/Navbar";
 import About from "./sections/About";
 import Tech from "./sections/Tech";
 import Experience from "./sections/Experience";
+import Education from "./sections/Education";
 import Works from "./sections/Works";
 import Feedbacks from "./sections/Feedbacks";
+import Footer from "./layout/Footer";
 import Contact from "./sections/Contact";
 import CanvasLoader from "./layout/Loader";
 
@@ -23,6 +25,8 @@ export {
   Experience,
   Works,
   Feedbacks,
+  Education,
+  Footer,
   Contact,
   CanvasLoader,
   EarthCanvas,

diff --git a/src/components/layout/Footer.tsx b/src/components/layout/Footer.tsx
@@ -0,0 +1,40 @@
+import { styles } from "../../constants/styles";
+import { socialLinks } from "../../constants";
+
+const Footer = () => {
+  return (
+    <footer className={`${styles.paddingX} bg-primary text-white py-5`}>
+      <div className="max-w-7xl mx-auto flex flex-col sm:flex-row items-center justify-between">
+        <div className="mb-4 sm:mb-0">
+          <p className="text-[15px] font-bold cursor-pointer">
+            Abhishek&nbsp;
+            <span className="sm:block hidden text-[#915EFF]">Tiwari</span>
+          </p>
+        </div>
+        <ul className="flex">
+          {socialLinks.map((socialLink) => (
+            <li key={socialLink.id} className="">
+              <a
+                href={socialLink.url}
+                target="_blank"
+                rel="noopener noreferrer"
+                className=" hover:text-secondary"
+              >
+                <img src={socialLink.icon} alt="" className="w-[70%]  object-contain"/>
+              </a>
+            </li>
+          ))}
+        </ul>
+      </div>
+      {/* copyright, shoutout for opensource code and images */}
+      <div className="text-center mt-5">
+        <p className="text-[12px]">
+          &copy; {new Date().getFullYear()} Abhishek Tiwari. All Rights
+          Reserved. LinkedIn & Github icons are from <a href="https://icons8.com/icons" className="text-[#915EFF]">ICON8</a>, Portfolio code by <a href="https://github.com/ladunjexa/Threejs-3D-Portfolio" className="text-[#915EFF]">Threejs-3D-Portfoilo</a>
+        </p>
+            </div>
+    </footer>
+  );
+};
+
+export default Footer;
diff --git a/src/components/layout/Navbar.tsx b/src/components/layout/Navbar.tsx
@@ -3,8 +3,7 @@ import { Link } from "react-router-dom";
 
 import { styles } from "../../constants/styles";
 import { navLinks } from "../../constants";
-import { logo, menu, close } from "../../assets";
-import { config } from "../../constants/config";
+import { menu, close } from "../../assets";
 
 const Navbar = () => {
   const [active, setActive] = useState<string | null>();
@@ -64,9 +63,9 @@ const Navbar = () => {
             window.scrollTo(0, 0);
           }}
         >
-          <img src={logo} alt="logo" className="h-9 w-9 object-contain" />
-          <p className="flex cursor-pointer text-[18px] font-bold text-white ">
-            {config.html.title}
+         <p className="text-white text-[18px] font-bold cursor-pointer flex ">
+            Abhishek &nbsp;
+            <span className="sm:block hidden text-[#915EFF]"> Tiwari</span>
           </p>
         </Link>
 

diff --git a/src/components/sections/Education.tsx b/src/components/sections/Education.tsx
@@ -0,0 +1,76 @@
+import React from "react";
+import {
+  VerticalTimeline,
+  VerticalTimelineElement,
+} from "react-vertical-timeline-component";
+
+import "react-vertical-timeline-component/style.min.css";
+
+import { educations } from "../../constants"; // Assuming educations is an array of type Education
+import { SectionWrapper } from "../../hoc";
+import { config } from "../../constants/config";
+import { Header } from "../atoms/Header";
+import { TEducation } from "../../types";
+
+
+const EducationCard: React.FC<TEducation> = ( educations ) => {
+  return (
+    <VerticalTimelineElement
+      contentStyle={{
+        background: "#1d1836",
+        color: "#fff",
+      }}
+      contentArrowStyle={{ borderRight: "7px solid  #232631" }}
+      date={educations.date}
+      iconStyle={{ background: educations.iconBg }}
+      icon={
+        <div className="flex justify-center items-center w-full h-full">
+          <img
+            src={educations.icon}
+            alt={educations.institute_name}
+            className="w-[60%] h-[60%] object-contain"
+          />
+        </div>
+      }
+    >
+      <div>
+        <h3 className="text-white text-[24px] font-bold">{educations.title}</h3>
+        <p
+          className="text-secondary text-[16px] font-semibold"
+          style={{ margin: 0 }}
+        >
+          {educations.institute_name}
+        </p>
+      </div>
+
+      <ul className="mt-5 list-disc ml-5 space-y-2">
+        {educations.points.map((point, index) => (
+          <li
+            key={`education-point-${index}`}
+            className="text-white-100 text-[14px] pl-1 tracking-wider"
+          >
+            {point}
+          </li>
+        ))}
+      </ul>
+    </VerticalTimelineElement>
+  );
+};
+
+const Education: React.FC = () => {
+  return (
+    <>
+      <Header useMotion={true} {...config.sections.education} />
+
+      <div className="mt-20 flex flex-col">
+        <VerticalTimeline>
+          {educations.map((education, index) => (
+            <EducationCard key={index} {...education} />
+          ))}
+        </VerticalTimeline>
+      </div>
+    </>
+  );
+};
+
+export default SectionWrapper(Education, "education");
diff --git a/src/components/sections/Experience.tsx b/src/components/sections/Experience.tsx
@@ -52,6 +52,13 @@ const ExperienceCard: React.FC<TExperience> = (experience) => {
           </li>
         ))}
       </ul>
+      <div className="mt-4 flex flex-wrap gap-2">
+          {experience.tags.map((tag) => (
+            <p key={tag.name} className={`text-[14px] ${tag.color}`}>
+              #{tag.name}
+            </p>
+          ))}
+        </div>
     </VerticalTimelineElement>
   );
 };

diff --git a/src/constants/config.ts b/src/constants/config.ts
@@ -33,20 +33,21 @@ type TConfig = {
   sections: {
     about: Required<TSection>;
     experience: TSection;
+    education: TSection;
     feedbacks: TSection;
     works: Required<TSection>;
   };
 };
 
 export const config: TConfig = {
   html: {
-    title: "John Doe — 3D Portfolio",
-    fullName: "John Doe",
-    email: "johndoe@mail.com",
+    title: "Abhishek Tiwari",
+    fullName: "Abhishek Tiwari",
+    email: "tiwari.abhishektiwari23@gmail.com",
   },
   hero: {
-    name: "John Doe",
-    p: ["I develop 3D visuals, user", "interfaces and web applications"],
+    name: "Abhishek Tiwari",
+    p: ["Turning Idea into Reality", "is my passion"],
   },
   contact: {
     p: "Get in touch",
@@ -67,11 +68,7 @@ export const config: TConfig = {
     about: {
       p: "Introduction",
       h2: "Overview.",
-      content: `I'm a skilled software developer with experience in TypeScript and
-      JavaScript, and expertise in frameworks like React, Node.js, and
-      Three.js. I'm a quick learner and collaborate closely with clients to
-      create efficient, scalable, and user-friendly solutions that solve
-      real-world problems. Let's work together to bring your ideas to life!`,
+      content: `I'm a software developer based in India, with a passion to learn and use new technologies to build awesome products. I have experience working with React, Node.js, MongoDB, Firebase, and a few other. I'm looking for opportunities to work in a team.`,
     },
     experience: {
       p: "What I have done so far",
@@ -90,5 +87,9 @@ export const config: TConfig = {
     ability to solve complex problems, work with different technologies,
     and manage projects effectively.`,
     },
+    education: {
+      p: "I am a student by Heart.",
+      h2: "Education.",
   },
+}
 };