<title>Portofolio - Nama Anda</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
:root {
--primary: #2c3e50;
--secondary: #3498db;
--accent: #e74c3c;
--light: #ecf0f1;
--dark: #2c3e50;
}
html {
scroll-behavior: smooth;
}
body {
color: var(--dark);
line-height: 1.6;
background-color: #f9f9f9;
}
.container {
width: 90%;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
/* Header & Navigation */
header {
background-color: var(--primary);
color: white;
position: fixed;
width: 100%;
top: 0;
z-index: 1000;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
nav {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 0;
}
.logo {
font-size: 1.8rem;
font-weight: 700;
color: white;
text-decoration: none;
}
.logo span {
color: var(--secondary);
}
.nav-links {
display: flex;
list-style: none;
}
.nav-links li {
margin-left: 30px;
}
.nav-links a {
color: white;
text-decoration: none;
font-weight: 500;
transition: color 0.3s;
}
.nav-links a:hover {
color: var(--secondary);
}
.mobile-menu-btn {
display: none;
background: none;
border: none;
color: white;
font-size: 1.5rem;
cursor: pointer;
}
/* Hero Section */
.hero {
padding: 150px 0 100px;
background: linear-gradient(rgba(44, 62, 80, 0.9), rgba(44, 62, 80, 0.9)), url('https://images.unsplash.com/photo-1517077304055-6e89abbf09b0?ixlib=rb-4.0.3&auto=format&fit=crop&w=1200&q=80');
background-size: cover;
background-position: center;
color: white;
text-align: center;
}
.hero h1 {
font-size: 3.5rem;
margin-bottom: 15px;
}
.hero p {
font-size: 1.2rem;
max-width: 700px;
margin: 0 auto 30px;
}
.highlight {
color: var(--secondary);
}
.btn {
display: inline-block;
background-color: var(--secondary);
color: white;
padding: 12px 30px;
border-radius: 5px;
text-decoration: none;
font-weight: 600;
transition: all 0.3s;
border: none;
cursor: pointer;
}
.btn:hover {
background-color: #2980b9;
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
/* Sections */
section {
padding: 80px 0;
}
.section-title {
text-align: center;
margin-bottom: 50px;
}
.section-title h2 {
font-size: 2.5rem;
color: var(--primary);
position: relative;
display: inline-block;
padding-bottom: 10px;
}
.section-title h2::after {
content: '';
position: absolute;
width: 70px;
height: 3px;
background-color: var(--secondary);
bottom: 0;
left: 50%;
transform: translateX(-50%);
}
/* About Section */
.about-content {
display: flex;
align-items: center;
gap: 50px;
}
.profile-img {
flex: 1;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}
.profile-img img {
width: 100%;
height: auto;
display: block;
}
.about-text {
flex: 1;
}
.about-text h3 {
font-size: 1.8rem;
margin-bottom: 20px;
color: var(--primary);
}
.skills {
margin-top: 30px;
}
.skill-item {
margin-bottom: 20px;
}
.skill-name {
display: flex;
justify-content: space-between;
margin-bottom: 5px;
}
.skill-bar {
height: 10px;
background-color: #ddd;
border-radius: 5px;
overflow: hidden;
}
.skill-level {
height: 100%;
background-color: var(--secondary);
border-radius: 5px;
}
/* Portfolio Section */
.portfolio {
background-color: #f5f7fa;
}
.portfolio-filter {
display: flex;
justify-content: center;
flex-wrap: wrap;
margin-bottom: 40px;
}
.filter-btn {
background: none;
border: none;
padding: 10px 20px;
margin: 5px;
cursor: pointer;
font-weight: 600;
color: var(--dark);
border-radius: 5px;
transition: all 0.3s;
}
.filter-btn.active, .filter-btn:hover {
background-color: var(--secondary);
color: white;
}
.portfolio-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 30px;
}
.portfolio-item {
background-color: white;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
transition: transform 0.3s;
}
.portfolio-item:hover {
transform: translateY(-10px);
}
.portfolio-img {
height: 200px;
overflow: hidden;
}
.portfolio-img img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s;
}
.portfolio-item:hover .portfolio-img img {
transform: scale(1.1);
}
.portfolio-info {
padding: 20px;
}
.portfolio-info h3 {
margin-bottom: 10px;
color: var(--primary);
}
/* Contact Section */
.contact-content {
display: flex;
gap: 50px;
}
.contact-info {
flex: 1;
}
.contact-info-item {
display: flex;
align-items: center;
margin-bottom: 25px;
}
.contact-icon {
width: 50px;
height: 50px;
background-color: var(--secondary);
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-right: 15px;
font-size: 1.2rem;
}
.contact-form {
flex: 1;
}
.form-group {
margin-bottom: 20px;
}
.form-control {
width: 100%;
padding: 15px;
border: 1px solid #ddd;
border-radius: 5px;
font-size: 1rem;
}
textarea.form-control {
min-height: 150px;
resize: vertical;
}
/* Footer */
footer {
background-color: var(--primary);
color: white;
padding: 40px 0 20px;
text-align: center;
}
.social-links {
display: flex;
justify-content: center;
margin-bottom: 30px;
}
.social-link {
width: 40px;
height: 40px;
background-color: rgba(255, 255, 255, 0.1);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
margin: 0 10px;
text-decoration: none;
transition: all 0.3s;
}
.social-link:hover {
background-color: var(--secondary);
transform: translateY(-5px);
}
.copyright {
padding-top: 20px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
font-size: 0.9rem;
}
/* Responsive Styles */
@media (max-width: 992px) {
.about-content, .contact-content {
flex-direction: column;
}
.hero h1 {
font-size: 2.8rem;
}
}
@media (max-width: 768px) {
.mobile-menu-btn {
display: block;
}
.nav-links {
position: fixed;
top: 70px;
left: 0;
width: 100%;
background-color: var(--primary);
flex-direction: column;
align-items: center;
padding: 20px 0;
clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
transition: all 0.4s ease;
}
.nav-links.active {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
.nav-links li {
margin: 15px 0;
}
.hero h1 {
font-size: 2.2rem;
}
.portfolio-grid {
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}
}
@media (max-width: 576px) {
.hero h1 {
font-size: 1.8rem;
}
.section-title h2 {
font-size: 2rem;
}
.portfolio-grid {
grid-template-columns: 1fr;
}
}
</style>
<!-- Hero Section -->
<section class="hero" id="home">
<div class="container">
<h1>Halo, Saya <span class="highlight">Nama Anda</span></h1>
<p>Saya seorang <span class="highlight">Web Developer</span> dengan passion menciptakan pengalaman digital yang menarik dan fungsional. Saya berspesialisasi dalam pengembangan front-end dan back-end dengan teknologi modern.</p>
<a href="#portfolio" class="btn">Lihat Portofolio</a>
</div>
</section>
<!-- About Section -->
<section id="about">
<div class="container">
<div class="section-title">
<h2>Tentang Saya</h2>
</div>
<div class="about-content">
<div class="profile-img">
<img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=774&q=80" alt="Foto Profil">
</div>
<div class="about-text">
<h3>Web Developer & Desainer</h3>
<p>Saya memiliki pengalaman lebih dari 3 tahun dalam pengembangan website dan aplikasi web. Saya sangat antusias dengan teknologi terbaru dan selalu berusaha untuk meningkatkan keterampilan saya.</p>
<p>Saya percaya bahwa desain yang baik dan kode yang bersih adalah kunci untuk menciptakan produk digital yang sukses. Saya senang bekerja dalam tim dan selalu terbuka untuk tantangan baru.</p>
<div class="skills">
<div class="skill-item">
<div class="skill-name">
<span>HTML/CSS</span>
<span>95%</span>
</div>
<div class="skill-bar">
<div class="skill-level" style="width: 95%"></div>
</div>
</div>
<div class="skill-item">
<div class="skill-name">
<span>JavaScript</span>
<span>90%</span>
</div>
<div class="skill-bar">
<div class="skill-level" style="width: 90%"></div>
</div>
</div>
<div class="skill-item">
<div class="skill-name">
<span>React</span>
<span>85%</span>
</div>
<div class="skill-bar">
<div class="skill-level" style="width: 85%"></div>
</div>
</div>
<div class="skill-item">
<div class="skill-name">
<span>UI/UX Design</span>
<span>80%</span>
</div>
<div class="skill-bar">
<div class="skill-level" style="width: 80%"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Portfolio Section -->
<section id="portfolio" class="portfolio">
<div class="container">
<div class="section-title">
<h2>Portofolio Saya</h2>
</div>
<div class="portfolio-filter">
<button class="filter-btn active" data-filter="all">Semua</button>
<button class="filter-btn" data-filter="web">Web Development</button>
<button class="filter-btn" data-filter="design">UI/UX Design</button>
<button class="filter-btn" data-filter="mobile">Mobile App</button>
</div>
<div class="portfolio-grid">
<div class="portfolio-item" data-category="web">
<div class="portfolio-img">
<img src="https://images.unsplash.com/photo-1551650975-87deedd944c3?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" alt="Proyek 1">
</div>
<div class="portfolio-info">
<h3>Sistem E-Commerce</h3>
<p>Platform e-commerce lengkap dengan fitur keranjang belanja, pembayaran, dan dashboard admin.</p>
</div>
</div>
<div class="portfolio-item" data-category="design">
<div class="portfolio-img">
<img src="https://images.unsplash.com/photo-1558655146-364adaf1fcc9?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" alt="Proyek 2">
</div>
<div class="portfolio-info">
<h3>Redesign Aplikasi Travel</h3>
<p>Redesign UI/UX untuk aplikasi travel dengan fokus pada pengalaman pengguna yang lebih baik.</p>
</div>
</div>
<div class="portfolio-item" data-category="mobile">
<div class="portfolio-img">
<img src="https://images.unsplash.com/photo-1512941937669-90a1b58e7e9c?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" alt="Proyek 3">
</div>
<div class="portfolio-info">
<h3>Aplikasi Fitness Mobile</h3>
<p>Aplikasi mobile untuk pelacakan aktivitas fitness dengan integrasi wearable devices.</p>
</div>
</div>
<div class="portfolio-item" data-category="web">
<div class="portfolio-img">
<img src="https://images.unsplash.com/photo-1460925895917-afdab827c52f?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" alt="Proyek 4">
</div>
<div class="portfolio-info">
<h3>Dashboard Analytics</h3>
<p>Dashboard interaktif untuk visualisasi data dengan chart dan grafik real-time.</p>
</div>
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="contact">
<div class="container">
<div class="section-title">
<h2>Hubungi Saya</h2>
</div>
<div class="contact-content">
<div class="contact-info">
<div class="contact-info-item">
<div class="contact-icon">
<i class="fas fa-map-marker-alt"></i>
</div>
<div>
<h3>Lokasi</h3>
<p>Jakarta, Indonesia</p>
</div>
</div>
<div class="contact-info-item">
<div class="contact-icon">
<i class="fas fa-envelope"></i>
</div>
<div>
<h3>Email</h3>
<p>nama.anda@example.com</p>
</div>
</div>
<div class="contact-info-item">
<div class="contact-icon">
<i class="fas fa-phone"></i>
</div>
<div>
<h3>Telepon</h3>
<p>+62 812 3456 7890</p>
</div>
</div>
</div>
<div class="contact-form">
<form id="contactForm">
<div class="form-group">
<input type="text" class="form-control" placeholder="Nama Lengkap" required>
</div>
<div class="form-group">
<input type="email" class="form-control" placeholder="Email" required>
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Subjek" required>
</div>
<div class="form-group">
<textarea class="form-control" placeholder="Pesan Anda" required></textarea>
</div>
<button type="submit" class="btn">Kirim Pesan</button>
</form>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer>
<div class="container">
<div class="social-links">
<a href="#" class="social-link"><i class="fab fa-linkedin-in"></i></a>
<a href="#" class="social-link"><i class="fab fa-github"></i></a>
<a href="#" class="social-link"><i class="fab fa-instagram"></i></a>
<a href="#" class="social-link"><i class="fab fa-twitter"></i></a>
</div>
<p class="copyright">© 2023 Portofolio. Dibuat dengan <i class="fas fa-heart" style="color: #e74c3c;"></i> oleh Nama Anda</p>
</div>
</footer>
<script>
// Mobile Menu Toggle
const mobileMenuBtn = document.querySelector('.mobile-menu-btn');
const navLinks = document.querySelector('.nav-links');
mobileMenuBtn.addEventListener('click', () => {
navLinks.classList.toggle('active');
mobileMenuBtn.innerHTML = navLinks.classList.contains('active')
? '<i class="fas fa-times"></i>'
: '<i class="fas fa-bars"></i>';
});
// Close mobile menu when clicking a link
document.querySelectorAll('.nav-links a').forEach(link => {
link.addEventListener('click', () => {
navLinks.classList.remove('active');
mobileMenuBtn.innerHTML = '<i class="fas fa-bars"></i>';
});
});
// Portfolio Filtering
const filterButtons = document.querySelectorAll('.filter-btn');
const portfolioItems = document.querySelectorAll('.portfolio-item');
filterButtons.forEach(button => {
button.addEventListener('click', () => {
// Remove active class from all buttons
filterButtons.forEach(btn => btn.classList.remove('active'));
// Add active class to clicked button
button.classList.add('active');
const filterValue = button.getAttribute('data-filter');
portfolioItems.forEach(item => {
if (filterValue === 'all' || item.getAttribute('data-category') === filterValue) {
item.style.display = 'block';
} else {
item.style.display = 'none';
}
});
});
});
// Form Submission
const contactForm = document.getElementById('contactForm');
contactForm.addEventListener('submit', function(e) {
e.preventDefault();
// Get form values
const name = this.querySelector('input[type="text"]').value;
const email = this.querySelector('input[type="email"]').value;
const subject = this.querySelectorAll('input[type="text"]')[1].value;
const message = this.querySelector('textarea').value;
// In a real application, you would send this data to a server
// For this example, we'll just show an alert
alert(`Terima kasih ${name}! Pesan Anda telah berhasil dikirim. Saya akan membalas ke ${email} segera.`);
// Reset form
this.reset();
});
// Smooth scrolling for anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function(e) {
e.preventDefault();
const targetId = this.getAttribute('href');
if (targetId === '#') return;
const targetElement = document.querySelector(targetId);
if (targetElement) {
window.scrollTo({
top: targetElement.offsetTop - 80,
behavior: 'smooth'
});
}
});
});
// Add scroll effect to header
window.addEventListener('scroll', () => {
const header = document.querySelector('header');
if (window.scrollY > 50) {
header.style.boxShadow = '0 5px 20px rgba(0, 0, 0, 0.1)';
} else {
header.style.boxShadow = '0 2px 10px rgba(0, 0, 0, 0.1)';
}
});
</script>
