Portofolio - Nama Anda


* {
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;
}
}

Tentang Saya

Web Developer & Desainer

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.

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.

HTML/CSS
95%

JavaScript
90%

React
85%

UI/UX Design
80%

Portofolio Saya

Semua
Web Development
UI/UX Design
Mobile App

Sistem E-Commerce

Platform e-commerce lengkap dengan fitur keranjang belanja, pembayaran, dan dashboard admin.

Redesign Aplikasi Travel

Redesign UI/UX untuk aplikasi travel dengan fokus pada pengalaman pengguna yang lebih baik.

Aplikasi Fitness Mobile

Aplikasi mobile untuk pelacakan aktivitas fitness dengan integrasi wearable devices.

Dashboard Analytics

Dashboard interaktif untuk visualisasi data dengan chart dan grafik real-time.

// 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)';
}
});