<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portofolio Raden Roro Jasmine Aulia AS</title>
<!-- Tailwind CSS CDN -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Inter Font -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
<!-- Font Awesome for Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<style>
body {
font-family: 'Inter', sans-serif;
background-color: #e0f2fe; /* Light baby blue - Tailwind blue-100 */
color: #333; /* Dark gray for general text */
}
.section-title {
position: relative;
display: inline-block;
padding-bottom: 8px;
margin-bottom: 24px;
font-size: 2.5rem; /* Slightly smaller for h2 */
color: #d946ef; /* Fuchsia 600 for headlines */
}
.section-title::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 50%;
height: 3px;
background-color: #e879f9; /* Fuchsia 500 */
border-radius: 9999px;
}
/* Custom animations */
@keyframes fadeInDown {
from { opacity: 0; transform: translateY(-20px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in-down { animation: fadeInDown 0.8s ease-out forwards; }
.animate-fade-in-up { animation: fadeInUp 0.8s ease-out forwards; }
.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
</style>
</head>
<body class="antialiased">
<!-- Hero Section -->
<section id="hero" class="relative bg-gradient-to-r from-sky-400 to-fuchsia-500 text-white py-20 px-4 md:px-8 flex items-center justify-center min-h-screen">
<div class="max-w-4xl mx-auto text-center z-10">
<h1 class="text-3xl md:text-5xl font-extrabold leading-tight mb-4 animate-fade-in-down">
Raden Roro Jasmine Aulia AS
</h1>
<p class="text-xl md:text-2xl font-light mb-6 animate-fade-in-up">
Mahasiswa Produksi Media | Passionate tentang Konversi Media & Kekayaan Intelektual
</p>
<p class="text-sm md:text-base mb-8 max-w-2xl mx-auto animate-fade-in-up delay-100">
Jelajahi bagaimana teknologi membentuk media sambil memastikan perlindungan hukumnya. Saya berfokus pada transformasi konten digital, lisensi media, dan manajemen IP. Dengan pengalaman dalam pengorganisasian acara dan proyek berbasis IP, saya terus mencari cara inovatif untuk mengoptimalkan dan menjaga media di era digital.
</p>
<div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4 animate-fade-in-up delay-200">
<a href="#projects" class="bg-white text-fuchsia-700 hover:bg-gray-100 px-6 py-3 rounded-full text-base font-semibold transition duration-300 ease-in-out transform hover:scale-105 shadow-lg">
Lihat Proyek Saya
</a>
<a href="#contact" class="bg-transparent border-2 border-white text-white hover:bg-white hover:text-fuchsia-700 px-6 py-3 rounded-full text-base font-semibold transition duration-300 ease-in-out transform hover:scale-105 shadow-lg">
Hubungi Saya
</a>
</div>
</div>
<div class="absolute inset-0 bg-black opacity-30 z-0"></div>
</section>
<!-- Core Skills Section -->
<section id="skills" class="py-16 px-4 md:px-8 bg-blue-50">
<div class="max-w-6xl mx-auto">
<h2 class="text-4xl font-bold text-center mb-12 section-title mx-auto">Keahlian Inti</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Skill Category: Media Intelligence & Data Analysis -->
<div class="bg-white p-6 rounded-lg shadow-md hover:shadow-xl transition duration-300 ease-in-out transform hover:-translate-y-1">
<h3 class="text-xl font-semibold mb-4 text-fuchsia-700 flex items-center">
<i class="fas fa-chart-line mr-3 text-fuchsia-500"></i> Media Intelligence & Analisis Data
</h3>
<ul class="list-disc list-inside text-base text-gray-700 space-y-2">
<li>Analisis Tren Media Sosial</li>
<li>Pengumpulan Data (Scraping)</li>
<li>Visualisasi Data</li>
<li>Laporan Media Profesional</li>
<li>Google Trends</li>
</ul>
</div>
<!-- Skill Category: AI & LLM Utilization -->
<div class="bg-white p-6 rounded-lg shadow-md hover:shadow-xl transition duration-300 ease-in-out transform hover:-translate-y-1">
<h3 class="text-xl font-semibold mb-4 text-fuchsia-700 flex items-center">
<i class="fas fa-brain mr-3 text-fuchsia-500"></i> Pemanfaatan AI & LLM
</h3>
<ul class="list-disc list-inside text-base text-gray-700 space-y-2">
<li>ChatGPT</li>
<li>Google Gemini</li>
<li>Integrasi LLM untuk Laporan</li>
</ul>
</div>
<!-- Skill Category: Web Development & Tools -->
<div class="bg-white p-6 rounded-lg shadow-md hover:shadow-xl transition duration-300 ease-in-out transform hover:-translate-y-1">
<h3 class="text-xl font-semibold mb-4 text-fuchsia-700 flex items-center">
<i class="fas fa-laptop-code mr-3 text-fuchsia-500"></i> Pengembangan Web & Tools
</h3>
<ul class="list-disc list-inside text-base text-gray-700 space-y-2">
<li>Google Colab</li>
<li>Streamlit</li>
<li>Cloudflare Pages</li>
<li>HTML/CSS Dasar</li>
</ul>
</div>
</div>
</div>
</section>
<!-- Featured Projects Section -->
<section id="projects" class="py-16 px-4 md:px-8 bg-blue-100">
<div class="max-w-6xl mx-auto">
<h2 class="text-4xl font-bold text-center mb-12 section-title mx-auto">Proyek Unggulan</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-10">
<!-- Project 1: Analisis Google Trends dan AI untuk Media Intelligence -->
<div class="bg-white rounded-lg shadow-md overflow-hidden flex flex-col hover:shadow-xl transition duration-300 ease-in-out">
<div class="p-6 flex-1">
<h3 class="text-xl font-bold mb-3 text-fuchsia-800">Analisis Google Trends & AI untuk Media Intelligence</h3>
<p class="text-gray-700 text-sm mb-4">
Menganalisis tren pasar dari dua merek berbeda, Apple & Samsung, menggunakan Google Trends dan ChatGPT.
</p>
<div class="mb-4">
<h4 class="text-md font-semibold text-gray-800 mb-2">Tools yang Digunakan:</h4>
<ul class="list-disc list-inside text-sm text-gray-700 space-y-1 ml-4">
<li>Google Trends</li>
<li>ChatGPT</li>
</ul>
</div>
<p class="text-xs text-gray-600 mb-4">
<strong>Dampak:</strong> Membantu memahami tren pasar dan posisi merek.
</p>
<div class="flex flex-wrap gap-3">
<a href="https://www.canva.com/design/DAGhnxIu-xE/6hy_Xym_SenCg_wIbqpjlg/edit?utm_content=DAGhnxIu-xE&utm_campaign=designshare&utm_medium=link2&utm_source=sharebutton" target="_blank" rel="noopener noreferrer" class="bg-fuchsia-600 text-white px-4 py-2 rounded-full text-xs font-semibold hover:bg-fuchsia-700 transition duration-300">
Demo Live <i class="fas fa-external-link-alt ml-1"></i>
</a>
<a href="https://github.com/jsm280405" target="_blank" rel="noopener noreferrer" class="bg-gray-800 text-white px-4 py-2 rounded-full text-xs font-semibold hover:bg-gray-900 transition duration-300">
GitHub <i class="fab fa-github ml-1"></i>
</a>
</div>
</div>
</div>
<!-- Project 2: Scraping dan Integrasi LLM untuk Laporan Media Intelligence -->
<div class="bg-white rounded-lg shadow-md overflow-hidden flex flex-col hover:shadow-xl transition duration-300 ease-in-out">
<div class="p-6 flex-1">
<h3 class="text-xl font-bold mb-3 text-fuchsia-800">Scraping & Integrasi LLM untuk Laporan Media Intelligence</h3>
<p class="text-gray-700 text-sm mb-4">
Memfilter data dari website menjadi lebih rapi dan sesuai kebutuhan, dengan fokus pada tren #KaburAjaDulu.
</p>
<div class="mb-4">
<h4 class="text-md font-semibold text-gray-800 mb-2">Tools yang Digunakan:</h4>
<ul class="list-disc list-inside text-sm text-gray-700 space-y-1 ml-4">
<li>Data Scraper</li>
<li>ChatGPT</li>
</ul>
</div>
<p class="text-xs text-gray-600 mb-4">
<strong>Dampak:</strong> Mempercepat dan merapikan proses penyusunan laporan media.
</p>
<div class="flex flex-wrap gap-3">
<a href="https://docs.google.com/document/d/1jYifJ-0vss2qN_X8B9fcA-hi7EcODLDbXmjrXxTU-7I/edit?usp=sharing" target="_blank" rel="noopener noreferrer" class="bg-fuchsia-600 text-white px-4 py-2 rounded-full text-xs font-semibold hover:bg-fuchsia-700 transition duration-300">
Demo Live <i class="fas fa-external-link-alt ml-1"></i>
</a>
<a href="https://github.com/jsm280405" target="_blank" rel="noopener noreferrer" class="bg-gray-800 text-white px-4 py-2 rounded-full text-xs font-semibold hover:bg-gray-900 transition duration-300">
GitHub <i class="fab fa-github ml-1"></i>
</a>
</div>
</div>
</div>
<!-- Project 3: Dasbor Intelijen Media Interaktif HALALMART -->
<div class="bg-white rounded-lg shadow-md overflow-hidden flex flex-col hover:shadow-xl transition duration-300 ease-in-out">
<div class="p-6 flex-1">
<h3 class="text-xl font-bold mb-3 text-fuchsia-800">Dasbor Intelijen Media Interaktif HALALMART</h3>
<p class="text-gray-700 text-sm mb-4">
Membuat chart dan diagram dari data yang disajikan, memberikan visualisasi data intelijen media.
</p>
<div class="mb-4">
<h4 class="text-md font-semibold text-gray-800 mb-2">Tools yang Digunakan:</h4>
<ul class="list-disc list-inside text-sm text-gray-700 space-y-1 ml-4">
<li>Google Colab</li>
<li>ChatGPT</li>
</ul>
</div>
<p class="text-xs text-gray-600 mb-4">
<strong>Dampak:</strong> Memudahkan pemahaman data melalui visualisasi interaktif.
</p>
<div class="flex flex-wrap gap-3">
<a href="https://www.canva.com/design/DAGoLKVWOtc/ymTGudbNlbmdp9jAgI9Ztg/edit?utm_content=DAGoLKVWOtc&utm_campaign=designshare&utm_medium=link2&utm_source=sharebutton" target="_blank" rel="noopener noreferrer" class="bg-fuchsia-600 text-white px-4 py-2 rounded-full text-xs font-semibold hover:bg-fuchsia-700 transition duration-300">
Demo Live <i class="fas fa-external-link-alt ml-1"></i>
</a>
<a href="https://github.com/jsm280405" target="_blank" rel="noopener noreferrer" class="bg-gray-800 text-white px-4 py-2 rounded-full text-xs font-semibold hover:bg-gray-900 transition duration-300">
GitHub <i class="fab fa-github ml-1"></i>
</a>
</div>
</div>
</div>
<!-- Project 4: Gemini Data Dashboard -->
<div class="bg-white rounded-lg shadow-md overflow-hidden flex flex-col hover:shadow-xl transition duration-300 ease-in-out">
<div class="p-6 flex-1">
<h3 class="text-xl font-bold mb-3 text-fuchsia-800">Gemini Data Dashboard</h3>
<p class="text-gray-700 text-sm mb-4">
Dashboard interaktif untuk analisis data media sosial dengan visualisasi.
</p>
<div class="mb-4">
<h4 class="text-md font-semibold text-gray-800 mb-2">Tools yang Digunakan:</h4>
<ul class="list-disc list-inside text-sm text-gray-700 space-y-1 ml-4">
<li>Gemini</li>
<li>GitHub</li>
<li>Streamlit</li>
<li>Cloudflare</li>
</ul>
</div>
<p class="text-xs text-gray-600 mb-4">
<strong>Dampak:</strong> Mempelajari penggunaan tools baru dan proses pembuatan website.
</p>
<div class="flex flex-wrap gap-3">
<a href="https://mediaintelegensiuasjasmine.streamlit.app" target="_blank" rel="noopener noreferrer" class="bg-fuchsia-600 text-white px-4 py-2 rounded-full text-xs font-semibold hover:bg-fuchsia-700 transition duration-300">
Demo Live <i class="fas fa-external-link-alt ml-1"></i>
</a>
<a href="https://github.com/jsm280405" target="_blank" rel="noopener noreferrer" class="bg-gray-800 text-white px-4 py-2 rounded-full text-xs font-semibold hover:bg-gray-900 transition duration-300">
GitHub <i class="fab fa-github ml-1"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Contact Me Section -->
<section id="contact" class="py-16 px-4 md:px-8 bg-blue-50">
<div class="max-w-3xl mx-auto text-center">
<h2 class="text-4xl font-bold mb-12 section-title mx-auto">Hubungi Saya</h2>
<p class="text-base text-gray-700 mb-8">
Tertarik untuk berkolaborasi atau ingin tahu lebih banyak? Jangan ragu untuk menghubungi saya!
</p>
<div class="space-y-6">
<a href="mailto:jasmineanindithaas@gmail.com" class="block text-xl text-fuchsia-700 hover:text-fuchsia-900 transition duration-300 ease-in-out">
<i class="fas fa-envelope mr-3"></i> jasmineanindithaas@gmail.com
</a>
<a href="https://linkedin.com/in/jasmine-siswandono" target="_blank" rel="noopener noreferrer" class="block text-xl text-fuchsia-700 hover:text-fuchsia-900 ease-in-out">
<i class="fab fa-linkedin mr-3"></i> linkedin.com/in/jasmine-siswandono
</a>
<!-- Add GitHub link if available -->
<a href="https://github.com/jsm280405" target="_blank" rel="noopener noreferrer" class="block text-xl text-fuchsia-700 hover:text-fuchsia-900 transition duration-300 ease-in-out">
<i class="fab fa-github mr-3"></i> github.com/jsm280405
</a>
</div>
<p class="text-gray-500 mt-12 text-sm">
© 2025 Raden Roro Jasmine Aulia AS. Hak Cipta Dilindungi.
</p>
</div>
</section>
<script>
// Smooth scrolling for navigation links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
</script>
</body>
</html>