Skip to content

Commit

Permalink
update
Browse files Browse the repository at this point in the history
  • Loading branch information
@fatkhurrhn
fatkhurrhn committed Feb 20, 2025
1 parent 7190a50 commit d1c6667
Show file tree
Hide file tree
Showing 6 changed files with 415 additions and 91 deletions.
176 changes: 176 additions & 0 deletions htmlku/linktree.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,176 @@
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>NFA Academy - Fatkhurrhn</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body style="margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Arial, sans-serif; display: flex; justify-content: center; align-items: center; min-height: 100vh; position: relative;">

<div style="width: 100%; max-width: 700px; display: flex; flex-direction: column; align-items: center; gap: 20px; padding: 20px;">
<div style="display: flex; flex-direction: column; align-items: center; gap: 15px; margin-top: 50px;">
<div style="position: relative; width: 180px; height: 180px;">
<img src="pp.png" alt="Fatkhurrhn's profile" style="width: 100%; height: 100%; object-fit: cover; border-radius: 50%; border: 5px solid #4c9aff;">
<div class="dark-mode-toggle" style="position: absolute; bottom: 15px; right: 5px; background-color: black; color: white; border: 2px solid white; border-radius: 50%; width: 30px; height: 30px; display: flex; justify-content: center; align-items: center; cursor: pointer;">
<i class="fas fa-moon"></i>
</div>
</div>
<div class="profile-name" style="display: flex; align-items: center; gap: 10px; font-size: 28px; font-weight: bold; margin-bottom: -12px;">
Fatkhurrhn
<span style="color: #4c9aff; font-size: 24px;">
<i class="fas fa-check-circle"></i>
</span>
</div>
<a href="https://fatkhurrhn.vercel.app/" style="color: #4c9aff; text-decoration: none; font-size: 16px;">https://fatkhurrhn.vercel.app/</a>
<div class="bio-text" style="text-align: center; font-size: 16px; margin-bottom: 1px;">
Pengen jago ngoding kaya panutan, pak dika hhe
</div>
</div>
<div style="display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 20px;">
<a href="https://fatkhurrhn.vercel.app/"
style="display: flex; align-items: center; gap: 6px; background-color: #f3f4f6; color: #333; padding: 6px 12px; border-radius: 15px; text-decoration: none; font-size: 13px; font-weight: 500; transition: background 0.2s, box-shadow 0.2s;">
<i class="fas fa-globe"></i> Website
</a>
<a href="https://github.com/fatkhurrhn"
style="display: flex; align-items: center; gap: 6px; background-color: #f3f4f6; color: #333; padding: 6px 12px; border-radius: 15px; text-decoration: none; font-size: 13px; font-weight: 500; transition: background 0.2s, box-shadow 0.2s;">
<i class="fab fa-github"></i> Github
</a>
<a href="http://instagram.com/story.thur"
style="display: flex; align-items: center; gap: 6px; background-color: #f3f4f6; color: #333; padding: 6px 12px; border-radius: 15px; text-decoration: none; font-size: 13px; font-weight: 500; transition: background 0.2s, box-shadow 0.2s;">
<i class="fab fa-instagram"></i> Instagram
</a>
<a href="https://www.tiktok.com/@fatkhurrhnn"
style="display: flex; align-items: center; gap: 6px; background-color: #f3f4f6; color: #333; padding: 6px 12px; border-radius: 15px; text-decoration: none; font-size: 13px; font-weight: 500; transition: background 0.2s, box-shadow 0.2s;">
<i class="fab fa-tiktok"></i> Tiktok
</a>
<a href="https://www.linkedin.com/in/fatkhurrhn/"
style="display: flex; align-items: center; gap: 6px; background-color: #f3f4f6; color: #333; padding: 6px 12px; border-radius: 15px; text-decoration: none; font-size: 13px; font-weight: 500; transition: background 0.2s, box-shadow 0.2s;">
<i class="fab fa-linkedin"></i> LinkedIn
</a>
</div>

<div style="width: 100%; display: flex; flex-direction: column; gap: 12px;">
<a href="#" id="openPopup" style="display: flex; align-items: center; justify-content: space-between; background-color: #FAFAFA; border-radius: 12px; padding: 14px 18px; text-decoration: none; color: #222; transition: all 0.2s; border: 1px solid #EAEAEA; box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.05);">
<div style="display: flex; align-items: center; gap: 12px;">
<div style="width: 40px; height: 40px; display: flex; justify-content: center; align-items: center; border-radius: 10px; font-size: 18px; background-color: #4A4A4A; color: white;">
<i class="fas fa-layer-group"></i>
</div>
<div style="font-weight: 600; font-size: 15px; color: #333;">NF Academy Course - Fullstack</div>
</div>
<div style="font-size: 18px; color: #777;">
<i class="fas fa-arrow-right"></i>
</div>
</a>

<div id="popupContainer" style="display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.3); display: flex; justify-content: center; align-items: center;">
<div id="popup" style="background: white; padding: 20px; border-radius: 10px; box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2); border: 1px solid #EAEAEA; width: 320px; text-align: center; position: relative;">
<span id="closePopup" style="position: absolute; top: 10px; right: 15px; cursor: pointer; font-size: 20px; color: #777; font-weight: bold;">&times;</span>
<h3 style="margin: 0 0 10px; color: #333; font-size: 18px;">Link Penting</h3>
<ul style="list-style: none; padding: 0; margin: 0;">
<li style="padding: 8px 0;"><a href="#" style="text-decoration: none; color: #007BFF; font-size: 16px;">Dashboard</a></li>
<li style="padding: 8px 0;"><a href="#" style="text-decoration: none; color: #007BFF; font-size: 16px;">Course Materials</a></li>
<li style="padding: 8px 0;"><a href="#" style="text-decoration: none; color: #007BFF; font-size: 16px;">Community Forum</a></li>
</ul>
</div>
</div>

<a href="#" style="display: flex; align-items: center; justify-content: space-between; background-color: #FAFAFA; border-radius: 12px; padding: 14px 18px; text-decoration: none; color: #222; transition: all 0.2s; border: 1px solid #EAEAEA; box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.05);">
<div style="display: flex; align-items: center; gap: 12px;">
<div style="width: 40px; height: 40px; display: flex; justify-content: center; align-items: center; border-radius: 10px; font-size: 18px; background-color: #FF6D42; color: white;">
<i class="fas fa-cloud"></i>
</div>
<div style="font-weight: 600; font-size: 15px; color: #333;">Dicoding | Bangkit - Cloud Computing</div>
</div>
<div style="font-size: 18px; color: #777;">
<i class="fas fa-arrow-right"></i>
</div>
</a>
</div>

</div>

<script>
// popup
document.getElementById('openPopup').addEventListener('click', function(event) {
event.preventDefault();
document.getElementById('popupContainer').style.display = 'flex';
});

document.getElementById('closePopup').addEventListener('click', function() {
document.getElementById('popupContainer').style.display = 'none';
});

document.getElementById('popupContainer').addEventListener('click', function(event) {
let popup = document.getElementById('popup');
if (!popup.contains(event.target)) {
document.getElementById('popupContainer').style.display = 'none';
}
});

// Efek hover lebih halus
document.querySelectorAll("a").forEach(link => {
link.addEventListener("mouseenter", () => {
link.style.background = "#e5e7eb";
link.style.boxShadow = "0px 2px 5px rgba(0, 0, 0, 0.1)";
});
link.addEventListener("mouseleave", () => {
link.style.background = "#f3f4f6";
link.style.boxShadow = "none";
});
});

// Dark mode toggle functionality
const darkModeToggle = document.querySelector('.dark-mode-toggle');
const body = document.body;
const gradientDiv = document.querySelector('.gradient-bg'); // Gunakan class yang lebih aman

// Cek apakah user pernah menyimpan preferensi dark mode
let isDarkMode = localStorage.getItem('darkMode') === 'enabled';

function applyDarkMode() {
body.classList.add('dark-mode');
if (gradientDiv) gradientDiv.style.opacity = '0.3';
darkModeToggle.innerHTML = '<i class="fas fa-sun"></i>';
localStorage.setItem('darkMode', 'enabled');
}

function removeDarkMode() {
body.classList.remove('dark-mode');
if (gradientDiv) gradientDiv.style.opacity = '1';
darkModeToggle.innerHTML = '<i class="fas fa-moon"></i>';
localStorage.setItem('darkMode', 'disabled');
}

// Terapkan mode berdasarkan preferensi yang tersimpan
if (isDarkMode) {
applyDarkMode();
}

darkModeToggle.addEventListener('click', () => {
isDarkMode = !isDarkMode;
isDarkMode ? applyDarkMode() : removeDarkMode();
});

// Ganti gambar profil jika tersedia
document.addEventListener('DOMContentLoaded', () => {
const profileImg = document.querySelector('img[alt="Fatkhurrhn\'s profile"]');
if (profileImg) {
profileImg.src = "pp.png"; // Perbaikan URL
profileImg.onerror = () => {
profileImg.src = "pp.png";
};
}
});
</script>

<style>
/* Tambahkan class dark-mode */
.dark-mode {
background: #121212 !important;
color: #fff;
}
</style>

</body>
</html>
60 changes: 60 additions & 0 deletions htmlku/xsyx.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mattdicx - Video Creator | Digital Creator</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body style="margin: 0; padding: 0; font-family: 'Helvetica', Arial, sans-serif; background-color: #131313; color: white;">
<header style="display: flex; justify-content: space-between; align-items: center; padding: 20px 10%; max-width: 1200px; margin: 0 auto;">
<div class="logo" style="font-size: 24px; font-weight: bold;">
Mattdicx
</div>
<nav style="display: flex; gap: 30px;">
<a href="#" style="color: white; text-decoration: none; font-size: 16px;">Assets</a>
<a href="#" style="color: white; text-decoration: none; font-size: 16px;">Gear</a>
<a href="#" style="color: white; text-decoration: none; font-size: 16px;">Courses</a>
</nav>
</header>

<main style="display: flex; justify-content: center; align-items: center; padding: 40px 10%; max-width: 1200px; margin: 0 auto; gap: 60px;">
<div class="profile-image" style="flex: 0 0 40%;">
<img src="https://media.licdn.com/dms/image/v2/D5603AQFSeewLSkNWqw/profile-displayphoto-shrink_400_400/B56ZOsnbZfGgAo-/0/1733767838340?e=1744243200&v=beta&t=UxHXMMALF5Qc2QZ4dhi3Ers-M-nP6NjBjaPPcrgHLY8" alt="Mattdicx Profile" style="width: 100%; max-width: 450px; height: auto; border-radius: 50%; object-fit: cover;">
</div>

<div class="profile-content" style="flex: 0 0 50%;">
<p style="color: #e0e0e0; margin-bottom: 10px; font-size: 16px;">Video Creator | Digital Creator</p>

<h1 style="font-size: 48px; margin: 10px 0 20px 0; display: flex; align-items: center; gap: 10px;">
Mattdicx
<span style="color: #38b2ef; font-size: 24px;">
<i class="fas fa-cog"></i>
</span>
</h1>

<p style="line-height: 1.6; margin-bottom: 30px; font-size: 16px; max-width: 540px;">
I am based in Jakarta ID and started to become a content creator since 2022 consistently creating content on social media.
</p>

<a href="#contact" style="display: inline-block; background-color: #333333; color: white; padding: 12px 24px; text-decoration: none; border-radius: 6px; font-weight: bold; transition: background-color 0.3s ease;">
Let's work together! ✨
</a>
</div>
</main>

<footer style="max-width: 1200px; margin: 60px auto 20px; padding: 0 10%; text-align: center;">
<div class="social-links" style="display: flex; justify-content: center; gap: 40px; margin-bottom: 40px;">
<a href="#" style="color: white; font-size: 24px;"><i class="fab fa-instagram"></i></a>
<a href="#" style="color: white; font-size: 24px;"><i class="fab fa-tiktok"></i></a>
<a href="#" style="color: white; font-size: 24px;"><i class="fab fa-youtube"></i></a>
<a href="#" style="color: white; font-size: 24px;"><i class="fab fa-whatsapp"></i></a>
<a href="#" style="color: white; font-size: 24px;"><i class="far fa-envelope"></i></a>
</div>

<div class="copyright" style="color: #888; font-size: 14px;">
© 2024 Mattdicx. All Rights Reserved.
</div>
</footer>
</body>
</html>
9 changes: 9 additions & 0 deletions nfa-course/cv.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -234,6 +234,15 @@
</style>
</head>
<body>
<div style="width: 40px; display: flex; align-items: center;">
<a href="index.html" style="display: flex; align-items: center; gap: 5px;">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="20" height="20">
<path d="M20 3H4C3.44772 3 3 3.44772 3 4V20C3 20.5523 3.44772 21 4 21H20C20.5523 21 21 20.5523 21 20V4C21 3.44772 20.5523 3 20 3ZM5 19V5H19V19H5ZM8 8V16H10V11.4142L15.2929 16.7071L16.7071 15.2929L11.4142 10H16V8H8Z"></path>
</svg>
Homepage
</a>
</div>

<div class="container">
<div class="left-column">
<div class="profile-card">
Expand Down
Loading

0 comments on commit d1c6667

Please sign in to comment.