diff --git a/data.json b/data.json index 94dbaad5..e52f9c98 100644 --- a/data.json +++ b/data.json @@ -1,88 +1,234 @@ { "data": { - "name": "Melissa Walsh", - "profession": "FrontEnd Developer", - "address": "Bogotá, Colombia.", - "email": "melissa@example.com", + "name": "Ruben Dario Troche Piñanez", + "profession": "Desarrollador Genexus", + "address": "Asuncion, Paraguay.", + "email": "dtf.ruben.troche@gmail.com", "website": "https://example.com", - "phone": "3042034240", - "avatar": "https://arepa.s3.amazonaws.com/melissa.jpg", - "Profile": "Ignore the squirrels, you'll never catch them anyway hack, for floof tum, tickle bum, jellybean footies curly toes climb leg roll over and sun my belly, ", + "phone": "+595 981356739", + "avatar": "http://en.gravatar.com/avatar/ef3ca8ef02de23da584520516503660e?size=200", + "Profile": "Desarrollo de aplicaciones para Empresas Comerciales, Industristriales y Financieras. Para diferentes Plataformas OS/400, Linux, Windows, Diferentes Servidores de Aplicaciones JBoss, WebSphere, Tomcat, Generando Aplicaciones en RPG y Java", "certificate": [ { - "date": "Jan 2021", - "description": "Hack up furballs try to jump onto window and fall while scratching at wall. ", + "date": "30 Junio 2022", + "description": "Fundamentos de Ingeniería de Software", "institution": "Platzi", - "name": "FrontEnd Developer" + "name": "Fundamentos de Ingeniería de Software" }, { - "date": "Jan 2021", - "description": "Scratch at the door then walk away wack the mini furry mouse", + "date": "26 Abril 2022", + "description": "Historia de Ethereum y Smart Contracts", "institution": "Platzi", - "name": "Backend Developer" + "name": "Historia de Ethereum y Smart Contracts" + } + { + "date": "26 Abril 2022", + "description": "Historia de los Cypherpunks", + "institution": "Platzi", + "name": "Historia de los Cypherpunks" + } + { + "date": "13 Abril 2022", + "description": "Oratoria y Hablar en Público", + "institution": "Platzi", + "name": "Oratoria y Hablar en Público" + } + { + "date": "7 Abril 2022", + "description": "Optimización del Perfil Profesional", + "institution": "Platzi", + "name": "Optimización del Perfil Profesional" + } + { + "date": "7 Abril 2022", + "description": "Triunfar en Entrevistas de Trabajo", + "institution": "Platzi", + "name": "Triunfar en Entrevistas de Trabajo" + } + { + "date": "5 Abril 2022", + "description": "Cómo Prepararte Profesionalmente para el Futuro", + "institution": "Platzi", + "name": "Cómo Prepararte Profesionalmente para el Futuro" + } + { + "date": "5 Abril 2022", + "description": "Creación de Portafolio y CV", + "institution": "Platzi", + "name": "Creación de Portafolio y CV" + } + { + "date": "5 Abril 2022", + "description": "Conseguir Trabajo en Tecnología", + "institution": "Platzi", + "name": "Conseguir Trabajo en Tecnología" + } + { + "date": "14 Marzo 2022", + "description": "Marca Personal", + "institution": "Platzi", + "name": "Marca Personal" + } + { + "date": "28 Febrero 2022", + "description": "English for Job Interviews Course", + "institution": "Platzi", + "name": "English for Job Interviews Course" + } + { + "date": "17 Febrero 2022", + "description": "Estrategias para Aprender en Línea", + "institution": "Platzi", + "name": "Estrategias para Aprender en Línea" + } + { + "date": "16 Febrero 2022", + "description": "Gestión Efectiva del Tiempo", + "institution": "Platzi", + "name": "Gestión Efectiva del Tiempo" } ], "Academic": [ { - "degree": "Atomic Master", - "description": " I’m so hungry i’m so hungry but ew not for that pelt around the house and up and down stairs chasing phantoms", - "endDate": "Jan 2017", - "institution": "MIT", - "startDate": "Jan 2018" + "degree": "Técnico Superior en Fútbol", + "description": "Asunción-Paraguay", + "endDate": "Diciembre 2014", + "institution": "Escuela Nacional de Educación Física - ENEF", + "startDate": "Enero 2018" }, { - "degree": "Space Engineering", - "description": "Meow in empty rooms. Find empty spot in cupboard and sleep all day check cat door for ambush 10 times before coming in for hack. ", - "endDate": "Decenber 2015", - "institution": "Harvard", - "startDate": "Jan 2017" + "degree": "Licenciado en Análisis de Sistemas Informáticos", + "description": "Campus Universitario San Lorenzo", + "endDate": "Diciembre 2002", + "institution": "Facultad Politécnica - U.N.A.", + "startDate": "Enero 1994" + } + { + "degree": "Programador de Computadoras", + "description": "Campus Universitario San Lorenzo", + "endDate": "Diciembre 1993", + "institution": "Facultad Politécnica - U.N.A.", + "startDate": "Enero 1991" } ], "experience": [ { - "company": "PugStar", - "endDate": "Present", - "jobDescription": "scratch the furniture. Good now the other hand, too lay on arms while you're using the keyboard.", - "jobTitle": "Frontend", - "startDate": "Jan 2020" + "company": "Banco Basa SAECA", + "endDate": "Actual", + "jobDescription": "Desarrollar Proyectos Regulatorios - Auditoría Forense Informática", + "jobTitle": "Desarrollador del Core Bancario.", + "startDate": "Enero 2018" }, { - "company": "CatStore", - "endDate": "Jan 2016", - "jobDescription": "Meow in empty rooms lick left leg for ninety minutes, still dirty.", - "jobTitle": "Backend", - "startDate": "Sept 2019" + "company": "Banco Amambay S.A.E", + "endDate": "Diciembre 2017", + "jobDescription": "Desarrollar Nuevas Funcionalidades para el Core Bancario - Optimización de Procesos", + "jobTitle": "Desarrollador Genexus", + "startDate": "Octubre 2016" + } + { + "company": "Banco Itapua", + "endDate": "Octubre 2016", + "jobDescription": "Coordinador del Area de Desarrollo", + "jobTitle": "Desarrollador Genexus", + "startDate": "Mayo 2011" + } + { + "company": "Banco Integracion", + "endDate": "Abril 2011", + "jobDescription": "Jefe del Area de Desarrollo", + "jobTitle": "Desarrollador Genexus", + "startDate": "Mayo 2005" + } + { + "company": "Banco Itau", + "endDate": "Abril 2005", + "jobDescription": "Desarrollo de Nuevas Funcionalidades y Optimización de Procesos Existentes", + "jobTitle": "Desarrollador Genexus", + "startDate": "Abril 2004" + } + { + "company": "Financiera Atlas", + "endDate": "Abril 2004", + "jobDescription": "Desarrollo de Nuevas Funcionalidades y Optimización de Procesos Existentes", + "jobTitle": "Desarrollador Genexus", + "startDate": "Marzo 2002" + } + { + "company": "Horizonte S.R.L.", + "endDate": "Marzo 2002", + "jobDescription": "Desarrollo de Aplicaciones para el Core Bancario de Paraguay", + "jobTitle": "Desarrollador Genexus", + "startDate": "Marzo 1999" + } + { + "company": "Gunder I.C.S.A.", + "endDate": "Marzo 1999", + "jobDescription": "Desarrollo de Aplicaciones Comerciales - Venta de Automoviles Nuevos y Usados - Repuestos - Taller de Chaperia y Pintura", + "jobTitle": "Desarrollador Genexus", + "startDate": "Enero 1998" + } + { + "company": "Galerias Guarani", + "endDate": "Diciembre 1997", + "jobDescription": "Desarrollo de Aplicaciones Comerciales", + "jobTitle": "Desarrollador Genexus", + "startDate": "Enero 1996" + } + { + "company": "Galerias Guarani", + "endDate": "Diciembre 1995", + "jobDescription": "Desarrollo de Cliente/Servidor en FoxPro", + "jobTitle": "Programador de Computadoras", + "startDate": "Enero 1994" } ], "skills": [ { - "name": "HTML5", - "percentage": "75%" + "name": "Genexus", + "percentage": "85%" }, { - "name": "CSS", - "percentage": "25%" + "name": "AS/400", + "percentage": "85%" }, { - "name": "JavaScript", - "percentage": "55%" + "name": "DBMS Oracle, DB2/400, PostgreSQL", + "percentage": "85%" }, { - "name": "React", - "percentage": "90%" + "name": "Servidores de Aplicaciones JBoss, WebSphere, Tomcat", + "percentage": "60%" + } + { + "name": "RPG", + "percentage": "80%" + } + { + "name": "Java", + "percentage": "40%" + } + { + "name": "Docker", + "percentage": "40%" } ], "interest": [ - "javascript", - "develop", - "backend", - "frontend" + "Inteligencia Artificial - Machine Learning", + "Ciencia de Datos", + "Auditoría Forense Informática", + "Web 3.0 - Blockchaing - Crypto", + "Integracion de Aplicaciones" ], "languages": [ { - "name": "Spanish", + "name": "Español", "percentage": "90%" }, + { + "name": "Guaraní", + "percentage": "50%" + }, { "name": "English", "percentage": "50%" diff --git a/src/__test__/components/About.test.js b/src/__test__/components/About.test.js index 4f3bd51a..2fb74860 100644 --- a/src/__test__/components/About.test.js +++ b/src/__test__/components/About.test.js @@ -1,9 +1,9 @@ import React from 'react'; -import { mount } from 'enzyme'; +import { shallow } from 'enzyme'; import About from '../../components/About'; describe('', () => { - const about = mount(); + const about = shallow(); test('About render', () => { expect(about.length).toEqual(1); diff --git a/src/__test__/components/Academic.test.js b/src/__test__/components/Academic.test.js index 10718e5d..fd929310 100644 --- a/src/__test__/components/Academic.test.js +++ b/src/__test__/components/Academic.test.js @@ -1,9 +1,9 @@ import React from 'react'; -import { mount } from 'enzyme'; +import { shallow } from 'enzyme'; import Academic from '../../components/Academic'; describe('', () => { - const academic = mount(); + const academic = shallow(); test('Academic render', () => { expect(academic.length).toEqual(1); diff --git a/src/__test__/components/Experience.test.js b/src/__test__/components/Experience.test.js index 6ddf5fbf..2f4f4bda 100644 --- a/src/__test__/components/Experience.test.js +++ b/src/__test__/components/Experience.test.js @@ -1,9 +1,9 @@ import React from 'react'; -import { mount } from 'enzyme'; +import { shallow } from 'enzyme'; import Experience from '../../components/Experience'; describe('', () => { - const experience = mount(); + const experience = shallow(); test('Experience render', () => { expect(experience.length).toEqual(1); diff --git a/src/__test__/components/Header.test.js b/src/__test__/components/Header.test.js index 894ec0ab..51864583 100644 --- a/src/__test__/components/Header.test.js +++ b/src/__test__/components/Header.test.js @@ -1,9 +1,9 @@ import React from 'react'; -import { mount } from 'enzyme'; +import { shallow } from 'enzyme'; import Header from '../../components/Header'; describe('
', () => { - const header = mount(
); + const header = shallow(
); test('Header render', () => { expect(header.length).toEqual(1); diff --git a/src/__test__/components/Interest.test.js b/src/__test__/components/Interest.test.js index cbf665b3..ce24af5f 100644 --- a/src/__test__/components/Interest.test.js +++ b/src/__test__/components/Interest.test.js @@ -1,9 +1,9 @@ import React from 'react'; -import { mount } from 'enzyme'; +import { shallow } from 'enzyme'; import Interest from '../../components/Interest'; describe('', () => { - const interest = mount(); + const interest = shallow(); test('Interest render', () => { expect(interest.length).toEqual(1); diff --git a/src/__test__/components/Languages.test.js b/src/__test__/components/Languages.test.js index 1d10e137..d43e5621 100644 --- a/src/__test__/components/Languages.test.js +++ b/src/__test__/components/Languages.test.js @@ -1,9 +1,9 @@ import React from 'react'; -import { mount } from 'enzyme'; +import { shallow } from 'enzyme'; import Languages from '../../components/Languages'; describe('', () => { - const languages = mount(); + const languages = shallow(); test('Languages render', () => { expect(languages.length).toEqual(1); diff --git a/src/__test__/components/Profile.test.js b/src/__test__/components/Profile.test.js index f71ed22b..28b1781a 100644 --- a/src/__test__/components/Profile.test.js +++ b/src/__test__/components/Profile.test.js @@ -1,9 +1,9 @@ import React from 'react'; -import { mount } from 'enzyme'; +import { shallow } from 'enzyme'; import Profile from '../../components/Profile'; describe('', () => { - const profile = mount(); + const profile = shallow(); test('Profile render', () => { expect(profile.length).toEqual(1); diff --git a/src/__test__/components/Skills.test.js b/src/__test__/components/Skills.test.js index 4c3d9a53..872b1ca3 100644 --- a/src/__test__/components/Skills.test.js +++ b/src/__test__/components/Skills.test.js @@ -1,9 +1,9 @@ import React from 'react'; -import { mount } from 'enzyme'; +import { shallow } from 'enzyme'; import Skills from '../../components/Skills'; describe('', () => { - const skills = mount(); + const skills = shallow(); test('Skills render', () => { expect(skills.length).toEqual(1); diff --git a/src/components/About.jsx b/src/components/About.jsx new file mode 100644 index 00000000..7c2d9d72 --- /dev/null +++ b/src/components/About.jsx @@ -0,0 +1,19 @@ +import React from 'react'; + +const About = ({address,email,phone,profession,website}) => { + return ( +
+

Desarrollador Genexus

+
    +
  • +595 981356739
    • +
  • dtf.ruben.troche@gmail.com
    • +
  • Asunción - Paraguay
    • +
  • {phone}
    • +
  • {email}
    • +
  • {website}
    • +
  • {address}
    • +
+
+ ); + }; +export default About; \ No newline at end of file diff --git a/src/components/Academic.jsx b/src/components/Academic.jsx new file mode 100644 index 00000000..ec128071 --- /dev/null +++ b/src/components/Academic.jsx @@ -0,0 +1,32 @@ +import React from 'react'; +import Card from './Card'; + +const Academic = ({ + academic = Array(3).fill({degree: '', description: '', institution: ''}), +}) => { + return ( + +

Academic

+
    + //
  • 2013 - 2014 Técnico Superior en Fútbol; Escuela Nacional de Educación Física - ENEF; Asunción
    • + //
  • 1994 - 2002 Licenciado en Análisis de Sistemas Informáticos; Facultad Politécnica - U.N.A.; Campus Universitario San Lorenzo
    • + //
  • 1991 - 1993 Programador de Computadoras; Facultad Politécnica - U.N.A.; Campus Universitario San Lorenzo
    • + //
  • 1987 - 1989 Bachiller en Ciencias y Letras; Colegio Nacional de la Capital “General Bernardino Caballero”; Asunción
    • + {academic.map(({degree, description, institution},index) => ( +
  • +

    {degree}

    +

    {description}

    +

    {institution}

    + +
    • + ))} +
+ + + ); +}; + +export default Academic; \ No newline at end of file diff --git a/src/components/Avatar.jsx b/src/components/Avatar.jsx new file mode 100644 index 00000000..2d55dab9 --- /dev/null +++ b/src/components/Avatar.jsx @@ -0,0 +1,16 @@ +import React from 'react'; +import '../styles/components/Avatar.styl' + +const Avatar = ({avatar}) => { + return profile image tatita2021; + //return ( + //avatar + + //); +}; + +export default Avatar; diff --git a/src/components/Card.jsx b/src/components/Card.jsx new file mode 100644 index 00000000..c1e996b3 --- /dev/null +++ b/src/components/Card.jsx @@ -0,0 +1,8 @@ +import React from 'react'; +import '../styles/components/Card.styl'; + +const Card = ({children}) => { + return
{children}
; +}; + +export default Card; \ No newline at end of file diff --git a/src/components/Experience.jsx b/src/components/Experience.jsx new file mode 100644 index 00000000..b3292271 --- /dev/null +++ b/src/components/Experience.jsx @@ -0,0 +1,50 @@ +import React from 'react'; +import Card from './Card'; + +const Experience = ({ +experience = Array(10).fill({ + company: '', + EndDate: '', + jobDescription: '', + JobTitle: '', + StartDate: '', +}), +}) => { + return ( + +

Experience

+
    + //
  • Banco Basa 01/2018 hasta la actualidad
    • + //
  • Banco Amambay 10/2016 hasta 12/2017
    • + //
  • Banco Itapua 05/2011 hasta 10/2016
    • + //
  • Banco Integracion 05/2005 hasta 04/2011
    • + //
  • Banco Itau 05/2004 hasta 04/2005
    • + //
  • Financiera Atlas 03/2002 hasta 04/2004
    • + //
  • Horizonte S.R.L. 03/1999 hasta 03/2002
    • + //
  • Gunder I.C.S.A. 01/1998 hasta 03/1999
    • + //
  • Galerias Guarani 01/1996 hasta 12/1997
    • + //
  • Cerveceria Internacional 01/1994 hasta 12/1995
    • + {experience.map( + ( + {company, endDate, jobDescription, JobTitle, StartDate}, + index + ) => ( +
  • +

    Company: {Company}

    +

    {jobTitle}

    +

    {jobDescription}

    +

    + {startDate} - {endDate} +

    +
    • + ) + )} +
+ + ); +}; + +export default Experience; \ No newline at end of file diff --git a/src/components/Header.jsx b/src/components/Header.jsx new file mode 100644 index 00000000..4e96ecd9 --- /dev/null +++ b/src/components/Header.jsx @@ -0,0 +1,20 @@ +import React from 'react'; +import '../styles/components/Header.styl'; +import Avatar from './Avatar'; +import Card from './Card'; +const Header = ({children}) => { + return ( +
+ + +
+ //

Ruben Dario Troche Piñanez

+

{name}

+ {children} +
+ +
+ ); +}; + +export default Header; \ No newline at end of file diff --git a/src/components/Interest.jsx b/src/components/Interest.jsx new file mode 100644 index 00000000..854230c0 --- /dev/null +++ b/src/components/Interest.jsx @@ -0,0 +1,23 @@ +import React from 'react'; +import Card from './Card'; +const Interest = ({Interest = Array(5).fill('')}) => { + return ( + +

Interest

+
    + //
  • Inteligencia Artificial - Machine Learning
    • + //
  • Ciencia de Datos
    • + //
  • Auditoría Forense Informática
    • + //
  • Web 3.0 - Blockchaing - Crypto
    • + //
  • Integracion de Aplicaciones
    • + {Interest.map((individualinterest, index) => ( +
  • +

    {individualinterest}

    +
    • + ))} +
+ + ); + }; + +export default Interest; \ No newline at end of file diff --git a/src/components/Languages.jsx b/src/components/Languages.jsx new file mode 100644 index 00000000..1ee1162f --- /dev/null +++ b/src/components/Languages.jsx @@ -0,0 +1,25 @@ +import React from 'react'; +import Card from './Card'; +const Languages = ({ + languages = Array(3).fill({name: '', percentage: ''}), +}) => { + return ( + +

Languages

+
    + //
  • Español
    • + //
  • Guarani
    • + //
  • Inglés
    • + {languages.map(({name, percentage},index)=> ( +
  • +

    + {name} - {percentage} +

    +
    • + ) + )} +
+ + ); + }; +export default Languages; \ No newline at end of file diff --git a/src/components/Profile.jsx b/src/components/Profile.jsx new file mode 100644 index 00000000..f8d1285c --- /dev/null +++ b/src/components/Profile.jsx @@ -0,0 +1,28 @@ +import React from 'react'; +import Card from './Card'; +const Profile = ({profile}) => { + return ( + +

Profile

+ //

+ //Amplios conocimientos y experiencias en bases de datos que abarcan tanto los fundamentos teóricos como las tecnologías y + //herramientas utilizadas para diseñar e implementar aplicaciones sobre plataformas AS/400, Unix o Windows. + //Manejo de Herramientas para la extracción y análisis de datos, formateo de Registros de Diario - Journal de AS/400 + //Sólida experiencia en el Desarrollo e Implementación de aplicaciones Win, Web y RPG, utilizando los Patterns Work With Plus, + //K2B Tools, K2B Audit, Audit Plus y utilizando las Diferentes Versiones de Genexus 8.0, 9.0, Evolution 1, 2 , 3, Genexus 15, Genexus 16 + //y actualmente trabajando con Genexus 17, utilizando los diferentes gestores de Bases de Datos DB/2 400, Oracle, PostgreSQL, + //utilizando los Generadores Java, C#, RPG, publicados en los Web Sever JBOSS, WebSphere, Tomcat sobre diferentes Sistemas Operativos + //OS/400, Linux y Windows. + //Desarrollo e Implementación de aplicaciones en las siguientes Entidades Financieras - Banco Basa S.A., Banco Amambay S.A., + //Banco ITAPUA SAECA, Vision Banco, Banco Integración S.A., Interbanco S.A., Chinatrust Comercial Bank, Multibanco, Financiera Atlas, + //Finanbank. + //Desarrollo e Implementación de Aplicaciones en las siguientes entidades Comerciales - Galerías Guaraní y Shopping Vendome, Gunder + //IGSA, Casa Dos Pueblos - Pedro Juan Caballero + //Desarrollo e Implementación Industrial - Cervecería Internacional + //

+

{profile}

+ + ); +}; + +export default Profile; \ No newline at end of file diff --git a/src/components/Skills.jsx b/src/components/Skills.jsx new file mode 100644 index 00000000..dea353c7 --- /dev/null +++ b/src/components/Skills.jsx @@ -0,0 +1,23 @@ +import React from 'react'; +import Card from './Card'; +const Skills = ({skills = Array(5).fill('')}) => { + return ( + +

Skills

+
    + //
  • OS/400 - DB2/400 - RPG - CLP - Formateo de Journal
    • + //
  • Genexus - Work With Plus - K2B Tools - K2B Audit - Audit Plus
    • + //
  • DBMS Oracle - PostgreSQL
    • + //
  • Lenguajes de Programación Java, C#
    • + //
  • Servidores de Aplicación JBOSS, WebSphere, Tomcat
    • + {skills.map((skill, index) => ( +
  • +

    {skill}

    +
    • + ))} +
+
+ + ); + }; +export default Skills; \ No newline at end of file diff --git a/src/containers/App.jsx b/src/containers/App.jsx index 57224430..f5bd89fc 100644 --- a/src/containers/App.jsx +++ b/src/containers/App.jsx @@ -1,28 +1,69 @@ -import React from 'react'; +import React, {useEffect, useState} from "react"; import '../styles/components/App.styl'; -import Header from '../components/Header'; -import About from '../components/About'; -import Profile from '../components/Profile'; -import Experience from '../components/Experience'; -import Academic from '../components/Academic'; -import Skills from '../components/Skills'; -import Interest from '../components/Interest'; -import Languages from '../components/Languages'; +import Header from "../components/Header"; +import About from "../components/About"; +import Skills from "../components/Skills"; +import Interest from "../components/Interest"; +import Languages from "../components/Languages"; +import getdata from '../utils/getData' + const App = () => { + const [user, setUser] = useState(null); + useEffect(() => { + getuseData (); + }, []); + + const getUserData = async () => { + const data = await getData( + process.env.USER_DATA || 'http://localhost:3000/data'); + setUser(data); + }; + if (!user) return null; + + const { + Academic: academic, + address, + avatar, + email, + experience, + interest, + languages, + name, + phone, + profession, + Profile: profile, + skills, + website, + } = user; + return ( - <> -
- -
- - - - - - - - ) +
+
+
+ +
+ + +
+ + +
+
+ + +
+
+
+
+
+ ); }; export default App; diff --git a/src/styles/components/App.styl b/src/styles/components/App.styl index 4f92eccb..42585e43 100644 --- a/src/styles/components/App.styl +++ b/src/styles/components/App.styl @@ -1,2 +1,47 @@ body - background-color blue \ No newline at end of file + font-family -apple-systems, BlinkMacSystemFont, 'Segoe UI', 'Roboto, 'Oxygen', 'Ubuntu', Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', san-serif + margin 0; + -webkit-font-smoothing antialiased + -moz-osx-smoothing grayscale + +.App + background-color #000000 + color white + display flex + min-height 100wh + position relative + overflow hidden + @media (min-width: 600px) + padding 50px + @media (max-width: 600px) + padding 10px + +.App-container +z-index 1 + +.App-round + background-color #36d5d3 + border-radius 50% + height 300px + position absolute + width 300px + opacity .9 + +.App-top-left + top -118px + left -118px + +.App-bottom-right + bottom -118px + right -118px + +article + margin-bottom: 24px + +@media (min-width: 600px) + .App-grid + allign-items: center + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 10px; + grid-auto-rows: minmax(100px, auto); \ No newline at end of file diff --git a/src/styles/components/Avatar.styl b/src/styles/components/Avatar.styl new file mode 100644 index 00000000..e30d5eec --- /dev/null +++ b/src/styles/components/Avatar.styl @@ -0,0 +1,4 @@ +.Avatar + width: 200px + border-radius 50% + box-shadow 0 2px 8px 2px rgb(0 0 0 / 0.07), 0 2px 4px -1px rgb(0 0 0 / 0.04); \ No newline at end of file diff --git a/src/styles/components/Card.styl b/src/styles/components/Card.styl new file mode 100644 index 00000000..2884e2a3 --- /dev/null +++ b/src/styles/components/Card.styl @@ -0,0 +1,7 @@ +.Card + background-color #16181A + border-radius 14ox + box-shadow 0 2px 8px 2px rgb(0 0 0 / 0.07), 0 2px 4px -1px rgb(0 0 0 / 0.04); + height -webkit-fill-available + padding 12px 16px + width -webkit-fill-available; \ 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..4534662d --- /dev/null +++ b/src/styles/components/Header.styl @@ -0,0 +1,23 @@ +@media (max-width: 600px) + .Header + allign-items: center + display: flex + flex-direction: column + + & img + margin-bottom: 16px + +@media (min-width: 600px) + .Header + allign-items: center + display: gird; + grid-template-columns: repeat(4, 1fr); + gap: 10px; + grid-auto-rows: ninmax(100px, auto); + + + & img + grid-column: 1 / 2; + + & article + grid-column: 2 / end; diff --git a/src/utils/getData.js b/src/utils/getData.js index e69de29b..16462ab3 100644 --- a/src/utils/getData.js +++ b/src/utils/getData.js @@ -0,0 +1,5 @@ +const getData = (url) => { + if (!url) return 'Url no ingresada'; + return fetch(url).then((res) = res.json()); +}; +export default getData; \ No newline at end of file