[gndx#2] Adding styles to components

jho3r · Jul 10, 2022 · 77a3183 · 77a3183
1 parent f537f1d
commit 77a3183
Show file tree

Hide file tree

Showing 17 changed files with 264 additions and 69 deletions.
diff --git a/public/index.html b/public/index.html
@@ -3,6 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <title>React Base</title>
+    <script src="https://kit.fontawesome.com/2966d20825.js" crossorigin="anonymous"></script>
   </head>
   <body>
     <div id="app"></div>

diff --git a/src/components/About.jsx b/src/components/About.jsx
@@ -1,22 +1,36 @@
 import React from 'react';
+import '../styles/components/About.styl'
 
 const About = (props) => {
 
     const {
-        items = new Array(3).fill('No data yet')
+        items = new Array(3).fill('No data yet'),
+        phone,
+        email,
+        website,
+        adress,
     } = props;
 
     return (
-        <>
-            <h3 className='About-title'>Let's get social:</h3>
-            <div className='About-items'>
-                {items.map((item, index) => (
-                    <a key={`about-item-${index}`} className='About-item' href={item.url}>
-                        <p>{item.name}</p>
-                    </a>
-                ))}
+        <div className='About'>
+            <div className='About-contact'>
+                <h3 className='Header-subtitle'>Contact:</h3>
+                <p>phone: <a href={`tel:${phone}`} className='Header-phone'>{phone}</a></p>
+                <p>email: <a href={`mailto:${email}`} className='Header-email'>{email}</a></p>
+                <p>website: <a href={website} target="_blank" className='Header-website'>{website}</a></p>
+                <p className='Header-adress'>{adress}</p>
             </div>
-        </>
+            <div className='About-social'>
+                <h3 className='About-title'>Let's get social:</h3>
+                <div className='About-items'>
+                    {items.map((item, index) => (
+                        <a key={`about-item-${index}`} className='About-item' href={item.url} target="_blank">
+                            <i className={`fa-brands fa-${item.name}`}></i>
+                        </a>
+                    ))}
+                </div>
+            </div>
+        </div>
     );
 };
 

diff --git a/src/components/Academic.jsx b/src/components/Academic.jsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import '../styles/components/Items.styl'
 
 const Academic = (props) => {
 
@@ -7,16 +8,18 @@ const Academic = (props) => {
     } = props;
 
     return (
-        <section>
+        <section className='Academic'>
             <h2 className='Academic-title'>Education</h2>
-            {items.map((item, index) => (
-                <div key={`academic-item-${index}`} className='Academic-item'>
-                    <h4 className='academic-institution'>{item.institution}</h4>
-                    <p className='academic-degree'>{item.degree}</p>
-                    <p className='academic-dates'>{`${item.startDate} - ${item.endDate}`}</p>
-                    <p className='academic-descr'>{item.description}</p>
-                </div>
-            ))}
+            <div className='Academic-items'>
+                {items.map((item, index) => (
+                    <div key={`academic-item-${index}`} className='Academic-item'>
+                        <h4 className='academic-institution'>{item.institution}</h4>
+                        <p className='academic-degree'>{item.degree}</p>
+                        <p className='academic-dates'>{`${item.startDate} - ${item.endDate}`}</p>
+                        <p className='academic-descr'>{item.description}</p>
+                    </div>
+                ))}
+            </div>
         </section>
     );
 };

diff --git a/src/components/Certificates.jsx b/src/components/Certificates.jsx
@@ -1,21 +1,24 @@
 import React from 'react';
+import '../styles/components/Items.styl'
 
 const Certificates = (props) => {
     const {
         items = new Array(3).fill('No academic title yet')
     } = props;
 
     return (
-        <section>
+        <section className='Certificates'>
             <h2 className='Certificate-title'>Certificates</h2>
-            {items.map((item, index) => (
-                <div key={`certificate-item-${index}`} className='Certificate-item'>
-                    <h4 className='certificate-name'>{item.name}</h4>
-                    <p className='certificate-institution'>{item.institution}</p>
-                    <p className='certificate-date'>{item.date}</p>
-                    <p className='certificate-descr'>{item.description}</p>
-                </div>
-            ))}
+            <div className='Certificate-items'>
+                {items.map((item, index) => (
+                    <div key={`certificate-item-${index}`} className='Certificate-item'>
+                        <h4 className='certificate-name'>{item.name}</h4>
+                        <p className='certificate-institution'>{item.institution}</p>
+                        <p className='certificate-date'>{item.date}</p>
+                        <p className='certificate-descr'>{item.description}</p>
+                    </div>
+                ))}
+            </div>
         </section>
     );
 };

diff --git a/src/components/Experience.jsx b/src/components/Experience.jsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import '../styles/components/Items.styl'
 
 const Experience = (props) => {
 
@@ -7,16 +8,18 @@ const Experience = (props) => {
     } = props;
 
     return (
-        <section>
+        <section className='Experience'>
             <h2 className='Experience-title'>Experience</h2>
-            {items.map((item,index) => (
-                <div key={`experience-item-${index}`} className='Experience-item'>
-                    <h4 className='job-title'>{item.jobTitle}</h4>
-                    <p className='job-company'>{item.company}</p>
-                    <p className='job-dates'>{`${item.startDate} - ${item.endDate}`}</p>
-                    <p className='job-descr'>{item.jobDescription}</p>
-                </div>
-            ))}
+            <div className='Experience-items'>
+                {items.map((item,index) => (
+                    <div key={`experience-item-${index}`} className='Experience-item'>
+                        <h4 className='job-title'>{item.jobTitle}</h4>
+                        <p className='job-company'>{item.company}</p>
+                        <p className='job-dates'>{`${item.startDate} - ${item.endDate}`}</p>
+                        <p className='job-descr'>{item.jobDescription}</p>
+                    </div>
+                ))}
+            </div>
         </section>
     );
 };

diff --git a/src/components/Header.jsx b/src/components/Header.jsx
@@ -1,29 +1,22 @@
 import React from 'react';
+import '../styles/components/Header.styl'
 
 const Header = (props) => {
 
     const {
         name,
         profession,
-        phone,
-        email,
-        website,
-        adress,
         avatar
     } = props;
 
     return (
-        <section>
+        <section className='Header'>
             <div className='Header-picture'>
                 <img src={avatar} alt="" />
             </div>
             <div className='Header-content'>
                 <h2 className='Header-title'>{name}</h2>
-                <p className='Header-job-title'>{profession}</p>
-                <a href={`tel:${phone}`} className='Header-phone'>{phone}</a>
-                <a href={`mailto:${email}`} className='Header-email'>{email}</a>
-                <a href={website} className='Header-website'>{website}</a>
-                <p className='Header-adress'>{adress}</p>
+                <h4 className='Header-job-title'>{profession}</h4>
                 {props.children}
             </div>
         </section>

diff --git a/src/components/Interest.jsx b/src/components/Interest.jsx
@@ -10,7 +10,7 @@ const Interest = (props) => {
         <section>
             <h2 className='Interest-title'>Interests</h2>
             {items.map((item, index) => (
-                <p key={`interes-item-${index}`} className='Interest-item'></p>
+                <p key={`interes-item-${index}`} className='Interest-item'>{item}</p>
             ))}
         </section>
     );

diff --git a/src/components/Languages.jsx b/src/components/Languages.jsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import '../styles/components/Percentages.styl'
 
 const Languages = (props) => {
 
@@ -10,7 +11,11 @@ const Languages = (props) => {
         <section>
             <h2 className='Languages-title'>Languages</h2>
             {items.map((item, index) => (
-                <p key={`language-item-${index}`} className='Languages-item'></p>
+                <div className='language-container' key={`language-item-${index}`}>
+                    <div className='language-fill' style={{width:item.percentage}}></div>
+                    <p className='Languages-item'>{item.name}</p>
+                    <p>{item.percentage}</p>
+                </div>
             ))}
         </section>
     );

diff --git a/src/components/Profile.jsx b/src/components/Profile.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 
 const Profile = (props) => {
     return (
-        <section>
+        <section className='Profile'>
             <h2 className='Profile-title'>Profile</h2>
             <p className='Profile-desc'>{props.desc}</p>
         </section>

diff --git a/src/components/Skills.jsx b/src/components/Skills.jsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import '../styles/components/Percentages.styl'
 
 const Skills = (props) => {
 
@@ -10,7 +11,11 @@ const Skills = (props) => {
         <section>
             <h2 className='Skills-title'>Skills</h2>
             {items.map((item,index) => (
-                <p key={`skill-item-${index}`} className='Skills-item'></p>
+                <div className='skill-container' key={`skill-item-${index}`}>
+                    <div className='skill-fill' style={{width:item.percentage}}></div>
+                    <p className='Skills-item'>{item.name}</p>
+                    <p className='percentage'>{item.percentage}</p>
+                </div>
             ))}
         </section>
     );

diff --git a/src/containers/App.jsx b/src/containers/App.jsx
@@ -9,45 +9,52 @@ import Skills from '../components/Skills';
 import Interest from '../components/Interest';
 import Languages from '../components/Languages';
 import Certificates from '../components/Certificates';
+import useGetProducts from '../hooks/useGetData';
+
+const API = "http://localhost:3000/data"
 
 const App = () => {
+
+  const data = {};
+
   return (
-    <>
+    <div className='Main-content'>
       <Header
-        name = "Hololulu"
-        profession = "Developer"
-        phone = "123"
-        email = "[email protected]"
-        website = "asdasd.com"
-        adress = "Colombia"
-        avatar = "https://picsum.photos/200"
+        name = {data.name}
+        profession = {data.profession}
+        avatar = {data.avatar}
       >
         <About
-          items = {[]}
+          items = {data.social}
+          phone = {data.phone}
+          email = {data.email}
+          website = {data.website}
+          adress = {data.address}
         />
       </Header>
       <Profile 
-        desc = "asdasd"
+        desc = {data.profile}
       />
       <Experience
-        items = {[]}
+        items = {data.experience}
       />
       <Academic
-        items = {[]}
+        items = {data.academic}
       />
       <Certificates
-        items = {[]}
+        items = {data.certificate}
       />
+
       <Skills
-        items = {[]}
+        items = {data.skills}
       />
       <Interest
-        items = {[]}
+        items = {data.interest}
       />
       <Languages
-        items = {[]}
+        items = {data.languages}
       />
-    </>
+    </div>
   )
 };
 

diff --git a/src/styles/components/About.styl b/src/styles/components/About.styl
@@ -0,0 +1,16 @@
+@import '_vars'
+
+.About
+    display: grid
+    grid-template-columns: 1fr 1fr
+
+.About-items
+    display: flex
+    gap: 20px
+
+    i
+        font-size: icons-size
+
+@media (max-width : max-width-1)
+  .About
+     grid-template-columns: 1fr
diff --git a/src/styles/components/App.styl b/src/styles/components/App.styl
@@ -1,2 +1,59 @@
+@import '_vars'
+
 body
-  background-color blue
+  background-color: backColor
+  margin: 20px
+
+section
+  background-color: cardColor
+  border-radius: 10px
+  padding: 30px
+  box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
+
+h2
+  color: titleColor
+  font-size: title-text-size
+  margin: 0 0 35px
+  font-family: title-font-family
+
+h4
+  font-size: focus-text-size
+  margin: 0
+  font-family: text-font-family
+  color: focusTextColor
+
+h3
+  font-size: subtitle-text-size
+  color: subtitleColor
+
+p
+a
+  color: textColor
+  text-decoration: none
+  font-size: text-size
+  margin: 5px 0
+  font-family: text-font-family
+
+a:hover
+  color: secondaryColor
+
+.Main-content
+  display: grid
+  grid-template-rows: auto 1fr auto auto auto auto
+  grid-template-columns: 1fr 1fr 1fr
+  gap: 20px
+
+  .Header
+    grid-column: 1 / 4
+
+  .Profile
+    grid-column: 1 / 4
+
+  .Experience
+    grid-column: 1 / 4
+
+  .Academic
+    grid-column: 1 / 4
+
+  .Certificates
+    grid-column: 1 / 4