Skip to content

Commit 128b093

Browse files
mitul-gargmitul-garg
committed
CSS Refactoring - Updated Projects
1 parent 3fbef93 commit 128b093

File tree

11 files changed

+213
-63
lines changed

11 files changed

+213
-63
lines changed

‎src/App.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
44
// import pages
55
import { Home } from "./pages/Home";
66
import { About } from "./pages/About";
7-
import { Projects } from "./pages/Projects";
7+
import { ProjectsPage } from "./pages/ProjectsPage";
88
import { Contact } from "./pages/Contact";
99
// import { OpenSource } from "./pages/OpenSource";
1010
import { DSAStats } from "./pages/DSAStats";
@@ -27,7 +27,7 @@ const App = () => {
2727
<Route path="/about" Component={About} />
2828
{/* <Route path="/opensource" Component={<OpenSource />} /> */}
2929
<Route path="/dsastats" Component={DSAStats} />
30-
<Route path="/projects" Component={Projects} />
30+
<Route path="/projects" Component={ProjectsPage} />
3131
<Route path="/contact" Component={Contact} />
3232
<Route path="/pullrequests" Component={AllPRs} />
3333
<Route path="/issues" Component={AllIssues} />

‎src/assets/images/locationblog.png

1.73 MB
Loading

‎src/assets/images/mgames.png

1.64 MB
Loading

‎src/components/Experience/styles.css

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@
3434
text-align: center;
3535
width: fit-content;
3636
text-transform: capitalize;
37-
font-size: 1.2rem;
37+
font-size: 1.3rem;
3838
font-weight: 550;
3939
letter-spacing: 2px;
4040
padding: 0.75rem 0.75rem;
@@ -61,7 +61,7 @@
6161
}
6262
.job-details h3 {
6363
color: #102a42;
64-
font-size: 1.6rem;
64+
font-size: 1.8rem;
6565
letter-spacing: 2px;
6666
font-family: "Roboto", sans-serif;
6767
}
@@ -128,4 +128,7 @@
128128
width: 100%;
129129
place-self: center;
130130
}
131+
.btn-container {
132+
width: 100vw;
133+
}
131134
}

‎src/components/HomeProjects/index.js renamed to ‎src/components/Projects/index.js

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,22 @@
11
import React from "react";
2-
import { projects } from "../../data/projects";
32
import { SiGithub } from "react-icons/si";
43
import { FiExternalLink } from "react-icons/fi";
54
import { Link } from "react-router-dom";
5+
import "./styles.css";
66

7-
export const HomeProjects = () => {
8-
const newProjects = projects.slice(0, 3);
7+
export const Projects = ({ projects }) => {
98
return (
10-
<section className="home-projects">
11-
<h3>Featured Projects</h3>
9+
<section className="projects">
10+
<h1>Featured Projects</h1>
1211
<div className="projects-grid">
13-
{newProjects.map((project) => {
12+
{projects.map((project, index) => {
1413
const { id, title, img, details, technologies, sourceCode, link } =
1514
project;
1615
return (
17-
<article key={id} className="project">
16+
<article
17+
key={id}
18+
className={index % 2 === 0 ? "project" : "project reverse-flex"}
19+
>
1820
<div className="img-holder">
1921
<img src={img} alt="" className="project-img" />
2022
</div>

‎src/components/Projects/styles.css

Lines changed: 120 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,120 @@
1+
.projects {
2+
display: flex;
3+
flex-direction: column;
4+
place-items: center;
5+
gap: 2.4rem;
6+
padding-top: 4rem;
7+
padding-bottom: 4rem;
8+
}
9+
10+
.projects h1 {
11+
color: #102a42;
12+
font-family: "Roboto", sans-serif;
13+
font-size: 2.4rem;
14+
letter-spacing: 2.4px;
15+
text-decoration: underline #2caeba 0.3rem;
16+
text-underline-offset: 0.7rem;
17+
margin-bottom: 20px;
18+
}
19+
20+
.projects-grid {
21+
display: flex;
22+
flex-direction: column;
23+
place-items: center;
24+
gap: 50px;
25+
}
26+
27+
.project {
28+
display: flex;
29+
flex-direction: row;
30+
width: 90%;
31+
}
32+
33+
.reverse-flex {
34+
flex-direction: row-reverse;
35+
}
36+
37+
.project-img {
38+
display: block;
39+
object-fit: cover;
40+
max-width: 800px;
41+
}
42+
43+
.project-info {
44+
background-color: white;
45+
padding: 1rem 2rem;
46+
display: flex;
47+
flex-direction: column;
48+
justify-content: center;
49+
}
50+
51+
.project-info h2 {
52+
color: #102a42;
53+
font-family: "Josefin Sans", sans-serif;
54+
font-size: 1.8rem;
55+
line-height: 3rem;
56+
text-align: center;
57+
}
58+
59+
.project-info p {
60+
color: #324d67;
61+
font-family: "Open Sans", sans-serif;
62+
margin-top: 1.5rem;
63+
margin-bottom: 0.5rem;
64+
font-size: 1.2rem;
65+
text-align: justify;
66+
}
67+
68+
.tech-used {
69+
margin-top: 0.75rem;
70+
display: flex;
71+
flex-direction: row;
72+
flex-wrap: wrap;
73+
justify-content: flex-start;
74+
gap: 1rem;
75+
width: 100%;
76+
}
77+
78+
.tech {
79+
background-color: #dae2ec;
80+
color: #617d98;
81+
padding: 0.25rem 0.5rem;
82+
font-family: "Open Sans", sans-serif;
83+
letter-spacing: 1px;
84+
border-radius: 0.3rem;
85+
text-align: center;
86+
width: fit-content;
87+
}
88+
89+
.code-links {
90+
display: flex;
91+
gap: 1rem;
92+
margin-top: 1rem;
93+
font-size: 1.5rem;
94+
}
95+
96+
.code-link {
97+
color: #2caeba;
98+
transition: all 0.3s ease;
99+
}
100+
101+
.code-link:hover {
102+
color: #222222;
103+
}
104+
105+
@media (max-width: 900px) {
106+
.project {
107+
flex-direction: column;
108+
width: 90%;
109+
}
110+
111+
.project-img {
112+
width: 100%;
113+
max-width: 400px;
114+
}
115+
116+
.project-info p {
117+
margin-top: 0.9rem;
118+
margin-bottom: 0.3rem;
119+
}
120+
}

‎src/data/projects.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ export const projects = [
2525
},
2626
{
2727
id: uuidv4(),
28-
title: "ToraLabs - Freelance Project ",
28+
title: "ToraLabs - Freelance",
2929
img: toralabs,
3030
details:
3131
"Revamped the UI of the landing page and created a product page (Device Info) from scratch, Created UI elements like Sliders(using Swiper), Animated Cards, Navbar using plain CSS, Used Email JS to send the contact form responses directly to the client’s email",

‎src/index.css

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,10 @@
22

33
/* font-family: "Roboto", sans-serif; */
44
/* font-family: "Open Sans", sans-serif; */
5+
/* font-family: "Josefin Sans", sans-serif; */
56

67
@import url("https://fonts.googleapis.com/css?family=Open+Sans|Roboto:400,700&display=swap");
8+
@import url("https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&display=swap");
79

810
* {
911
box-sizing: border-box;
@@ -74,3 +76,67 @@ body {
7476
font-size: 1.5rem;
7577
}
7678
/* Error Page */
79+
80+
/* Contact Page */
81+
.contact {
82+
display: grid;
83+
place-items: center;
84+
padding: 5rem 0;
85+
}
86+
.contact-form {
87+
background: white;
88+
border-radius: 0.3rem;
89+
text-align: center;
90+
width: 90vw;
91+
max-width: 35rem;
92+
padding: 1.25rem 0.75rem;
93+
}
94+
.contact-form h3 {
95+
color: #617d98;
96+
font-family: "Roboto", sans-serif;
97+
font-size: 2rem;
98+
margin-bottom: 1rem;
99+
letter-spacing: 2px;
100+
}
101+
.form-group {
102+
padding-top: 1rem 1.5rem;
103+
}
104+
.form-control {
105+
display: block;
106+
width: 100%;
107+
padding: 0.75rem 1rem;
108+
border: none;
109+
margin-bottom: 1.25rem;
110+
background-color: #f1f5f8;
111+
border-radius: 0.3rem;
112+
text-transform: uppercase;
113+
letter-spacing: 1.5px;
114+
}
115+
.form-control::placeholder {
116+
font-family: "Open Sans", sans-serif;
117+
color: hsl(209, 61%, 16%);
118+
text-transform: uppercase;
119+
letter-spacing: 1.5px;
120+
}
121+
.submit-btn {
122+
display: block;
123+
width: 100%;
124+
background-color: #2caeba;
125+
border: none;
126+
color: #bff8fd;
127+
cursor: pointer;
128+
padding: 0.75rem 0.75rem;
129+
font-size: 1rem;
130+
margin-top: 1rem;
131+
border-radius: 0.2rem;
132+
text-transform: uppercase;
133+
font-family: "Open Sans", sans-serif;
134+
letter-spacing: 1px;
135+
font-weight: 600;
136+
transition: all 0.3s ease-in-out;
137+
}
138+
.submit-btn:hover {
139+
color: hsl(184, 91%, 17%);
140+
background-color: hsl(184, 80%, 74%);
141+
}
142+
/* Contact Page */

‎src/pages/Home.js

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,16 @@
11
import React from "react";
22
import { Experience } from "../components/Experience";
33
import { Hero } from "../components/Hero";
4-
// import { HomeProjects } from "../components/HomeProjects";
54
import SkillSection from "../components/SkillSection";
5+
import { Projects } from "../components/Projects";
6+
import { projects } from "../data/projects";
67

78
export const Home = () => {
89
return (
910
<div className="home">
1011
<Hero />
1112
<Experience />
12-
{/* <HomeProjects /> */}
13+
<Projects projects={projects.slice(0, 4)} />
1314
<SkillSection />
1415
</div>
1516
);

‎src/pages/Projects.js

Lines changed: 0 additions & 49 deletions
This file was deleted.

‎src/pages/ProjectsPage.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import React from "react";
2+
import { projects } from "../data/projects";
3+
import { Projects } from "../components/Projects";
4+
5+
export const ProjectsPage = () => {
6+
return <Projects projects={projects} />;
7+
};

0 commit comments

Comments
 (0)