-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
158 lines (143 loc) · 7.64 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- BOOTSTRAP -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<!-- LIGHTBOX CSS -->
<link rel="stylesheet" href="css/simplelightbox.min.css">
<!-- FONT AWESOME -->
<script src="https://kit.fontawesome.com/d7456ee4cf.js"></script>
<!-- CUSTOM CSS -->
<link rel="stylesheet" href="css/style.css">
<!-- FAVICON -->
<link rel="icon" type="image/png" href="img/favicon.ico">
<title>Adam Bertus - Portfolio</title>
</head>
<body>
<!-- LEFT COLUMN -->
<div class="container-fluid">
<div class="row">
<div class="col-md-3 col-12 bg-dark py-3 text-white d-flex flex-column align-items-center justify-content-center text-center" id="left">
<img src="img/me.png" class="img-fluid rounded-circle img-thumbnail zIndex portrait" style="height: 150px; width: 155px;" alt="">
<p id="welcomeText" class="zIndex"><strong class="hi mt-3">Hi there,</strong> <span>I'm Adam a graduate web developer, currently based in Budapest, Hungary.</span></p>
<div class="social zIndex mt-3">
<a href="mailto:adambertus89@gmail.com?subject=Hello%20there" target="_top"><i class="far fa-envelope fa-2x "></i></a>
<a href="https://www.linkedin.com/in/adambertus/" target="_blank"><i class="fab fa-linkedin-in fa-2x"></i></a>
<a href="https://github.com/bertusrocky" target="_blank"><i class="fab fa-github fa-2x"></i></a>
</div>
</div>
<!-- RIGHT COLUMN -->
<div id="right" class="col-md-9 col-12 offset-0 offset-md-3">
<!-- TOP ROW -->
<div class="row">
<div class="col-12 mt-4">
<h1>Projects</h1>
<p>See my hobby and uni projects below. All the design and development were completely done by <strong>me</strong>.</p>
<hr>
</div>
</div>
<!-- FIRST PROJECT ROW -->
<div class="row mt-4">
<div class="col-md-6">
<h2 class="pb-2">COVID-19 Tracker</h2>
<p>In this project I've built a web app that displays information about the COVID-19 pandemic. From this project I've learned how to fetch and handle JSON data from an external API. The Bootstrap grid system was used to make the app responsive. JavaScript makes the elements interactive and displays the data in charts. </p>
<p class="tech"><strong>Technologies: </strong>JavaScript, Chart.js, HTML5 & CSS3, Bootstrap4, <a href="https://github.com/mathdroid/covid-19-api" target="_blank">mathdroid Data API</a></p>
<a href="https://bertusrocky.github.io/coronatracker/" target="_blank" class="btn btn-danger"><i class="fas fa-external-link-alt"></i> View online</a>
<a href="https://github.com/bertusrocky/coronatracker" target="_blank" class="btn btn-dark"><i class="fab fa-github"></i> View code</a>
</div>
<div class="col-md-6 mx-auto">
<div class="gallery pt-3">
<a href="img/full/corona.png"><img src="img/thumb/coronathumb.png" class="img-fluid img-thumbnail" alt=""/></a>
<p class="text-center mt-2">Click to zoom-in</p>
</div>
</div>
</div>
<!-- HORIZONTAL LINE -->
<div class="row mt-4">
<div class="col-12">
<hr>
</div>
</div>
<!-- SECOND PROJECT ROW -->
<div class="row mt-4">
<div class="col-md-6">
<h2 class="pb-2">Landing Page for a Banking App</h2>
<p>In this project I've built a landing page for a fictional banking app. The goal of this project was to become familiar with Sass / SCSS. I used a JavaScript library to animate the elements as they enter the viewport.</p>
<p class="tech"><strong>Technologies: </strong>HTML5, Sass, Bootstrap4, JavaScript</p>
<a href="https://bertusrocky.github.io/bank_landingpage/" target="_blank" class="btn btn-danger"><i class="fas fa-external-link-alt"></i> View online</a>
<a href="https://github.com/bertusrocky/bank_landingpage" target="_blank" class="btn btn-dark"><i class="fab fa-github"></i> View code</a>
</div>
<div class="col-md-6 mx-auto">
<div class="gallery pt-3">
<a href="img/full/banking.png"><img src="img/thumb/bankingthumb.png" class="img-fluid img-thumbnail" alt=""/></a>
<p class="text-center mt-2">Click to zoom-in</p>
</div>
</div>
</div>
<!-- HORIZONTAL LINE -->
<div class="row mt-4">
<div class="col-12">
<hr>
</div>
</div>
<!-- THIRD PROJECT ROW -->
<div class="row mt-4">
<div class="col-md-6">
<h2 class="pb-2">University Library Book Recommendation Service</h2>
<p>This web app was made for the Advanced web technologies module at Edinburgh Napier University. From this project I've learned how to connect the front-end to the back-end. Authenticated users can send recommendations to the library for future book purchases. I received a first class grade for this project.</p>
<p class="tech"><strong>Technologies: </strong>Python & Flask, Jinja2, SQLite3, Bootstrap4</p>
<a href="https://github.com/bertusrocky/uni_coursework" target="_blank" class="btn btn-dark"><i class="fab fa-github"></i> View code</a>
</div>
<div class="col-md-6 mx-auto">
<div class="gallery pt-3">
<a href="img/full/library.png"><img src="img/thumb/librarythumb.png" class="img-fluid img-thumbnail" alt=""/></a>
<p class="text-center mt-2">Click to zoom-in</p>
</div>
</div>
</div>
<!-- HORIZONTAL LINE -->
<div class="row mt-4">
<div class="col-12">
<hr>
</div>
</div>
<!-- FOURTH PROJECT ROW -->
<div class="row mt-4">
<div class="col-md-6">
<h2 class="pb-2">My Dynamic Homepage</h2>
<p>A personal homepage that I created for my own use. All the data is updated dynamically through JavaScript. The weather information comes from an external API. I used the Google Chrome extension <a href="https://momentumdash.com/" target="_blank">Momentum</a> as a reference to create the user interface.</p>
<p class="tech"><strong>Technologies: </strong>JavaScript, HTML5 & CSS3, <a href="https://www.weatherbit.io/api" target="_blank">Weatherbit API</a></p>
<a href="https://bertusrocky.github.io/my_home_page/" target="_blank" class="btn btn-danger"><i class="fas fa-external-link-alt"></i> View online</a>
<a href="https://github.com/bertusrocky/my_home_page" target="_blank" class="btn btn-dark"><i class="fab fa-github"></i> View code</a>
</div>
<div class="col-md-6 mx-auto">
<div class="gallery pt-3">
<a href="img/full/homepage.png"><img src="img/full/homepage.png" class="img-fluid img-thumbnail" alt=""/></a>
<p class="text-center mt-2">Click to zoom-in</p>
</div>
</div>
</div>
<!-- HORIZONTAL LINE -->
<div class="row mt-4">
<div class="col-12 pb-4">
</div>
</div>
</div>
</div>
</div>
<script
src="https://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous">
</script>
<script src="js/simple-lightbox.min.js"></script>
<script>
$(function() {
const $gallery =$('.gallery a').simpleLightbox(
);
})
</script>
</body>
</html>