-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
171 lines (146 loc) · 8.21 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 http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="newStyle.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devicons/[email protected]/devicon.min.css">
<title>Portfolio</title>
</head>
<body>
<header class="header">
<div class="brand">
<span>L</span>
<span>o</span>
<span>r</span>
<span>e</span>
<span>n</span>
<span>t</span>
</div>
<div class="nav--menu-button">
<div class="header--menu-button"></div>
</div>
</header>
<div class="header--menu">
<ul>
<li><a id="aboutLink" href="#about">About</a></li>
<li><a id="projectLink" href="#project">Projects </a></li>
</ul>
</div>
<!-- ABOUT SECTION START -->
<section id="about" class="section--about first">
<div class="title"><h2>About</h2></div>
<div class="about--bio">
<div class="about--photo">
<img src="./images/profile.jpg" alt="Profile Picture" />
</div>
<div class="about--info">
<p>
<!-- My name is <b>Lorent Shtavica</b> and I'm from a small town Rahovec, Kosova.
Since I can remember, I've always been passionate about technology - I
was the kid in the class that everyone would reach out to fix their
PCs, smartphones, etc.
</br>
Today, I feel lucky and thankful for being able to put my main focus
in web and app development, while in the free time I enjoy working on
my music production home studio, playing bass or recording anything. -->
<span>My </span><span>name </span><span>is </span><span><b>Lorent </span><span>Shtavica</b> </span><span>and </span><span>I'm </span><span>from </span><span>a </span><span>small </span><span>town </span><span>Rahovec, </span><span>Kosova.
</span><span> </span><span> </span><span> </span><span> </span><span> </span><span> </span><span> </span><span> </span><span> </span><span>Since </span><span>I </span><span>can </span><span>remember, </span><span>I've </span><span>always </span><span>been </span><span>passionate </span><span>about </span><span>technology </span><span>- </span><span>I
</span><span> </span><span> </span><span> </span><span> </span><span> </span><span> </span><span> </span><span> </span><span> </span><span>was </span><span>the </span><span>kid </span><span>in </span><span>the </span><span>class </span><span>that </span><span>everyone </span><span>would </span><span>reach </span><span>out </span><span>to </span><span>fix </span><span>their
</span><span> </span><span> </span><span> </span><span> </span><span> </span><span> </span><span> </span><span> </span><span> </span><span>PCs, </span><span>smartphones, </span><span>etc.
</span><span> </span><span> </span><span> </span><span> </span><span> </span><span> </span><span> </span><span> </span><span> </span><span></br>
</span><span> </span><span> </span><span> </span><span> </span><span> </span><span> </span><span> </span><span> </span><span> </span><span>Today, </span><span>I </span><span>feel </span><span>lucky </span><span>and </span><span>thankful </span><span>for </span><span>being </span><span>able </span><span>to </span><span>put </span><span>my </span><span>main </span><span>focus
</span><span> </span><span> </span><span> </span><span> </span><span> </span><span> </span><span> </span><span> </span><span> </span><span>in </span><span>web </span><span>and </span><span>app </span><span>development, </span><span>while </span><span>in </span><span>the </span><span>free </span><span>time </span><span>I </span><span>enjoy </span><span>working </span><span>on
</span><span> </span><span> </span><span> </span><span> </span><span> </span><span> </span><span> </span><span> </span><span> </span><span>my </span><span>music </span><span>production </span><span>home </span><span>studio, </span><span>playing </span><span>bass </span><span>or </span><span>recording </span><span>anything. </span>
</p>
</div>
</div>
<!-- Education -->
<div class="title">
<h2>Education</h2>
</div>
<div class="about--education">
<div class="edu-title">
<h3>High School</h3>
<h3>Bachelor's Degree</h3>
</div>
<div class="edu-info">
<h3>"Xhelal Hajda - Toni" - Rahovec</h3>
<h3>"University Of Business and Technology - UBT"</h3>
<p>Specialization: <span>Software and Systems Engineering</span></p>
</div>
</div>
<!-- END EDUCATION -->
<div class="title">
<h2>Technologies</h2>
</div>
<!-- TECHNOLOGIES -->
<div class="about--technologies">
<i class="devicon-java-plain-wordmark"></i>
<i class="devicon-javascript-plain"></i>
<i class="devicon-express-original"></i>
<i class="devicon-react-original-wordmark"></i>
<i class="devicon-redux-original"></i>
<i class="devicon-python-plain-wordmark"></i>
<i class="devicon-django-plain"></i>
<i class="devicon-flask-original"></i>
<i class="devicon-html5-plain-wordmark"></i>
<i class="devicon-css3-plain-wordmark"></i>
<i class="devicon-sass-original"></i>
<i class="devicon-mysql-plain"></i>
<i class="devicon-mongodb-plain"></i>
<i class="devicon-firebase-plain-wordmark"></i>
<i class="devicon-docker-plain-wordmark"></i>
<i class="devicon-github-original-wordmark"></i>
</div>
</section>
<!-- ABOUT SECTION END -->
<!-- PROJECT SECTION START -->
<section id="project" class="section--projects second">
<div class="title"><h2>Projects</h2></div>
<div class="project--container">
<!-- CARD BEGIN -->
<div class="project--card-container">
<img src="./images/youtube-clone.png" alt="" />
<h3>YouTube FrontClone (Dark)</h3>
<p>
YouTube clone using React, Redux and some dummy data. Features: Homepage with video suggestion, different mobile search bar, different wide screen navigation, custom video controllers (video hook), etc.
</p>
<div class="project--card-tags">
<a target="_blank" rel="noreferrer noopener" href="https://ls30378.github.io/youtube-clone/"><i class="gg-link"></i> </a>
<a target="_blank" rel="noreferrer noopener" href="https://github.com/ls30378/youtube-clone"><i class="gg-code-slash"></i> </a>
</div>
</div>
<!-- CARD END -->
<!-- CARD BEGIN -->
<div class="project--card-container">
<video controls src="./images/Librarium.webm" ></video>
<h3>Librarium</h3>
<p>
<i>Librarium</i> is an internet book database with a built-in white noise app. Librarium is built using React, Redux, with multiple backend languages with <b>Microservices Architecture</b>
</p>
<div class="project--card-tags">
<a target="_blank" rel="noreferrer noopener" href="https://github.com/ls30378/SoftwareArchitecture"><i class="gg-code-slash"></i> </a>
</div>
</div>
<!-- CARD END -->
<!-- CARD BEGIN -->
<div class="project--card-container">
<img src="./images/portfolio.gif" alt="" />
<h3>Portfolio with Stack Page Navigation</h3>
<p>
Portfolio using HTML5, CSS3 (with animations) and JavaScript, with page stack navigation!
</p>
<div class="project--card-tags">
<a target="_blank" rel="noreferrer noopener" href="https://github.com/ls30378/portfolio-page-stack"><i class="gg-code-slash"></i> </a>
</div>
</div>
<!-- CARD END -->
</div>
</section>
<script src="./script.js"></script>
</body>
</html>