index.html

<!DOCTYPE html>
<html>

<head>

    <meta charset=UTF-8>
    <meta content=website property=og:type>
    <meta content=index.html property=og:url>
    <meta content=1716 property=og:image:width>
    <meta content=960 property=og:image:height>
    <meta content="JVMarks" property=og:title>
    <meta content=asset/img/og.png property=og:image>
    <meta content="Web Developer" property=og:description>
    <meta content="IE=edge,chrome=1" http-equiv=X-UA-Compatible>
    <meta content="text/html; charset=utf-8" http-equiv=content-type>
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name=viewport>

    <link href=asset/img/icons/favicon.ico hreflang=en-us rel=icon type=image/png>
    <link href="https://fonts.googleapis.com/css?family=Inconsolata:400,700" rel=stylesheet>

    <link rel="stylesheet" href="asset/css/bootstrap.min.css" />
    <link href=asset/css/main.css hreflang=en-us rel=stylesheet>
    <link href=asset/css/header.css hreflang=en-us rel=stylesheet>
    <link href=asset/css/responsive.css hreflang=en-us rel=stylesheet>


    <title>Portifolio</title>

</head>

<body>
    <header>
        <nav class="">
            <div class="container">
                <ul>
                    <li><a class="anc-link" href="#index" id="home">Home</a></li>
                    <li><a class="anc-link" href="#about">About</a></li>
                    <li><a class="anc-link" href="#experience">Projects</a></li>

                    <li>
                        <div id="site">
                            <div class=switch-wrapper>
                                <div class=sun></div>
                                <div class=toggle-wrapper>
                                    <input id="switch" type=checkbox> <label for=switch id=toggle>Toggle</label>
                                </div>
                                <div class="moon"></div>
                            </div>
                    </li>

                    <li class="float-right" style="margin-top: -8px;">
                        <a class="btn btn-outline-dark"
                            href="https://docs.google.com/forms/d/e/1FAIpQLSfZqX4VybeoXWrJjELqFf_i8Us1KGOkcpEJ2eRWYT2bQ68ddA/viewform?usp=sf_link"
                            target="blank">Contact</a>
                    </li>
                </ul>
            </div>
        </nav>
    </header>

    <header class="intro" id="index">
        <h1 class=intro__hello>
            Greetings!!
            <span class="emoji wave-hand animated">
                <img alt=emoji class=emoji src="asset/img/icons/console.png">
            </span>
        </h1>
        <h2 class=intro__tagline>
            I'm
            <span class=name>
                João Victor
            </span>
            self-taught Javascript Programmer & UX Designer focused on getting the job done.
            <span class="emoji technologist">
            </span>
        </h2>

        <h3 class=intro__contact>
            <span>
                Get in touch
            </span>
            <span class="emoji pointer">
                <img alt=emoji class=emoji src="asset/img/icons/email.png">
            </span>
            <span>
                <a class=highlight-link href=mailto:jovic.marks@gmail.com target=_blank>
                    <span class=__cf_email__>
                        jovic.marks@gmail.com
                    </span>
                </a>
            </span>
        </h3>
    </header>

    <section class="section background" id="about">
        <div class=section__title>
            About
        </div>
        <div class=section__content>
            <p>
                Currently I'm studying as a information systems Student at
                <a class=underline-link style="text-decoration: none" href="https://www.fiap.com.br/" target="_blank">
                    Faculdade de Informática e Administração Paulista.
                </a>
                one of my great abilities is to understand what the client want and what he need.
            </p>
            <p>
                Being a Javascript Programmer, I love creating applications that are scalable and
                efficient under the hood while providing engaging.
            </p>
            <p>
                <strong>
                    When I'm not in front of a computer screen
                </strong>
                , I'm probably on the gym, watching movies, playing video Game,
                or having some fun with my friends.
            </p>
            <a class=status style="text-decoration: none"
                href="https://drive.google.com/file/d/10CBXgFhYkWQYRrA_HvZWL0QzoJXI88iU/view?usp=sharing" target=_blank>
                <div class=status__light>
                    <div class=status__light__ring></div>
                    <div class=status__light__led></div>
                </div>
                <div class='underline-link status__message'>
                    View My Resume!
                </div>
            </a>
        </div>
    </section>

    <section class="section skills">
        <div class=section__title>
            Skills
        </div>
        <div class=section__content>
            <div class=skillz>
                <div class=skillz__category>
                    <div class=skillz__category__label>
                        Languages
                    </div>
                    <ul>
                        <li class=skillz__category__item>JavaScript</li>
                        <li class=skillz__category__item>HTML</li>
                        <li class=skillz__category__item>C++</li>
                        <li class=skillz__category__item>CSS</li>
                        <li class=skillz__category__item>SQL</li>
                    </ul>
                </div>
                <div class=skillz__category>
                    <div class=skillz__category__label>
                        Frameworks
                    </div>
                    <ul>
                        <li class=skillz__category__item>ExpressJS</li>
                        <li class=skillz__category__item>Angular</li>
                        <li class=skillz__category__item>ReactJS</li>
                    </ul>
                </div>

                <div class=skillz__category>
                    <div class=skillz__category__label>
                        Tools
                    </div>
                    <ul>
                        <li class=skillz__category__item>Visual Studio Code</li>
                        <li class=skillz__category__item>Git & Github</li>
                        <li class=skillz__category__item>Macbook</li>
                        <li class=skillz__category__item>Windows</li>
                    </ul>
                </div>

                <div class=skillz__category>
                    <div class=skillz__category__label>
                        Design
                    </div>
                    <ul>
                        <li class=skillz__category__item>Video Editor</li>
                        <li class=skillz__category__item>PhotoShop</li>
                    </ul>
                </div>
            </div>
        </div>
    </section>

    <section class="section experience">
        <div class=section__title>
            Experience
        </div>
        <div class=section__content>
            <div class=jobs>
                <div class=job>
                    <div class=time-place>
                        <div class=job__company>
                            <a>Faculdade de Informática e Administração Paulista</a>
                        </div>
                        <div class=job__time>
                            Fev 2020 - Present
                        </div>
                    </div>
                    <div class=job__position>
                        Student
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="section experience">
        <div class=section__title>
            Certification
        </div>
        <div class=section__content>
            <div class=jobs>
                <div class=job>
                    <div class=time-place>
                        <div class=job__company>
                            <a href="https://drive.google.com/file/d/1K94mfpf6NofX5qQQLpP24Lzc36JRGkd9/view?usp=sharing"
                                target=_blank>
                                Omnistack Week 11.0
                            </a>
                        </div>
                        <div class=job__time>
                            Mar 2020 - Mar 2020
                        </div>
                    </div>
                    <div class=job__position>
                        Rocketseat
                    </div>
                </div>
                <div class=job>
                    <div class=time-place>
                        <div class=job__company>
                            <a href="https://drive.google.com/file/d/1DfqIZPtQU3UIfRht_BcdFY8fDfuV3OpC/view?usp=sharing"
                                target=_blank>
                                Responsive Web Development
                            </a>
                        </div>
                        <div class=job__time>
                            Aug 2020 - Aug 2020
                        </div>
                    </div>
                    <div class=job__position>
                        FIAP
                    </div>
                </div>
                <div class=job>
                    <div class=time-place>
                        <div class=job__company>
                            <a href="https://drive.google.com/file/d/1GhAesfW31KxvIK10UPMiyUQmo4oZF2hF/view?usp=sharing"
                                target=_blank>
                                Mobile Development
                            </a>
                        </div>
                        <div class=job__time>
                            Jun 2020 - Jun 2020
                        </div>
                    </div>
                    <div class=job__position>
                        FIAP
                    </div>
                </div>
            </div>
    </section>

    <section class="section featured-projects" id="experience">
        <div class=section__title>
            Featured Projects
        </div>
        <div class=section__content>
            <div class="project screentime">
                <figure class="project__pic phones">
                    <a href="https://airdndv2.herokuapp.com/" target=_blank>
                        <div class=phone>
                            <img alt src="asset/img/featured/screentime/aircnc.png">
                        </div>
                    </a>
                </figure>
                <figcaption class=project__caption>
                    <div class=project__name>
                        <a href="https://airdndv2.herokuapp.com/" target=_blank>AIRCNC</a>
                    </div>
                    <p>
                        AIRCNC is a platform for people who want to create, buy, and sell classes about technology to
                        anyone.
                    </p>
                </figcaption>
            </div>
        </div>
    </section>

    <section class="section featured-projects">
        <div class=section__title>

        </div>
        <div class=section__content>
            <div class="project screentime">
                <figure class="project__pic phones">
                    <a href="https://bethehero12.herokuapp.com/" target=_blank>
                        <div class=phone>
                            <img alt src="asset/img/featured/screentime/bethehero.png">
                        </div>
                    </a>
                </figure>
                <figcaption class=project__caption>
                    <div class=project__name>
                        <a href="https://bethehero12.herokuapp.com/" target=_blank>BE THE HERO</a>
                    </div>
                    <p>
                        Be The Hero is a platform created to helping NGOs with social support in their cases in need.
                    </p>
                </figcaption>
            </div>
        </div>
    </section>

    <section class="section other-projects">
        <div class=section__title>
            Other Projects
        </div>
        <div class=section__content>
            <div class=project>
                <div class=project__name>
                    <a class=arrow-link href="https://github.com/JVMarks" target=_blank>C.P.L.R</a>
                </div>
                <p>
                    C.P.L.R is a project for a science fair, which a platform where students can add the projects,
                    where the teachers and family members can evaluate the projects, etc...
                    ( This project was possible by me and my partner
                    <span>
                        <a class=highlight-link href="http://danieldoria.000webhostapp.com/" target=_blank>
                            <span class=__cf_email__>
                                Daniel Doria
                            </span>
                        </a>
                    </span> ).
                </p>
                <div class=project__used>
                    <span class=project__used__item>PHP</span>
                    <span class=project__used__item>AndroidStudios</span>
                    <span class=project__used__item>MYSQL</span>
                </div>
            </div>
    </section>

    <footer class="footer">
        <div class="footer__copyright">
            <div class="bottom">
                <span>JVMarks</span> <img alt=emoji class="emoji" src=asset/img/fo.png>
                <span>2020</span>
            </div>
        </div>

        <div class="footer__links">
            <a href=https://www.facebook.com/joaovictor.marks.73 target=_blank title=facebook>
                <span class="text">facebook</span>
                <img alt=facebook src=asset/img/social/facebook.svg>
            </a>
            <a href="https://twitter.com/marks131" target=_blank title=twitter>
                <span class="text">twitter</span>
                <img alt=twitter src=asset/img/social/twitter.svg>
            </a>
            <a href="https://www.instagram.com/jv.marks/?hl=pt-br" target=_blank title=instagram>
                <span class="text">instagram</span>
                <img alt=instagram src=asset/img/social/instagram.svg>
            </a>
            <a href=https://github.com/JVMarks target=_blank title=github>
                <span class="text">github</span>
                <img alt=github src=asset/img/social/github.svg>
            </a>
            <a href="https://www.linkedin.com/in/jo%C3%A3o-victor-marks-74b26a193/" target=_blank title=linkedin>
                <span class="text">linkedin</span>
                <img alt=linkedin src=asset/img/social/linkedin.svg>
            </a>
            <a href="https://codepen.io/marks_13" target=_blank title=codepen>
                <span class="text">codepen</span>
                <img alt=codepen src=asset/img/social/codepen.svg>
            </a>
        </div>
    </footer>

    <button id=top-button><img alt src="asset/img/icons/seta.png"></button>
    </div>

    <script charset=utf-8 src=asset/jquery.min.js type=text/javascript></script>
    <script charset=utf-8 src=asset/scrollreveal.min.js type=text/javascript></script>
    <script charset=utf-8 src=asset/js/main.js type=text/javascript></script>
</body>

</html>