diff --git a/public/index.html b/public/index.html index b76b4f47..9f00cb3d 100644 --- a/public/index.html +++ b/public/index.html @@ -3,6 +3,7 @@ React Base +
diff --git a/src/components/About.jsx b/src/components/About.jsx index 090d57ad..0143feec 100644 --- 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 ( - <> -

Let's get social:

-
- {items.map((item, index) => ( - -

{item.name}

- - ))} +
+
+

Contact:

+

phone: {phone}

+

email: {email}

+

website: {website}

+

{adress}

- +
+

Let's get social:

+
+ {items.map((item, index) => ( + + + + ))} +
+
+
); }; diff --git a/src/components/Academic.jsx b/src/components/Academic.jsx index 14b5ca40..b05930c4 100644 --- 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 ( -
+

Education

- {items.map((item, index) => ( -
-

{item.institution}

-

{item.degree}

-

{`${item.startDate} - ${item.endDate}`}

-

{item.description}

-
- ))} +
+ {items.map((item, index) => ( +
+

{item.institution}

+

{item.degree}

+

{`${item.startDate} - ${item.endDate}`}

+

{item.description}

+
+ ))} +
); }; diff --git a/src/components/Certificates.jsx b/src/components/Certificates.jsx index 707eb493..708b1a3e 100644 --- a/src/components/Certificates.jsx +++ b/src/components/Certificates.jsx @@ -1,4 +1,5 @@ import React from 'react'; +import '../styles/components/Items.styl' const Certificates = (props) => { const { @@ -6,16 +7,18 @@ const Certificates = (props) => { } = props; return ( -
+

Certificates

- {items.map((item, index) => ( -
-

{item.name}

-

{item.institution}

-

{item.date}

-

{item.description}

-
- ))} +
+ {items.map((item, index) => ( +
+

{item.name}

+

{item.institution}

+

{item.date}

+

{item.description}

+
+ ))} +
); }; diff --git a/src/components/Experience.jsx b/src/components/Experience.jsx index 396e7804..91971350 100644 --- 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 ( -
+

Experience

- {items.map((item,index) => ( -
-

{item.jobTitle}

-

{item.company}

-

{`${item.startDate} - ${item.endDate}`}

-

{item.jobDescription}

-
- ))} +
+ {items.map((item,index) => ( +
+

{item.jobTitle}

+

{item.company}

+

{`${item.startDate} - ${item.endDate}`}

+

{item.jobDescription}

+
+ ))} +
); }; diff --git a/src/components/Header.jsx b/src/components/Header.jsx index 5abf7d9b..12e61785 100644 --- 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 ( -
+

{name}

-

{profession}

- {phone} - {email} - {website} -

{adress}

+

{profession}

{props.children}
diff --git a/src/components/Interest.jsx b/src/components/Interest.jsx index e87df751..08b8bdd4 100644 --- a/src/components/Interest.jsx +++ b/src/components/Interest.jsx @@ -10,7 +10,7 @@ const Interest = (props) => {

Interests

{items.map((item, index) => ( -

+

{item}

))}
); diff --git a/src/components/Languages.jsx b/src/components/Languages.jsx index 266a64d1..48979f10 100644 --- 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) => {

Languages

{items.map((item, index) => ( -

+
+
+

{item.name}

+

{item.percentage}

+
))}
); diff --git a/src/components/Profile.jsx b/src/components/Profile.jsx index 0a7a733f..fc4a8eca 100644 --- a/src/components/Profile.jsx +++ b/src/components/Profile.jsx @@ -2,7 +2,7 @@ import React from 'react'; const Profile = (props) => { return ( -
+

Profile

{props.desc}

diff --git a/src/components/Skills.jsx b/src/components/Skills.jsx index 72dc3fc9..1b16bfea 100644 --- 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) => {

Skills

{items.map((item,index) => ( -

+
+
+

{item.name}

+

{item.percentage}

+
))}
); diff --git a/src/containers/App.jsx b/src/containers/App.jsx index 08f997b5..ceaa3e1f 100644 --- 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 ( - <> +
+ - +
) }; diff --git a/src/styles/components/About.styl b/src/styles/components/About.styl new file mode 100644 index 00000000..6f2a8870 --- /dev/null +++ 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 \ No newline at end of file diff --git a/src/styles/components/App.styl b/src/styles/components/App.styl index 4f92eccb..c0f8be74 100644 --- a/src/styles/components/App.styl +++ b/src/styles/components/App.styl @@ -1,2 +1,59 @@ +@import '_vars' + body - background-color blue \ No newline at end of file + 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 \ No newline at end of file diff --git a/src/styles/components/Header.styl b/src/styles/components/Header.styl new file mode 100644 index 00000000..19ae393c --- /dev/null +++ b/src/styles/components/Header.styl @@ -0,0 +1,12 @@ +.Header + display: grid + grid-template-columns: 22% 78% + + .Header-picture + place-self: center + + img + border-radius: 50% + + .Header-title + margin: 5px 0 \ No newline at end of file diff --git a/src/styles/components/Items.styl b/src/styles/components/Items.styl new file mode 100644 index 00000000..4f3de19e --- /dev/null +++ b/src/styles/components/Items.styl @@ -0,0 +1,22 @@ +@import '_vars' + +.Experience-items +.Academic-items +.Certificate-items + display: grid + grid-template-columns: 1fr 1fr + gap: gap-between + +.job-company +.academic-degree +.certificate-institution + font-weight: bold + +.job-dates +.academic-dates +.certificate-date + opacity 0.7 + +@media (max-width : max-width-1) + .Experience-items + grid-template-columns: 1fr \ No newline at end of file diff --git a/src/styles/components/Percentages.styl b/src/styles/components/Percentages.styl new file mode 100644 index 00000000..5155215c --- /dev/null +++ b/src/styles/components/Percentages.styl @@ -0,0 +1,34 @@ +@import '_vars' + +.skill-container +.language-container + margin: 5px 0 + padding: 0 5px + display: flex + justify-content: space-between + position: relative + + p + z-index: 1 + +.skill-fill +.language-fill + background: linear-gradient(-45deg, #73A9AD, #90C8AC, #C4DFAA); + background-size: 400% 400%; + animation: gradient 9s ease infinite; + position: absolute + height: 100% + left: 0 + border-radius: 5px + +@keyframes gradient { + 0% { + background-position: 0% 50%; + } + 50% { + background-position: 100% 50%; + } + 100% { + background-position: 0% 50%; + } +} \ No newline at end of file diff --git a/src/styles/components/_vars.styl b/src/styles/components/_vars.styl new file mode 100644 index 00000000..3fd851b0 --- /dev/null +++ b/src/styles/components/_vars.styl @@ -0,0 +1,20 @@ +backColor = #FFF +cardColor = #F5F5F5 +titleColor = #364F6B +textColor = #112031 +subtitleColor = #364F6B +focusTextColor = #DF7861 +secondaryColor = #DF7861 + +title-text-size = 35px +icons-size = 30px +text-size = 18px +subtitle-text-size = 25px +focus-text-size = 22px + +max-width-1 = 980px + +gap-between = 50px + +title-font-family = serif +text-font-family = sans-serif \ No newline at end of file