Skip to content

Commit e0f6daa

Browse files
dmladekdmladek
committed
Refactored CSS
1 parent 8503349 commit e0f6daa

File tree

3 files changed

+175
-119
lines changed

3 files changed

+175
-119
lines changed

‎src/Sections/Projects/Projects.tsx

Lines changed: 97 additions & 119 deletions
Original file line numberDiff line numberDiff line change
@@ -31,139 +31,124 @@ const Projects = () => {
3131
{projectData.map((project, index) => (
3232
<div key={index} className="project-item">
3333
<div className="project-item-top-row">
34-
<div
35-
style={{
36-
display: 'flex',
37-
flexDirection: 'row',
38-
gap: '40px',
39-
marginBottom: '20px',
40-
}}
41-
>
42-
{/* LEFT COLUMN (60% width) */}
34+
<div className="project-item-header">
4335
<div
4436
style={{
45-
flex: '0 0 60%',
4637
display: 'flex',
47-
flexDirection: 'column',
48-
gap: '20px',
38+
flexDirection: 'row',
39+
gap: '40px',
40+
marginBottom: '20px',
4941
}}
5042
>
51-
<h1
43+
{/* LEFT COLUMN (60% width) */}
44+
<div
5245
style={{
53-
fontSize: '50px',
54-
fontWeight: 'bold',
55-
margin: 0,
46+
flex: '0 0 60%',
47+
display: 'flex',
48+
flexDirection: 'column',
49+
gap: '20px',
5650
}}
5751
>
58-
{project.title}
59-
</h1>
60-
61-
{/* Description */}
62-
<div>
63-
<p
52+
<h1
6453
style={{
65-
fontSize: '17px',
66-
lineHeight: '1.5',
67-
margin: '0 0 10px 0',
68-
}}
69-
>
70-
{project.description}
71-
</p>
72-
</div>
73-
74-
{/* Development */}
75-
<div>
76-
<h3
77-
style={{
78-
fontSize: '25px',
54+
fontSize: '50px',
7955
fontWeight: 'bold',
80-
margin: '0 0 10px 0',
81-
}}
82-
>
83-
Development
84-
</h3>
85-
<p
86-
style={{
87-
fontSize: '17px',
88-
lineHeight: '1.5',
8956
margin: 0,
9057
}}
9158
>
92-
This project is built using both front-end and back-end
93-
technologies.
94-
{/* Here’s a brief overview of the approach: */}
95-
</p>
96-
</div>
97-
</div>
59+
{project.title}
60+
</h1>
9861

99-
{/* RIGHT COLUMN (40% width) - MAIN IMAGE */}
100-
<div style={{ flex: '0 0 35%' }}>
101-
{project.mainImage && (
102-
<div
103-
style={{
104-
marginBottom: '10px',
105-
display: 'flex',
106-
flexDirection: 'column',
107-
gap: '5px',
108-
}}
109-
>
110-
<p></p>
111-
<img
112-
src={project.mainImage}
113-
alt={project.title}
114-
style={{ width: '100%', objectFit: 'contain' }}
115-
/>
62+
{/* Description */}
63+
<div>
64+
<p
65+
style={{
66+
fontSize: '17px',
67+
lineHeight: '1.5',
68+
margin: '0 0 10px 0',
69+
}}
70+
>
71+
{project.description}
72+
</p>
11673
</div>
117-
)}
74+
75+
{/* Development */}
76+
<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+
>
93+
This project is built using both front-end and back-end
94+
technologies.
95+
{/* Here’s a brief overview of the approach: */}
96+
</p>
97+
</div>
98+
</div>
99+
100+
{/* RIGHT COLUMN (40% width) - MAIN IMAGE */}
101+
<div style={{ flex: '0 0 35%' }}>
102+
{project.mainImage && (
103+
<div
104+
style={{
105+
marginBottom: '10px',
106+
display: 'flex',
107+
flexDirection: 'column',
108+
gap: '5px',
109+
}}
110+
>
111+
<p></p>
112+
<img
113+
src={project.mainImage}
114+
alt={project.title}
115+
style={{ width: '100%', objectFit: 'contain' }}
116+
/>
117+
</div>
118+
)}
119+
</div>
118120
</div>
119121
</div>
120122
</div>
121123

122-
{/* -- TECH STACK -- */}
123-
<div style={{ marginBottom: '20px' }}>
124-
<h3
125-
style={{
126-
fontSize: '25px',
127-
fontWeight: 'bold',
128-
margin: '0 0 10px 0',
129-
}}
130-
>
131-
Tech Stack
132-
</h3>
133-
134-
<div
135-
style={{
136-
display: 'flex',
137-
flexWrap: 'wrap',
138-
gap: '10px',
139-
}}
140-
>
141-
{project.techStack?.map((tech, i) => {
142-
const icon =
143-
iconsMap[tech.icon as keyof typeof iconsMap] || tech.icon
144-
return (
145-
<SkillTile
146-
key={i}
147-
icon={icon}
148-
text={tech.name}
149-
// inline styling if you want
150-
/>
151-
)
152-
})}
124+
<div className="project-item-tech-stack">
125+
<h3>Tech Stack</h3>
126+
<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>
153147
</div>
154148
</div>
155149

156-
{/* -- LINKS -- */}
157-
<div style={{ marginBottom: '20px' }}>
158-
<h3
159-
style={{
160-
fontSize: '25px',
161-
fontWeight: 'bold',
162-
margin: '0 0 10px 0',
163-
}}
164-
>
165-
Links
166-
</h3>
150+
<div className="project-item-links">
151+
<h3>Links</h3>
167152
<ul
168153
style={{
169154
margin: 0,
@@ -204,15 +189,8 @@ const Projects = () => {
204189
</ul>
205190
</div>
206191

207-
{/* -- DIVIDER (except for last item) -- */}
208192
{index < projectData.length - 1 && (
209-
<hr
210-
style={{
211-
marginTop: '40px',
212-
marginBottom: '40px',
213-
borderColor: '#fff',
214-
}}
215-
/>
193+
<hr className="project-divider" />
216194
)}
217195
</div>
218196
))}

‎src/styles/App.css

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -231,3 +231,42 @@ a.link {
231231
gap: 40px;
232232
margin-bottom: 20px;
233233
}
234+
235+
.project-item-header {
236+
display: flex;
237+
flex-direction: row;
238+
gap: 40px;
239+
margin-bottom: 20px;
240+
}
241+
242+
.project-item-tech-stack {
243+
margin-bottom: 20px;
244+
}
245+
246+
.project-item-tech-stack h3 {
247+
font-size: 25px;
248+
font-weight: bold;
249+
margin: 0 0 10px 0;
250+
}
251+
252+
.tech-stack-content {
253+
display: flex;
254+
flex-wrap: wrap;
255+
gap: 10px;
256+
}
257+
258+
.project-item-links {
259+
margin-bottom: 20px;
260+
}
261+
262+
.project-item-links h3 {
263+
font-size: 25px;
264+
font-weight: bold;
265+
margin: 0 0 10px 0;
266+
}
267+
268+
.project-divider {
269+
margin-top: 40px;
270+
margin-bottom: 40px;
271+
border-color: #fff;
272+
}

‎src/styles/output.css

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -849,6 +849,45 @@ a.link {
849849
margin-bottom: 20px;
850850
}
851851

852+
.project-item-header {
853+
display: flex;
854+
flex-direction: row;
855+
gap: 40px;
856+
margin-bottom: 20px;
857+
}
858+
859+
.project-item-tech-stack {
860+
margin-bottom: 20px;
861+
}
862+
863+
.project-item-tech-stack h3 {
864+
font-size: 25px;
865+
font-weight: bold;
866+
margin: 0 0 10px 0;
867+
}
868+
869+
.tech-stack-content {
870+
display: flex;
871+
flex-wrap: wrap;
872+
gap: 10px;
873+
}
874+
875+
.project-item-links {
876+
margin-bottom: 20px;
877+
}
878+
879+
.project-item-links h3 {
880+
font-size: 25px;
881+
font-weight: bold;
882+
margin: 0 0 10px 0;
883+
}
884+
885+
.project-divider {
886+
margin-top: 40px;
887+
margin-bottom: 40px;
888+
border-color: #fff;
889+
}
890+
852891
@media only screen and (max-width: 1200px){
853892
.proj-con{
854893
flex-direction: column;

0 commit comments

Comments
 (0)