Skip to content

Commit 4bc7d8e

Browse files
dmladekdmladek
committed
Refactored CSS
1 parent e0f6daa commit 4bc7d8e

File tree

3 files changed

+122
-107
lines changed

3 files changed

+122
-107
lines changed

‎src/Sections/Projects/Projects.tsx

Lines changed: 19 additions & 103 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import React from 'react'
12
import {
23
faCss,
34
faJs,
@@ -32,88 +33,32 @@ const Projects = () => {
3233
<div key={index} className="project-item">
3334
<div className="project-item-top-row">
3435
<div className="project-item-header">
35-
<div
36-
style={{
37-
display: 'flex',
38-
flexDirection: 'row',
39-
gap: '40px',
40-
marginBottom: '20px',
41-
}}
42-
>
36+
<div className="project-item-header-content">
4337
{/* LEFT COLUMN (60% width) */}
44-
<div
45-
style={{
46-
flex: '0 0 60%',
47-
display: 'flex',
48-
flexDirection: 'column',
49-
gap: '20px',
50-
}}
51-
>
52-
<h1
53-
style={{
54-
fontSize: '50px',
55-
fontWeight: 'bold',
56-
margin: 0,
57-
}}
58-
>
59-
{project.title}
60-
</h1>
61-
38+
<div className="project-item-left-column">
39+
<h1>{project.title}</h1>
6240
{/* Description */}
6341
<div>
64-
<p
65-
style={{
66-
fontSize: '17px',
67-
lineHeight: '1.5',
68-
margin: '0 0 10px 0',
69-
}}
70-
>
42+
<p className="project-item-left-column-content">
7143
{project.description}
7244
</p>
7345
</div>
7446

7547
{/* Development */}
7648
<div>
77-
<h3
78-
style={{
79-
fontSize: '25px',
80-
fontWeight: 'bold',
81-
margin: '0 0 10px 0',
82-
}}
83-
>
84-
Development
85-
</h3>
86-
<p
87-
style={{
88-
fontSize: '17px',
89-
lineHeight: '1.5',
90-
margin: 0,
91-
}}
92-
>
49+
<h3 className="project-item-tech-stack">Development</h3>
50+
<p className="project-item-left-column-content">
9351
This project is built using both front-end and back-end
9452
technologies.
95-
{/* Here’s a brief overview of the approach: */}
9653
</p>
9754
</div>
9855
</div>
99-
100-
{/* RIGHT COLUMN (40% width) - MAIN IMAGE */}
101-
<div style={{ flex: '0 0 35%' }}>
56+
{/* RIGHT COLUMN (35% width) - MAIN IMAGE */}
57+
<div className="project-item-right-column">
10258
{project.mainImage && (
103-
<div
104-
style={{
105-
marginBottom: '10px',
106-
display: 'flex',
107-
flexDirection: 'column',
108-
gap: '5px',
109-
}}
110-
>
59+
<div className="project-item-main-image">
11160
<p></p>
112-
<img
113-
src={project.mainImage}
114-
alt={project.title}
115-
style={{ width: '100%', objectFit: 'contain' }}
116-
/>
61+
<img src={project.mainImage} alt={project.title} />
11762
</div>
11863
)}
11964
</div>
@@ -124,63 +69,34 @@ const Projects = () => {
12469
<div className="project-item-tech-stack">
12570
<h3>Tech Stack</h3>
12671
<div className="tech-stack-content">
127-
<div
128-
style={{
129-
display: 'flex',
130-
flexWrap: 'wrap',
131-
gap: '10px',
132-
}}
133-
>
134-
{project.techStack?.map((tech, i) => {
135-
const icon =
136-
iconsMap[tech.icon as keyof typeof iconsMap] || tech.icon
137-
return (
138-
<SkillTile
139-
key={i}
140-
icon={icon}
141-
text={tech.name}
142-
// inline styling if you want
143-
/>
144-
)
145-
})}
146-
</div>
72+
{project.techStack?.map((tech, i) => {
73+
const icon =
74+
iconsMap[tech.icon as keyof typeof iconsMap] || tech.icon
75+
return <SkillTile key={i} icon={icon} text={tech.name} />
76+
})}
14777
</div>
14878
</div>
14979

15080
<div className="project-item-links">
15181
<h3>Links</h3>
152-
<ul
153-
style={{
154-
margin: 0,
155-
paddingInlineStart: '20px',
156-
listStyle: 'disc',
157-
}}
158-
>
82+
<ul>
15983
{project.links?.deployment && (
160-
<li style={{ marginBottom: '10px', fontSize: '17px' }}>
84+
<li>
16185
<a
16286
target="_blank"
16387
href={project.links.deployment}
16488
rel="noreferrer"
165-
style={{
166-
color: 'rgb(241, 114, 110)',
167-
textDecoration: 'underline',
168-
}}
16989
>
17090
Deployment
17191
</a>
17292
</li>
17393
)}
17494
{project.links?.github && (
175-
<li style={{ marginBottom: '10px', fontSize: '17px' }}>
95+
<li>
17696
<a
17797
target="_blank"
17898
href={project.links.github}
17999
rel="noreferrer"
180-
style={{
181-
color: 'rgb(241, 114, 110)',
182-
textDecoration: 'underline',
183-
}}
184100
>
185101
GitHub
186102
</a>

‎src/styles/App.css

Lines changed: 50 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -216,15 +216,13 @@ a.link {
216216
flex-direction: column;
217217
gap: 60px;
218218
box-sizing: border-box;
219-
/* background-color: rgb(50, 84, 146); */
220219
background-color: #077a97;
221220
}
222221

223222
.project-item {
224223
display: flex;
225224
flex-direction: column;
226225
}
227-
228226
.project-item-top-row {
229227
display: flex;
230228
flex-direction: row;
@@ -238,11 +236,28 @@ a.link {
238236
gap: 40px;
239237
margin-bottom: 20px;
240238
}
239+
.project-item-header-content {
240+
display: flex;
241+
flex-direction: row;
242+
gap: 40px;
243+
margin-bottom: 20px;
244+
}
245+
246+
.project-item-left-column {
247+
flex: 0 0 60%;
248+
display: flex;
249+
flex-direction: column;
250+
gap: 20px;
251+
}
252+
.project-item-left-column-content {
253+
fontsize: '17px';
254+
lineheight: '1.5';
255+
margin: '0 0 10px 0';
256+
}
241257

242258
.project-item-tech-stack {
243259
margin-bottom: 20px;
244260
}
245-
246261
.project-item-tech-stack h3 {
247262
font-size: 25px;
248263
font-weight: bold;
@@ -265,6 +280,38 @@ a.link {
265280
margin: 0 0 10px 0;
266281
}
267282

283+
.project-item-links ul {
284+
margin: 0;
285+
padding-inline-start: 20px;
286+
list-style: disc;
287+
}
288+
289+
.project-item-links li {
290+
margin-bottom: 10px;
291+
font-size: 17px;
292+
}
293+
294+
.project-item-links a {
295+
color: rgb(241, 114, 110);
296+
text-decoration: underline;
297+
}
298+
299+
.project-item-right-column {
300+
flex: 0 0 35%;
301+
}
302+
303+
.project-item-main-image {
304+
margin-bottom: 10px;
305+
display: flex;
306+
flex-direction: column;
307+
gap: 5px;
308+
}
309+
310+
.project-item-main-image img {
311+
width: 100%;
312+
object-fit: contain;
313+
}
314+
268315
.project-divider {
269316
margin-top: 40px;
270317
margin-bottom: 40px;

‎src/styles/output.css

Lines changed: 53 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -833,7 +833,6 @@ a.link {
833833
flex-direction: column;
834834
gap: 60px;
835835
box-sizing: border-box;
836-
/* background-color: rgb(50, 84, 146); */
837836
background-color: #077a97;
838837
}
839838

@@ -856,6 +855,26 @@ a.link {
856855
margin-bottom: 20px;
857856
}
858857

858+
.project-item-header-content {
859+
display: flex;
860+
flex-direction: row;
861+
gap: 40px;
862+
margin-bottom: 20px;
863+
}
864+
865+
.project-item-left-column {
866+
flex: 0 0 60%;
867+
display: flex;
868+
flex-direction: column;
869+
gap: 20px;
870+
}
871+
872+
.project-item-left-column-content {
873+
fontsize: '17px';
874+
lineheight: '1.5';
875+
margin: '0 0 10px 0';
876+
}
877+
859878
.project-item-tech-stack {
860879
margin-bottom: 20px;
861880
}
@@ -882,6 +901,39 @@ a.link {
882901
margin: 0 0 10px 0;
883902
}
884903

904+
.project-item-links ul {
905+
margin: 0;
906+
padding-inline-start: 20px;
907+
list-style: disc;
908+
}
909+
910+
.project-item-links li {
911+
margin-bottom: 10px;
912+
font-size: 17px;
913+
}
914+
915+
.project-item-links a {
916+
color: rgb(241, 114, 110);
917+
text-decoration: underline;
918+
}
919+
920+
.project-item-right-column {
921+
flex: 0 0 35%;
922+
}
923+
924+
.project-item-main-image {
925+
margin-bottom: 10px;
926+
display: flex;
927+
flex-direction: column;
928+
gap: 5px;
929+
}
930+
931+
.project-item-main-image img {
932+
width: 100%;
933+
-o-object-fit: contain;
934+
object-fit: contain;
935+
}
936+
885937
.project-divider {
886938
margin-top: 40px;
887939
margin-bottom: 40px;

0 commit comments

Comments
 (0)