WebsProjectJaar1Blok1/about-marty.html at master · Martijnpold/WebsProjectJaar1Blok1 · 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
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
<!DOCTYPE html>
<html>

<head>
    <title>Website | Marty</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
    <link rel="stylesheet" href="css/font-awesome-4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link rel="stylesheet" type="text/css" href="css/homebarV2.css">
    <link rel="stylesheet" type="text/css" href="css/parallax.css">
    <link rel="stylesheet" type="text/css" href="css/about-marty.css">
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script>
        $(window).scroll(function () {
            var scroll = $(window).scrollTop();
            var height = $(window).height();
            var offset = height / 4;
            var visible = height / 4;
            var fade = height / 4;

            var i = 1;
            while ($(".fade" + i)[0]) {
                var center = height * (i - 1) + offset;
                var dist = Math.abs(center - scroll);
                var progress = (dist - visible) / fade;
                if (progress <= 1) {
                    opac = Math.abs(progress - 1);
                    if(opac > 0.75) opac = 0.75;
                    $(".fade" + i).css("opacity", opac);
                    $(".fade" + i).css("display", "block");
                } else {
                    $(".fade" + i).css("opacity", 0);
                    $(".fade" + i).css("display", "none");
                }
                i++;
            }

            //$(".fade1").css("opacity", 1 (v-offset)/(h/4));
            //if(v > h) $(".fade2").css("opacity", 1 v/(h/2)+0.1);
        });
    </script>
</head>

<body>
    <header class="homebar">
        <img class="logo" src="resources/logo.png">
        <p class="text link">www.website.com</p>
        <nav>
            <label for="hammenu" class="fa fa-bars text hamburgerbutton" aria-hidden="true"></label>
            <input class="hammenu" id="hammenu" type="checkbox">
            <ul>
                <li>
                    <a href="home.html" class="text">Home</a>
                </li>
                <li>
                    <a href="#" class="text">About</a>
                    <ul>
                        <li><a href="about-marty.html" class="text">Marty</a></li>
                        <li><a href="about-ymke.html" class="text">Ymke</a></li>
                    </ul>
                </li>
                <li>
                    <a href="gallery.html" class="text">Gallery</a>
                </li>
                <li>
                    <a href="contact.html" class="text">Contact</a>
                </li>
            </ul>
        </nav>
    </header>
    <div class="homebar-reserve"></div>
    <div class="parallax pl1">
        <div id="debug" class="caption">
        </div>
        <div class="caption fade1">
            <p><b>Martijn Polderman</b></p>
        </div>
    </div>
    <div class="parallax pl2">
        <div class="caption fade2">
            <p><b>Freelance Java Developer & Gamer</b><br> Born on: 16 nov 1998<br> Hello! My name is Martijn. I'm a Dutch Avans
                student from Den Bosch. Currently I am in my first year of college. My job is being a Freelance Java Developer,
                more information about my work can be found in the job section.
            </p>
        </div>
    </div>
    <div class="parallax pl1">
        <div class="caption fade3">
            <p>
                <b>Experience in:</b></br>
                Java</br>
                GML</br>
                HTML + CSS</br>
                SQL</br>
                C++</br>
                Python</br>
                Sleeping</br>
            </p>
        </div>
    </div>
    <div class="parallax pl2">
        <div class="caption fade4">
            <p>
                <b>Hobbies: </b></br>
                Gaming</br>
                Reading</br>
                Programming</br>
                Swimming<br>
                Again... Sleeping...
            </p>
        </div>
    </div>
    <div class="parallax pl1">
        <div class="caption fade5">
            <p>
                <b>Job:</b></br>
                <a href="http://skylegends.org/">SkyLegends</a></br>
                <a href="http://minesuperior.com/">MineSuperior</a></br>
                <a href="http://www.islandmc.com/">IslandMC</a><br> Sadly not sleeping this time...
            </p>
        </div>
    </div>
    <div class="parallax pl2">
        <div class="caption fade6">
            <p>
                <b>Contact:</b></br>
                <a href="https://www.youtube.com/channel/UCPziF3pSau8DD6htmGjy3Hg?view_as=subscriber">YouTube - My YouTube Channel</a></br>
                <a href="https://twitter.com/MartijnPold">Twitter - My Twitter Page</a></br>
                <a href="mailto:mrpolder@avans.nl">E-mail - Click to E-Mail me!</a>
            </p>
        </div>
    </div>
    <div class="footer-reserve"></div>
    <footer class="footer">
        <p>
            &copy; Marty & Ymke 2017
        </p>
        <a href="overview.html">Overview</a>
    </footer>
</body>

</html>