Skip to content

Commit 42e935d

Browse files
stariasstarias
committed
ADD: Projects and changes in the design in the css
1 parent 152029a commit 42e935d

5 files changed

Lines changed: 306 additions & 107 deletions

File tree

‎src/components/App.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import Work from './Work.jsx';
66
import About from './About.jsx';
77

88
export default function App() {
9-
const [activeSection, setActiveSection] = useState('home');
9+
const [activeSection, setActiveSection] = useState('work');
1010

1111
return (
1212
<>

‎src/components/utils/YouTube.jsx‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
export default function YouTube({ videoId, title = 'YouTube video' }) {
2+
const embedUrl = `https://www.youtube.com/embed/${videoId}`;
3+
4+
return (
5+
<div className="card-asset-container">
6+
<iframe
7+
width="100%"
8+
height="100%"
9+
src={embedUrl}
10+
title={title}
11+
frameBorder="0"
12+
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
13+
allowFullScreen
14+
style={{ aspectRatio: '16 / 9', maxWidth: '100%' }}
15+
/>
16+
</div>
17+
);
18+
}

‎src/components/work_content/Experience.jsx‎

Lines changed: 59 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { useState } from 'react';
22
import '../../styles/workcard.css';
33

44
import Gif from '../utils/Gif.jsx';
5+
import YouTube from '../utils/YouTube.jsx';
56
import hisplayer_gif from '../../assets/gif/hisplayer.gif';
67
import labotec_gif from '../../assets/gif/labotec.gif';
78

@@ -20,8 +21,8 @@ export default function Experience() {
2021
startDate: 'March 2025',
2122
endDate: 'Ongoing',
2223
description:
23-
'Upwork connects businesses with independent professionals and agencies around the globe.' +
24-
'It is a marketplace for freelancers in fields like writing, graphic design, web development, ' +
24+
'Upwork connects businesses with independent professionals and agencies around the globe. ' +
25+
'It is a marketplace for freelancers in fields like graphic design, web development, ' +
2526
'marketing and many other categories.\n' +
2627
'I specialize in Video Game Development and Software Engineer jobs. Nevertheless, I\'m open to' +
2728
'different kind of jobs through the platform as long as they fit my interests.',
@@ -37,7 +38,7 @@ export default function Experience() {
3738
'Blender, Photoshop, and Video Edition Tools',
3839
],
3940
keywords: [],
40-
mediaComponent: <Gif src={hisplayer_gif.src} />,
41+
mediaComponent: <YouTube videoId="du1d0O83EYo" />,
4142
links: [
4243
{ label: 'Reach out to me here!', url: 'https://www.upwork.com/en-gb/freelancers/~018f7e0e1df08439dd' },
4344
],
@@ -107,63 +108,68 @@ export default function Experience() {
107108

108109
// Card Structure
109110
return (
110-
111111
<div className="card-container">
112112
{jobs.map((job, index) => (
113113
<div key={index} className="card">
114-
<div className="card-text">
115-
<h3 className="card-title">{job.title}</h3>
116-
<h3 className="card-company">{job.company}</h3>
117-
<p className="card-dates">
118-
<i className="fa fa-calendar" style={{ fontSize: '1rem', marginRight: '0.5rem' }}></i>
119-
{job.startDate} – {job.endDate}
120-
</p>
121-
<p className={`card-description ${expandedIndex === index ? 'expanded' : 'collapsed'}`}>
122-
{job.description}
123-
</p>
124-
<div className="card-readmore-wrapper">
125-
<button
126-
className="card-readmore"
127-
onClick={() => toggleExpand(index)}
128-
>
129-
{expandedIndex === index ?
130-
<i className="fa fa-play" style={{ fontSize: '1rem', transform: 'rotate(-90deg)' }}></i>
131-
:
132-
<i className="fa fa-play" style={{ fontSize: '1rem', transform: 'rotate(90deg)' }}></i>
133-
}
134-
</button>
114+
<div className="card-grid">
115+
<div className="card-c1">
116+
<h3 className="card-title">{job.title}</h3>
117+
<h3 className="card-company">{job.company}</h3>
118+
<p className="card-dates">
119+
<i className="fa fa-calendar" style={{ fontSize: '1rem', marginRight: '0.5rem' }}></i>
120+
{job.startDate} – {job.endDate}
121+
</p>
135122
</div>
136-
{job.bullets && (
137-
<ul className="card-bullets">
138-
{job.bullets.map((point, i) => (
139-
<li key={i}>{point}</li>
140-
))}
141-
</ul>
142-
)}
143-
<div className="card-keywords">
144-
{job.keywords.map((kw, i) => (
145-
<span key={i} className="card-keyword">{kw}</span>
146-
))}
123+
124+
<div className="card-c2">
125+
{job.links && (
126+
<div className="card-links">
127+
{job.links.map((link, i) => (
128+
<a
129+
key={i}
130+
href={link.url}
131+
target="_blank"
132+
rel="noopener noreferrer"
133+
className="card-link"
134+
>
135+
{link.label}
136+
</a>
137+
))}
138+
</div>
139+
)}
147140
</div>
148-
</div>
149-
<div className="card-media">
150-
{job.links && (
151-
<div className="card-links">
152-
{job.links.map((link, i) => (
153-
<a
154-
key={i}
155-
href={link.url}
156-
target="_blank"
157-
rel="noopener noreferrer"
158-
className="card-link"
159-
>
160-
{link.label}
161-
</a>
141+
142+
<div className="card-c3">
143+
<p className={`card-description ${expandedIndex === index ? 'expanded' : 'collapsed'}`}>
144+
{job.description}
145+
</p>
146+
<div className="card-readmore-wrapper">
147+
<button className="card-readmore" onClick={() => toggleExpand(index)}>
148+
{expandedIndex === index ? (
149+
<i className="fa fa-play" style={{ fontSize: '1rem', transform: 'rotate(-90deg)' }}></i>
150+
) : (
151+
<i className="fa fa-play" style={{ fontSize: '1rem', transform: 'rotate(90deg)' }}></i>
152+
)}
153+
</button>
154+
</div>
155+
{job.bullets && (
156+
<ul className="card-bullets">
157+
{job.bullets.map((point, i) => (
158+
<li key={i}>{point}</li>
159+
))}
160+
</ul>
161+
)}
162+
<div className="card-keywords">
163+
{job.keywords.map((kw, i) => (
164+
<span key={i} className="card-keyword">{kw}</span>
162165
))}
163166
</div>
164-
)}
165-
<div className="card-asset-container">
166-
{job.mediaComponent}
167+
</div>
168+
169+
<div className="card-c4">
170+
<div className="card-asset-container">
171+
{job.mediaComponent}
172+
</div>
167173
</div>
168174
</div>
169175
</div>

0 commit comments

Comments
 (0)