-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
103 lines (92 loc) · 11.2 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Portfolio</title>
<link rel="stylesheet" href="src/output.css">
</head>
<body>
<!-- Navbar start -->
<header class="bg-transparent fixed top-0 left-0 w-full flex items-center z-10">
<div class="container">
<div class="flex items-center justify-between relative">
<div class="px-4">
<a href="#home" class="font-bold text-2xl text-primary block py-6">Star.</a>
</div>
<div class="flex items-center px-4">
<button id="burger" name="burger" type="button" class="block absolute right-4">
<span class="burger-line transition duration-300 ease-in-out origin-top-left"></span>
<span class="burger-line transition duration-300 ease-in-out"></span>
<span class="burger-line transition duration-300 ease-in-out origin-bottom-left"></span>
</button>
</div>
</div>
</div>
</header>
<!-- Navbar end -->
<!-- Hero section start -->
<section id="home" class="pt-36">
<div class="container">
<div class="flex flex-wrap">
<div class="w-full self-center px-4 lg:w-1/2">
<h1 class="text-base text-lg font-semibold text-primary lg:text-2xl select-none">Hello, I'm <span class="block font-bold text-dark text-3xl mt-1 lg:text-4xl select-none">Bintang Ramadhan<span class="text-white select-none hover:text-slate-500">, B.Sc.</span></span></h1>
<h2 class="font-medium text-slate-500 text-lg mb-5 lg:text-xl select-none">Technology <span class="text-dark lg:text-xl">Information</span></h2>
<p class="font-medium text-slate-500 mb-10 leading-relaxed">President University</p>
<a href="#" class="bg-primary py-3 px-8 rounded-full text-base font-semibold text-white hover:shadow-lg hover:opacity-80 transition duration-300 ease-in-out select-none">Contact Me</a>
</div>
<div class="w-full self-end px-4 lg:w-1/3">
<div class="relative mt-10 lg:mt-0 lg:right-0">
<img src="img/Star2.png" alt="Star Picture" class="max-w-full mx-auto">
<span class="absolute bottom-8 -z-10 left-1/2 -translate-x-1/3
translate-y-12 lg:scale-120">
<svg width="500" height="500" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<path fill="#38BDF8" d="M29.1,-52.7C35.1,-47,35.5,-33.9,41.1,-23.8C46.7,-13.8,57.5,-6.9,58.1,0.4C58.8,7.6,49.2,15.2,44.4,26.7C39.7,38.2,39.7,53.5,33.1,63.5C26.5,73.5,13.2,78.2,0,78.1C-13.1,78,-26.3,73.2,-33.7,63.6C-41.1,54.1,-42.8,39.9,-50.3,28.5C-57.8,17.1,-71.1,8.6,-74.3,-1.9C-77.5,-12.3,-70.6,-24.5,-61,-32.2C-51.4,-40,-39.1,-43.1,-28.4,-46.2C-17.8,-49.3,-8.9,-52.3,1.3,-54.6C11.6,-56.9,23.1,-58.5,29.1,-52.7Z" transform="translate(100 100) scale(1.2)" />
</svg>
</span>
</div>
</div>
</div>
</div>
</section>
<!-- Hero section end -->
<br><br><br><br>
<!-- About section star -->
<section id="about" class="pt-36 pb-32">
<div class="container">
<div class="flex flex-wrap">
<div class="w-full px-4 mb-10 lg:w-1/2">
<h4 class="font-bold uppercase text-primary text-lg mb-3">About Me</h4>
<h2 class="font-bold text-dark text-3xl mb-5 max-w-md lg:text-4xl">Bintang</h2>
<p class="font-medium text-base text-slate-500 max-w-xl lg:text-lg">Is a graduate of SMAN 15 BEKASI, currently pursuing a degree in Information Technology at President University, batch of 2023. I am building a strong foundation in computer science principles and practical skills to excel in the field of IT. My overarching goal is to leverage technology to make a meaningful impact on society.</p>
</div>
<div class="w-full px-4 lg:w-1/2">
<h3 class="font-semibold text-dark text-2xl mb-6 lg:text-3xl lg:pt-10">Let's be friend</h3>
<p class="font-medium text-base text-slate-500 mb-6 lg:text-lg">My journey revolves around technology, where I explore its potential for positive change while upholding ethical standards. Balancing academic pursuits with personal interests, I enjoy delving into coding projects and staying updated with the latest tech trends.
</p>
<div class="flex items-center">
<!-- Linkedin -->
<a href="https://www.linkedin.com/in/hafidh-bintang-ramadhan-96209728b/" target="_blank" class="w-9 h-9 mr-3 rounded-full flex justify-center items-center border border-slate-300 hover:text-slate-400 hover:border-slate-200">
<svg role="img" width="20px" class="fill-current" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>LinkedIn</title><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
</a>
<!-- Instagram -->
<a href="https://www.instagram.com/tanqqqra/" target="_blank" class="w-9 h-9 mr-3 rounded-full flex justify-center items-center border border-slate-300 hover:text-slate-400 hover:border-slate-200">
<svg role="img" width="20px" class="fill-current" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Instagram</title><path d="M7.0301.084c-1.2768.0602-2.1487.264-2.911.5634-.7888.3075-1.4575.72-2.1228 1.3877-.6652.6677-1.075 1.3368-1.3802 2.127-.2954.7638-.4956 1.6365-.552 2.914-.0564 1.2775-.0689 1.6882-.0626 4.947.0062 3.2586.0206 3.6671.0825 4.9473.061 1.2765.264 2.1482.5635 2.9107.308.7889.72 1.4573 1.388 2.1228.6679.6655 1.3365 1.0743 2.1285 1.38.7632.295 1.6361.4961 2.9134.552 1.2773.056 1.6884.069 4.9462.0627 3.2578-.0062 3.668-.0207 4.9478-.0814 1.28-.0607 2.147-.2652 2.9098-.5633.7889-.3086 1.4578-.72 2.1228-1.3881.665-.6682 1.0745-1.3378 1.3795-2.1284.2957-.7632.4966-1.636.552-2.9124.056-1.2809.0692-1.6898.063-4.948-.0063-3.2583-.021-3.6668-.0817-4.9465-.0607-1.2797-.264-2.1487-.5633-2.9117-.3084-.7889-.72-1.4568-1.3876-2.1228C21.2982 1.33 20.628.9208 19.8378.6165 19.074.321 18.2017.1197 16.9244.0645 15.6471.0093 15.236-.005 11.977.0014 8.718.0076 8.31.0215 7.0301.0839m.1402 21.6932c-1.17-.0509-1.8053-.2453-2.2287-.408-.5606-.216-.96-.4771-1.3819-.895-.422-.4178-.6811-.8186-.9-1.378-.1644-.4234-.3624-1.058-.4171-2.228-.0595-1.2645-.072-1.6442-.079-4.848-.007-3.2037.0053-3.583.0607-4.848.05-1.169.2456-1.805.408-2.2282.216-.5613.4762-.96.895-1.3816.4188-.4217.8184-.6814 1.3783-.9003.423-.1651 1.0575-.3614 2.227-.4171 1.2655-.06 1.6447-.072 4.848-.079 3.2033-.007 3.5835.005 4.8495.0608 1.169.0508 1.8053.2445 2.228.408.5608.216.96.4754 1.3816.895.4217.4194.6816.8176.9005 1.3787.1653.4217.3617 1.056.4169 2.2263.0602 1.2655.0739 1.645.0796 4.848.0058 3.203-.0055 3.5834-.061 4.848-.051 1.17-.245 1.8055-.408 2.2294-.216.5604-.4763.96-.8954 1.3814-.419.4215-.8181.6811-1.3783.9-.4224.1649-1.0577.3617-2.2262.4174-1.2656.0595-1.6448.072-4.8493.079-3.2045.007-3.5825-.006-4.848-.0608M16.953 5.5864A1.44 1.44 0 1 0 18.39 4.144a1.44 1.44 0 0 0-1.437 1.4424M5.8385 12.012c.0067 3.4032 2.7706 6.1557 6.173 6.1493 3.4026-.0065 6.157-2.7701 6.1506-6.1733-.0065-3.4032-2.771-6.1565-6.174-6.1498-3.403.0067-6.156 2.771-6.1496 6.1738M8 12.0077a4 4 0 1 1 4.008 3.9921A3.9996 3.9996 0 0 1 8 12.0077"/></svg>
</a>
<!-- Tiktok -->
<a href="https://www.tiktok.com/@byhnnnyrhn" target="_blank" class="w-9 h-9 mr-3 rounded-full flex justify-center items-center border border-slate-300 hover:text-slate-400 hover:border-slate-200">
<svg role="img" width="20px" class="fill-current" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>TikTok</title><path d="M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z"/></svg>
</a>
<!-- Discord -->
<a href="halusinastar_82966" target="_blank" class="w-9 h-9 mr-3 rounded-full flex justify-center items-center border border-slate-300 hover:text-slate-400 hover:border-slate-200">
<svg role="img" width="20px" class="fill-current" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Discord</title><path d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z"/></svg>
</a>
</div>
</div>
</div>
</div>
</section>
<!-- About section end -->
<script src="js/script.js"></script>
</body>
</html>