gndx#2 styles

Oriplus · Jul 9, 2022 · 396270f · 396270f
1 parent 1e5d2c6
commit 396270f
Show file tree

Hide file tree

Showing 8 changed files with 213 additions and 14 deletions.
diff --git a/public/index.html b/public/index.html
@@ -2,7 +2,10 @@
 <html lang="es">
   <head>
     <meta charset="utf-8" />
-    <title>React Base</title>
+    <title>Resume Oriana Morillo</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
   </head>
   <body>
     <div id="app"></div>

diff --git a/src/components/About/index.jsx b/src/components/About/index.jsx
@@ -8,11 +8,6 @@ const About = () => {
   return (
     <section className="about-content">
       <h2 className="About-title">About Me</h2>
-      <div className="about-description">
-        <p className="About-item">{data.profession}</p>
-        <p className="About-item">{data.address}</p>
-        <p className="About-item">{data.email}</p>
-      </div>
       <ul className="about-rrss">
         <li>
           <a href={data.social && data.social[0].url}>
@@ -30,6 +25,11 @@ const About = () => {
           </a>
         </li>
       </ul>
+      <div className="about-description">
+        <p className="About-item">{data.profession}</p>
+        <p className="About-item">{data.address}</p>
+        <p className="About-item">{data.email}</p>
+      </div>
     </section>
   );
 };

diff --git a/src/components/Header/index.jsx b/src/components/Header/index.jsx
@@ -6,7 +6,7 @@ import '../../styles/components/Header.styl';
 const Header = ({ children }) => {
   const data = useContext(AppContext);
   return (
-    <section className="header bg-news">
+    <section className="header header--background">
       <Picture avatar={data.avatar} />
       <h1 className="Header-title">{data.name}</h1>
       {children}

diff --git a/src/containers/App.jsx b/src/containers/App.jsx
@@ -24,12 +24,14 @@ const App = () => {
           <Header >
             <About />
           </Header >
-          <Profile />
-          <Experience />
-          <Academic />
-          <Skills />
-          <Interest />
-          <Languages />
+          <div className='container'>
+            <Profile />
+            <Experience />
+            <Academic />
+            <Skills />
+            <Interest />
+            <Languages />
+          </div>
         </AppContext.Provider>
       )}
     </>

diff --git a/src/styles/components/About.styl b/src/styles/components/About.styl
@@ -0,0 +1,25 @@
+.about-content
+  display: flex
+  flex-direction: column
+  align-items: center
+  grid-area: 2/2/3/2
+  justify-content: end
+  gap: 10px
+
+.about-description
+  display: flex
+  flex-direction: column
+  align-items: center
+
+.about-rrss
+  display: flex
+  gap: 20px
+
+@media screen and (min-device-width: 768px)
+  .About-item:first-child
+    margin-left: 50px
+
+  .about-description
+    display: flex
+    flex-direction: row
+    gap: 20px
diff --git a/src/styles/components/App.styl b/src/styles/components/App.styl
@@ -1,2 +1,109 @@
 body
-  background-color blue
+  background-color #FEFEFE
+
+*
+	padding: 0
+	margin: 0
+	box-sizing: border-box
+
+html
+	font-size: 62.5%
+	font-family: 'Roboto', sans-serif
+
+.container > section
+  padding: 12px
+  border-radius: 10px
+
+h1
+  align-self: end
+  font-size: 5.5rem
+
+h2
+  font-size: 4.5rem
+  font-weight: 500
+
+ul
+  list-style: none
+  font-size: 3.3rem
+
+p, .Interest-item
+  font-size: 3.3rem
+
+.container
+    height: 100%
+    gap: 10px
+    display: grid
+    grid-template-columns: 1fr
+    grid-template-rows: repeat(6, auto)
+    grid-template-areas:"profile"\
+                        "experience"\
+                        "academic"\
+                        "skills"\
+                        "interest"\
+                        "languages"
+    justify-content: center
+
+.profile
+  background-color: #EDECDC
+  grid-area: profile
+
+.experience
+  background-color: #EDECDC
+  grid-area: experience
+
+.academic
+  background-color: #EDECDC
+  grid-area: academic
+
+.skills
+  background-color: #EDECDC
+  grid-area: skills
+
+.interest
+  background-color: #EDECDC
+  grid-area: interest
+
+.languages
+  background-color: #EDECDC
+  grid-area: languages
+
+.Academic-item li:first-child, .Experience-item li:first-child, .Languages-item li:first-child
+  font-size: 3.9rem
+  font-weight: 400
+
+.Academic-title, .Experience-title, .Skills-title, .Interest-title, .Languages-title
+  margin-bottom: 5px
+
+.Academic-item, .Experience-item, .Skills-item, .Interest-item, .Languages-item
+  margin-top: 15px
+
+.Academic-item li:nth-child(2), .Experience-item li:nth-child(2)
+  margin-bottom: 5px
+  font-size: 2.8rem
+  color: #6A7699
+
+.Profile-desc
+  margin: 15px 0
+
+@media screen and (min-device-width: 768px)
+  h1
+    font-size: 4.2rem
+
+  h2
+    font-size: 2.6rem
+
+  p, ul, .Interest-item
+    font-size: 2rem
+
+  .container
+    margin: 0 10px
+    grid-template-columns: repeat(2, 1fr)
+    grid-template-rows: repeat(4, auto)
+    grid-template-areas:"profile profile"\
+                        "experience experience"\
+                        "academic skills"\
+                        "interest languages"
+  .Academic-item li:first-child, .Experience-item li:first-child, .Languages-item li:first-child
+    font-size: 2.2rem
+  .Academic-item li:nth-child(2), .Experience-item li:nth-child(2)
+    font-size: 1.6rem
diff --git a/src/styles/components/Header.styl b/src/styles/components/Header.styl
@@ -0,0 +1,35 @@
+.header
+    margin-bottom: 10px
+    padding: 32px
+    display: grid
+    grid-template-columns: 200px 1fr 100px
+    justify-items: center
+    align-items: center
+
+  .Header-title
+    margin-bottom: 46px
+
+.header > img
+    border-radius: 50%
+    width: 180px
+    height: 180px
+    grid-row-start: 1
+    grid-row-end: 3
+    border: 5px solid white
+
+.header--background
+  background: -webkit-linear-gradient(117deg, #2F4858 29%, #ABC66A 24%);
+  background: -o-linear-gradient(117deg, #2F4858 29%, #ABC66A 24%);
+  background: -moz-linear-gradient(117deg, #2F4858 29%, #ABC66A 24%);
+  background: linear-gradient(117deg, #2F4858 29%, #ABC66A 24%);
+
+@media screen and (min-device-width: 768px)
+  .header
+    grid-template-columns: 200px 1fr 200px
+
+  .Header-title
+    margin-bottom: 26px
+
+  .header > img
+    width: 200px
+    height: 200px
diff --git a/src/styles/components/Skills.styl b/src/styles/components/Skills.styl
@@ -0,0 +1,27 @@
+.skills-content
+  margin-top: 5px
+  display: flex
+  gap:15px
+  flex-wrap: wrap
+  justify-content: space-around
+
+.Skills-item
+  width: 200px
+  height: 200px
+  display: flex
+  justify-content: center
+  align-items: center
+  border-radius: 250px
+  font-size: 3.4rem
+  color: #fff
+  text-align: center
+  background: #799973
+
+@media screen and (min-device-width: 768px)
+  .Skills-item
+    width:100px
+    height:100px
+    font-size:1.4rem
+
+  .skills-content
+    gap:0