import React, {Component} from 'react';
import '../App.css'

class Home extends Component {
    render() {
        return (
            <div className={"home-container "}>
                <div className={"skill-item animated fadeIn"}>
                    <h2 className={"inner-title"}>Introduction</h2>
                    <p>After putting 20 hours in of deliberate practice, I have designed and developed this website to
                        showcase the new skills that I have gained over the past few weeks. This entire website combines
                        aspects of every skill that I have learned, and is also built using React.JS</p>
                </div>
                <div className={"skill-item animated fadeIn delay-1s"}>

                    <h2 className={'inner-title'}>Design and Typography</h2>
                    <p>The design tutorial that I was following discussed having a simple navigation system and also an
                        uncluttered design. I tried to emulate these ideas by having a straightforward and aesthetically
                        pleasing design for this website, with a blue and white color scheme. I also have included a
                        good amount of whitespace for added legibility an reduced clutter. My typography tutorials
                        discussed how to utilize custom fonts on
                        a
                        webpage, as well as which fonts to choose depending on the type of webpage. I chose the Raleway
                        font
                        from Google Fonts because I felt that it was a great combination of not only legibility but also
                        aesthetics. </p>
                </div>
                <div className={"skill-item animated fadeIn delay-2s"}>

                    <h2 className={'inner-title'}>CSS Animations and Transitions</h2>
                    <p>I was always interested in how to make a website more interactive through the use of animaitons,
                        but I never realized how intuitive it is to do so until I discovered the Animate.CSS library
                        through this assignment. Animate.CSS allows you to add well-designed animations to any element
                        on your webpage simply by adding a class tag of the desired animation as well as any potential
                        timing tweaks. I have animated the transitions between each page of this website using
                        Animate.CSS and the FadeIn animation. In addition, the title is animated using a combination of
                        BounceIn and FadeIn. I have also added a CSS transition effect to each section on this homepage
                        using plain CSS by darkening the shadows and increasing hte shadow radius of the element on
                        hover </p>
                </div>

                <div className={"skill-item animated fadeIn delay-3s"}>

                    <h2 className={'inner-title'}>Using React.JS to Create Web Applications</h2>
                    <p>React greatly simplifies the creation of complex web applications, and I had the opportunity to
                        dive into the creation of a web application by following a tutorial to create a Youtube browser
                        using React as well as the Youtube API. The application allows a user to search for videos, see
                        the top 5 search results, and also play videos. After completing that tutorial, I built this
                        website in React as well for more practice, and to make it easier to showcase all of the skills
                        I have gained in one place. This webpage is built as a Single Page Application, which means that
                        it technically only functions off of a single webpage, and the links and address bar function as
                        a way to switch to a desired section as a website, but the website never technically reloads.
                        This improves the speed of the website, as well as the user experience as the user never has to
                        wait for the website to load again after its initial load.
                        You can find the Youtube Player web app under the React tab on the navigation menu.</p>
                </div>
                <div className={"skill-item animated fadeIn delay-4s"}>

                    <h2 className={'inner-title'}>Using D3.JS to Create Interactive Data Visualizations</h2>
                    <p>During the first assignment I was having trouble with the constraints of Tableau, and was hoping
                        to be able to somehow combine my programming experience with data visualization. After some
                        research, I stumbled upon the D3.JS library, which allows you to generate interactive and
                        detailed visualizations using Javascript. This library is very nuanced, which is great when
                        you're trying to create a specific visualization, but is a bit intimidating if you're just
                        getting started. I have found several libraries that integrate React with D3 and hope to make
                        use of them for this course. I have focused primarily on the react-simple-maps library which
                        utilizes D3 to simplify the process of creating map-based visualizations. Given that my
                        Pittsburgh Dataset assignment was particularly map-heavy, I felt that that was the most
                        appropriate library to learn. Using the documentation on the website, I was able to create a
                        visualization of every capital city of South America. Unfortunately, it seems as though Github
                        Pages is making the map behind each node not appear. </p>
                </div>
            </div>
        );
    }
}

export default Home;