Skip to content

Commit 52be718

Browse files
ZihSilvaZihSilva
committed
about me
2 parents 40e9770 + 9e79e27 commit 52be718

File tree

10 files changed

+307
-133
lines changed

10 files changed

+307
-133
lines changed

‎package-lock.json

+7-7
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020
"react": "^18.2.0",
2121
"react-css-modules": "^4.7.11",
2222
"react-dom": "^18.2.0",
23-
"react-icons": "^4.4.0",
23+
"react-icons": "^4.7.1",
2424
"react-router-dom": "^6.3.0",
2525
"react-scripts": "^5.0.1",
2626
"styled-components": "^5.3.5",

‎src/components/Cards/CardItem.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ function CardItem(props) {
66

77
return (
88
<>
9-
<li className='cards-item'>
9+
<div className='cards-item'>
1010
<Link className='cards-item-link' to={props.path}>
1111
<figure className='cards-item-pic-wrap' data-category={props.label}>
1212
<img
@@ -19,7 +19,7 @@ function CardItem(props) {
1919
<h5 className='cards-item-text'>{props.text}</h5>
2020
</div>
2121
</Link>
22-
</li>
22+
</div>
2323
</>
2424
);
2525
}

‎src/components/Cards/Cards.css

+110-119
Original file line numberDiff line numberDiff line change
@@ -1,127 +1,118 @@
11
.cards {
2-
padding: 10px;
3-
background: #fff;
4-
}
5-
6-
.card-title {
7-
text-align: center;
8-
color: #5cbdb9;
9-
font-size:20px;
10-
font-weight: bold;
11-
padding:20px 20px 20px 20px;
12-
}
13-
14-
.cards-container {
15-
display: flex;
16-
flex-flow: column;
17-
align-items: center;
18-
margin: 0 auto;
19-
}
20-
21-
.cards-wrapper {
22-
position: relative;
2+
padding: 4rem;
3+
background: #fff;
4+
}
5+
6+
h1 {
7+
text-align: center;
8+
}
9+
10+
.cards-container {
11+
display: flex;
12+
flex-flow: column;
13+
align-items: center;
14+
max-width: 1120px;
15+
width: 90%;
16+
margin: 0 auto;
17+
}
18+
19+
.cards-wrapper {
20+
position: relative;
21+
margin: 50px 0 45px;
22+
}
23+
24+
.cards-items {
25+
margin-bottom: 24px;
26+
}
27+
28+
.cards-item {
29+
display: flex;
30+
flex: 1;
31+
margin: 0 1rem;
32+
border-radius: 10px;
33+
}
34+
35+
.cards-item-link {
36+
display: flex;
37+
flex-flow: column;
38+
width: 100%;
39+
box-shadow: 0 6px 20px rgba(56, 125, 255, 0.17);
40+
-webkit-filter: drop-shadow(0 6px 20px rgba(56, 125, 255, 0.017));
41+
filter: drop-shadow(0 6px 20px rgba(56, 125, 255, 0.017));
42+
border-radius: 10px;
43+
overflow: hidden;
44+
text-decoration: none;
45+
}
46+
47+
.cards-item-pic-wrap {
48+
position: relative;
49+
width: 100%;
50+
padding-top: 67%;
51+
overflow: hidden;
52+
}
53+
54+
.fade-img {
55+
animation-name: fade-img;
56+
animation-duration: 2s;
57+
}
58+
59+
.cards-item-pic-wrap::after {
60+
content: attr(data-category);
61+
position: absolute;
62+
bottom: 0;
63+
margin-left: 10px;
64+
padding: 6px 8px;
65+
max-width: calc((100%) - 60px);
66+
font-size: 16px;
67+
font-weight: 700;
68+
color: #fff;
69+
background-color: #2d712799;
70+
box-sizing: border-box;
71+
}
72+
73+
.cards-item-img {
74+
position: absolute;
75+
top: 0;
76+
right: 0;
77+
bottom: 0;
78+
left: 0;
79+
display: block;
80+
width: 100%;
81+
max-width: 100%;
82+
height: 100%;
83+
max-height: 100%;
84+
object-fit: cover;
85+
transition: all 0.2s linear;
86+
}
87+
88+
.cards-item-img:hover {
89+
transform: scale(1.1);
90+
}
2391

92+
.cards-item-info {
93+
padding: 20px 30px 30px;
94+
}
95+
96+
.cards-item-text {
97+
color: #252e48;
98+
font-size: 18px;
99+
line-height: 24px;
100+
}
101+
102+
@media only screen and (min-width: 1200px) {
103+
.content-blog-container {
104+
width: 84%;
24105
}
25-
106+
}
107+
108+
@media only screen and (min-width: 1024px) {
26109
.cards-items {
27-
margin-bottom: 24px;
28-
}
29-
30-
.cards-item {
31110
display: flex;
32-
flex: 1;
33-
margin: 0 1rem;
34-
border-radius: 10px;
35111
}
36-
112+
}
37113

38-
.cards-item-pic-wrap {
39-
position: relative;
40-
width: 100%;
41-
padding-top: 67%;
42-
overflow: hidden;
43-
}
44-
45-
.fade-img {
46-
animation-name: fade-img;
47-
animation-duration: 2s;
48-
}
49-
50-
.cards-item-pic-wrap::after {
51-
content: attr(data-category);
52-
position: absolute;
53-
bottom: 0;
54-
margin-left: 10px;
55-
margin-bottom: 8px;
56-
padding: 6px 8px;
57-
max-width: calc((100%) - 60px);
58-
font-size: 16px;
59-
font-weight: 700;
60-
color: #fff;
61-
background-color: #b484a8;
62-
box-sizing: border-box;
63-
border-radius: 10px;
64-
}
65-
66-
.cards-item-img {
67-
position: absolute;
68-
top: 0;
69-
right: 0;
70-
bottom: 0;
71-
left: 0;
72-
display: block;
73-
width: 100%;
74-
max-width: 100%;
75-
height: 100%;
76-
max-height: 100%;
77-
object-fit: cover;
78-
transition: all 0.2s linear;
79-
}
80-
81-
.cards-item-img:hover {
82-
transform: scale(1.1);
83-
}
84-
85-
.cards-item-info {
86-
padding: 10px 20px;
87-
}
88-
89-
.cards-item-text {
90-
color: #252e48;
91-
font-size: 18px;
92-
line-height: 24px;
93-
}
94-
.form-head {
95-
font-size: 20px;
96-
}
97-
98-
@media only screen and (min-width: 1280px) {
99-
.content-blog-container {
100-
width: 84%;
101-
}
102-
}
103-
104-
@media only screen and (min-width: 768px) {
105-
.cards-items {
106-
display: flex;
107-
}
108-
109-
.card-title {
110-
111-
font-size:2rem;
112-
padding: 20px 50px 0px 50px;
113-
114-
}
114+
@media only screen and (max-width: 1024px) {
115+
.cards-item {
116+
margin-bottom: 2rem;
115117
}
116-
117-
@media only screen and (min-width: 320px) {
118-
.cards-item {
119-
margin-bottom: 1rem;
120-
}
121-
122-
.cards-item-text {
123-
color: #252e48;
124-
font-size: 1rem;
125-
line-height: 24px;
126-
}
127-
}
118+
}

‎src/images/imageSite.png

512 KB
Loading

‎src/pages/AboutUs/About.js

+29
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,21 @@
1+
<<<<<<< HEAD
12
import React from 'react';
23
import { Link } from 'react-router-dom';
34
import "./AboutUs.module.css"
45

56
function CardItem(props) {
7+
=======
8+
import React from "react";
9+
import "./AboutUs.css";
10+
import { FaLinkedin } from "react-icons/fa";
11+
import { FaGithub } from "react-icons/fa";
12+
import { FaGoogle } from "react-icons/fa";
13+
>>>>>>> 9e79e278b096dff8bdcc34dab2bb580010d08adf
614

15+
function CardItem(props) {
716
return (
817
<>
18+
<<<<<<< HEAD
919
<div className='cards-item'>
1020
<Link className='cards-item-link' to={props.path}>
1121
<figure className='cards-item-pic-wrap' data-category={props.label}>
@@ -20,6 +30,25 @@ function CardItem(props) {
2030
</div>
2131
</Link>
2232
</div>
33+
=======
34+
<li className="cards-item-main">
35+
<div className="cards-item-link" to={props.path}>
36+
<figure className="cards-item-pic-wraps" data-category={props.label}>
37+
<img className="cards-img" alt="Travel" src={props.src} />
38+
<div className="social-media">
39+
<FaLinkedin size={32} color="blue" />
40+
<FaGithub size={32} color="black" />
41+
</div>
42+
</figure>
43+
<div className="card-item-description">
44+
<div className="cards-item-info">
45+
<h5 className="cards-item-text">{props.text}</h5>
46+
</div>
47+
</div>
48+
49+
</div>
50+
</li>
51+
>>>>>>> 9e79e278b096dff8bdcc34dab2bb580010d08adf
2352
</>
2453
);
2554
}

0 commit comments

Comments
 (0)