-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
168 lines (162 loc) · 10.9 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vigo Putra</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Anek+Tamil:wght@100..800&display=swap" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" rel="stylesheet" />
<link rel="stylesheet" href="./style/index.css">
<meta name="description" content="Personal website of Vigo Putra">
<meta name="author" content="Vigo Putra">
<meta name="keywords" content="Vigo Putra, artupogiv, frontend developer, web developer">
</head>
<body>
<div class="wrapper">
<div class="wrapper-main">
<header class="sticky-header">
<section id="home">
<h1>
<a href="/">vigo putra</a>
</h1>
<h2>web developer</h2>
<p>learning, pushing, exploring digital world</p>
<nav class="navbar" aria-label="main-navigation">
<ul>
<li class="sidebar-list"><a href="#about">about</a></li>
<li class="sidebar-list"><a href="#experience">experience</a></li>
<li class="sidebar-list"><a href="#projects">projects</a></li>
</ul>
</nav>
</section>
<ul class="social">
<li><a href="https://github.com/artupogiv" target="_blank"><i class="fa-brands fa-github"></i></a></li>
<li><a href="https://linkedin.com/in/vigoputra/" target="_blank"><i class="fa-brands fa-linkedin"></i></a></li>
<li><a href="https://twitter.com/artupogiv" target="_blank"><i class="fa-brands fa-square-x-twitter"></i></a></li>
<li><a href="mailto:artupogiv@gmail.com" target="_blank"><i class="fa-solid fa-envelope"></i></a></li>
</ul>
</header>
<main id="content" class="overflow-content">
<nav class="navbar" aria-label="content-navigation">
<ul>
<li class="sidebar-list">
<div class="hidden"><a href="#about">about</a></div>
<section id="about">
<div class="about-me">
<p>hi, i'm vigo putra</p>
<p>i'm person who enthusiast with tech world that currently based in batam with 8 years of
hands-on experience as a helpdesk in telecommunications network company. i am also
someone who can work in teams and quite adaptive person. currently, i am interested in
developing a career in software and website development.</p>
<p>now i'm learning about <a href="#projects">html, css, and javascript</a> for build some projects to pursuit my career in web development.</p>
</div>
</section>
</li>
<li class="sidebar-list">
<div class="hidden"><a href="#experience">experience</a></div>
<section id="experience">
<div class="work-experience">
<ol class="timeline">
<li class="timeline-list">
<div class="card exp proj">
<span class="year">2016 - present</span>
<div class="summary">
<h3>
<a href="https://telkomakses.co.id/" target="_blank">helpdesk engineer • telkom akses</a>
</h3>
<p>incident management • assist technical data to field technician for troubleshoot • monitoring nms and access point to telkomsel's bts • conducting end to end technical data collection of management core • application/renewal/cancellation of work permits to tower provider • conducting preventive network maintenance for telkomsel’s bts • configure gpon olt - onu (huawei, zte) for telkomsel's bts transmission • make several of reporting dashboards</p>
</div>
</div>
</li>
</ol>
<div class="resume">
<a href="./assets/docs/resume.pdf" target="_blank">view full résumé</a>
</div>
</div>
</section>
</li>
<li class="sidebar-list">
<div class="hidden"><a href="#projects">projects</a></div>
<section id="projects">
<div class="overflow-projects">
<ol class="showcase">
<li class="showcase-list">
<div class="card exp proj">
<div class="thumbnail">
<img src="./assets/img/dummy1.png" alt="dummy">
</div>
<div class="summary">
<h3>
<a href="#">1st project</a>
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras non tincidunt dolor. Etiam eget orci magna. Mauris vestibulum velit dui, ac congue dui eleifend ut. Curabitur vitae ex massa. Proin pharetra nulla felis, nec egestas mi volutpat sit amet. Nam feugiat velit vel pulvinar vestibulum. Praesent pharetra nisl vitae felis faucibus, vel imperdiet tortor mollis. Etiam tempus sapien ac dapibus porta. Aliquam vestibulum mi sem, in ornare quam varius sit amet.</p>
</div>
</div>
</li>
<li class="showcase-list">
<div class="card exp proj">
<div class="thumbnail">
<img src="./assets/img/Home.jpg" alt="dummy">
</div>
<div class="summary">
<h3>
<a href="#">2nd project</a>
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras non tincidunt dolor. Etiam eget orci magna. Mauris vestibulum velit dui, ac congue dui eleifend ut. Curabitur vitae ex massa. Proin pharetra nulla felis, nec egestas mi volutpat sit amet. Nam feugiat velit vel pulvinar vestibulum. Praesent pharetra nisl vitae felis faucibus, vel imperdiet tortor mollis. Etiam tempus sapien ac dapibus porta. Aliquam vestibulum mi sem, in ornare quam varius sit amet.</p>
</div>
</div>
</li>
<li class="showcase-list">
<div class="card exp proj">
<div class="thumbnail">
<img src="./assets/img/dummy.jpg" alt="dummy">
</div>
<div class="summary">
<h3>
<a href="#">3rd project</a>
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras non tincidunt dolor. Etiam eget orci magna. Mauris vestibulum velit dui, ac congue dui eleifend ut. Curabitur vitae ex massa. Proin pharetra nulla felis, nec egestas mi volutpat sit amet. Nam feugiat velit vel pulvinar vestibulum. Praesent pharetra nisl vitae felis faucibus, vel imperdiet tortor mollis. Etiam tempus sapien ac dapibus porta. Aliquam vestibulum mi sem, in ornare quam varius sit amet.</p>
</div>
</div>
</li>
</ol>
</div>
</section>
</li>
</ul>
</nav>
</main>
</div>
<footer id="footer" class="footer">© 2024 Vigo Putra</footer>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
// Function to handle the scroll behavior
function handleScroll() {
const wrapper = document.querySelector('.wrapper');
const overflowContent = document.querySelector('.overflow-content');
wrapper.addEventListener('wheel', function(event) {
event.preventDefault();
overflowContent.scrollTop += event.deltaY;
});
}
// Function to check media query and apply scroll behavior
function checkMediaQuery() {
if (window.matchMedia("(min-width: 799px)").matches) {
handleScroll();
} else {
// Remove the event listener if the screen width is 800px or less
const wrapper = document.querySelector('.wrapper');
wrapper.removeEventListener('wheel', handleScroll);
}
}
// Initial check
checkMediaQuery();
// Listen for window resize events
window.addEventListener('resize', checkMediaQuery);
});
</script>
</body>
</html>