Untitled

<html>

    <head>

   <style>
body {
    -webkit-animation: colorchange 60s infinite;
    animation: colorchange 60s infinite;
}
@-webkit-keyframes colorchange {
     0%  {background: #e6ccff;}
    25%  {background: #e6ccff;}
    50%  {background: #e6ccff;}
    75%  {background: #e6ccff;}
    100% {background: #e6ccff;}
}
@keyframes colorchange {
     0%  {background: #e6ccff;}
    25%  {background: #e6ccff;}
    50%  {background: #e6ccff;}
    75%  {background: #e6ccff;}
    100% {background: #e6ccff;}
}
        </style>

        <style>
body {margin:0;}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  position: fixed;
  top: 0;
  width: 100%;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover:not(.active) {
  background-color: #111;
}

.active {
  background-color: #e6ccff;
}
</style>

    <meta charset="utf-8"/>


    <title>Zachary Vanzile's Grand site </title>
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/bootstrap-theme.min.css">
     <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

    </head>

    <header>

        <a name="home"></a>

    <h1>Zachary Vanzile's Grand site</h1>


        <div class="container">
            <div class="row">
                <div class="col-sm-12">

                    <div id="myslider" class="carousel slide" data-ride="carousel">

                        <!-- indicators dot nov -->
                        <ol class="carousel-indicators">
                            <li data-target="#myslider" data-slide-to="0" class="active"></li>
                            <li data-target="#myslider" data-slide-to="1"></li>
                            <li data-target="#myslider" data-slide-to="2"></li>
                        </ol>

                        <!-- wrapper for slides-->
                        <div class="carousel-inner">
                            <div class="carousel-item active">
                                <img class="d-block w-100" width="1300" height="600" src="pilot/happy.jpg" alt="happy">
                                <div class="carousel-caption d-none d-md-block">
                                    <h5>A happy boy</h5>
                                    <p>he was happy once</p>
                                </div>
                            </div>
                            <div class="carousel-item">
                                <img class= "d-block w-100" width="1300" height="600" src="pilot/eh.jpg" alt="eh">
                                <div class="carousel-caption d-none d-md-block">
                                    <h5>A meh boy</h5>
                                    <p>he's very bored</p>
                                </div>
                            </div>
                            <div class="carousel-item">
                                <img class="d-block w-100" width="1300" height="600" src="pilot/sad.jpg" alt="sad">
                                <div class="carousel-caption d-none d-md-block">
                                    <h5>A sad boy</h5>
                                    <p>help him</p>
                                </div>
                            </div>
                        </div>

                        <a class="carousel-control-prev" href="#myslider" role="button" data-slide="prev">
                            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                            <span class="sr-only">Previous</span>
                        </a>
                        <a class="carousel-control-next" href="#myslider" role="button" data-slide="next">
                            <span class="carousel-control-next-icon" aria-hidden="true"></span>
                            <span class="sr-only">Next</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>


    </header>

    <body>

    <ul>
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#aboutme">About Me</a></li>
  <li><a href="#image">Image Editing</a></li>
  <li><a href="#audio">Audio</a></li>
  <li><a href="#video">Video</a></li>
  <li><a href="#new-tech">New Technologies</a></li>
  <li><a href="#blog">My blog</a></li>
  <li><a href="#special">special section</a></li>
    </ul>

        <div class="row">
            <div class="col-md-3">
                <a name="aboutme"></a>
                <h2>About Me</h2><img src="pilot/me.gif" />
             </div>
        </div>

        <div class="row">
            <div class="col-md-6">
                Hi! My name is Zachary vanzile, I came into this class wanting to learn more about the digital world and how that knowlege can help me with my endevors of facing the world and it's future of the technological era. This world is advancing very fast now these days, and since i'm still young and spry grwoing up in this generation, it is almost like it's my duty to adapt with it so i can help this world and be a contributing member of society in it! I've never been the most technological man, i've really only used a computer enough so that i can really get what i need for the programs i use to work on a day to day basis, but after taking this class i can say that i have learned a lot of ways to help my self in a variety of different situations.
            </div> <div class="col-md-6">

                <img src="pilot/funniman.jpeg" />

            <p>image of me!</p>
            <a href="https://zacharysresume.000webhostapp.com"> <button>My Resume</button></a>
            </div>
        </div>

        <div class="row">
            <div class="col-md-6">
                <a name="image"></a>
                <h2>Image Editing Experience</h2><img src="pilot/me2.gif" />
            </div>
        </div>

        <div class="row">
            <div class="col-md-6">
                <h4>Histogram</h4>
            </div>
        </div>
        <div class="row">
            <div class="col-md-6">
                    <p>One of the assighnments i had to do for this Was to fiddle around a bit with photoshop's histogram function. I wanted to have a more darker, night time look to the picture, but i didn't want to go over board with it, so i took a more subtle approach with this flower to make it look like it's only slightly basking in the sun during a 6 pm evening.</p>
            </div><div class="col-md-6">
                <img src="pilot/flower.png">
            </div>
        </div>

        <div class="row">
            <div class="col-md-6">
                <a name="audio"></a>
                <h2>Audio Experience</h2><img src="pilot/me%203.gif" />
            </div>
        </div>
        <div class="row">
            <div class="col-md-6">
                <h4>Social media inderview</h4>
                <p>For this project i had to interview a family member (my brother) about the hot technological issues that are currently pleaging our scociety. I chose jazz for this assighnment, it's really good for setting a certian mood, a mood that serenates the listener, calms them down a bit, but also gets them ready because jazz is also the kind of music you listen to when your ready to get some awnsers out of people with your riveting questions.</p>
                <a href="https://soundcloud.com/zach-dewd/zachary-vanzile-interview">
                    <button>The interview</button></a>
            </div><div class="col-md-6">
                <h4>My Podcast</h4>
                <p>This project was similar to the Social media interview project, but this one was a bit more chill and relaxed discussion about the going ons of the current technological world. I kind of sprung this assighnment on my brother a little bit suddenly so he didn't really have much of an insight on the topics i had prepared for him, but that's ok because i din't want to stress him out too hard about thinking about what to say for this minisode because i wanted it to be structured more like a normal conversation, and in conversations we're not always bursting with charisma at the seams, we some times fumble over our words a little bit thinking really carefully about what we want to say next.</p>
                <a href="https://soundcloud.com/zach-dewd/vanzilezacharyminisode">
                    <button>The podcast</button></a>
            </div>
        </div>

        <div class="row">
            <div class="col-md-6">
                <a name="video"></a>
                <h2>Video Experience</h2><img src="pilot/me4.gif" />
            </div>
        </div>
        <div class="row">
            <div class="col-md-3">
                <h4>Digital Storytelling</h4>
                <p>For this project i had to make a video essay about myself and a little bit about my life. Normally I'm the kind of man who likes to make silly little cartoon videos with his silly little cartoon characters, but, despite the silly format and cartoonish looking character that represents myself, i decided to make this video a bit more of a serious one of sorts, a one that comes from the heart and hopefully inspires a fellow viewer watching it, because, as i said in my video, that is what i'm really reaching out to do as a cartoonist</p>
             </div><div class="col-md-3">
                <iframe width="300" height="200" src="https://www.youtube.com/embed/gujii_vyRkc" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
            </div><div class="col-md-3">
                <h4>VFX</h4>
                <p>For this project I had to really work my skills and see what i could really do in adobe after effect. this was my first time really working on the program and i must say i'm really surprised at all of the neat little tricks you can pull off in that program, but i also must say that it comes at a hefty price too! not a monetary one mind you, but at the price of data! If i wanted to make a high quality video, i would have to sacrafice 2.6 gigabites! but if i wanted a low quality video i that would only take about 500 megabites, there wasn't really any inbetween, it was kind of a catch 22. Luckily the effect was able to come across just fine regaurdless of quality.</p>
            </div><div class="col-md-3">
               <iframe width="300" height="200" src="https://www.youtube.com/embed/WpjJm9UCDxQ" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
            </div>
        </div>

        <div class="row">
            <div class="col-md-6">
                <a name="new-tech"></a>
                <h2>New Technologues Challenges</h2><img src="pilot/me5.gif" />
            </div>
        </div>
        <div class="row">
            <div class="col-md-3">
                <h4>Games</h4>
                <p>In this paragraph I will talk about what i learned about games during my time in this class. I learned that games can sometimes drive us apart, but if you make them the right way, they can work a lot like how cartoons do and inspire us and touch our hearts, kind of like David Cage's games, or a game that came out recently titled Death Stranding, a game all about teaching the player why it's good to have connections with others and not be so alone, and that there are always people out there willing to help you out if you just ask.</p>
                <a href="https://www.youtube.com/watch?v=XowcxCYbug0">
                    <button>Watch a video!</button></a>
            </div><div class="col-md-3">
                <h4>Deepfakes</h4>
                <p>In this paragraph I will talk about what I learned about deep fakes. Deep fakes are yet another catch 22 in the technological world, it can be helpful in bringing back the dead in a way, we can use the faces of famos people throughout history and have them teach us about what it was like back in a simpler time, really get the students of the new age imersed and stick in a memory that they will carry for quite a long time, on the other hand it can also be used for evil by putting the faces of celebrities and other important political figures on to quite damning footage and use it for there own devilish gain.</p>
                <a href="https://www.youtube.com/watch?v=BPpnMAcLg6U">
                    <button>Watch a video!</button></a>
            </div><div class="col-md-3">
                <h4>AR/VR</h4>
                <p>In this paragraph i will talk about what I learned about AR and VR technologies. I've learned that this can help our students of the next generation in many helpful ways. As i said in the Deepfake section it is a wonderful way to really get the students immersed in there lessons and give them something they'll never forget. Just taking away there sense of sight for just a few quick minutes to make them almost feel like they're in another world can have quite a few lasting effects on how the brain processes information.</p>
                <a href="https://www.youtube.com/watch?v=eFHj8OVC1_s">
                    <button>Watch a video!</button></a>
            </div>
        </div>

        <div class="row">
            <div class="col-md-6">
                <a name="blog"></a>
                <h2>My Blog</h2><img src="pilot/me6.gif" />
            </div>
        </div>
        <div class="row">
            <div class="col-md-3">
                <p>In this paragraph, I will talk about the blog I made and my experiences with it. It wasn't easy thinking up of some of the subjects i had to put into it, but i must say that i am proud of the section talking about how devilish the video game industry has gotten in these past few years with how they monetize there games in there games by shoving in as many additional purchases as they can and tricking kids who buy these games into gambing all of there family's money away. It is hardly a legal practice and the games industry has been just brushing the line of what is legal and illegal for quite a while now and it's only just this year where some companies have flown too close to the sun and are getting what they had coming to them, governments are wising up and the clock is ticking with some of these companies.</p>
                <a href="https://funniman.com//">
                    <button>The blog</button></a>
            </div>
        </div>

        <div class="row">
            <div class="col-md-6">
                <a name="special"></a>
                <h2>This website</h2><img src="pilot/me7.gif" />
            </div>
        </div>
        <div class="row">
            <div class="col-md-3">
                <p>This site was quite the challenge to make, and i hope it was up to standard, it was quite possibly the most challengeing, yet most rewarding assighnment i've done yet in my college career. At times it felt like just shoving as much code into the sit was the soloution and it worked almost every time, it's kind of a weird feeling, but also right, like putting chips into your turkey sandwich, sure it didn't need it, yet, it doesn't feel right nor complete without it.

                This was a fun little challenge, so here, have this quirky little animation.</p><img src="pilot/me8.gif" />
            </div>
        </div>

  <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

    </body>

    <footer>

        <div class="row">
            <div class="col-md-3">
                <img width="100" height="100" src="pilot/yahoo.png"><p>Email:zachary@Yahoo.com</p>
                <img width="100" height="100" src="pilot/phone.png"><p>Phone:737-555-5555</p>
                <img width="100" height="100" src="pilot/location.jpg"><p>Adress:Florida, Some st. N</p>
            </div> <div class="col-md-3">
                <img width="100" height="100" src="pilot/facebook.png">
                <p>  </p>
                <img width="100" height="100" src="pilot/twitter.png">
                <p>  </p>
                <img width="100" height="100" src="pilot/yoytube.png">
             </div>
        </div>

        <div class="col-md-2">
            <p> Copyright Placeholder co.</p>

        </div>

    </footer>

</html>