Skip to content

Commit f6242ce

Browse files
author
Edward Bustos
committed
education & portfolio pages
1 parent c7b810f commit f6242ce

File tree

12 files changed

+505
-183
lines changed

12 files changed

+505
-183
lines changed

‎package-lock.json‎

Lines changed: 18 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313
"@testing-library/user-event": "^13.5.0",
1414
"gh-pages": "^5.0.0",
1515
"react": "^18.2.0",
16+
"react-country-flag": "^3.1.0",
1617
"react-dom": "^18.2.0",
1718
"react-router-dom": "^6.11.2",
1819
"react-scripts": "5.0.1",

‎src/App.js‎

Lines changed: 6 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,29 @@
11
import "./App.css";
22

3-
import { HashRouter as Router, Routes, Route, Link } from "react-router-dom";
3+
import { HashRouter as Router, Routes, Route } from "react-router-dom";
44

5-
import { Box, Button, Container, Typography } from "@mui/material";
5+
import { Container } from "@mui/material";
66

77
import Experiences from "./pages/Experiences";
88
import Education from "./pages/Education";
99
import Portfolio from "./pages/Portfolio";
1010
import Home from "./pages/Home";
1111
import { Navigation } from "./components/Navigation";
1212

13-
import home_backgroud from "./assets/home_background.jpg";
1413
const styles = {
1514
container: {
16-
backgroundImage: `url(${home_backgroud})`,
17-
backgroundPosition: "center",
18-
backgroundSize: "cover",
19-
backgroundRepeat: "no-repeat",
20-
width: "100vw",
21-
height: "70vh",
15+
height: "30vh",
16+
backgroundImage: "linear-gradient(to right, #AEEBF2, #019CAD)",
2217
},
2318
};
2419

2520
function App() {
2621
return (
2722
<div style={styles.container}>
28-
<Container>
23+
<Container fluid>
2924
<Router>
30-
{/* <Typography variant="h3" color="primary.main">Edward Bustos's Curriculum</Typography> */}
31-
3225
<Navigation />
33-
26+
<br />
3427
<Routes>
3528
<Route exact path="/" element={<Home />} />
3629
<Route exact path="/experiences" element={<Experiences />} />

‎src/assets/cv_edwardbustos.pdf‎

102 KB
Binary file not shown.

‎src/components/Navigation.js‎

Lines changed: 30 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,44 @@
1-
import React from "react";
1+
import React, { useState } from "react";
22
import { Link } from "react-router-dom";
3-
import { Box, Button, ButtonGroup } from "@mui/material";
3+
import { Box, Tab, Tabs } from "@mui/material";
44

55
export const Navigation = () => {
6+
const [selected, setSelected] = useState(0);
7+
68
return (
79
<Box
810
sx={{ display: "flex" }}
911
alignContent={"center"}
1012
justifyContent="right"
1113
>
12-
<div style={{ backgroundColor: "rgba(0, 0, 0, .6)" }}>
13-
<ButtonGroup variant="contained" >
14-
<Button>
15-
<Link style={{ textDecoration: "none", color: "white" }} to="/">
16-
Home
17-
</Link>
18-
</Button>
19-
20-
<Button>
21-
<Link
22-
style={{ textDecoration: "none", color: "white" }}
23-
to="/experiences"
24-
>
25-
Work Experience
26-
</Link>
27-
</Button>
14+
<Tabs textColor="white" value={selected}>
15+
<Link to="/" style={{ textDecoration: "none", color: "white" }} >
16+
<Tab label="Home" onClick={() => setSelected(0)} />
17+
</Link>
2818

29-
<Button>
30-
<Link
31-
style={{ textDecoration: "none", color: "white" }}
32-
to="/education"
33-
>
34-
Education and Certificates
35-
</Link>
36-
</Button>
19+
<Link
20+
style={{ textDecoration: "none", color: "white" }}
21+
to="/experiences"
22+
>
23+
<Tab label="Work Experience" onClick={() => setSelected(1)} />
24+
</Link>
3725

38-
<Button>
39-
<Link
40-
style={{ textDecoration: "none", color: "white" }}
41-
to="/portfolio"
42-
>
43-
Portfolio
44-
</Link>
45-
</Button>
46-
</ButtonGroup>
47-
</div>
26+
<Link
27+
style={{ textDecoration: "none", color: "white" }}
28+
to="/education"
29+
>
30+
<Tab
31+
label="Education & Certificates"
32+
onClick={() => setSelected(2)}
33+
/>
34+
</Link>
35+
<Link
36+
style={{ textDecoration: "none", color: "white" }}
37+
to="/portfolio"
38+
>
39+
<Tab label="Portfolio" onClick={() => setSelected(3)} />
40+
</Link>
41+
</Tabs>
4842
</Box>
4943
);
5044
};

‎src/components/Networks.js‎

Lines changed: 30 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,43 @@
11
import React from "react";
2-
import { IconButton, CardActions } from "@mui/material";
3-
import { Code, GitHub, Google, LinkedIn, Twitter } from "@mui/icons-material";
2+
import { IconButton, CardActions, Tooltip } from "@mui/material";
3+
import { Code, Email, GitHub, LinkedIn, Twitter } from "@mui/icons-material";
44

55
export const Networks = () => {
66
return (
77
<CardActions
8-
sx={{ display: "flex", justifyContent: "center", borderSpacing: 1 }}
9-
style={{ backgroundColor: "#1F788C" }}
8+
sx={{ display: "flex", justifyContent: "space-evenly" }}
9+
style={{ backgroundColor: "#019CAD" }}
1010
>
11-
<IconButton size="large">
12-
<LinkedIn sx={{ "&:hover": { color: "#0A66C2" } }} fontSize="large" />
13-
</IconButton>
11+
<Tooltip title="LinkedIn">
12+
<IconButton size="large">
13+
<LinkedIn color="white" sx={{ "&:hover": { color: "#0A66C2" } }} fontSize="large" />
14+
</IconButton>
15+
</Tooltip>
1416

15-
<IconButton size="large">
16-
<GitHub sx={{ "&:hover": { color: "black" } }} fontSize="large" />
17-
</IconButton>
17+
<Tooltip title="GitHub">
18+
<IconButton size="large">
19+
<GitHub sx={{ "&:hover": { color: "black" } }} fontSize="large" />
20+
</IconButton>
21+
</Tooltip>
1822

19-
<IconButton size="large">
20-
<Code sx={{ "&:hover": { color: "#068932" } }} fontSize="large" />
21-
</IconButton>
23+
<Tooltip title="Hacker Rank">
24+
<IconButton size="large">
25+
<Code sx={{ "&:hover": { color: "#068932" } }} fontSize="large" />
26+
</IconButton>
27+
</Tooltip>
2228

23-
<IconButton size="large">
24-
<Google sx={{ "&:hover": { color: "#4587F4" } }} fontSize="large" />
25-
</IconButton>
29+
<Tooltip title="Twitter">
30+
<IconButton size="large">
31+
<Twitter sx={{ "&:hover": { color: "#1D9BF0" } }} fontSize="large" />
32+
</IconButton>
33+
</Tooltip>
34+
35+
<Tooltip title="Contact">
36+
<IconButton size="large">
37+
<Email sx={{ "&:hover": { color: "#D74030" } }} fontSize="large" />
38+
</IconButton>
39+
</Tooltip>
2640

27-
<IconButton size="large">
28-
<Twitter sx={{ "&:hover": { color: "#1D9BF0" } }} fontSize="large" />
29-
</IconButton>
3041
</CardActions>
3142
);
3243
};

‎src/components/PersonalInformation.js‎

Lines changed: 51 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,39 @@
11
import React from "react";
22
import { Grid, Typography } from "@mui/material";
3+
import ReactCountryFlag from "react-country-flag";
4+
import {
5+
Celebration,
6+
Email,
7+
Language,
8+
LocationOn,
9+
Phone,
10+
Work,
11+
} from "@mui/icons-material";
312

413
const PersonalItem = (props) => {
5-
const { label, value } = props;
14+
const { label, value, element, icon } = props;
615

716
return (
817
<>
9-
<Grid item xs={3}>
10-
<Typography variant="button" fontSize={18}>
11-
<b>{label}:</b>
12-
</Typography>
18+
<Grid item xs={4}>
19+
<div
20+
style={{
21+
display: "flex",
22+
alignItems: "center",
23+
flexWrap: "wrap",
24+
}}
25+
>
26+
{icon !== undefined && icon} &nbsp;
27+
<Typography variant="button" fontSize={18}>
28+
{label}
29+
<b>:</b>
30+
</Typography>
31+
</div>
1332
</Grid>
1433

15-
<Grid item xs={9}>
34+
<Grid item xs={8}>
1635
<Typography variant="subtitle1" fontSize={18}>
17-
{value}
36+
{value ?? element}
1837
</Typography>
1938
</Grid>
2039
</>
@@ -24,14 +43,33 @@ const PersonalItem = (props) => {
2443
export const PersonalInformation = () => {
2544
return (
2645
<Grid container>
27-
<PersonalItem label="Age" value="26" />
28-
<PersonalItem label="Experience" value="+6 Years" />
46+
<PersonalItem label="Age" value="26" icon={<Celebration />} />
47+
<PersonalItem label="Experience" value="+6 Years" icon={<Work />} />
48+
<PersonalItem
49+
label="Location"
50+
icon={<LocationOn />}
51+
element={
52+
<>
53+
Chiquinquirá - Boyacá (<ReactCountryFlag countryCode="CO" svg />)
54+
</>
55+
}
56+
/>
57+
<PersonalItem label="Email" value="[email protected]" icon={<Email />} />
58+
<PersonalItem
59+
label="Phone"
60+
value={[<b>(+57)</b>, " 320 967 2421"]}
61+
icon={<Phone />}
62+
/>
2963
<PersonalItem
30-
label="Address"
31-
value="Calle 11 # 16 - 41, Chiquinquirá - Boyacá (COL)"
64+
label="Languages"
65+
icon={<Language />}
66+
element={
67+
<>
68+
<ReactCountryFlag countryCode="US" svg /> &nbsp;
69+
<ReactCountryFlag countryCode="ES" svg />
70+
</>
71+
}
3272
/>
33-
<PersonalItem label="Email" value="[email protected]" />
34-
<PersonalItem label="Phone" value="(+57) 320 967 2421" />
3573
</Grid>
3674
);
3775
};

‎src/packages/material.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { createTheme } from "@mui/material";
22

33
export const theme = createTheme({
44
palette: {
5-
primary: { main: "#1F788C" },
5+
primary: { main: "#019CAD" },
66
},
77
components: {
88
},

0 commit comments

Comments
 (0)