-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
171 lines (160 loc) · 8.03 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="veiwport" content="width=device-width, inital-scale=1">
<title>Brin Zvan</title>
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab:300,400,700,900|Roboto:300,400,600,700&display=swap" rel="stylesheet">
<link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet">
<script src="https://unpkg.com/[email protected]/dist/aos.js"></script>
<link rel="stylesheet" href="main.css">
<script src="https://kit.fontawesome.com/4e025cd0d1.js" crossorigin="anonymous"></script>
</head>
<body>
<header>
<div class="landing-text">
<h1>Brin Žvan</h1>
<h6>Uppsala University | Game Design Masters Portfolio</h6>
<h7><br><br><i class="fas fa-chevron-down"></i> Scroll to view <i class="fas fa-chevron-down"></i></h7>
</div>
<!--Scroll down prompt-->
</header>
<section class="about" id="about">
<div class="container">
<div class="profile-img" data-aos="fade-right" data-aos-delay="300" data-aos-duration="1500">
<img src="images/profile.png" alt="">
</div>
<div class="about-details" data-aos="fade-left" data-aos-delay="600" data-aos-duration="1500">
<div class="about-heading">
<h6>What is this,</h6>
<h1>anyway?</h1>
</div>
<p>
My name is Brin and I'm applying to the Uppsala University. Hopefully you've made it here to go over some of my previous projects. You will find game development,
graphic design, content creation and more. As the projects are usually hosted on different site this is just a landing page where some of them are collected.
</p>
<p>
<br>
Feel free to find more of my projects on these sites:
</p>
<div class="media-links">
<button class="button" onclick="window.location.href = 'https://niirb.itch.io/;"><i class="fab fa-itch-io"></i> View my itch.io</button>
<button class="button" onclick="window.location.href = 'https://nirb.artstation.com/';"><i class="fab fa-artstation"></i> View my Artstation</button>
<button class="button" onclick="window.location.href = 'https://github.com/Brin-o/';"><i class="fab fa-github"></i> View my GitHub</button>
</div>
</div>
</div>
</section>
<section class="portfolio" id="portfolio">
<div class="container">
<div class="section-heading">
<h1>Portfolio</h1>
<h6>Uppsala University Digital Portfolio</h6>
</div>
<div class="portfolio-item">
<div class="portfolio-img has-margin-right">
<video autoplay src="https://thumbs.gfycat.com/DelectableOddballBuckeyebutterfly-mobile.mp4" alt="" data-aos="fade-left" data-aos-delay="300" data-aos-duration="1500">
</div>
<div class="portfolio-description" data-aos="fade-right" data-aos-delay="300" data-aos-duration="1500">
<h6>Epicenter Jam #1</h6>
<h1>Ninyang - Game Design & Development</h1>
<p>
Ninyang is a game I made with a group of great people at the Epicenter Lan GameJam.
I was responsible for the game flow, level design and some basic coding.
After the game jam I worked on the game for some time, fixing things up and adding polish to it.
</p>
<div class="button-container">
<button class="button" onclick="window.location.href = 'https://niirb.itch.io/ninyang-tech-demo';"><i class="fas fa-dice"></i> Play on itch.io</button>
<button class="button" onclick="window.location.href = 'https://www.artstation.com/artwork/58xgn8';"><i class="fas fa-book"></i> View Game Design Document</button>
</div>
</div>
</div>
<div class="portfolio-item rightalign">
<div class="portfolio-description has-margin-right" data-aos="fade-right" data-aos-delay="300" data-aos-duration="1500">
<h6>Weekly Game Jam #102</h6>
<h1>1 Bit & 2 Jobs</h1>
<p>
One bit and two jobs is a game reminiscent of the simple arcade games of yesteryear.
The topic of the game jam was "one big boss fight" so it presents a single screen battle with a big bad.
The player cannot attack without the help of two turrets and using those exposes you to the bullet hell of an ever-changing boss fight.
</p>
<p>
<br>
I was responsible for creating the level, coding the base framework of the game, creating the graphics and desinging the boss fight. My partner in code, Tian, took care of coding in the boss fight and it's functionality.
</p>
<div class="button-container rightalign">
<button class="button" onclick="window.location.href = 'https://niirb.itch.io/1-bit-2-jobs';"><i class="fas fa-dice"></i> Play on itch.io</button>
<button class="button" onclick="window.location.href = 'https://www.artstation.com/artwork/Pmxr44';"><i class="fas fa-book"></i> View Game Design Document</button>
</div>
</div>
<div class="portfolio-img" data-aos="fade-left" data-aos-delay="300" data-aos-duration="1500">
<video autoplay src="https://thumbs.gfycat.com/EmbellishedBlushingBullmastiff-mobile.mp4" alt="" data-aos="fade-left" data-aos-delay="300" data-aos-duration="1500">
</div>
</div>
<div class="portfolio-item">
<div class="portfolio-img has-margin-right">
<img src="images/milivoj.png" alt="" data-aos="fade-left" data-aos-delay="300" data-aos-duration="1500">
</div>
<div class="portfolio-description" data-aos="fade-right" data-aos-delay="300" data-aos-duration="1500">
<h6>Graphic Design Proejct</h6>
<h1>Music Album - "M11"</h1>
<p>
<i>"We left on the most dangerous, complex, and famed mission ever devised by the Sovkosmos.
Indeed we discovered new worlds, but we never expected to come back to an alien planet.
We thought we were coming home, but our home had left us already."</i></p>
<br>
<p>
M11 is an imaginary album that tries to capture the essence of what is Sovietwave.
A musical genre that combines synth with the melodies from Moscow's radios during the cold war.
Melodies that sung of space and a greater tomorrow - one that never came to be.
</p>
<p>
<br>
The graphical identity of the album attempts to represent the question posed by these songs. What does our planet mean when the galaxy has many? What is the meaning of home?
</p>
<div class="button-container btnleft">
<button class="button"><i class="fas fa-palette"></i> Full porject on Artstation</button>
</div>
</div>
</div>
<div class="portfolio-item rightalign">
<div class="portfolio-description has-margin-right" data-aos="fade-right" data-aos-delay="300" data-aos-duration="1500">
<h6>UX Design</h6>
<h1>Cineline Camera Controller</h1>
<p>
Cineline is a project by AirCam d.o.o. it offers an alternative to drones for environments that simply do not support them well.
It is a motorised camera grip that is attached to a line and controller by the user via a game-pad like controller that features an LCD screen.
I was responsible for setting the layout of the controls, planning the controller's UI/UX experience and implementing it using OpenTX Lua scripts.
</p>
<p>
<br>
The controller layout heavily borrows from ergonomic design theories used by video games. Alongside that the UI is built on a very low PPI display (128 x 64) which resulted in every pixel being important.
</p>
<div class="button-container rightalign">
<button class="button" onclick="window.location.href = 'https://cineline.cam/';"><i class="fas fa-video"></i> Cineline Website</button>
</div>
</div>
<div class="portfolio-img">
<img src="images/portitem1.jpeg" alt="" data-aos="fade-left" data-aos-delay="300" data-aos-duration="1500">
</div>
</div>
</div>
</section>
<footer class="copyright">
<div class="up" id="up">
<i class="fas fa-chevron-up"></i>
</div>
<p>© 2020 Brin Žvan</p>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="bower_components/aos/dist/aos.js"></script>
<script src="main.js"></script>
<script>
AOS.init({
easing: 'ease',
duration: 1800,
once:true
});
</script>
</body>
</html>