import React, {Fragment} from "react";

const AboutMe = () => {


let data = 
    {
        name: "Sergio Almeida Oliveira",
        version: 27,
        nationality: "brazilian",
        hobbies: ["travelling", "camping", "cycling", "reading", "typing", "linux" ],
        contact: "thesergioliveira@gmail.com",
        home: "Dresden",
        profession: "webDev",
        toolStack: [
            "sass", 
            "javascript", 
            "react", 
            "Jest",
            "Node",
            "Expres"
            "MongoDB",
        ],
        technologies:{
            webDesign: ["Figma", "AdobeXD", "gimp"],
            development: ["VS Code", "Github", Google cloud Platform"],
        },
  
        someProjects: [
            {
                name: "Youtube Clone",
                link: "",
            },
            {
                name: "Trivia Application",
                link: "",
            },
            {
                name: : "ToDo List",
                link: "",
            },
            {
                name: "Instagram Clone",
                link: "",
            },
            {
                name: "Morse Code"
                link: 
            },
            {
                name: "Online Store",
                link: "",
            }, 
            {
                name: "Country API",
                link: "",
            }
         ]
      }
      
      const List = () => {
      console.log('React is awesome!');
      return data.someProjects.map((project, i) => {
       return (
        <li key={i}>
          <a href={project.link} target='_blank'>{project.name}</a>  
        </li>
        )
      });
      
      };
      
    return (
        <>
            <h1> My name is {data.name} and I am a  {data.profession} !</h1> 
            <h3 align="center">
            I would like to share with you, about my journey to become a developer and the experiences I gathered thus far. <br> 
            In order to accomplish that I have Listed bellow some relevant links to showcase some of my work. 
            </h3>
            <ul>
              <List/> 
            </ul>
        </>
   );
};

export default AboutMe;