I'll create an interactive One Piece themed portfolio website for you. This will include a responsive design with sections for your skills, projects, and contact information, all styled with One Piece elements. One Piece Portfolio

Welcome to My One Piece Portfolio

Web Developer • Designer • Pirate King Aspirant

View Projects Contact Me

About Me

WANTED $1,500,000,000

My Journey

Like Luffy searching for the One Piece, I'm on a journey to become the best developer I can be. With determination and creativity, I navigate the vast sea of technologies to create amazing web experiences.

My Crew

Every great pirate needs a reliable crew. My toolkit includes HTML, CSS, JavaScript, and various frameworks that help me conquer any challenge that comes my way.

My Dream

Just as the Straw Hat Pirates each have their own dreams, mine is to create innovative digital solutions that make a positive impact on users' lives.

Download Resume

My Devil Fruit Powers

Frontend Development

HTML5

CSS3

JavaScript

React

Backend Development

Node.js

Express

MongoDB

SQL

Tools & Others

Git

Figma

Responsive Design

UI/UX

My Voyages

Grand Line E-Commerce

A fully responsive e-commerce platform for One Piece merchandise.

React Node.js MongoDB

Thousand Sunny Dashboard

A beautiful admin dashboard with One Piece inspired UI elements.

HTML/CSS JavaScript Chart.js

Pirate Crew Tracker

A mobile app to track your favorite One Piece characters and their bounties.

React Native Firebase Redux

Log Pose Weather App

A weather application with Grand Line inspired UI and animations.

Vue.js Weather API GSAP

Poneglyphs Blog

A content management system with a One Piece inspired design.

WordPress Custom Theme PHP

Devil Fruit Finder

An interactive app to discover and learn about Devil Fruits from One Piece.

Angular TypeScript REST API

Send a Message in a Bottle

Location

East Blue, Dawn Island

Email

pirate.king@onepiece.com

Den Den Mushi

+1 (123) 456-7890

:root { --primary-color: #d32f2f; --secondary-color: #ffc107; --accent-color: #2196f3; --dark-color: #1a237e; --light-color: #f5f5f5; --text-color: #333333; --background-color: #ffffff; --shadow-color: rgba(0, 0, 0, 0.1); --transition-speed: 0.3s; } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: 'Poppins', sans-serif; line-height: 1.6; color: var(--text-color); background-color: var(--background-color); overflow-x: hidden; } a { text-decoration: none; color: inherit; } ul { list-style: none; } img { max-width: 100%; height: auto; } section { padding: 80px 0; } .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; } /* Loading Screen */ .loading-screen { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--dark-color); display: flex; justify-content: center; align-items: center; z-index: 9999; transition: opacity 0.5s ease-out; } .loading-container { text-align: center; } .loading-image { width: 150px; animation: bounce 1s infinite alternate; } .progress-bar { width: 300px; height: 10px; background-color: rgba(255, 255, 255, 0.2); border-radius: 5px; margin-top: 20px; overflow: hidden; } .progress { height: 100%; background-color: var(--secondary-color); width: 0%; transition: width 0.5s ease-out; } @keyframes bounce { from { transform: translateY(0); } to { transform: translateY(-20px); } } /* Navigation */ .navbar { position: fixed; top: 0; left: 0; width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 20px 50px; background-color: transparent; transition: background-color 0.3s ease, padding 0.3s ease; z-index: 1000; } .navbar.scrolled { background-color: var(--dark-color); padding: 15px 50px; box-shadow: 0 5px 15px var(--shadow-color); } .logo { display: flex; align-items: center; } .logo img { width: 40px; margin-right: 10px; } .logo span { font-size: 1.5rem; font-weight: 700; color: var(--light-color); } .nav-links { display: flex; gap: 30px; } .nav-links a { color: var(--light-color); font-weight: 500; position: relative; transition: color var(--transition-speed); } .nav-links a::after { content: ''; position: absolute; bottom: -5px; left: 0; width: 0; height: 2px; background-color: var(--secondary-color); transition: width var(--transition-speed); } .nav-links a:hover::after, .nav-links a.active::after { width: 100%; } .menu-toggle { display: none; flex-direction: column; cursor: pointer; } .bar { width: 25px; height: 3px; background-color: var(--light-color); margin: 3px 0; transition: transform 0.3s ease, opacity 0.3s ease; } /* Hero Section */ .hero { height: 100vh; background: linear-gradient(135deg, #1a237e, #0d47a1); position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; } .ocean-waves { position: absolute; bottom: 0; left: 0; width: 100%; height: 100px; background: url('../images/waves.png'); background-size: 1000px 100px; animation: wave 20s linear infinite; opacity: 0.8; } @keyframes wave { 0% { background-position-x: 0; } 100% { background-position-x: 1000px; } } .hero-content { text-align: center; color: var(--light-color); max-width: 800px; padding: 0 20px; position: relative; z-index: 2; } .hero-content h1 { font-size: 3.5rem; margin-bottom: 20px; animation: fadeInUp 1s ease; } .hero-content p { font-size: 1.2rem; margin-bottom: 30px; animation: fadeInUp 1s ease 0.2s forwards; opacity: 0; } .highlight { color: var(--secondary-color); } .hero-buttons { display: flex; justify-content: center; gap: 20px; animation: fadeInUp 1s ease 0.4s forwards; opacity: 0; } .btn { padding: 12px 30px; border-radius: 50px; font-weight: 600; transition: transform var(--transition-speed), box-shadow var(--transition-speed); cursor: pointer; display: inline-block; } .btn:hover { transform: translateY(-3px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); } .btn.primary { background-color: var(--primary-color); color: var(--light-color); } .btn.secondary { background-color: transparent; color: var(--light-color); border: 2px solid var(--secondary-color); } .going-merry { position: absolute; bottom: 50px; right: -100px; width: 300px; animation: sailIn 15s ease-in-out infinite alternate; } @keyframes sailIn { 0% { transform: translateX(0) rotate(-2deg); } 100% { transform: translateX(-800px) rotate(2deg); } } @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } /* Section Headers */ .section-header { text-align: center; margin-bottom: 60px; } .section-header h2 { font-size: 2.5rem; color: var(--dark-color); margin-bottom: 15px; position: relative; display: inline-block; } .divider { width: 80px; height: 4px; background-color: var(--primary-color); margin: 0 auto; position: relative; } .divider::before { content: ''; position: absolute; width: 10px; height: 10px; background-color: var(--secondary-color); border-radius: 50%; top: -3px; left: 50%; transform: translateX(-50%); } /* About Section */ .about { background-color: var(--light-color); } .about-content { display: flex; align-items: center; gap: 50px; max-width: 1200px; margin: 0 auto; padding: 0 20px; } .about-image { flex: 1; display: flex; justify-content: center; } .wanted-poster { position: relative; max-width: 350px; transition: transform 0.3s ease; } .wanted-poster:hover { transform: scale(1.05); } .bounty { position: absolute; bottom: 20%; left: 0; width: 100%; text-align: center; color: var(--dark-color); } .bounty span { display: block; } .bounty-amount { font-size: 1.5rem; font-weight: 700; margin-top: 5px; } .about-text { flex: 1; } .about-text h3 { color: var(--primary-color); margin-bottom: 15px; font-size: 1.5rem; } .about-text p { margin-bottom: 20px; } .about-buttons { margin-top: 30px; } /* Skills Section */ .skills { background-color: var(--background-color); } .skills-container { max-width: 1200px; margin: 0 auto; padding: 0 20px; } .skill-category { margin-bottom: 50px; } .skill-category h3 { font-size: 1.8rem; color: var(--dark-color); margin-bottom: 30px; text-align: center; } .skills-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 30px; } .skill-item { background-color: var(--light-color); border-radius: 10px; padding: 30px; text-align: center; box-shadow: 0 5px 15px var(--shadow-color); transition: transform var(--transition-speed); position: relative; overflow: hidden; } .skill-item::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 5px; background-color: var(--primary-color); } .skill-item:hover { transform: translateY(-10px); } .skill-icon { font-size: 3rem; color: var(--primary-color); margin-bottom: 15px; } .skill-item h4 { margin-bottom: 15px; font-size: 1.2rem; } .skill-level { width: 100%; height: 8px; background-color: #e0e0e0; border-radius: 4px; overflow: hidden; } .level { height: 100%; background-color: var(--secondary-color); border-radius: 4px; } /* Projects Section */ .projects { background-color: var(--light-color); } .projects-filter { display: flex; justify-content: center; flex-wrap: wrap; gap: 15px; margin-bottom: 40px; } .filter-btn { padding: 8px 20px; background-color: transparent; border: 2px solid var(--primary-color); border-radius: 50px; color: var(--dark-color); font-weight: 600; cursor: pointer; transition: background-color var(--transition-speed), color var(--transition-speed); } .filter-btn.active, .filter-btn:hover { background-color: var(--primary-color); color: var(--light-color); } .projects-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); gap: 30px; max-width: 1200px; margin: 0 auto; padding: 0 20px; } .project-card { background-color: var(--background-color); border-radius: 10px; overflow: hidden; box-shadow: 0 5px 15px var(--shadow-color); transition: transform var(--transition-speed); } .project-card:hover { transform: translateY(-10px); } .project-image { position: relative; height: 200px; overflow: hidden; } .project-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .project-card:hover .project-image img { transform: scale(1.1); } .project-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); display: flex; justify-content: center; align-items: center; opacity: 0; transition: opacity var(--transition-speed); } .project-card:hover .project-overlay { opacity: 1; } .project-links { display: flex; gap: 20px; } .project-link, .project-github { width: 50px; height: 50px; border-radius: 50%; background-color: var(--primary-color); display: flex; justify-content: center; align-items: center; color: var(--light-color); font-size: 1.2rem; transition: transform var(--transition-speed); } .project-link:hover, .project-github:hover { transform: scale(1.1); } .project-info { padding: 20px; } .project-info h3 { font-size: 1.3rem; margin-bottom: 10px; color: var(--dark-color); } .project-info p { margin-bottom: 15px; color: var(--text-color); } .project-tags { display: flex; flex-wrap: wrap; gap: 10px; } .project-tags span { padding: 5px 10px; background-color: var(--light-color); border-radius: 5px; font-size: 0.8rem; font-weight: 600; color: var(--dark-color); } /* Contact Section */ .contact { background-color: var(--background-color); } .contact-container { display: flex; gap: 50px; max-width: 1200px; margin: 0 auto; padding: 0 20px; } .contact-info { flex: 1; } .contact-item { display: flex; align-items: flex-start; margin-bottom: 30px; } .contact-icon { width: 50px; height: 50px; background-color: var(--primary-color); border-radius: 50%; display: flex; justify-content: center; align-items: center; color: var(--light-color); font-size: 1.2rem; margin-right: 20px; } .contact-text h3 { font-size: 1.2rem; margin-bottom: 5px; color: var(--dark-color); } .social-links { display: flex; gap: 15px; margin-top: 30px; } .social-link { width: 40px; height: 40px; background-color: var(--dark-color); border-radius: 50%; display: flex; justify-content: center; align-items: center; color: var(--light-color); font-size: 1.2rem; transition: transform var(--transition-speed), background-color var(--transition-speed); } .social-link:hover { transform: translateY(-5px); background-color: var(--primary-color); } .contact-form { flex: 1; } .form-group { margin-bottom: 20px; } .form-group label { display: block; margin-bottom: 5px; font-weight: 500; } .form-group input, .form-group textarea { width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 5px; font-family: inherit; font-size: 1rem; transition: border-color var(--transition-speed); } .form-group input:focus, .form-group textarea:focus { outline: none; border-color: var(--primary-color); } /* Footer */ .footer { background-color: var(--dark-color); color: var(--light-color); padding: 50px 0 20px; } .footer-content { max-width: 1200px; margin: 0 auto; padding: 0 20px; display: flex; flex-direction: column; align-items: center; text-align: center; } .footer-logo { display: flex; align-items: center; margin-bottom: 20px; } .footer-logo img { width: 40px; margin-right: 10px; } .footer-logo span { font-size: 1.5rem; font-weight: 700; } .footer-text { margin-bottom: 20px; } .footer-links { display: flex; gap: 20px; margin-bottom: 30px; } .footer-links a { transition: color var(--transition-speed); } .footer-links a:hover { color: var(--secondary-color); } /* Scroll to Top Button */ .scroll-top { position: fixed; bottom: 30px; right: 30px; width: 50px; height: 50px; background-color: var(--primary-color); border-radius: 50%; display: flex; justify-content: center; align-items: center; color: var(--light-color); font-size: 1.2rem; cursor: pointer; opacity: 0; visibility: hidden; transition: opacity var(--transition-speed), visibility var(--transition-speed), transform var(--transition-speed); z-index: 999; } .scroll-top.show { opacity: 1; visibility: visible; } .scroll-top:hover { transform: translateY(-5px); } /* Responsive Design */ @media (max-width: 992px) { .navbar { padding: 20px 30px; } .navbar.scrolled { padding: 15px 30px; } .hero-content h1 { font-size: 3rem; } .about-content { flex-direction: column; text-align: center; } .about-text { margin-top: 30px; } .contact-container { flex-direction: column; } .contact-info { margin-bottom: 50px; } } @media (max-width: 768px) { .navbar { padding: 15px 20px; } .navbar.scrolled { padding: 10px 20px; } .menu-toggle { display: flex; } .nav-links { position: fixed; top: 0; right: -100%; width: 70%; height: 100vh; background-color: var(--dark-color); flex-direction: column; justify-content: center; align-items: center; transition: right 0.3s ease; z-index: 1001; } .nav-links.active { right: 0; } .hero-content h1 { font-size: 2.5rem; } .hero-content p { font-size: 1rem; } .hero-buttons { flex-direction: column; gap: 15px; } .projects-grid { grid-template-columns: 1fr; } .contact-item { flex-direction: column; align-items: center; text-align: center; } .contact-icon { margin-right: 0; margin-bottom: 15px; } } @media (max-width: 576px) { .section-header h2 { font-size: 2rem; } .hero-content h1 { font-size: 2rem; } .skills-grid { grid-template-columns: 1fr; } .projects-filter { flex-direction: column; align-items: center; } } document.addEventListener('DOMContentLoaded', function() { // Loading Screen const loadingScreen = document.querySelector('.loading-screen'); const progress = document.querySelector('.progress'); let width = 0; const interval = setInterval(() => { width += Math.random() * 10; if (width > 100) { width = 100; clearInterval(interval); setTimeout(() => { loadingScreen.style.opacity = '0'; setTimeout(() => { loadingScreen.style.display = 'none'; }, 500); }, 500); } progress.style.width = width + '%'; }, 200); // Navbar Scroll Effect const navbar = document.querySelector('.navbar'); const navLinks = document.querySelectorAll('.nav-links a'); const sections = document.querySelectorAll('section'); window.addEventListener('scroll', () => { // Navbar background change on scroll if (window.scrollY > 50) { navbar.classList.add('scrolled'); } else { navbar.classList.remove('scrolled'); } // Active link based on scroll position let current = ''; sections.forEach(section => { const sectionTop = section.offsetTop; const sectionHeight = section.clientHeight; if (window.scrollY >= (sectionTop - 200)) { current = section.getAttribute('id'); } }); navLinks.forEach(link => { link.classList.remove('active'); if (link.getAttribute('href').substring(1) === current) { link.classList.add('active'); } }); // Show/hide scroll to top button const scrollTop = document.querySelector('.scroll-top'); if (window.scrollY > 300) { scrollTop.classList.add('show'); } else { scrollTop.classList.remove('show'); } }); // Mobile Menu Toggle const menuToggle = document.querySelector('.menu-toggle'); const navLinksContainer = document.querySelector('.nav-links'); menuToggle.addEventListener('click', () => { menuToggle.classList.toggle('active'); navLinksContainer.classList.toggle('active'); // Animate hamburger menu const bars = document.querySelectorAll('.bar'); if (menuToggle.classList.contains('active')) { bars[0].style.transform = 'rotate(-45deg) translate(-5px, 6px)'; bars[1].style.opacity = '0'; bars[2].style.transform = 'rotate(45deg) translate(-5px, -6px)'; } else { bars[0].style.transform = 'none'; bars[1].style.opacity = '1'; bars[2].style.transform = 'none'; } }); // Close mobile menu when clicking on a link navLinks.forEach(link => { link.addEventListener('click', () => { navLinksContainer.classList.remove('active'); menuToggle.classList.remove('active'); const bars = document.querySelectorAll('.bar'); bars[0].style.transform = 'none'; bars[1].style.opacity = '1'; bars[2].style.transform = 'none'; }); }); // Projects Filter const filterButtons = document.querySelectorAll('.filter-btn'); const projectCards = document.querySelectorAll('.project-card'); 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 filter = button.getAttribute('data-filter'); projectCards.forEach(card => { if (filter === 'all' || card.getAttribute('data-category') === filter) { card.style.display = 'block'; setTimeout(() => { card.style.opacity = '1'; card.style.transform = 'scale(1)'; }, 10); } else { card.style.opacity = '0'; card.style.transform = 'scale(0.8)'; setTimeout(() => { card.style.display = 'none'; }, 300); } }); }); }); // Scroll to Top Button const scrollTopButton = document.querySelector('.scroll-top'); scrollTopButton.addEventListener('click', () => { window.scrollTo({ top: 0, behavior: 'smooth' }); }); // Form Submission const contactForm = document.getElementById('messageForm'); contactForm.addEventListener('submit', function(e) { e.preventDefault(); // Get form values const name = document.getElementById('name').value; const email = document.getElementById('email').value; const subject = document.getElementById('subject').value; const message = document.getElementById('message').value; // Simple validation if (name && email && subject && message) { // In a real application, you would send this data to a server alert('Thank you for your message! I will get back to you soon.'); contactForm.reset(); } else { alert('Please fill in all fields.'); } }); // Skill Animation on Scroll const skillItems = document.querySelectorAll('.skill-item'); const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.classList.add('animate'); observer.unobserve(entry.target); } }); }, { threshold: 0.5 }); skillItems.forEach(item => { observer.observe(item); }); // Add animation class to skill items skillItems.forEach(item => { item.addEventListener('mouseenter', () => { const skillName = item.getAttribute('data-skill'); item.style.transform = 'translateY(-10px)'; // Change icon color based on skill const icon = item.querySelector('.skill-icon i'); switch(skillName) { case 'HTML5': icon.style.color = '#e34f26'; break; case 'CSS3': icon.style.color = '#2965f1'; break; case 'JavaScript': icon.style.color = '#f7df1e'; break; case 'React': icon.style.color = '#61dafb'; break; case 'Node.js': icon.style.color = '#3c873a'; break; default: icon.style.color = '#d32f2f'; } }); item.addEventListener('mouseleave', () => { item.style.transform = 'translateY(0)'; const icon = item.querySelector('.skill-icon i'); icon.style.color = ''; }); }); }); # Image Assets for One Piece Portfolio This folder should contain the following image assets: 1. `straw-hat-logo.png` - A small straw hat logo for the navbar and footer 2. `luffy-loading.png` - An image of Luffy for the loading screen 3. `going-merry.png` - The Going Merry ship for the hero section animation 4. `waves.png` - A repeatable wave pattern for the ocean animation 5. `wanted-poster.png` - A One Piece style wanted poster for the About section 6. `project1.jpg` to `project6.jpg` - Images for the project cards You'll need to source these images or create them to complete the portfolio. You can find One Piece themed images online, but make sure to respect copyright and licensing requirements. For placeholder project images, you can use: - Screenshots of actual web projects with One Piece themed overlays - One Piece related imagery that represents the type of project - Custom designed mockups that fit the One Piece theme Remember to optimize all images for web use to ensure fast loading times. This One Piece themed portfolio website features: 1. A loading screen with a progress bar and animation 2. A responsive navigation bar that changes on scroll 3. A hero section with animated ocean waves and the Going Merry ship 4. An About section with a wanted poster design 5. A Skills section organized as "Devil Fruit Powers" 6. A Projects section called "Voyages" with filtering capability 7. A Contact section styled as "Send a Message in a Bottle" 8. A footer with navigation and social links 9. A scroll-to-top button To complete the website, you'll need to add the images mentioned in the images/README.md file. You can find One Piece themed images online or create your own. The website is fully responsive and includes interactive elements like animations, hover effects, and filtering functionality for the projects section.