Skip to content

Commit faf861a

Browse files
alruiz-proalruiz-pro
committed
Changes
1 parent 144cf5f commit faf861a

18 files changed

+604
-188
lines changed

‎src/Route/MainLayout.jsx‎

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

‎src/Route/MainLayout.module.css‎

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

‎src/Route/Router.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import React from "react";
22
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
3-
import MainLayout from "./MainLayout.jsx";
43
import Home from "../pages/Home.jsx";
54
import NotFound from "../pages/NotFound.jsx";
5+
import MainLayout from "../layouts/MainLayout.jsx";
66

77
function AppRouter() {
88
return (

‎src/components/About.jsx‎

Lines changed: 1 addition & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -45,50 +45,6 @@ export default function About() {
4545

4646
return (
4747
<section id="about" className={styles.aboutSection}>
48-
{/* Decorative shapes */}
49-
<svg className={styles.shapeTopLeft} width="60" height="60">
50-
<rect
51-
x="10"
52-
y="10"
53-
width="40"
54-
height="40"
55-
fill="var(--color-accent)"
56-
rx="4"
57-
/>
58-
</svg>
59-
<svg className={styles.shapeTopRight} width="60" height="60">
60-
<rect
61-
x="10"
62-
y="10"
63-
width="40"
64-
height="40"
65-
fill="none"
66-
stroke="var(--color-accent)"
67-
strokeWidth="3"
68-
rx="4"
69-
/>
70-
</svg>
71-
<svg className={styles.shapeBottomLeft} width="60" height="60">
72-
<rect
73-
x="10"
74-
y="10"
75-
width="40"
76-
height="40"
77-
fill="var(--color-accent)"
78-
rx="4"
79-
/>
80-
</svg>
81-
<svg className={styles.shapeBottomRight} width="60" height="60">
82-
<rect
83-
x="10"
84-
y="10"
85-
width="40"
86-
height="40"
87-
fill="var(--color-accent)"
88-
rx="4"
89-
/>
90-
</svg>
91-
9248
<div className={styles.container}>
9349
<h3 className="sectionTitle">{t("about.title")}</h3>
9450
<div className={styles.aboutContent}>
@@ -100,7 +56,7 @@ export default function About() {
10056
className={styles.profileImage}
10157
/>
10258
<div className={styles.downloadCv}>
103-
<a href="/cv.pdf" className={styles.downloadBtn}>
59+
<a href="/cv.pdf" className={styles.downloadBtn} target="_blank" rel="noopener noreferrer">
10460
<i className="fa fa-download"></i>
10561
<span>{t("about.downloadCV")}</span>
10662
</a>

‎src/components/About.module.css‎

Lines changed: 84 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,7 @@
4242
display: flex;
4343
flex-direction: column;
4444
align-items: center;
45+
margin-bottom: 60px;
4546
}
4647

4748
.profileImage {
@@ -50,34 +51,35 @@
5051
object-fit: cover;
5152
border-radius: 12px;
5253
filter: grayscale(1) brightness(0.95);
53-
margin-bottom: 40px;
5454
}
5555

5656
.downloadCv {
5757
position: absolute;
58-
bottom: -20px;
58+
bottom: -30px;
5959
left: 50%;
6060
transform: translateX(-50%);
61+
z-index: 10;
6162
}
6263

6364
.downloadBtn {
6465
display: flex;
6566
align-items: center;
6667
justify-content: center;
67-
width: 200px;
68-
height: 200px;
68+
width: 140px;
69+
height: 140px;
6970
border-radius: 50%;
7071
background: var(--color-white);
7172
border: 3px solid var(--color-accent);
7273
color: var(--color-dark);
7374
text-decoration: none;
7475
font-family: 'Montserrat', Arial, sans-serif;
7576
font-weight: 700;
76-
font-size: 0.9rem;
77+
font-size: 0.8rem;
7778
transition: all 0.3s ease;
7879
flex-direction: column;
79-
gap: 8px;
80+
gap: 6px;
8081
letter-spacing: 1px;
82+
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
8183
}
8284

8385
.downloadBtn:hover {
@@ -87,7 +89,7 @@
8789
}
8890

8991
.downloadBtn i {
90-
font-size: 1.5rem;
92+
font-size: 1.2rem;
9193
}
9294

9395
.right {
@@ -190,37 +192,9 @@
190192
font-weight: 700;
191193
}
192194

193-
/* Decorative shapes */
194-
.shapeTopLeft {
195-
position: absolute;
196-
top: 40px;
197-
left: 40px;
198-
z-index: 1;
199-
}
200-
201-
.shapeTopRight {
202-
position: absolute;
203-
top: 40px;
204-
right: 40px;
205-
z-index: 1;
206-
}
207-
208-
.shapeBottomLeft {
209-
position: absolute;
210-
bottom: 40px;
211-
left: 40px;
212-
z-index: 1;
213-
}
214-
215-
.shapeBottomRight {
216-
position: absolute;
217-
bottom: 40px;
218-
right: 40px;
219-
z-index: 1;
220-
}
221195

222196
/* Responsive */
223-
@media (max-width: 1024px) {
197+
@media (max-width: var(--breakpoint-large-tablet)) {
224198
.container {
225199
padding: 0 24px;
226200
}
@@ -235,8 +209,12 @@
235209
flex: none;
236210
}
237211

212+
.profileWrapper {
213+
margin-bottom: 80px;
214+
}
215+
238216
.mainTitle {
239-
font-size: 1.5rem;
217+
font-size: 1.8rem;
240218
text-align: center;
241219
}
242220

@@ -245,24 +223,36 @@
245223
}
246224
}
247225

248-
@media (max-width: 768px) {
226+
@media (max-width: var(--breakpoint-tablet)) {
249227
.container {
250228
padding: 0 16px;
251229
}
252230

253231
.profileImage {
254-
width: 280px;
232+
width: 260px;
255233
height: 320px;
256234
}
257235

236+
.profileWrapper {
237+
margin-bottom: 100px;
238+
}
239+
240+
.downloadCv {
241+
bottom: -25px;
242+
}
243+
258244
.downloadBtn {
259-
width: 160px;
260-
height: 160px;
261-
font-size: 0.8rem;
245+
width: 120px;
246+
height: 120px;
247+
font-size: 0.7rem;
248+
}
249+
250+
.downloadBtn i {
251+
font-size: 1rem;
262252
}
263253

264254
.mainTitle {
265-
font-size: 1.5rem;
255+
font-size: 1.6rem;
266256
}
267257

268258
.infoGrid {
@@ -272,10 +262,39 @@
272262

273263
.aboutContent {
274264
padding: 0 16px;
265+
gap: 40px;
275266
}
276267
}
277268

278-
@media (max-width: 480px) {
269+
@media (max-width: var(--breakpoint-mobile)) {
270+
.profileImage {
271+
width: 220px;
272+
height: 280px;
273+
}
274+
275+
.profileWrapper {
276+
margin-bottom: 90px;
277+
}
278+
279+
.downloadCv {
280+
bottom: -20px;
281+
}
282+
283+
.downloadBtn {
284+
width: 100px;
285+
height: 100px;
286+
font-size: 0.6rem;
287+
gap: 4px;
288+
}
289+
290+
.downloadBtn i {
291+
font-size: 0.9rem;
292+
}
293+
294+
.mainTitle {
295+
font-size: 1.4rem;
296+
}
297+
279298
.infoItem {
280299
grid-template-columns: 1fr;
281300
gap: 5px;
@@ -292,3 +311,24 @@
292311
font-weight: 700;
293312
}
294313
}
314+
315+
@media (max-width: var(--breakpoint-small-mobile)) {
316+
.profileImage {
317+
width: 180px;
318+
height: 240px;
319+
}
320+
321+
.profileWrapper {
322+
margin-bottom: 80px;
323+
}
324+
325+
.downloadBtn {
326+
width: 80px;
327+
height: 80px;
328+
font-size: 0.5rem;
329+
}
330+
331+
.downloadBtn i {
332+
font-size: 0.8rem;
333+
}
334+
}

‎src/components/Aptitudes.module.css‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -167,7 +167,7 @@
167167
}
168168

169169
/* Responsive */
170-
@media (max-width: 1024px) {
170+
@media (max-width: var(--breakpoint-large-tablet)) {
171171
.aptitudesGrid {
172172
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
173173
gap: 30px;
@@ -205,7 +205,7 @@
205205
}
206206
}
207207

208-
@media (max-width: 768px) {
208+
@media (max-width: var(--breakpoint-tablet)) {
209209
.aptitudesGrid {
210210
grid-template-columns: 1fr;
211211
gap: 24px;
@@ -262,7 +262,7 @@
262262
}
263263
}
264264

265-
@media (max-width: 480px) {
265+
@media (max-width: var(--breakpoint-mobile)) {
266266
.aptitudesSection {
267267
padding: 60px 0;
268268
}
@@ -322,7 +322,7 @@
322322
}
323323
}
324324

325-
@media (max-width: 360px) {
325+
@media (max-width: var(--breakpoint-small-mobile)) {
326326
.carouselTrack {
327327
gap: 12px;
328328
animation-duration: 20s;

‎src/components/ContactBar.jsx‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
import React from "react";
2+
import styles from "./ContactBar.module.css";
3+
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
4+
import personalInfo from "../data/personal-info.json";
5+
6+
function ContactBar() {
7+
const [isHidden, setIsHidden] = React.useState(false);
8+
9+
React.useEffect(() => {
10+
const handleScroll = () => {
11+
const scrollPosition = window.scrollY;
12+
setIsHidden(scrollPosition > 50);
13+
};
14+
15+
window.addEventListener('scroll', handleScroll);
16+
return () => window.removeEventListener('scroll', handleScroll);
17+
}, []);
18+
19+
return (
20+
<div className={`${styles.contactBar} ${isHidden ? styles.hidden : ''}`}>
21+
<div className={styles.contactBarContainer}>
22+
{personalInfo.phone && (
23+
<a
24+
href={`tel:${personalInfo.phone}`}
25+
className={styles.phoneLink}
26+
>
27+
<FontAwesomeIcon icon={['fas', 'phone']} />
28+
<span>{personalInfo.phone}</span>
29+
</a>
30+
)}
31+
{personalInfo.email && (
32+
<a
33+
href={`mailto:${personalInfo.email}`}
34+
className={styles.emailLink}
35+
>
36+
<FontAwesomeIcon icon={['fas', 'envelope']} />
37+
<span>{personalInfo.email}</span>
38+
</a>
39+
)}
40+
</div>
41+
</div>
42+
);
43+
}
44+
45+
export default ContactBar;

0 commit comments

Comments
 (0)