<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> Im.h1pst </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=Hind:wght@300;400;500&family=Major+Mono+Display&family=MuseoModerno:wght@300;400;500&family=Poiret+One&family=Righteous&family=Roboto+Mono:wght@200;400;500&family=Space+Mono:wght@400;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" type="text/css" media="screen" href="./css/main.css">

    <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>

</head>
<body>

    <!-- Container -->
    <div id="container--main">

        <section id="wrapper--hero" class="section--page">
            <img id="profile__pic" src="https://images.unsplash.com/photo-1640952131659-49a06dd90ad2?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NjAzNjM0MzA&ixlib=rb-1.2.1&q=80">

            <div>
                <h1 id="user__name"> Matthias Duarte </h1>
                <p id="biografi">Engineer Front-End Jr. and Back-End Engineer and iOS Developer Student at 
                    <a href="https://www.codecademy.com/profiles/soyhipst" target="_blank">Codecademy</a>,
                    <a href="https://www.freecodecamp.org/SoyHipts" target="_blank">FreeCodeCamp</a>,
                    <a href="https://campus.open-bootcamp.com/" target="_blank">Open-bootcamp</a>
                    and creator of WebApps <a href="" target="_blank">Komunapp.mx</a>
                <p id="email"> πŸ’β€β™‚οΈ im.h1pst@gmail.com</p>
            </div>
        </section>


        <!-- Section Socials -->
        <section id="section--page">
            <div id="net_socials--list">
                <a href="https://www.linkedin.com/in/soyhipst/" target="_blank"> <i class="fa fa-linkedin" aria-hidden="true"></i> Linkedin </a>
                <a href="https://twitter.com/SoyHipst" target="_blank"> <i class="fa fa-twitter" aria-hidden="true"></i> Twitter </a>
                <a href="https://codepen.io/SoyHipst" target="_blank"> <i class="fa fa-codepen" aria-hidden="true"></i> CodePen </a>
                <a href="https://github.com/SoyHipst" target="_blank"> <i class="fa fa-github" aria-hidden="true"></i> GitHub </a>
                <!-- <a href="#" target="_blank"> Dev </a> --> 
                <a href="./assets/CVEng.Front-2022.pdf" target="_blank"> <i class="fa fa-download" aria-hidden="true"></i> Download Resume </a>
            </div>
        </section>


        <!-- Section Skills -->
        <section class="section--page">
            <h2>Skills and Qualifications</h2>
            <ul id="qualifications__list">
                <li> πŸš€ Extensive knowledge in API & Database Design. </li>
                <li> πŸš€ 1 Years experience with back-end development. </li>
                <li> πŸš€ 2 Years experience with front-end development. </li>
                <li> πŸš€ 3 Years experience with running Adwords campaigns & FreeLance. </li>
            </ul>
        </section>

        <section class="section--page">
            <h2>Tech Stack</h2>
            
            <div id="wrapper--tech__items">
                <div class="card--tech-stack"> <span> <ion-icon name="logo-html5"></ion-icon> Html5 </span> </div>
                <div class="card--tech-stack"> <span> <ion-icon name="logo-css3"></ion-icon> Css3 { Tailwind } </span> </div>
                <div class="card--tech-stack"> <span> <ion-icon name="logo-react"></ion-icon> JavaScript { React, NodeJs } </span> </div>
                <div class="card--tech-stack"> <span> <ion-icon name="logo-laravel"></ion-icon> PHP { Laravel } </span> </div>
                <div class="card--tech-stack"> <span> <ion-icon name="logo-python"></ion-icon> Python { FastApi, Django }</span> </div>
                <!-- <div class="card--tech-stack"> <span> <ion-icon name="analytics-outline"></ion-icon> DB { MySQL, Postgres }</span> </div> -->
            </div>
        </section>


        <!-- Section Work -->
        <section id="wrapper--work__history" class="section--page">
            <h2> Work History </h2>

            <div class="line-break"> </div>
            <div class="card--work-history">
                <strong> πŸ‡ͺπŸ‡Έ FRONT-END DEVELOPER | INISEG.ES</strong>
                <p> 03/2022 - 04/2022 </p>
                <p>Worked on making Agora’s Web Based SDK more accessible through video tutorials, articles, demo projects and event based training. Also building out React UI components & leading a team to re-design Agora’s documentation and api reference.</p>
                <ul>
                    <li>Doubled Web SDK’s monthly usage minutes from 15 million to 30 million minutes within my first 4 months</li>
                    <li>Produced educational video content which resulted in 300k+ views on youtube</li>
                </ul>
            </div>

            <div class="line-break"> </div>
            <div class="card--work-history">
                <strong> πŸ‡²πŸ‡½ BACK-END DEVELOPER | DIGTRAN.MX</strong>
                <p> 08/2020 - 01/2022 </p>
                <p>Worked on making Agora’s Web Based SDK more accessible through video tutorials, articles, demo projects and event based training. Also building out React UI components & leading a team to re-design Agora’s documentation and api reference.</p>
                <ul>
                    <li>Doubled Web SDK’s monthly usage minutes from 15 million to 30 million minutes within my first 4 months</li>
                    <li>Produced educational video content which resulted in 300k+ views on youtube</li>
                </ul>
            </div>

            <div class="line-break"> </div>
            <div class="card--work-history">
                <strong> πŸ‡¬πŸ‡§ REACT DEVELOPER JR | HUB.UK</strong>
                <p> 08/2021 - 11/2021 </p>
                <p>Worked on making Agora’s Web Based SDK more accessible through video tutorials, articles, demo projects and event based training. Also building out React UI components & leading a team to re-design Agora’s documentation and api reference.</p>
                <ul>
                    <li>Doubled Web SDK’s monthly usage minutes from 15 million to 30 million minutes within my first 4 months</li>
                    <li>Produced educational video content which resulted in 300k+ views on youtube</li>
                </ul>
            </div>
        </section>

        <div class="line-break"> </div>
            <div class="card--work-history">
                <strong> πŸ‡²πŸ‡½ REACT DEVELOPER JR | FREELANCER </strong>
                <p> 04/2021 - 05/2021 </p>
                <p>Worked on making Agora’s Web Based SDK more accessible through video tutorials, articles, demo projects and event based training. Also building out React UI components & leading a team to re-design Agora’s documentation and api reference.</p>
                <ul>
                    <li>Doubled Web SDK’s monthly usage minutes from 15 million to 30 million minutes within my first 4 months</li>
                    <li>Produced educational video content which resulted in 300k+ views on youtube</li>
                </ul>
            </div>
        </section>


        <!-- Section Personal Projects -->
        <section class="section--page">
            <h2> Personal Projects </h2>

            <div class="card--project">
                <a href=" https:// "><span> πŸ’» </span> Create Responsive website of Nft in Html5, Css3 and JavaScript. </a>
            </div>

            <div class="card--project">
                <a href="  https:// "><span> πŸ’» </span> Complete website of Food in Html5, Css3 and JavaScript. </a>
            </div>

            <div class="card--project">
                <a href=" https:// " ><span> πŸ’» </span> Built a website Books in PHP7 and MySQL. </a>
            </div>

            <div class="card--project">
                <a href=" https:// " ><span> πŸ’» </span> Ecommerce platform using paypal with Laravel9. </a>
            </div>

            <div class="card--project">
                <a href=" https:// " ><span> πŸ’» </span> System platform E-commerce MultiVendor with Laravel9. </a>
            </div>

            <div class="card--project">
                <a href=" https:// " ><span> πŸ’» </span> Built a website Nft Cloud in React and Tailwind. </a>
            </div>

            <div class="card--project">
                <a href=" https:// " ><span> πŸ’» </span> Built Food Ordering App in React and nodeJs. </a>
            </div>

            <div class="card--project">
                <a href="" ><span> πŸ’» </span> Built Full Stack Food Delivery App in React Redux, Tailwind and Firebase. </a>
            </div>
        </section>


        <!-- Section Soft Skills -->
        <section class="section--page">
            <h2> soft skills </h2>

            <div class="card--soft-skills">
                <a href="linkedin1.html"><span> 🎩 </span> Remote work for Developers. </a>
            </div> 

            <div class="card--soft-skills">
                <a href="linkedin2.html" ><span> 🎩 </span> basics of telecommuting. </a>
            </div>

            <div class="card--soft-skills">
                <a href="linkedin3.html"><span> 🎩 </span> How to increase resilience. </a>
            </div>

            <div class="card--soft-skills">
                <a href="linkedin4.html"><span> 🎩 </span> Fundamentals of Negotiation. </a>
            </div> 

            <div class="card--soft-skills">
                <a href="linkedin5.html"><span> 🎩 </span> Fundamentals of Productivity. </a>
            </div> 

            <div class="card--soft-skills">
                <a href="linkedin6.html"><span> 🎩 </span> Effective online oral presentations. </a>
            </div> 

            <div class="card--soft-skills">
                <a href="linkedin7.html"><span> 🎩 </span> Human resources: Recruitment of development profiles.. </a>
            </div>

            <div class="card--soft-skills">
                <a href="linkedin8.html" ><span> 🎩 </span> Diversity and inclusion in global companies. </a>
            </div>

            <div class="card--soft-skills">
                <a href="linkedin9.html"><span> 🎩 </span> Digital Transformation: Online teams and collaborative work. </a>
            </div>     
            
            <div class="card--soft-skills">
                <a href="linkedin10.html"><span> 🎩 </span> Well-being, coordination and flexibility at home and at work. </a>
            </div> 
        </section>
    </div>
  
    <!-- Footer -->
    <footer> 
        <div class="footer__content">
            <h3>imh1pst</h3>
            <p class="footer__text">Enthusiastic Back-End and Front-End Developer Jr.
              </br>πŸ‘¨β€πŸš€ Autonomous Developer
            </br>  πŸ‘¨β€πŸ’» #SoftwareEnginner #iA #iOS
            </br> OpenSource: JS - Python
            </br> HomeOffice:πŸ‡΅πŸ‡ͺπŸ‡²πŸ‡½πŸ‡¬πŸ‡§πŸ‡³πŸ‡±πŸ‡ΊπŸ‡Έ 
                  im.h1pst@gmail.com
             </p>
            <ul class="socials">
                <li><a href="#"> <i class="fa fa-facebook"> </i></a></li>
                <li><a href="#"> <i class="fa fa-twitter"> </i></a></li>
                <li><a href="#"> <i class="fa fa-linkedin-square"> </i></a></li>
                <li><a href="#"> <i class="fa fa-github"> </i></a></li>
            </ul>
        </div>
        <div class="footer-bottom">
            <p> copyright <i class="fa fa-copyright"></i>2020 – 2022 Imh1pst. Hecho con <i class="fas fa-heart"></i> en Colombia. designed by <span>Matthias Duarte</span> HipstDeveloper </p>
        </div>
    </footer>


    <!-- JavaScript -->
    <script src="js/main.js"></script>
    <script src="https://kit.fontawesome.com/a060385ce4.js" crossorigin="anonymous"></script>
</body>

</html>
@import url('https://fonts.googleapis.com/css2?family=Hind:wght@300;400;500&family=Major+Mono+Display&family=MuseoModerno:wght@300;400;500&family=Poiret+One&family=Righteous&family=Roboto+Mono:wght@200;400;500&family=Space+Mono:wght@400;700&display=swap');

:root{

    /* Modo Dark */
    --mainTextColor-light:#000;
    --secondaryTextColor-light:rgb(51 51 51);
    --mainLinkColor-light:#0da2b8;
    --mainBorderColor-light:rgb(218, 218, 218);
    --mainBgColor-light:rgb(249, 250,251);

    --mainTextColor-dark:#fff;
    --secondaryTextColor-dark:#adb0b1;
    --mainLinkColor-dark:rgb(30, 190,214);
    --mainBorderColor-dark:#2b3031;
    --mainBgColor-dark:#131415;

    /* Modo Light */
    --mainTextColor:var(--mainTextColor-dark);
    --secondaryTextColor:var(--secondaryTextColor-dark);
    --mainLinkColor:var(--mainLinkColor-dark);
    --mainBorderColor:var(--mainBorderColor-dark);
    --mainBgColor:var(--mainBgColor-dark);
}

/* Fonts 
font-family: 'Righteous', cursive;
font-family: 'Major Mono Display', monospace;
font-family: 'Poiret One', cursive;
    
    font-family: 'Hind', sans-serif;
    font-family: 'Roboto Mono', monospace;
*/

* {
    font-family: 'MuseoModerno', cursive;
    line-height: 1.5em;
    box-sizing: border-box;
    color: var(--mainTextColor);
}

body {
    background-color: var(--mainBgColor);
}

p, span, li {
    color: var(--secondaryTextColor);
    font-family: 'Space Mono', monospace;
    font-size: 1em;
}

a {
    text-decoration: none;
    color: var(--mainLinkColor);
    font-size: 500;
}

a:hover {
    color: #651fff;
}

li {
    line-height: 1.9em; 
}


/*  Container */
#container--main {
    max-width: 700px;
    margin: 0 auto;
}

.section--page {
    padding-top: 1em;
    padding-bottom: 1em;
}

#wrapper--hero {
    display: flex;
    align-items: center;
    gap: 4em;
}

#user__name {
    font-size: 3em;
    line-height: 1em;
}

#biografi, a {
    font-weight: 300;
}

#profile__pic {
    border-radius: 50%;
    width: 150px;
    height: 150px;
    object-fit: cover;
}

#email {
    color: var(--mainTextColor);
}


/* Net Socials Content */
#net_socials--list {
    display: flex;
    justify-content: space-between;
    column-gap: 1em;
    flex-wrap: wrap;
}

#net_socials--list a {
    font-size: 0.9em;
    color: var(--secondaryTextColor);
    transition: 0.3s;
}

#net_socials--list a:hover {
    color: #651fff;
}

#qualifications__list {
    list-style: none;
}

#net_socials--list i {
    font-size: 1em;
    color: #651fff;
}


/* Tech Content */
#wrapper--tech__items {
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
    font-size: 0.9em;
}

.card--tech-stack {
    border: 1px solid var(--mainBorderColor);
    padding: 0.5em 1em;
    border-radius: 5px;
}

.card--work-history {
    border-left: 1px solid var(--mainBorderColor);
    margin-top: 3em;
    margin-bottom: 3em;
    padding-left: 2em;
}

.line-break {
    background-color: var(--mainBorderColor);
    height: 1px;
}


/* Project Content */
.card--project {
    padding-top: 1em;
    padding-bottom: 1em;
    border-top: 1px solid var(--mainBorderColor);
}

.card--project a {
    color: var(--mainLinkColor);
    transition: .3s;
}

.card--project a:hover {
    color: #651fff;
}


/* Soft Skills Content */
.card--soft-skills {
    padding-top: 1em;
    padding-bottom: 1em;
    border-top: 1px solid var(--mainBorderColor);
}

.card--soft-skills a {
    color: var(--mainLinkColor);
    transition: .3s;
}

.card--soft-skills a:hover {
    color: #651fff;
}


/* Media Query */
@media(max-width:600px){

    .section--page{
        padding-top: 1em;
        padding-bottom: 1em;
    }

    #wrapper--hero{
        gap: 1em;
        flex-direction: column;
    }

    #profile-pic{
        width: 200px;
        height: 200px;
    }


    .card--work-history{
        border-left: none;
        padding-left: 0;
    }
}


/* Footer Content */
footer {
    bottom: 0%;
    left: 0%;
    right: 0%;
    background: #111;
    height: auto;
    width: 100vw;
    font-family: 'Hind', sans-serif;
    font-family: 'Poiret One', cursive;
    padding-top: 40px;
    color: #fff;
}

.footer__content {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
}

.footer__content h3 {
    font-size: 1.8rem;
    font-weight: 400;
    text-transform: capitalize;
    line-height: 3rem;
}

.footer__content p {
    max-width: 500px;
    margin: 10px auto;
    line-height: 28px;
    font-size: 14px;
}

.socials {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 1rem 0 3rem 0;
}

.socials li {
    margin: 0 10px;
}

.socials a{
    text-decoration: none;
    color: #fff;
}

.socials a i{
    font-size: 1.1rem;
    transition: color .8s ease;
}

.socials a:hover i{
    color: #651fff;
}

.footer-bottom {
    background: #000;
    width: 100vw;
    padding: 20px 0;
    text-align: center;
}

.footer-bottom p{
    font-size: 14px;
    word-spacing: 2px;
    text-transform: capitalize;
}

.footer-bottom span {
    text-transform: uppercase;
    opacity: .4;
    font-weight: 200;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.