Skip to content

Commit 1ed0695

Browse files
sakshi01codersakshi01coder
authored
Add files via upload
1 parent e92608d commit 1ed0695

31 files changed

+2713
-0
lines changed

‎public/HeroImage.jpeg

49.5 KB
Loading

‎public/index.html

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<link rel="icon" href="%PUBLIC_URL%/HeroImage.jpeg" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1" />
7+
<meta name="theme-color" content="#000000" />
8+
<meta
9+
name="description"
10+
content="Web site created using create-react-app"
11+
/>
12+
<link rel="apple-touch-icon" href="%PUBLIC_URL%/HeroImage.jpeg" />
13+
14+
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
15+
16+
<title>Kumari Sakshi</title>
17+
</head>
18+
<body>
19+
<noscript>You need to enable JavaScript to run this app.</noscript>
20+
<div id="root"></div>
21+
22+
</body>
23+
</html>

‎src/App.css

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');
2+
3+
*{
4+
box-sizing: border-box;
5+
margin: 0;
6+
padding: 0;
7+
font-family: 'Poppins', sans-serif;
8+
9+
}
10+
11+
html{
12+
scroll-behavior: smooth;
13+
}
14+
15+
body{
16+
margin: 0px !important;
17+
padding: 0;
18+
font-family: 'Montserrat', sans-serif;
19+
}
20+
21+
/* width */
22+
::-webkit-scrollbar {
23+
width: 4px;
24+
height: 80px;
25+
}
26+
27+
/* Track */
28+
::-webkit-scrollbar-track {
29+
background:#222A35;
30+
}
31+
32+
/* Handle */
33+
::-webkit-scrollbar-thumb {
34+
background: #575C66;
35+
border-radius: 6px;
36+
}
37+
38+
/* Handle on hover */
39+
::-webkit-scrollbar-thumb:hover {
40+
background: #626970;
41+
}

‎src/App.js

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
import { ThemeProvider } from "styled-components";
2+
import { useState, useEffect } from "react";
3+
import { darkTheme, lightTheme } from './utils/Themes.js'
4+
import Navbar from "./components/Navbar";
5+
import './App.css';
6+
import { BrowserRouter as Router } from 'react-router-dom';
7+
import HeroSection from "./components/HeroSection";
8+
import About from "./components/About";
9+
import Skills from "./components/Skills";
10+
import Projects from "./components/Projects";
11+
import Contact from "./components/Contact";
12+
import Footer from "./components/Footer";
13+
import Experience from "./components/Experience";
14+
import Education from "./components/Education";
15+
import ProjectDetails from "./components/ProjectDetails";
16+
import styled from "styled-components";
17+
18+
const Body = styled.div`
19+
background-color: ${({ theme }) => theme.bg};
20+
width: 100%;
21+
overflow-x: hidden;
22+
`
23+
24+
const Wrapper = styled.div`
25+
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%);
26+
width: 100%;
27+
clip-path: polygon(0 0, 100% 0, 100% 100%,30% 98%, 0 100%);
28+
`
29+
function App() {
30+
const [darkMode, setDarkMode] = useState(true);
31+
const [openModal, setOpenModal] = useState({ state: false, project: null });
32+
console.log(openModal)
33+
return (
34+
<ThemeProvider theme={darkMode ? darkTheme : lightTheme}>
35+
<Router >
36+
<Navbar />
37+
<Body>
38+
<HeroSection />
39+
<Wrapper>
40+
<Skills />
41+
<Experience />
42+
</Wrapper>
43+
<Projects openModal={openModal} setOpenModal={setOpenModal} />
44+
<Wrapper>
45+
<Education />
46+
<Contact />
47+
</Wrapper>
48+
<Footer />
49+
{openModal.state &&
50+
<ProjectDetails openModal={openModal} setOpenModal={setOpenModal} />
51+
}
52+
</Body>
53+
</Router>
54+
</ThemeProvider>
55+
);
56+
}
57+
58+
export default App;

‎src/components/About/AboutStyle.js

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import styled from 'styled-components';
2+
import _default from '../../themes/default';
3+
4+
5+
export const SocialMediaIcons = styled.div`
6+
display: flex;
7+
margin-top: 1rem;
8+
`;
9+
10+
export const SocialMediaIcon = styled.a`
11+
display: inline-block;
12+
margin: 0 1rem;
13+
font-size: 1.5rem;
14+
color: ${({ theme }) => theme.text_primary};
15+
transition: color 0.2s ease-in-out;
16+
&:hover {
17+
color: ${({ theme }) => theme.primary};
18+
}
19+
`;

‎src/components/About/index.js

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import React from 'react'
2+
3+
const About = () => {
4+
return (
5+
<div>About</div>
6+
)
7+
}
8+
9+
export default About;

‎src/components/Cards/EducationCard.jsx

Lines changed: 150 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,150 @@
1+
import React from 'react'
2+
import styled from 'styled-components'
3+
4+
const Document = styled.img`
5+
display: none;
6+
height: 70px;
7+
width: fit-content;
8+
background-color: #000;
9+
border-radius: 10px;
10+
&:hover{
11+
cursor: pointer;
12+
opacity: 0.8;
13+
}
14+
`
15+
16+
const Description = styled.div`
17+
width: 100%;
18+
font-size: 15px;
19+
font-weight: 400;
20+
color: ${({ theme }) => theme.text_primary + 99};
21+
margin-bottom: 10px;
22+
@media only screen and (max-width: 768px){
23+
font-size: 12px;
24+
}
25+
`
26+
27+
const Span = styled.span`
28+
overflow: hidden;
29+
display: -webkit-box;
30+
max-width: 100%;
31+
-webkit-line-clamp: 4;
32+
-webkit-box-orient: vertical;
33+
text-overflow: ellipsis;
34+
`
35+
36+
const Card = styled.div`
37+
width: 650px;
38+
border-radius: 10px;
39+
box-shadow: rgba(23, 92, 230, 0.15) 0px 4px 24px;
40+
padding: 12px 16px;
41+
justify-content: space-between;
42+
position: relative;
43+
overflow: hidden;
44+
display: flex;
45+
flex-direction: column;
46+
gap: 12px;
47+
transition: all 0.3s ease-in-out;
48+
&:hover{
49+
box-shadow: 0px 0px 20px rgba(0,0,0,0.2);
50+
transform: translateY(-5px);
51+
}
52+
@media only screen and (max-width: 768px){
53+
padding: 10px;
54+
gap: 8px;
55+
width: 300px;
56+
}
57+
58+
&:hover ${Document}{
59+
display: flex;
60+
}
61+
62+
&:hover ${Span}{
63+
overflow: visible;
64+
-webkit-line-clamp: unset;
65+
66+
}
67+
border: 0.1px solid #854CE6;
68+
`
69+
70+
const Top = styled.div`
71+
width: 100%;
72+
display: flex;
73+
gap: 12px
74+
`
75+
76+
const Image = styled.img`
77+
height: 50px;
78+
background-color: #000;
79+
border-radius: 10px;
80+
margin-top: 4px;
81+
@media only screen and (max-width: 768px){
82+
height: 40px;
83+
}
84+
`
85+
86+
const Body = styled.div`
87+
width: 100%;
88+
display: flex;
89+
flex-direction: column;
90+
`
91+
92+
93+
const Name = styled.div`
94+
font-size: 18px;
95+
font-weight: 600;
96+
color: ${({ theme }) => theme.text_primary + 99};
97+
@media only screen and (max-width: 768px){
98+
font-size: 14px;
99+
}
100+
`
101+
102+
const Degree = styled.div`
103+
font-size: 14px;
104+
font-weight: 500;
105+
color: ${({ theme }) => theme.text_secondary + 99};
106+
@media only screen and (max-width: 768px){
107+
font-size: 12px;
108+
}
109+
`
110+
111+
const Date = styled.div`
112+
font-size: 12px;
113+
font-weight: 400;
114+
color: ${({ theme }) => theme.text_secondary + 80};
115+
@media only screen and (max-width: 768px){
116+
font-size: 10px;
117+
}
118+
`
119+
120+
const Grade = styled.div`
121+
font-size: 14px;
122+
font-weight: 500;
123+
color: ${({ theme }) => theme.text_secondary + 99};
124+
@media only screen and (max-width: 768px){
125+
font-size: 12px;
126+
}
127+
`
128+
129+
130+
131+
const EducationCard = ({ education }) => {
132+
return (
133+
<Card>
134+
<Top>
135+
<Image src={education.img} />
136+
<Body>
137+
<Name>{education.school}</Name>
138+
<Degree>{education.degree}</Degree>
139+
<Date>{education.date}</Date>
140+
</Body>
141+
</Top>
142+
<Grade><b>Grade: </b>{education.grade}</Grade>
143+
<Description>
144+
<Span>{education.desc}</Span>
145+
</Description>
146+
</Card>
147+
)
148+
}
149+
150+
export default EducationCard

0 commit comments

Comments
 (0)