test full

arwinder-jaspal · Dec 2, 2024 · c086a8d · c086a8d
1 parent ccab7e5
commit c086a8d
Show file tree

Hide file tree

Showing 26 changed files with 3,136 additions and 0 deletions.
diff --git a/App.css b/App.css
@@ -0,0 +1,41 @@
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');
+
+*{
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    font-family: 'Poppins', sans-serif;
+
+}
+
+html{
+  scroll-behavior: smooth;
+}
+
+body{
+  margin: 0px !important;
+  padding: 0;
+  font-family: 'Montserrat', sans-serif;
+}
+
+/* width */
+::-webkit-scrollbar {
+    width: 4px;
+    height: 80px;
+  }
+
+  /* Track */
+  ::-webkit-scrollbar-track {
+    background:#222A35;
+  }
+
+  /* Handle */
+  ::-webkit-scrollbar-thumb {
+    background: #575C66;
+    border-radius: 6px;
+  }
+
+  /* Handle on hover */
+  ::-webkit-scrollbar-thumb:hover {
+    background: #626970;
+  }
diff --git a/App.js b/App.js
@@ -0,0 +1,58 @@
+import { ThemeProvider } from "styled-components";
+import { useState, useEffect } from "react";
+import { darkTheme, lightTheme } from './utils/Themes.js'
+import Navbar from "./components/Navbar";
+import './App.css';
+import { BrowserRouter as Router } from 'react-router-dom';
+import HeroSection from "./components/HeroSection";
+import About from "./components/About";
+import Skills from "./components/Skills";
+import Projects from "./components/Projects";
+import Contact from "./components/Contact";
+import Footer from "./components/Footer";
+import Experience from "./components/Experience";
+import Education from "./components/Education";
+import ProjectDetails from "./components/ProjectDetails";
+import styled from "styled-components";
+
+const Body = styled.div`
+  background-color: ${({ theme }) => theme.bg};
+  width: 100%;
+  overflow-x: hidden;
+`
+
+const Wrapper = styled.div`
+  background: linear-gradient(38.73deg, rgba(204, 0, 187, 0.15) 0%, rgba(201, 32, 184, 0) 50%), linear-gradient(141.27deg, rgba(0, 70, 209, 0) 50%, rgba(0, 70, 209, 0.15) 100%);
+  width: 100%;
+  clip-path: polygon(0 0, 100% 0, 100% 100%,30% 98%, 0 100%);
+`
+function App() {
+  const [darkMode, setDarkMode] = useState(true);
+  const [openModal, setOpenModal] = useState({ state: false, project: null });
+  console.log(openModal)
+  return (
+    <ThemeProvider theme={darkMode ? darkTheme : lightTheme}>
+      <Router >
+        <Navbar />
+        <Body>
+          <HeroSection />
+          <Wrapper>
+            <Skills />
+            <Experience />
+          </Wrapper>
+          <Projects openModal={openModal} setOpenModal={setOpenModal} />
+          <Wrapper>
+            <Education />
+            <Contact />
+          </Wrapper>
+          <Footer />
+          {openModal.state &&
+            <ProjectDetails openModal={openModal} setOpenModal={setOpenModal} />
+          }
+        </Body>
+      </Router>
+    </ThemeProvider>
+  );
+}
+
+export default App;
diff --git a/components/About/AboutStyle.js b/components/About/AboutStyle.js
@@ -0,0 +1,19 @@
+import styled from 'styled-components';
+import _default from '../../themes/default';
+
+
+export const SocialMediaIcons = styled.div`
+  display: flex;
+  margin-top: 1rem;
+`;
+
+export const SocialMediaIcon = styled.a`
+  display: inline-block;
+  margin: 0 1rem;
+  font-size: 1.5rem;
+  color: ${({ theme }) => theme.text_primary};
+  transition: color 0.2s ease-in-out;
+  &:hover {
+    color: ${({ theme }) => theme.primary};
+  }
+`;
diff --git a/components/About/index.js b/components/About/index.js
@@ -0,0 +1,9 @@
+import React from 'react'
+
+const About = () => {
+  return (
+    <div>About</div>
+  )
+}
+
+export default About;
diff --git a/components/Cards/EducationCard.jsx b/components/Cards/EducationCard.jsx
@@ -0,0 +1,150 @@
+import React from 'react'
+import styled from 'styled-components'
+
+const Document = styled.img`
+    display: none;
+    height: 70px;
+    width: fit-content;
+    background-color: #000;
+    border-radius: 10px;
+    &:hover{
+        cursor: pointer;
+        opacity: 0.8;
+    }
+`
+
+const Description = styled.div`
+    width: 100%;
+    font-size: 15px;
+    font-weight: 400;
+    color: ${({ theme }) => theme.text_primary + 99};
+    margin-bottom: 10px;
+    @media only screen and (max-width: 768px){
+        font-size: 12px;
+    }
+`
+
+const Span = styled.span`
+overflow: hidden;
+display: -webkit-box;
+max-width: 100%;
+-webkit-line-clamp: 4;
+-webkit-box-orient: vertical;
+text-overflow: ellipsis;
+`
+
+const Card = styled.div`
+    width: 650px;
+    border-radius: 10px;
+    box-shadow: rgba(23, 92, 230, 0.15) 0px 4px 24px;
+    padding: 12px 16px;
+    justify-content: space-between;
+    position: relative;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    transition: all 0.3s ease-in-out;
+    &:hover{
+        box-shadow: 0px 0px 20px rgba(0,0,0,0.2);
+        transform: translateY(-5px);
+    }
+    @media only screen and (max-width: 768px){
+        padding: 10px;
+        gap: 8px;
+        width: 300px;
+    }
+
+    &:hover ${Document}{
+        display: flex;
+    }
+
+    &:hover ${Span}{
+        overflow: visible;
+        -webkit-line-clamp: unset;
+
+    }
+    border: 0.1px solid #854CE6;
+`
+
+const Top = styled.div`
+    width: 100%;
+    display: flex;
+    gap: 12px
+`
+
+const Image = styled.img`
+    height: 50px;
+    background-color: #000;
+    border-radius: 10px;
+    margin-top: 4px;
+    @media only screen and (max-width: 768px){
+        height: 40px;
+    }
+`
+
+const Body = styled.div`
+    width: 100%;
+    display: flex;
+    flex-direction: column; 
+`
+
+
+const Name = styled.div`
+    font-size: 18px;
+    font-weight: 600;
+    color: ${({ theme }) => theme.text_primary + 99};
+    @media only screen and (max-width: 768px){
+        font-size: 14px;
+    }
+`
+
+const Degree = styled.div`
+    font-size: 14px;
+    font-weight: 500;
+    color: ${({ theme }) => theme.text_secondary + 99};
+    @media only screen and (max-width: 768px){
+        font-size: 12px;
+    }
+`
+
+const Date = styled.div`
+    font-size: 12px;
+    font-weight: 400;
+    color: ${({ theme }) => theme.text_secondary + 80};
+    @media only screen and (max-width: 768px){
+        font-size: 10px;
+    }
+`
+
+const Grade = styled.div`
+    font-size: 14px;
+    font-weight: 500;
+    color: ${({ theme }) => theme.text_secondary + 99};
+    @media only screen and (max-width: 768px){
+        font-size: 12px;
+    }
+`
+
+
+
+const EducationCard = ({ education }) => {
+    return (
+        <Card>
+            <Top>
+                <Image src={education.img} />
+                <Body>
+                    <Name>{education.school}</Name>
+                    <Degree>{education.degree}</Degree>
+                    <Date>{education.date}</Date>
+                </Body>
+            </Top>
+            <Grade><b>Grade: </b>{education.grade}</Grade>
+            <Description>
+                <Span>{education.desc}</Span>
+            </Description>
+        </Card>
+    )
+}
+
+export default EducationCard