Skip to content

Commit 37df2bb

Browse files
orellanamrorellanamr
committed
Update index.html metadata, enhance HeroSection with scroll button and animation, modify Navbar button styles, and refine i18n descriptions
1 parent 17524ba commit 37df2bb

File tree

6 files changed

+90
-29
lines changed

6 files changed

+90
-29
lines changed

‎index.html‎

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,21 @@
1-
<!doctype html>
1+
<!DOCTYPE html>
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8" />
5-
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
65
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7-
<title>Vite + React</title>
6+
<meta name="description" content="Portfolio of Rolando Orellana - React Developer" />
7+
<meta name="author" content="Rolando Orellana" />
8+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
9+
<meta property="og:title" content="Rolando Orellana - React Developer" />
10+
<meta property="og:description" content="Explore my portfolio showcasing React projects and development expertise." />
11+
<meta property="og:image" content="/preview.png" />
12+
<meta property="og:url" content="https://yourportfolio.com/" />
13+
<meta property="og:type" content="website" />
14+
<meta name="twitter:card" content="summary_large_image" />
15+
<meta name="twitter:title" content="Rolando Orellana - React Developer" />
16+
<meta name="twitter:description" content="Explore my portfolio showcasing React projects and development expertise." />
17+
<meta name="twitter:image" content="/preview.png" />
18+
<title>Rolando Orellana | React Developer</title>
819
</head>
920
<body>
1021
<div id="root"></div>

‎public/faviconRolando.png‎

3.52 KB
Loading

‎src/components/HeroSection.jsx‎

Lines changed: 63 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { Typography, Box, Button } from "@mui/material";
2+
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
23
import { useTranslation } from "react-i18next";
34

45
const HeroSection = () => {
@@ -10,43 +11,83 @@ const HeroSection = () => {
1011
sx={{
1112
display: "flex",
1213
flexDirection: "column",
13-
alignItems: "center",
14+
textAlign: "left",
1415
justifyContent: "center",
1516
height: "100vh",
16-
textAlign: "center",
17-
bgcolor: "background.default",
1817
color: "text.primary",
19-
px: 2,
18+
px: {
19+
xs: 2,
20+
md: 32,
21+
},
2022
}}
2123
>
22-
<Typography variant="h6" sx={{ letterSpacing: 2, mb: 2 }}>
24+
<Typography
25+
variant="h6"
26+
sx={{ letterSpacing: 2, mb: 2, textAlign: "left" }}
27+
>
2328
{t("hero.name").toUpperCase()}
2429
</Typography>
2530

26-
<Typography variant="h1" sx={{ fontWeight: "bold", mb: 1 }}>
31+
<Typography variant="h1" color="black" sx={{ fontWeight: "bold", mb: 1 }}>
2732
{t("hero.title.developer")}{" "}
28-
<Typography
29-
component="span"
30-
variant="h1"
31-
color="primary"
32-
sx={{ fontWeight: "bold" }}
33-
>
34-
{`+ ${t("hero.title.designer")}`}
35-
</Typography>
33+
</Typography>
34+
<Typography
35+
component="span"
36+
variant="h1"
37+
color="#00DA94"
38+
sx={{ fontWeight: "bold" }}
39+
>
40+
+ {t("hero.title.designer")}
3641
</Typography>
3742

3843
<Typography variant="body1" sx={{ maxWidth: 600, mb: 4 }}>
3944
{t("hero.description")}
4045
</Typography>
41-
42-
<Button
43-
variant="outlined"
44-
color="primary"
45-
size="large"
46-
sx={{ borderRadius: "50px", textTransform: "none", px: 4 }}
46+
<Box
47+
sx={{
48+
display: "flex",
49+
justifyContent: "center",
50+
alignItems: "center",
51+
paddingTop: 16,
52+
}}
4753
>
48-
{t("hero.scrollDown")}
49-
</Button>
54+
<Button
55+
variant="outlined"
56+
color="primary"
57+
size="small"
58+
sx={{
59+
maxWidth: "200px",
60+
borderRadius: "50px",
61+
textTransform: "none",
62+
px: 4,
63+
}}
64+
>
65+
<Box>{t("hero.scrollDown")}</Box>
66+
<Box>
67+
<ExpandMoreIcon
68+
sx={{
69+
ml: 1,
70+
animation: "bounce 2s infinite",
71+
}}
72+
/>
73+
</Box>
74+
</Button>
75+
<style>
76+
{`
77+
@keyframes bounce {
78+
0%, 20%, 50%, 80%, 100% {
79+
transform: translateY(0);
80+
}
81+
40% {
82+
transform: translateY(-10px);
83+
}
84+
60% {
85+
transform: translateY(-5px);
86+
}
87+
}
88+
`}
89+
</style>
90+
</Box>
5091
</Box>
5192
);
5293
};

‎src/components/Navbar.jsx‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -73,11 +73,20 @@ const Navbar = () => {
7373
<Button
7474
variant="contained"
7575
color="primary"
76+
size="small"
7677
startIcon={<DescriptionOutlinedIcon />}
7778
href={RolandoCV}
7879
target="_blank"
7980
rel="noopener noreferrer"
80-
sx={{ display: { xs: "none", sm: "inline-flex" } }}
81+
sx={{
82+
display: { xs: "none", sm: "inline-flex" },
83+
backgroundColor: "#EFEFEF",
84+
color: "#000000",
85+
"&:hover": {
86+
backgroundColor: "primary.main",
87+
color: "#FFFFFF",
88+
},
89+
}}
8190
>
8291
{t("download_cv")}
8392
</Button>

‎src/i18n/i18n.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ const resources = {
1919
designer: "Designer",
2020
},
2121
description:
22-
"React Developer with 6+ years in digital design. Proficient in React, Redux, HTML, CSS, and JavaScript. Skilled in design systems, collaboration, and user-centric solutions.",
22+
"React Developer with 6+ years of experience in design and digital marketing.",
2323
scrollDown: "Scroll Down",
2424
},
2525
Projects: "Projects",
@@ -49,7 +49,7 @@ const resources = {
4949
designer: "Diseñador",
5050
},
5151
description:
52-
"Desarrollador React con más de 6 años de experiencia en diseño digital. Experto en React, Redux, HTML, CSS y JavaScript. Hábil en sistemas de diseño, colaboración y soluciones centradas en el usuario.",
52+
"Desarrollador React con más de 6 años de experiencia en diseño y marketing digital.",
5353
scrollDown: "Deslizar hacia abajo",
5454
},
5555
Projects: "Proyectos",

‎src/theme.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ const theme = createTheme({
2222
typography: {
2323
fontFamily: "Poppins, Arial, sans-serif",
2424
h1: {
25-
fontSize: "50pt",
25+
fontSize: "66pt",
2626
fontWeight: "Black",
2727
color: "#0F4C5C",
2828
},

0 commit comments

Comments
 (0)