-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
94 lines (87 loc) · 5.09 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/styles.css" />
<link rel="stylesheet" type="text/css" href="css/animation.css" />
<!-- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous"> -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- <script src="https://cdn.tailwindcss.com"></script> -->
<title>Fenlianto NS</title>
</head>
<body id="home">
<div class="cube"></div>
<div class="cube"></div>
<div class="cube"></div>
<div class="cube"></div>
<div class="cube"></div>
<div class="cube"></div>
<div class="wave" id="wave1"></div>
<div class="wave" id="wave2"></div>
<div class="wave" id="wave3"></div>
<div class="wave" id="wave4"></div>
<header>
<div class="header-container">
<div class="header-title-container">
<h3 class="header-titleH"><pre><mark class="header-title"></mark><mark class="cursor">|</mark></pre></h3>
</div>
<div class="portrait-container">
<img class="portrait" src="./resources/portrait.jpeg">
</div>
</div>
</header>
<nav>
<ul>
<li><a class="nav-link nav-active" href="#home"><span class="fa fa-home"></span> Home</a></li>
<li><a class="nav-link" href="#about"><span class="fa fa-exclamation-circle"></span> About</a></li>
<li><a class="nav-link" href="#skills"><span class="fa fa-cogs"></span> Skills</a></li>
<li><a class="nav-link" href="#projects"><span class="fa fa-folder"></span> Projects</a></li>
<li><a class="nav-link" href="#socials"><span class="fa fa-github"></span> Socials</a></li>
</ul>
</nav>
<main class="main-container">
<section id="about" class="section-container">
<h3 class="section-title">ABOUT</h3>
<p>
I am an 18-year-old high school student with a strong passion for coding, which I actively pursue during my free time. My interest in coding has led me to explore a wide range of programming languages and projects, further fueling my enthusiasm for technology and software development.
</p>
<div class="tech-stack-container">
<p>Tech Stack: </p>
</div>
</section>
<section id="skills" class="section-container">
<h3 class="section-title">SKILLS</h3>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quisquam recusandae vitae ut delectus impedit quis animi labore quos fugiat. A vel quibusdam, odit aliquam ipsum ipsa! Consequatur obcaecati autem in!
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quas nulla id corporis reprehenderit autem fugiat laborum, voluptates vitae. Quae ipsa inventore iure pariatur nulla laudantium fuga sint voluptatem nam facilis?
</p>
<!-- <div class="text-container">
<span class="fade-text">Text 1</span>
<span class="fade-text">Text 2</span>
<span class="fade-text">Text 3</span>
</div> -->
</section>
<section id="projects" class="section-container">
<h3 class="section-title">PROJECTS</h3>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quisquam recusandae vitae ut delectus impedit quis animi labore quos fugiat. A vel quibusdam, odit aliquam ipsum ipsa! Consequatur obcaecati autem in!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate, provident quasi iusto, quis magni odio esse dicta maxime expedita accusamus architecto sapiente nisi at iste dolorem quisquam explicabo perferendis quo?
</p>
</section>
<section id="socials" class="section-container">
<h3 class="section-title">SOCIALS</h3>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quisquam recusandae vitae ut delectus impedit quis animi labore quos fugiat. A vel quibusdam, odit aliquam ipsum ipsa! Consequatur obcaecati autem in!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, possimus expedita. Quos, natus assumenda? Quidem vitae dolores quo amet est inventore esse! Soluta vitae quis, rerum eos qui ea tenetur.
</p>
</section>
</main>
<footer>
<p>Made with love by Rokuazery❤️</p>
</footer>
<script src="scripts/main.js"></script>
<script src="https://kit.fontawesome.com/072ce98d6e.js" crossorigin="anonymous"></script>
<!-- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm" crossorigin="anonymous"></script> -->
</body>
</html>