-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
230 lines (200 loc) · 13.1 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
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
221
222
223
224
225
226
227
228
229
230
<!doctype html>
<html lang="en" style="scroll-behavior:smooth;">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="pico/css/pico.min.css">
<title>JustBaneIsFine Portfolio</title>
<style> @media (max-width: 500px) {
.hiddenSmall {
display: none;
}
}
</style>
</head>
<body>
<!-- _________NAVIGATION_________ -->
<nav class="container-fluid" style="position: fixed;">
<div class="grid">
<div><ul>
<li><a href="#AboutMe" role="button" class="contrast outline ">About Me</a></li>
<li><a href="#Projects" role="button" class="secondary outline">My projects</a></li>
</ul></div>
</div>
<div><ul>
<li><a href="#Skills" role="button" class="secondary outline hiddenSmall">Skills</a></li>
<li><a href="#Plans" role="button" class="secondary outline hiddenSmall">Future Plans</a></li>
<li><a href="#Contact" role="button" class="contrast outline">Contact</a></li>
</ul></div>
</nav>
<!-- _________Introduction_________ -->
<main class="container">
<hgroup class="center">
<h1> ⚠️Page is under construction⚠️</h1>
<h3>Thank you for your patience</h3>
</hgroup>
<hgroup class="center">
<h3>Hello, my name is Branislav Milosevic</h3>
<h5>But, just Bane is fine.. 😁</h5>
<h3>I am an aspiring fullstack web developer, amongst other things</h3>
</hgroup>
<!-- _________AboutMe_________ -->
<div id="AboutMe">
<details open>
<summary>About me:</summary>
<details>
<summary>My traits and interests:</summary>
<pre>
{ Preferences: [
'I strive to be as efficient and effective as possible.'
'Prefer working first shift only, and early, like 5/6am if possible',
"Don't do coffee, but need humor to survive 😁",
'If i see something that can be automated, i will try automate it, i value time a lot and try not to waste any',
'Work best alone or with a positive group of people',
],
Known_Bugs: [
'I will sometimes lose myself in trying to find the perfect solution'
]
Interests: [
'Judo','Gym','Automation games (factorio, oxygen not included)',
'Researching various topics (psychology, child development, communication, future tech, etc.)'
]
}
</pre>
</details>
<details>
<summary>Previous work experience</summary>
None in this field for now.
But plenty in other fields.
<ul>
<li>- UPVC Windows manufacturing-installing (~2 years - current)</li>
<li>- Pasteurization Technician(~2.5 years)</li>
<li>- Fast food worker(3 months)</li>
<li>- Cable packaging and isolation(3 months)</li>
<li>- Sailor (~1 year)</li>
<li>- Construction worker (~6 months)</li>
</ul>
</details>
</details>
</div>
</div>
<!-- _________Projects_________ -->
<article id="Projects" class="center">
<header>
<h6>This is what i use</h6>
<div class="center"><img alt="express,js,ts,react,mongodb,nodejs,jest,bash,git,html,css,blender,ps,github,vscode" title='express,js,ts,react,mongodb,nodejs,jest,bash,git,html,css,blender,ps,github,vscode' src="https://skillicons.dev/icons?i=express,js,ts,react,mongodb,nodejs,jest,bash,git,html,css,blender,ps,github,vscode" /></div>
<br/>
<h4>My projects:</h4>
</header>
<details>
<summary>Level 4- Fullstack projects</summary>
<ul><div class="accordionPadded" style="justify-content: space-evenly; display: flex;"><div style="width: 100%
;">
Car scraper
<progress value="85" max="100"></progress>
<div style="display: flex; justify-content: space-evenly; width: 80%; margin:auto">
<a href="https://github.com/JustBaneIsFine/car-scraper-front" target="_blank" >Front: <img src="./white github icon.png" style="height:30px;"></a>
<a href="https://car-scraper.netlify.app/" target="_blank" ><img src="./eye.png" style="height:30px;"></a>
<a href="https://github.com/JustBaneIsFine/car-scraper-back" target="_blank" > Back: <img src="./white github icon.png" style="height:30px;"></a>
</div>
</div></div> </ul>
<ul><div class="accordionPadded">Job Hunt<div data-tooltip="Personal project paused to finish other projects" style="display: inline;">⚠️</div><progress value="25" max="100"></progress><a href="https://github.com/JustBaneIsFine/JustBaneIsFine.github.io#job-hunt" target="_blank" ><img src="./eye.png" style="height:30px;"></a></div></ul>
</details>
<details>
<summary>Level 3- Complex projects</summary>
<ul>
<div class="accordionPadded">Web scraper<div style="display: inline;" data-tooltip="Updated to v.2.0, improved speed">⚠</div><progress value="100" max="100"></progress><a href="https://github.com/JustBaneIsFine/Level-3-projects#web-scraper" target="_blank"><img src="./white github icon.png" style="height:30px;"></a> </div>
</ul>
</details>
<details>
<summary>Level 2- Learning projects</summary>
<ul>
<div class="accordionPadded">Calculator✅<progress value="100" max="100"></progress><div style="display: flex; justify-content: space-evenly;width: 50%;margin: auto;"><a href="https://github.com/JustBaneIsFine/Level-2-projects" target="_blank" ><img src="./white github icon.png" style="height:30px;"></a><a href="https://justbaneisfine.github.io/apps/Level%202/Calculator/index.html" target="_blank" ><img src="./eye.png" style="height:30px;"></a></div></div>
<div class="accordionPadded">Pong game✅<progress value="100" max="100"></progress><div style="display: flex; justify-content: space-evenly;width: 50%;margin: auto;"><a href="https://github.com/JustBaneIsFine/Level-2-projects" target="_blank" ><img src="./white github icon.png" style="height:30px;"></a><a href="https://justbaneisfine.github.io/apps/Level%202/Pong%20Game/index.html" target="_blank"><img src="./eye.png" style="height:30px;"></a></div></div>
<div class="accordionPadded">Snake game✅<progress value="100" max="100"></progress><div style="display: flex; justify-content: space-evenly;width: 50%;margin: auto;"><a href="https://github.com/JustBaneIsFine/Level-2-projects" target="_blank" ><img src="./white github icon.png" style="height:30px;"></a><a href="https://justbaneisfine.github.io/apps/Level%202/Snake%20Game/index.html" target="_blank"><img src="./eye.png" style="height:30px;"></a></div></div>
<div class="accordionPadded">Space Invaders✅<progress value="100" max="100"></progress><div style="display: flex; justify-content: space-evenly;width: 50%;margin: auto;"><a href="https://github.com/JustBaneIsFine/Level-2-projects" target="_blank" ><img src="./white github icon.png" style="height:30px;"></a><a href="https://justbaneisfine.github.io/apps/Level%202/Space%20Invaders%20Game/index.html" target="_blank"><img src="./eye.png" style="height:30px;"></a></div></div>
<div class="accordionPadded">Tetris<div style="display: inline;" data-tooltip="Buggy code led me to leave this for now, instead of bugs consuming my time, i went on to work on other projects where i can learn more">⚠</div><progress value="85" max="100"></progress><a href="https://justbaneisfine.github.io/apps/Level%202/Tetris%20Game/index.html" target="_blank" ><img src="./white github icon.png" style="height:30px;"></a></div></div>
</ul>
</details>
<details>
<summary>Level 1- First introductory projects</summary>
<ul>
<div class="accordionPadded">Clock✅<progress value="100" max="100"></progress><div style="display: flex; justify-content: space-evenly;width: 50%;margin: auto;"><a href="https://github.com/JustBaneIsFine/Level-1-projects" target="_blank" ><img src="./white github icon.png" style="height:30px;"></a><a href="https://justbaneisfine.github.io/apps/Level%201/Clock/Digital%20clock.html" target="_blank"><img src="./eye.png" style="height:30px;"></a></div></div>
<div class="accordionPadded">Expense tracker✅<progress value="100" max="100"></progress><div style="display: flex; justify-content: space-evenly;width: 50%;margin: auto;"><a href="https://github.com/JustBaneIsFine/Level-1-projects" target="_blank" ><img src="./white github icon.png" style="height:30px;"></a><a href="https://justbaneisfine.github.io/apps/Level%201/Expense%20tracker/Expense%20tracker.html" target="_blank"><img src="./eye.png" style="height:30px;"></a></div></div>
<div class="accordionPadded">Pig latin✅<progress value="100" max="100"></progress><div style="display: flex; justify-content: space-evenly;width: 50%;margin: auto;"><a href="https://github.com/JustBaneIsFine/Level-1-projects" target="_blank" ><img src="./white github icon.png" style="height:30px;"></a><a href="https://justbaneisfine.github.io/apps/Level%201/Pig%20Latin/Pig%20Latin.html" target="_blank"><img src="./eye.png" style="height:30px;"></a></div></div>
<div class="accordionPadded">Recipe App✅<progress value="100" max="100"></progress><div style="display: flex; justify-content: space-evenly;width: 50%;margin: auto;"><a href="https://github.com/JustBaneIsFine/Level-1-projects" target="_blank" ><img src="./white github icon.png" style="height:30px;"></a><a href="https://justbaneisfine.github.io/apps/Level%201/Recipe%20app/index.html" target="_blank"><img src="./eye.png" style="height:30px;"></a></div></div>
<div class="accordionPadded">To-do list✅<progress value="100" max="100"></progress><div style="display: flex; justify-content: space-evenly;width: 50%;margin: auto;"><a href="https://github.com/JustBaneIsFine/Level-1-projects" target="_blank" ><img src="./white github icon.png" style="height:30px;"></a><a href="https://justbaneisfine.github.io/apps/Level%201/To%20do%20list/To%20do.html" target="_blank"><img src="./eye.png" style="height:30px;"></a></div></div>
<div class="accordionPadded">Vowel counter✅<progress value="100" max="100"></progress><div style="display: flex; justify-content: space-evenly;width: 50%;margin: auto;"><a href="https://github.com/JustBaneIsFine/Level-1-projects" target="_blank" ><img src="./white github icon.png" style="height:30px;"></a><a href="https://justbaneisfine.github.io/apps/Level%201/Vowel%20Counter/index.html" target="_blank"><img src="./eye.png" style="height:30px;"></a></div></div>
<div class="accordionPadded">Weight tracker✅<progress value="100" max="100"></progress><div style="display: flex; justify-content: space-evenly;width: 50%;margin: auto;"><a href="https://github.com/JustBaneIsFine/Level-1-projects" target="_blank" ><img src="./white github icon.png" style="height:30px;"></a><a href="https://justbaneisfine.github.io/apps/Level%201/Weight%20tracker/Tracker.html" target="_blank"><img src="./eye.png" style="height:30px;"></a></div></div>
</ul>
</details>
<footer>
Video demonstrations of level 3 and 4
<div class="accordionPadded"><a href="https://www.youtube.com/watch?v=JY5E0nMa6LU&feature=youtu.be" target="_blank">Web scraper✅</a></div>
<div class="accordionPadded"><a>Job Hunt<div data-tooltip="Not yet available" style="display: inline;">❎</div></a></div>
</footer>
</article>
<!-- _________Skills_________ -->
<div id="Skills"><h3 class="center">What i work with:</h3>
<div class="spreadOut">
<div> <h6>Currently:</h6>
<ul>
<li>React</li>
<li>Typescript</li>
<li>Javascript</li>
<li>MongoDb</li>
<li>Node.js</li>
<li>Express.js</li>
<li>Tailwind</li>
<li>Jest and Cypress</li>
<li>HTML,CSS</li>
<li>Bash, Git, Github</li>
<li>Blender, Photoshop</li>
</ul>
</div>
<div> <h6>Planning to learn:</h6>
<ul>
<li>React Native</li>
<li>Next.js</li>
<li>And more....</li>
</ul>
</div>
</div>
</div>
<article id="Plans" ><header class="center">Future plans and priority</header>
<div class="spreadOut">
<div><a href="#Plans" role="button" class="secondary outline" style="display:block; margin-bottom: 20px; color: chartreuse;">Low</a>
<ul>
<li>Refactor all projects</li>
<li>Build a better portfolio page</li>
<li>Fix minor bugs in projects</li>
<li>Improve css for all projects</li>
<li>Continue developing Job Hunt website</li>
<li>...</li>
</ul>
</div>
<div><a href="#Plans" role="button" class="secondary outline" style="display:block; margin-bottom: 20px;color: rgb(235, 157, 23);">Medium</a>
<ul>
<li>Build another fullstack project</li>
<li>...</li>
</ul>
</div>
<div><a href="#Plans" role="button" class="secondary outline" style="display:block; margin-bottom: 20px;color: crimson;">High</a>
<ul>
<li>Complete Car-scraper website fully</li>
<li>...</li>
</ul>
</div></div>
<footer id="Contact">
<div class="center"><h6 >Contact options:</h6>
<ul class="spreadOut">
<li><a href="https://github.com/JustBaneIsFine" target="_blank">Github</a></li>
<li><a href="https://www.linkedin.com/in/justbaneisfine/" target="_blank">LinkedIn</a></li>
<li><a href="https://mail.google.com/mail/u/0/?fs=1&to=justbaneisfine@gmail.com&tf=cm" target="_blank">Gmail</a></li>
</ul>
</div>
</footer>
</article>
</main>
</body>
</html>