YannAnnaert/index.html at master · annaertYann/YannAnnaert · 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
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Yann Annaert</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">
    <link href="https://fonts.googleapis.com/css?family=Comfortaa:700" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <div id="header" class="animated slideInDown" style="animation-delay:0.2s;">
        <div id="links">
            <a href="#highlight">Highlights</a>
            <a href="#small" style="margin:0px 20px;">Works</a>
            <a href="#contacts">Contact</a>
        </div>
    </div>

    <center>
        <div id="middle">
            <div id="title">Yann Annaert</div><br>
            <div id="tagline">
                Engine / Gameplay Programmer<br>

                <button class="btn_one" ; onclick="window.open('YannAnnaert.pdf')">Download Resume</button>
            </div>
        </div>
    </center>

    <div id="highlight">  </div>
    <div id="portfolio">
        <div id="work">
            <h1 style="text-align:center">Highlights</h1>

            <div class="project">
                <h2>Kaiser</h2>
                <div>
                    <img src="Resources/Kaiser.png" width="400" alt="My Image" id="hp" />
                    <div style="margin-left:420px">
                        <p>
                            Go on a campaign to dethrone the kaiser! Build an army, strengthen yourself with powerful
                            artefacts and defeat the forces he sends to stop you. Kaiser is a casual roguelike game
                            where you fight thousands of enemies in an attempt to become the new kaiser.
                        </p>
                        <p>
                            Kaiser is a game made from scratch in C++ using the Crusade framework. The game was ment
                            to solely serve as a porfolio piece but has in the meantime been released as a full game on
                            Steam and Itch.io. Kaiser features a great amount of mechanics showcasing my capabilities as
                            a gameplay programmer.
                        </p>
                        <p>
                            Features:
                            <br>-Character controls, Camera, UI and UI interaction, Combat systems
                            <br>-AI behaviors, Inventory systems, Player feedback, World procedural generation
                            <br>-File loading / saving, Menu systems, Sound
                        </p>
                    </div>
                </div>

                <div id="DivWithClear"> </div>
                <!--<div>  <button class="btn_one"; onclick="window.open('https://yannannaert.itch.io/kaiser')">visit project </button> </div>-->

            </div>

            <div class="project">
                <!--<h2>Crusade Framework</h2>-->
                <div>
                    <img src="Resources/Engine.png" width="400" alt="My Image" id="hp" />
                    <div style="margin-left:420px">
                        <p>
                            The Crusade framework is a custom C++ framework used specifically for making 2D games.
                            It's been reworked multiple times throughout my education as my C++ proficiency increased.
                            Crusade started out as an inheritance based framework but has scince then evolved into using
                            a component based system. I made multiple failed/succesful projects using the framework.
                            Currently Crusade uses the SDL/OpenGL libraries for low level acces to audio, graphics and controls.
                            It features multiple services and design patterns showcasing my capabilites as an engine programmer.
                        </p>
                        <p>
                            Features:
                            <br>-Game loop, Scene management, GameObjects, Entity Component System, Prefabs
                            <br>-Services and interfaces for: Audio , Graphics, Input, Resources, Events
                            <br>-Crusade components: Collision, Texture rendering, Text rendering, Camera, Animation,UI...
                            <br>-Utilies: Movement steering, Behavior trees, Delay, Math, Singleton...
                        </p>
                    </div>
                </div>
                <div id="DivWithClear"> </div>
                <div>  <button class="btn_one" onclick="window.open('https://store.steampowered.com/app/2186100/Kaiser/?beta=0')">Visit Project </button>  <button class="btn_one" onclick="window.open('https://github.com/annaertYann/Crusade-Framework')">Visit Framework </button> </div>
            </div>


            <div class="project">
                <h2>Machine learning in Tetris</h2>
                <div>
                    <img src="Resources/Tetris.gif" width="400" alt="My Image" id="hp" />
                    <div style="margin-left:420px">
                        <p>
                            As my graduation work for the DAE course i did research into the machine learning topic and
                            applied this to the game of Tetris. For this I used an emulator to play the gameboy version
                            of the game. In this project I tackled 3 main problems: information gathering, AI and AI training.
                            <br>
                            <br>Information Gathering: translating pixel colors and patterns into usefull information for the AI to use.
                            <br>AI: Decisions on where to place blocks are made through heuristics. These allow an AI agent to guess
                            the next best move. Placing these heuristics into a neural network as inputs allow for the best results.
                            <br>AI Training: Training the neural network was done trough a genetic algorithm. In this algorithm a population
                            of agents is created and simulated. The best agents are used to create the next population resulting in a loop
                            were each generation of agents is better than the previous one.
                            The final agent was able to complete a game of Tetris with a 100 000 points, unlocking an easter egg as was my goal.
                        </p>
                    </div>
                </div>
                <div id="DivWithClear"> </div>
                <div>  <button class="btn_one" onclick="window.open('Resources/Paper.pdf')">Visit Project </button>  <button class="btn_one" onclick="window.open('https://studenthowest-my.sharepoint.com/:u:/g/personal/yann_annaert_student_howest_be/EcZVelhiR9hNo96F1c_pAYwBD9Vlj_Gz6JtoPi9nAefRfQ?e=bfZvey')">Visit Files </button> </div>
            </div>

        </div>
        <div id="small">  </div>
        <div id="contact">
            <h1>Personal Projects</h1>

            <div class="row">
                <div class="column">BouncyBall Deluxe </div>
                <div class="column">Formations</div>
                <div class="column">HTML Porfolio Page</div>
            </div>
            <div id="DivWithClear"> </div>
            <div class="row">
                <div class="column">  <img src="Resources/BouncyBall.png" width="400" alt="My Image" /></div>
                <div class="column">  <img src="Resources/Formations.gif" width="400" alt="My Image" /></div>
                <div class="column">  <img src="Resources/Banner.png" width="400" alt="My Image" /></div>
            </div>
            <div id="DivWithClear"> </div>
            <div class="row">
                <div class="column">  Mobile game project made in the Unity game engine.  <br>Released on the google play store. </div>
                <div class="column">  Research project developed during DAE course.  <br>Individual 2D agents forming tactical formations. <br> Inspired by Total war and Age Of Empires. </div>
                <div class="column">  This portfolio page was made using HTML with no prior <br>knowledge, as a means of showcasing ability in selfstudy.   </div>
            </div>
            <div id="DivWithClear"> </div>
            <div class="row">
                <div class="column">    <div>  <button class="btn_one" onclick="window.open(' https://play.google.com/store/apps/details?id=com.YannAnnaert.BouncyBallDeluxe&hl=nl&gl=US')">Visit Project </button> </div> </div>
                <div class="column">    <div>  <button class="btn_one" onclick="window.open('https://github.com/annaertYann/AI-Research-Formations')">Visit Project </button> </div> </div>
                <div class="column">    <div>  <button class="btn_one" onclick="window.open('https://annaertyann.github.io/YannAnnaert/')">Visit Project </button> </div> </div>
            </div>
            <div id="DivWithClear"> </div>
            <h1>Group Projects</h1>
            <div class="row">
                <div class="column">PoolLoop</div>
                <div class="column">HerdMasters </div>
                <div class="column">YeetTheKiid</div>
            </div>
            <div id="DivWithClear"> </div>
            <div class="row">
                <div class="column">  <img src="Resources/PoolLoop.gif" width="400" alt="My Image" /></div>
                <div class="column">  <img src="Resources/HerdMasters.png" width="400" alt="My Image" /></div>
                <div class="column">  <img src="Resources/Yeet.png" width="400" alt="My Image" /></div>
            </div>
            <div id="DivWithClear"> </div>
            <div class="row">
                <div class="column"> Pool/puzzle game prototype created during <br>DAE studios internship with a small team in Unity.<br>Non client requested project. </div>
                <div class="column"> Multiplayer party game prototype created during <br>DAE studios internship with a small team in Unity.<br>Non client requested project.  </div>
                <div class="column">Platform/puzzle game created during DAE course<br>with a small team in Unity.<br> First introduction to team development.</div>
            </div>
            <div id="DivWithClear"> </div>
            <div class="row">
                <div class="column">    <div>  <button class="btn_one" onclick="window.open('https://www.youtube.com/watch?v=YWQ4GRnwi6Q')">Visit Project </button> </div> </div>
                <div class="column">    <div>  <button class="btn_one" onclick="window.open('https://www.youtube.com/watch?v=MTWOc7iuEfg&feature=youtu.be')">Visit Project </button> </div> </div>
                <div class="column">    <div>  <button class="btn_one" ; onclick="window.open('https://yannannaert.itch.io/group27')">Visit Project </button> </div> </div>
            </div>

        </div>
        <div id="contacts">  </div>
        <div id="contact">
            <h1>Contact</h1>
            <div id="tagline2">Email: Annaertyann@gmail.com<br> </div>
            <div id="tagline2">Phone: 32474535009<br> </div>
            <div id="tagline2">Twitter:  <a href="https://twitter.com/AnnaertYann">Yann Annaert</a></div>
        </div>

    </div>


    <div id="footer">
        Yann Annaert <br><br>
    </div>
    <script src="index.js" type="text/javascript">download</script>
</body>
</html>