schlagoo.github.io/project_2.html at master · Schlagoo/schlagoo.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://fonts.googleapis.com/css?family=Montserrat:600,700,800" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
        integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
    <link rel="stylesheet" href="./style.css">
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
    <script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js"></script>
    <link rel="stylesheet" href="./code.css">
    <title>Pascal Schlaak | Portfolio</title>
    <link rel="icon" type="image/png" href="./imgs/icons/logo_small.svg">
</head>

<body>
    <div id="app">
        <navbar-normal></navbar-normal>
        <navbar-small></navbar-small>
        <hamburger></hamburger>
        <section id="project">
            <img src="./imgs/dots.png" id="dots">
            <div class="container project-text">
                <h1>Visualization of container ship pollution</h1>
                <div class="flex-row">
                    <div class="column-65">
                        <p class="text">In this lecture our task simply was to visualize data.
                            For that matter we needed to search for suited data which can be visualized in a fancy way.
                            We had some ideas and finally agreed on containership pollution.
                        </p>
                        <p class="text">The idea we finally realized was a storytelling interface where we could
                            visualize our research.
                            We wanted to show the audience how bad pollution of container ships is compared to daily
                            used things
                            like
                            cars.
                            For that we created a website where we can illustrate facts.
                            In summary we seperated our story in five facts. With every fact we tell something about
                            container
                            ship
                            pollution or compare things against eachother.
                            A visitor can read our story by scrolling through those facts.
                        </p>
                        <p class="text">After our research we began to sketch some mockups. In summary we had five
                            iterations in our design.
                            During designing we also got ourselves into typography by meeting some helpful people.
                            At the end we began to implement everything in our website. Therefor we used GSAP for some
                            professional
                            animations.
                        </p>
                        <p class="text">In the following you can see our facts as pictures.
                        </p>
                        <div class="graph">
                            <p class="text bold">Webpage slides</p>
                            <img src="./imgs/project_2/fact_1.png" style="margin-top: 0;">
                            <img src="./imgs/project_2/fact_2.png">
                            <img src="./imgs/project_2/fact_3.png">
                            <img src="./imgs/project_2/fact_4.png">
                            <img src="./imgs/project_2/fact_5.png">
                        </div>
                    </div>
                    <div>
                        <div class="information border">
                            <p class="text"><b>Type</b></p>
                            <p class="text">Bachelor studies lecture</p>
                            <p class="text"><b>Tools</b></p>
                            <p class="text">JavaScript, GSAP, Adobe Illustrator</p>
                            <p class="text"><b>Partners</b></p>
                            <p class="text">Tim Weise</p>
                            <p class="text"><b>Date</b></p>
                            <p class="text">2017-04-27</p>
                            <p class="text"><b>Source</b></p>
                            <p class="text">Private</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <footer-portfolio></footer-portfolio>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $('#hamburger, #home, #proj, abo').click(function () {
                $("#hamburger").toggleClass('open');
            });
        });
    </script>
    <script type="text/javascript" src="./main.js"></script>
</body>

</html>