-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
235 lines (199 loc) · 10.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
231
232
233
234
235
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv='cache-control' content='no-cache'>
<meta http-equiv='expires' content='0'>
<meta http-equiv='pragma' content='no-cache'>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Oktavian Nikky Abprianto</title>
<!--Box Icons-->
<link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>
<!--Custom CSS-->
<link rel="stylesheet" href="Portfolio/css/style.css">
</head>
<body>
<!--Header Section-->
<header class="header">
<a href="#" class="logo">Portfolio</a>
<i class='bx bx-menu' id="menu-icon"></i>
<nav class="navbar">
<a href="#home" class="active">Home</a>
<a href="#about">About</a>
<a href="#services">Services</a>
<a href="#portfolio">Portfolio</a>
<a href="#contact">Contact</a>
</nav>
</header>
<!-- home section design -->
<section class="home" id="home">
<div class="home-content">
<h3>Hello, It's Me</h3>
<h1>Oktavian</h1>
<h3>And I'm a <span class="multiple-text"></span></h3>
<p>Hey there, I'm thrilled to welcome you to my portfolio! I'm a programming enthusiast with a particular
passion for languages like Python, HTML, and more. I'm constantly improving my programming skills
through learning and working on exciting projects. I'm always eager to collaborate with others and take
on new projects that challenge me and push me to grow.</p>
<div class="social-media">
<a href="https://github.com/oktaviannikky" target="_blank"><i class='bx bxl-github'></i></a>
<!-- <a href="#"><i class='bx bxl-twitter' target="_blank"></i></a> -->
<a href="https://instagram.com/oktavian_na?igshid=MzNlNGNkZWQ4Mg==" target="_blank"><i
class='bx bxl-instagram-alt'></i></a>
<a href="https://www.linkedin.com/in/oktavian-nikky-abprianto/" target="_blank"><i
class='bx bxl-linkedin-square'></i></a>
</div>
<a href="Portfolio/cv/Oktavian Nikky Abprianto-resume.pdf" class="btn"
download="oktavian Nikky Abprianto-resume">Download CV</a>
</div>
<!-- <div class="home-img">
<img src="images/home.png" alt="">
</div> -->
</section>
<!-- About Section design -->
<section class="about" id="about">
<!-- <div class="about-img">
<img src="images/home.png" alt="">
</div> -->
<div class="about-content">
<h2 class="heading">About <span>Me</span></h2>
<h3>Data Scientist</h3>
<p>Hi, I'm Oktavian, a passionate learner and Informatics major at Mercu Buana University. As someone who
is fascinated by the intersection of technology and innovation, I'm particularly interested in the
fields of Data Science, Machine Learning, Artificial Intelligence, and Web Development.</p>
<span id="extra-text" style="display:none">
<p>My enthusiasm for these areas of interest has led me to complete various projects and take on
relevant coursework to expand my knowledge and skillset. I believe that keeping up-to-date with the
latest advancements in technology is key to staying ahead of the curve in today's rapidly changing
tech landscape.</p>
<p>When I'm not studying or working on projects, I enjoy reading and working out. I believe that having
a well-balanced lifestyle is crucial to maintaining motivation and creativity in both personal and
professional pursuits.</p>
<p>Thanks for taking the time to learn a bit more about me, and I look forward to sharing my work with
you!</p>
</span>
<button id="toggle-btn" onclick="toggleExtra()" class="btn">Read More</button>
</div>
</section>
<!-- services section design -->
<section class="services" id="services">
<h2 class="heading">My <span>Services</span></h2>
<div class="services-container">
<div class="services-box">
<i class='bx bx-code-alt'></i>
<h3>Web Development</h3>
<p>In Web Development, I create websites and web applications using programming languages like HTML,
CSS, and JavaScript. I am learning how to use these languages to build the front-end user interface
and the back-end server-side functionality. I start by creating simple web pages working to upgrade
my skills more.</p>
<!-- <a href="#" class="btn">Read More</a> -->
</div>
<div class="services-box">
<i class='bx bxs-data'></i>
<h3>Data Scientist</h3>
<p>In Data Science, I work with large datasets to find patterns, trends, and relationships. I am in the
process of learning skills like data cleaning, data exploration, data modeling, and data
visualization. I use programming languages such as Python and R, as well as tools like SQL and
Tableau, to manipulate and analyze data.</p>
<!-- <a href="#" class="btn">Read More</a> -->
</div>
<div class="services-box">
<i class='bx bx-line-chart'></i>
<h3>Data Analyst</h3>
<p>In Data Analysis, I work with data to find insights and make informed decisions. I collect, clean,
and organize data using tools like Excel, SQL, or Python. Then, I analyze the data to find patterns,
trends, and relationships that can help answer business questions. I create visualizations and
reports to present the findings to stakeholders.</p>
<!-- <a href="#" class="btn">Read More</a> -->
</div>
</div>
</section>
<!-- Portfolio Section Design -->
<section class="portfolio" id="portfolio">
<h2 class="heading">Latest <span>Project</span></h2>
<div class="portfolio-container">
<div class="portfolio-box">
<img src="Portfolio/images/web.png" alt="">
<div class="portfolio-layer">
<h4>Web Design</h4>
<p>Creating a simple website design(My Portfolio).</p>
<a href="#"><i class='bx bx-link-external'></i></a>
</div>
</div>
<div class="portfolio-box">
<img src="Portfolio/images/logo.png" alt="">
<div class="portfolio-layer">
<h4>FitFans</h4>
<p>An application to scan gym equipments</p>
<a href="https://github.com/Capstone-CH2-PS196/FitFans" target="_blank"><i class='bx bx-link-external'></i></a>
</div>
</div>
<!-- <div class="portfolio-box">
<img src="Portfolio/images/portfolio3.jpg" alt="">
<div class="portfolio-layer">
<h4>Life Expectancy Analyze</h4>
<p>Analyzing the cause of people life expectancy.</p>
<a href="#"><i class='bx bx-link-external'></i></a>
</div>
</div>
<div class="portfolio-box">
<img src="Portfolio/images/portfolio.jpg" alt="">
<div class="portfolio-layer">
<h4>Chat Bot</h4>
<p>Creating chat bot for social media.</p>
<a href="#"><i class='bx bx-link-external'></i></a>
</div>
</div>
<div class="portfolio-box">
<img src="Portfolio/images/portfolio.jpg" alt="">
<div class="portfolio-layer">
<h4>Formatted Text</h4>
<p>Making the unformatted text become neat.</p>
<a href="#"><i class='bx bx-link-external'></i></a>
</div>
</div> -->
<div class="portfolio-box">
<img src="Portfolio/images/ship.png" alt="">
<div class="portfolio-layer">
<h4>Titanic Survivor Prediction</h4>
<p>Analyzing and predicting the survivor of Titanic.</p>
<a href="https://github.com/oktaviannikky/Titanic-Survivor-Prediction" target="_blank"><i class='bx bx-link-external'></i></a>
</div>
</div>
</div>
</section>
<!-- Contact Section Design -->
<section class="contact" id="contact">
<h2 class="heading">Contact <span>Me!</span></h2>
<form action="#">
<div class="input-box">
<input type="text" placeholder="Full Name">
<input type="email" placeholder="Email Address">
</div>
<div class="input-box">
<input type="tel" placeholder="Mobile Number">
<input type="text" placeholder="Email Subject">
</div>
<textarea name="" id="" cols="30" rows="10" placeholder="Your Message"></textarea>
<input type="submit" value="Send Message" class="btn">
</form>
</section>
<!--End of Header Section-->
<!-- Footer Design -->
<footer class="footer">
<div class="footer-text">
<p>Copyright © 2023 | All Rights Reserved.</p>
</div>
<div class="footer-iconTop">
<a href="#home"><i class='bx bx-up-arrow-alt'></i></a>
</div>
</footer>
<!-- scroll reveal -->
<script src="https://unpkg.com/scrollreveal"></script>
<!-- typed js -->
<script src="https://unpkg.com/[email protected]/dist/typed.umd.js"></script>
<!--Custom JS-->
<script src="Portfolio/script.js"></script>
</body>
</html>