Skip to content

Commit 669e8e4

Browse files
nesangcodenesangcode
authored
Update index.html
1 parent 211ed96 commit 669e8e4

File tree

1 file changed

+163
-21
lines changed

1 file changed

+163
-21
lines changed

‎index.html‎

Lines changed: 163 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,166 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8">
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<link rel="stylesheet" href="styles.css">
7-
<title>Hello!</title>
8-
</head>
9-
<body>
10-
<!-- <div class="opening">Hello World!</div> -->
11-
<div class="header">
12-
<div class="name"><a href=".">Kraken</a></div>
13-
<div class="menu">
14-
<div class="Home"><a href=".">Home</a></div>
15-
<div class="contact"><a href=".">Contact</a></div>
16-
<div class="about"><a href=".">About</a></div>
17-
</div>
18-
</div>
19-
20-
<div class="content">
21-
Hello World!
22-
</div>
23-
</body>
3+
4+
<head>
5+
<meta charset="UTF-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Vanes Angelo | Portfolio</title>
8+
<style>
9+
* {
10+
box-sizing: border-box;
11+
margin: 0;
12+
padding: 0;
13+
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
14+
}
15+
16+
body {
17+
background-color: #fdfdfd;
18+
color: #1a2b4c;
19+
line-height: 1.6;
20+
}
21+
22+
header {
23+
text-align: center;
24+
padding: 4rem 1rem;
25+
}
26+
27+
header h1 {
28+
font-size: 3rem;
29+
margin-bottom: 1rem;
30+
}
31+
32+
header p {
33+
font-size: 1.2rem;
34+
margin-bottom: 2rem;
35+
}
36+
37+
.btn {
38+
background-color: #072a4f;
39+
color: #fff;
40+
padding: 0.7rem 1.5rem;
41+
border: none;
42+
border-radius: 999px;
43+
font-weight: bold;
44+
cursor: pointer;
45+
text-decoration: none;
46+
}
47+
48+
.socials {
49+
margin-top: 2rem;
50+
display: flex;
51+
justify-content: center;
52+
gap: 1rem;
53+
}
54+
55+
.socials a {
56+
background: #eee;
57+
padding: 0.7rem;
58+
border-radius: 50%;
59+
text-decoration: none;
60+
color: #072a4f;
61+
font-size: 1.2rem;
62+
display: flex;
63+
align-items: center;
64+
justify-content: center;
65+
width: 40px;
66+
height: 40px;
67+
transition: background 0.3s;
68+
}
69+
70+
.socials a:hover {
71+
background: #072a4f;
72+
color: white;
73+
}
74+
75+
nav {
76+
padding: 1rem;
77+
display: flex;
78+
justify-content: center;
79+
gap: 2rem;
80+
background: white;
81+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
82+
position: sticky;
83+
top: 0;
84+
z-index: 10;
85+
}
86+
87+
nav a {
88+
text-decoration: none;
89+
color: #333;
90+
font-weight: bold;
91+
}
92+
93+
nav a.active {
94+
color: #000;
95+
}
96+
97+
#about {
98+
padding: 4rem 2rem;
99+
max-width: 800px;
100+
margin: auto;
101+
text-align: center;
102+
}
103+
104+
#about h2 {
105+
font-size: 2rem;
106+
margin-bottom: 1.5rem;
107+
}
108+
109+
#about p {
110+
font-size: 1.1rem;
111+
color: #555;
112+
margin-bottom: 1rem;
113+
}
114+
115+
@media (max-width: 600px) {
116+
header h1 {
117+
font-size: 2.2rem;
118+
}
119+
header p {
120+
font-size: 1rem;
121+
}
122+
.btn {
123+
font-size: 0.9rem;
124+
padding: 0.6rem 1.2rem;
125+
}
126+
.socials {
127+
flex-direction: row;
128+
flex-wrap: wrap;
129+
}
130+
}
131+
</style>
132+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
133+
</head>
134+
135+
<body>
136+
<nav>
137+
<a href="#about" class="active">About Me</a>
138+
<a href="#">Home</a>
139+
</nav>
140+
141+
<header>
142+
<h1>Hello!</h1>
143+
<p>I’m Vanes Angelo, Full-Stack Developer.</p>
144+
<a href="#about" class="btn">About Me</a>
145+
<div class="socials">
146+
<a href="https://www.linkedin.com/in/nesang" target="_blank" title="LinkedIn"><i class="fab fa-linkedin-in"></i></a>
147+
<a href="https://github.com/nesangcode" target="_blank" title="GitHub"><i class="fab fa-github"></i></a>
148+
<a href="mailto:nesangcode@gmail.com" title="Email"><i class="fas fa-envelope"></i></a>
149+
</div>
150+
</header>
151+
152+
<section id="about">
153+
<h2>About Me</h2>
154+
<p>
155+
Hi! I’m Vanes Angelo, a Computer Science student at Universitas Tanjungpura with a passion for building impactful backend systems and scalable cloud solutions. I thrive in solving real-world problems through code—whether it’s engineering robust APIs, automating workflows, or contributing to open-source projects.
156+
</p>
157+
<p>
158+
With experience in Golang, PHP, and cloud technologies like GCP and Alibaba Cloud, I’ve built everything from thesis support systems to real-time ML data pipelines. I’m also actively involved in programming contests, both as a contestant and a problem setter, and have earned top placements in ICPC and Gemastik.
159+
</p>
160+
<p>
161+
Beyond tech, I enjoy mentoring peers, organizing coding events, and continuously learning new tools to sharpen my craft. Let’s build something great together!
162+
</p>
163+
</section>
164+
</body>
165+
24166
</html>

0 commit comments

Comments
 (0)