setting skils, ading posts page

Author: esbgo97

src/App.js

@@ -8,6 +8,7 @@ import Experiences from "./pages/Experiences";
 import Education from "./pages/Education";
 import Portfolio from "./pages/Portfolio";
 import Home from "./pages/Home";
+import Blog from "./pages/Blog";
 import { Navigation } from "./components/Navigation";
 
 const styles = {
@@ -29,6 +30,7 @@ function App() {
             <Route exact path="/experiences" element={<Experiences />} />
             <Route exact path="/education" element={<Education />} />
             <Route exact path="/portfolio" element={<Portfolio />} />
+            <Route exact path="/blog" element={<Blog />} />
           </Routes>
         </Router>
       </Container>

src/components/Navigation.js

@@ -42,6 +42,12 @@ export const Navigation = () => {
         >
           <Tab label="Portfolio" onClick={() => setSelected(3)} />
         </Link>
+        {/* <Link
+          style={{ textDecoration: "none", color: "white" }}
+          to="/blog"
+        >
+          <Tab label="Blog" onClick={() => setSelected(3)} />
+        </Link> */}
       </Tabs>
     </Box>
   );

src/components/PersonalInformation.js

@@ -43,26 +43,26 @@ const PersonalItem = (props) => {
 export const PersonalInformation = () => {
   return (
     <Grid container>
-      <PersonalItem label="Age" value="26" icon={<Celebration />} />
-      <PersonalItem label="Experience" value="+6 Years" icon={<Work />} />
+      <PersonalItem label="Experience" value="+6 Years" icon={<Work color="primary"/>} />
+      <PersonalItem label="Age" value="26" icon={<Celebration color="primary"/>} />
       <PersonalItem
         label="Location"
-        icon={<LocationOn />}
+        icon={<LocationOn color="primary"/>}
         element={
           <>
             Chiquinquirá - Boyacá (<ReactCountryFlag countryCode="CO" svg />)
           </>
         }
       />
-      <PersonalItem label="Email" value="[email protected]" icon={<Email />} />
+      <PersonalItem label="Email" value="[email protected]" icon={<Email color="primary"/>} />
       <PersonalItem
         label="Phone"
         value={[<b>(+57)</b>, " 320 967 2421"]}
-        icon={<Phone />}
+        icon={<Phone color="primary"/>}
       />
       <PersonalItem
         label="Languages"
-        icon={<Language />}
+        icon={<Language color="primary"/>}
         element={
           <>
             <ReactCountryFlag countryCode="US" svg /> &nbsp;

src/packages/material.js

@@ -3,6 +3,7 @@ import { createTheme } from "@mui/material";
 export const theme = createTheme({
   palette: {
     primary: { main: "#019CAD" },
+    secondary:{main:"#ad1201"}
   },
   components: {
   },

src/pages/Blog.js

@@ -0,0 +1,16 @@
+import { Card, CardContent, Typography } from "@mui/material";
+
+const Blog = () => {
+
+  return (
+    <Card>
+      <CardContent>
+        <Typography color="primary" variant="h4">Personal Blog</Typography>
+      </CardContent>
+
+      
+    </Card>
+  );
+};
+
+export default Blog;

src/pages/Home.js

@@ -71,26 +71,26 @@ const Home = () => {
       </Card>
       <br />
       <Container>
-        <Grid container spacing={2}>
+        <Grid container spacing={4}>
           <Grid item xs={12} sm={12} md={6}>
             <Typography variant="h4" color="primary.main">
               Skills
             </Typography>
             <ul>
               <li>
                 Software Development (.NET, JavaScript)
-                <Slider color="primary" value={95} />
-              </li>
+                <Slider color="primary" value={100} />
+              </li>              
               <li>
-                Data Analyst (SQL, Power BI)
-                <Slider color="primary" value={70} />
+                DevOps Expert
+                <Slider color="primary" value={95} />
               </li>
               <li>
-                DevOps Expert
+                Azure Expert
                 <Slider color="primary" value={90} />
               </li>
               <li>
-                Azure Expert
+                Data Analyst (SQL, Power BI)
                 <Slider color="primary" value={80} />
               </li>
             </ul>
@@ -101,13 +101,14 @@ const Home = () => {
               <Typography variant="h4" color="primary.main">
                 About Me
               </Typography>
-              <p style={{ textAlign: "justify" }}>
-                Developer with experience in .NET and JavaScript technologies,
+              <Typography variant="subtitle1" textAlign="justify">
+              Developer with experience in .NET and JavaScript technologies,
                 passionate about programming and software design. I am a dynamic
                 person, I like to learn and work as a team, persistent in
                 meeting goals and objectives that lead to the improvement of my
                 life project and those around me.
-              </p>
+              </Typography>
+                
             </Grid>
 
             <Grid item sm={12}>
@@ -118,8 +119,9 @@ const Home = () => {
               <Box
                 sx={{
                   display: "flex",
-                  flex: 1,
-                  justifyContent: "space-evenly",
+                  flexDirection:"row",
+                  alignItems:"center",
+                  justifyItems:"end"
                 }}
               >
                 <Chip label="Mountain Bike" icon={<PedalBike />} />