-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
167 lines (136 loc) · 6.46 KB
/
Copy pathindex.html
File metadata and controls
167 lines (136 loc) · 6.46 KB
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
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Personal Branding - Teknik Informatika</title>
<link rel="stylesheet" href="styles.css">
<!-- Tambahkan link Font Awesome di <head> -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" rel="stylesheet">
<script type="module" src="https://cdn.jsdelivr.net/gh/domyid/tracker@latest/index.js"></script>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-LG2SD2SF37"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-LG2SD2SF37');
</script>
<style>
body {
background: url("img/desktop-animation4.gif") no-repeat center center fixed;
background-size: cover;
}
</style>
</head>
<body>
<header>
<h1 class="fade-in">Muhammad Malik Nur</h1>
<p class="fade-in">D4 Teknik Informatika | Web Developer | Tech Enthusiast</p>
</header>
<nav>
<ul>
<li><a href="#about">Tentang Saya</a></li>
<li><a href="#skills">Skill</a></li>
<li><a href="#projects">Proyek</a></li>
<li><a href="#contact">Kontak</a></li>
</ul>
</nav>
<section id="about" class="slide-up">
<img src="img/Mall.png" alt="Gambar Profil" class="project-image small">
<h2>Tentang Saya</h2>
<p>Saya adalah seorang mahasiswa Teknik Informatika yang memiliki ketertarikan dalam Pengembangan Web, Keamanan Siber, dan Kecerdasan Buatan.</p>
<p>Saat saya ini berkuliah di Universitas Logistik dan Bisnis Internasional di Bandung.</p>
<h3>Riwayat Pendidikan</h3>
<ul>
<li>SMP Negeri 1 Tasikmalaya</li>
<li>SMK Negeri 2 Tasikmalaya</li>
</ul>
<div class="profile"></div>
</section>
<section id="skills" class="slide-up">
<h2>Keahlian Pemrograman</h2>
<div class="skill-carousel">
<div class="carousel-track">
<div class="skill-item">
<img src="img/html.png" alt="HTML">
<p>HTML (membuat struktur halaman web).</p>
</div>
<div class="skill-item">
<img src="img/css.png" alt="CSS">
<p>CSS (mengatur tampilan dan desain sebuah halaman web). </p>
</div>
<div class="skill-item">
<img src="img/javascript.png" alt="JavaScript">
<p>JavaScript (interaktivitas dan fungsi dinamis ke halaman web).</p>
</div>
<div class="skill-item">
<img src="img/Alice3.png" alt="Alice3">
<p>Alice3 (perangkat lunak pemrograman objek 3D yang dapat digunakan untuk membuat animasi).</p>
</div>
<div class="skill-item">
<img src="img/Greenfoot.png" alt="Greenfoot">
<p>Greenfoot (untuk mengembangkan aplikasi grafis dua dimensi, seperti permainan). </p>
</div>
<div class="skill-item">
<img src="img/Figma.png" alt="Figma">
<p>Figma (mendesain antarmuka pengguna (UI) dan pengalaman pengguna (UX)).</p>
</div>
<div class="skill-item">
<img src="img/Canva.png" alt="Canva">
<p>Canva (desain grafis daring yang memungkinkan penggunanya untuk membuat berbagai macam desain).</p>
</div>
</div>
</div>
</section>
<section id="projects" class="slide-up">
<h2>My Projects</h2>
<div class="projects-container">
<div class="project">
<h3>Project Website UMKM</h3>
<div class="project-item">
<a href="https://iceetheaa.id.biz.id/" target="_blank">
<img src="img/proyek1.png" alt="Gambar Website" class="project-image">
</a>
<p>Website untuk bisnis minuman Ice Theaa dengan menu lengkap dan desain menarik.</p>
</div>
<div class="project-item">
<a href="https://dedgecoffee.id.biz.id/" target="_blank">
<img src="img/proyek2.png" alt="Gambar Website" class="project-image">
</a>
<p>Website D'edge Coffee dengan tampilan elegan dan fitur pemesanan online.</p>
</div>
</div>
</div>
</section>
<section id="contact" class="slide-up" style="display: grid; grid-template-columns: repeat(4, auto); gap: 20px; text-align: center; align-items: center;">
<h2 style="grid-column: span 4; margin-bottom: 20px;">Kontak Saya</h2>
<!-- Email -->
<a href="mailto:Kamalputra1177@email.com" style="text-decoration: none; transition: transform 0.3s; color: rgb(148, 140, 140);">
<i class="fa-solid fa-envelope" style="font-size: 40px;"></i>
<p>Gmail</p>
</a>
<!-- Instagram -->
<a href="https://www.instagram.com/mhmmdmallq/" target="_blank" style="text-decoration: none; transition: transform 0.3s; color: rgb(148, 140, 140);">
<i class="fa-brands fa-instagram" style="font-size: 40px;"></i>
<p>Instagram</p>
</a>
<!-- WhatsApp -->
<a href="https://wa.me/6282122339125" target="_blank" style="text-decoration: none; transition: transform 0.3s; color: rgb(148, 140, 140);">
<i class="fa-brands fa-whatsapp" style="font-size: 40px;"></i>
<p>WhatsApp</p>
</a>
<!-- LinkedIn -->
<a href="https://www.linkedin.com/in/muhammd-malik-ba4a10342" target="_blank" style="text-decoration: none; transition: transform 0.3s; color: rgb(148, 140, 140);">
<i class="fa-brands fa-linkedin" style="font-size: 40px;"></i>
<p>LinkedIn</p>
</a>
<style>
#contact a:hover {
transform: scale(1.2); /* Efek zoom saat hover */
}
</style>
</section>
<script src="script.js"></script>
</body>
</html>