-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathtimeline.html
220 lines (202 loc) · 12.3 KB
/
timeline.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
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
<head>
<meta charset="utf-8">
<title></title>
<meta name="author" content="">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/components/icon.min.css" type="text/css">
<link rel="stylesheet" href="css/semantic.css" type="text/css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/themes/prism-coy.min.css">
</head>
<style>
* {
font-family: 'Open Sans';
}
</style>
<body>
<div class="ui segment basic">
<div class="ui inverted menu">
<a href="index.html" class="item"><i class="home icon"></i> About me</a>
<a href="mywork.html" class="item"><i class="briefcase icon"></i> My Work</a>
<a href="timeline.html" class="active item"><i class="calendar alternate outline icon"></i> Timeline</a>
<a href="cv.html" class="item"><i class="address card outline icon"></i> CV</a>
</div>
<h2 style="text-align: center;">Timeline: Here u can see what I've been working on recently and my failed experiments :)</h2>
<div class="ui segment">
<div class="ui grid stackable">
<div class="sixteen wide column">
<div class="ui label huge">
Project name:
<div class="detail">Come find me</div>
</div>
<div style="float: right">Posted on 24/06/2021</div>
</div>
<div class="sixteen wide column">
<h2><a>Calendar improvements.</a></h2>
</div>
<div class="sixteen wide column">
<p>
Someone the other day gave me an idea for how to improve the calendar, by having special days! I completely forgot about that and quickly jumped into implementation. Special days are now shown in orange, I had to create a tooltip system for this feature aswell. I think it looks nice, the tooltip is also animated. I have also grayed out the days outside of current month to further emphasise the current month.
</p>
<p>
The new tooltip will hopefully make it easier to implement future features aswell, such as showing url links or more information on an action.
</p>
<div class="ui segment basic">
<img class="ui image centered" src="images/timeline/calendar_specialdays.png" alt="">
<p style="text-align: center;">Calendar</p>
</div>
</div>
</div>
</div>
<div class="ui segment">
<div class="ui grid stackable">
<div class="sixteen wide column">
<div class="ui label huge">
Project name:
<div class="detail">Come find me</div>
</div>
<div style="float: right">Posted on 21/06/2021</div>
</div>
<div class="sixteen wide column">
<h2><a>Calendar and some backend QoL features.</a></h2>
</div>
<div class="sixteen wide column">
<p>
Today I decided to program a calendar system which would be quite important to the gameplay aswell. I also refactored the code, the context menu now uses an interface which means that any thing can have a context menu! This will be quite handy for the "Task Manager" that I will do in the future.
</p>
<div class="ui segment basic">
<img class="ui image centered" src="images/timeline/calendar.gif" alt="">
<p style="text-align: center;">Calendar</p>
</div>
</div>
</div>
</div>
<div class="ui segment">
<div class="ui grid stackable">
<div class="sixteen wide column">
<div class="ui label huge">
Project name:
<div class="detail">Come find me</div>
</div>
<div style="float: right">Posted on 15/06/2021</div>
</div>
<div class="sixteen wide column">
<h2><a>Yes, I'm still working on this project.</a></h2>
</div>
<div class="sixteen wide column">
<p>
In this update I decided to tackle something I was worried about for the last few months (and have been putting off due to difficulty). Yesterday I woke up and suddenly came up with the "perfect" solution.
</p>
<p>
The problem:
Resizing websites was a huge problem, designing was also problematic and time consuming. Instead of relying on Unity's anchors to do everything for me I created this little custom Layout element which lets me automatically resize elements during run time.
</p>
<p>
I have also added ability to loop music and fixed a bunch of pesky bugs! <i class="icon bug"></i>
</p>
<div class="ui segment basic">
<img class="ui image centered" src="images/timeline/website_columns.gif" alt="">
<p style="text-align: center;">New Website Creating Tool</p>
<img class="ui image centered" src="images/timeline/music_loop.png" alt="">
<p style="text-align: center;">Music loop option</p>
</div>
</div>
</div>
</div>
<div class="ui segment">
<div class="ui grid stackable">
<div class="sixteen wide column">
<div class="ui label huge">
Project name:
<div class="detail">Come find me</div>
</div>
<div style="float: right">Posted on 27/04/2021</div>
</div>
<div class="sixteen wide column">
<h2><a>New UI design!</a></h2>
</div>
<div class="sixteen wide column">
<p>
I was not happy with my old UI design, in fact it bothered me everytime I saw it. Today I decided to sit down and design a completely new look. I have these very simple white icons to represent different file types which I think look amazing. The folders have coloured icons so you can easily spot them.
</p>
<p>
I have also abandoned my old "Type full path here" approach and created breadcrumbs which can be seen on the second screenshot.
</p>
<p>
I have also discovered that when using Unity's buttons and the "Color Tint" option, you don't have to use the background image but can instead use an icon. I think it looks much better when you highlight the text/icon instead of a background suddenly appearing.
</p>
<p>
I fixed few bugs and added more bugs to fix later ;)
</p>
<div class="ui segment basic">
<img class="ui image centered" src="images/timeline/new_ui_1.png" alt="">
<img class="ui image centered" src="images/timeline/new_ui_2.png" alt="">
<p style="text-align: center;">New UI design</p>
</div>
</div>
</div>
</div>
<div class="ui segment">
<div class="ui grid stackable">
<div class="sixteen wide column">
<div class="ui label huge">
Project name:
<div class="detail">Come find me</div>
</div>
<div style="float: right">Posted on 23/04/2021</div>
</div>
<div class="sixteen wide column">
<h2><a>File explorer update!</a></h2>
</div>
<div class="sixteen wide column">
<p>
Today I have decided to mess around with a file explorer and since I have created a nice file structure with some methods such as <code class="language-clike">FileSystem.GetFilesInDirectory(string path);</code> and <code class="language-clike">FileSystem.GetFoldersInDirectory(string path);</code> it was very easy to add working folders.
</p>
<p>
Funnily I struggled more with adding history than displaying the folder structure and making sure u can click on them.
</p>
<p>
I still need to figure out how to make it look nice, if you are interested in helping me with this project feel free to contact me on the <a href="contact.html">contact page.</a>
</p>
<div class="ui segment basic">
<img class="ui image centered huge" src="images/timeline/file_explorer.gif" alt="">
<p style="text-align: center;">A short video showing how file explorer works.</p>
</div>
</div>
</div>
</div>
<div class="ui segment">
<div class="ui grid stackable">
<div class="sixteen wide column">
<div class="ui label huge">
Project name:
<div class="detail">Come find me</div>
</div>
<div style="float: right">Posted on 22/04/2021</div>
</div>
<div class="sixteen wide column">
<h2><a>Reworking the file structure!</a></h2>
</div>
<div class="sixteen wide column">
<p>
Today I have started re-writing how my files are created. I've realised that simply instantiating files in various places can be problematic when I want more complex behaviour. For example zip files would then require file instances which is way more work than it should be. I have decided to create a file system structure similar to windows one to try and imitate a real operating system more closely. Now I can simply feed the file data into the tree and ask another function to generate it where ever I want it.
However I noticed that it's extremely complicated to use in the default Unity inspector, so I have wrote my own (which can be seen in the picture).
</p>
<div class="ui segment basic">
<img class="ui image centered huge" src="images/timeline/computer_horror_filestructure_editor.png" alt="">
<p style="text-align: center;">Screenshot showing a way to modify the file structure very easily.</p>
</div>
</div>
</div>
</div>
<div class="ui horizontal list" style="text-align: center; width: 100%;">
<a href="https://www.linkedin.com/in/oskar-oramus/" class="item" target="_blank"><i class="icon linkedin"></i> LinkedIn</a>
<a href="https://github.com/killereks" class="item" target="_blank"><i class="icon github"></i> GitHub</a>
<a href="https://codepen.io/killerek" class="item" target="_blank"><i class="icon code"></i> CodePen</a>
<a href="https://www.youtube.com/c/killereks" class="item" target="_blank"><i class="icon youtube"></i> YouTube</a>
<a href="contact.html" class="item"><i class="icon phone"></i> Contact</a>
</div>
</div>
<canvas id="canvas"></canvas>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/prism.min.js"></script>