In today's digital age, having a standout online portfolio is crucial for professionals across various industries. Enter Claude AI by Anthropic, an innovative tool that can help you design a personalized and impressive portfolio template. Here's the simple template I have created using claude ai.
Prompt:
Develop a responsive portfolio website template using HTML and Tailwind CSS. The site should include the following sections:
1. Navigation bar 2. Hero section 3. About me 4. My Projects (featuring flip cards) 5. My Skills 6. My Journey (presented as a timeline with subtle hover animations) 7. Contact form 8. Footer with social media icons
Implement animations for each section that trigger only when the section becomes visible to the user. Ensure the design is fully responsive across various device sizes.
Below is the code generated by Claude Sonnet 3.5
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Portfolio</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
<style>
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes slideIn {
from { transform: translateY(50px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
.animate-fadeIn {
opacity: 0;
}
.animate-slideIn {
opacity: 0;
transform: translateY(50px);
}
.animate-fadeIn.is-visible {
animation: fadeIn 1s ease-in forwards;
}
.animate-slideIn.is-visible {
animation: slideIn 0.5s ease-out forwards;
}
.timeline-item {
opacity: 0;
transform: translateY(50px);
transition: opacity 0.5s ease, transform 0.5s ease;
}
.timeline-item.is-visible {
opacity: 1;
transform: translateY(0);
}
.timeline-dot {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.timeline-item:hover .timeline-dot {
transform: scale(1.2);
box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.3);
}
.timeline-item .bg-gray-800 {
transition: transform 0.3s ease, background-color 0.3s ease;
}
.timeline-item:hover .bg-gray-800 {
transform: translateY(-5px);
}
body {
background: linear-gradient(to bottom, #1a202c, #2d3748);
}
.flip-card-container {
perspective: 1000px;
height: 400px;
}
.flip-card {
position: relative;
width: 100%;
height: 100%;
transition: transform 0.6s;
transform-style: preserve-3d;
}
.flip-card-container:hover .flip-card {
transform: rotateY(180deg);
}
.flip-card-front, .flip-card-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
border-radius: 1rem;
overflow: hidden;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.flip-card-front {
background-color: #2c3e50;
}
.flip-card-back {
background-color: #2c3e50;
transform: rotateY(180deg);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
.flip-card-back h3,
.flip-card-back p,
.flip-card-back a {
opacity: 0;
transition: opacity 0.3s ease-out 0.2s;
}
.flip-card-container:hover .flip-card-back h3,
.flip-card-container:hover .flip-card-back p,
.flip-card-container:hover .flip-card-back a {
opacity: 1;
}
.flip-card-container:hover .flip-card {
animation: flipShadow 0.6s ease-in-out;
}
@keyframes flipShadow {
0%, 100% { box-shadow: 0 5px 15px rgba(0,0,0,0.3); }
50% { box-shadow: 0 15px 25px rgba(0,0,0,0.1); }
}
.flip-card-back a {
transition: all 0.3s ease;
}
.flip-card-back a:hover {
transform: translateY(-3px);
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
</style>
</head>
<body class="text-gray-300 font-sans leading-normal tracking-normal">
<!-- Navbar -->
<nav class="bg-gray-800 p-4">
<div class="container mx-auto flex justify-between items-center">
<a href="#" class="text-white text-2xl">John Doe</a>
<div class="hidden md:flex space-x-4">
<a href="#about" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Home</a>
<a href="#projects" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Projects</a>
<a href="#skills" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Skills</a>
<a href="#contact" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Contact</a>
</div>
<div class="md:hidden">
<button id="menu-button" class="text-gray-300 hover:text-white focus:outline-none focus:text-white">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
</svg>
</button>
</div>
</div>
</nav>
<div id="mobile-menu" class="md:hidden hidden bg-gray-800">
<a href="#about" class="block text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-base font-medium">Home</a>
<a href="#projects" class="block text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-base font-medium">Projects</a>
<a href="#skills" class="block text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-base font-medium">Skills</a>
<a href="#contact" class="block text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-base font-medium">Contact</a>
</div>
<!-- Hero Section -->
<section class="text-center py-20 bg-gray-900 text-white animate-fadeIn">
<h2 class="text-5xl font-bold mb-4">Welcome to My Portfolio</h2>
<p class="text-xl mb-8">I'm a passionate web developer creating amazing digital experiences</p>
<a href="#contact" class="bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600 text-white font-bold py-2 px-4 rounded-full transition duration-300">Get in Touch</a>
</section>
<!-- About Section -->
<section id="about" class="py-20 animate-slideIn">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-bold mb-8 text-center text-purple-400">About Me</h2>
<div class="flex flex-wrap items-center">
<div class="w-full md:w-1/2 mb-8 md:mb-0">
<img src="https://via.placeholder.com/400" alt="Profile Picture" class="rounded-full mx-auto">
</div>
<div class="w-full md:w-1/2">
<p class="text-lg mb-4">Hello! I'm John Doe, a web developer with a passion for creating beautiful and functional websites. With 5 years of experience in the industry, I specialize in front-end development and user experience design.</p>
<p class="text-lg">When I'm not coding, you can find me hiking in the mountains or experimenting with new recipes in the kitchen.</p>
</div>
</div>
</div>
</section>
<!-- Projects Section -->
<section id="projects" class="py-20 bg-gray-900 animate-slideIn">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-bold mb-12 text-center text-purple-400">My Projects</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Project 1 -->
<div class="flip-card-container">
<div class="flip-card">
<div class="flip-card-front">
<img src="https://placehold.co/600x400" alt="Project 1" class="w-full h-full object-cover">
<div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center">
<h3 class="text-2xl font-bold text-white">Project 1</h3>
</div>
</div>
<div class="flip-card-back bg-purple-600 p-6 flex flex-col justify-between">
<h3 class="text-2xl font-bold text-white mb-4">Project 1</h3>
<p class="text-white mb-4">A brief description of Project 1 and its key features.</p>
<a href="#" class="inline-block bg-white text-purple-600 py-2 px-4 rounded-full font-bold hover:bg-gray-200 transition-colors duration-300">View Project</a>
</div>
</div>
</div>
<!-- Project 2 -->
<div class="flip-card-container">
<div class="flip-card">
<div class="flip-card-front">
<img src="https://placehold.co/600x400" alt="Project 2" class="w-full h-full object-cover">
<div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center">
<h3 class="text-2xl font-bold text-white">Project 2</h3>
</div>
</div>
<div class="flip-card-back bg-pink-600 p-6 flex flex-col justify-between">
<h3 class="text-2xl font-bold text-white mb-4">Project 2</h3>
<p class="text-white mb-4">A brief description of Project 2 and its key features.</p>
<a href="#" class="inline-block bg-white text-pink-600 py-2 px-4 rounded-full font-bold hover:bg-gray-200 transition-colors duration-300">View Project</a>
</div>
</div>
</div>
<!-- Project 3 -->
<div class="flip-card-container">
<div class="flip-card">
<div class="flip-card-front">
<img src="https://placehold.co/600x400" alt="Project 3" class="w-full h-full object-cover">
<div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center">
<h3 class="text-2xl font-bold text-white">Project 3</h3>
</div>
</div>
<div class="flip-card-back bg-indigo-600 p-6 flex flex-col justify-between">
<h3 class="text-2xl font-bold text-white mb-4">Project 3</h3>
<p class="text-white mb-4">A brief description of Project 3 and its key features.</p>
<a href="#" class="inline-block bg-white text-indigo-600 py-2 px-4 rounded-full font-bold hover:bg-gray-200 transition-colors duration-300">View Project</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Skills Section -->
<section id="skills" class="py-20 animate-slideIn bg-gray-900">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-bold mb-8 text-center text-purple-400">My Skills</h2>
<div class="flex flex-wrap justify-center">
<div class="w-full md:w-1/3 p-4">
<div class="bg-gray-800 rounded-lg shadow-lg p-6 hover:bg-gray-700 transition-colors duration-300">
<i class="fab fa-html5 text-5xl text-orange-500 mb-4"></i>
<h3 class="font-bold text-xl mb-2 text-purple-300">HTML5</h3>
<div class="w-full bg-gray-700 rounded-full">
<div class="bg-orange-500 text-xs font-medium text-white text-center p-0.5 leading-none rounded-full" style="width: 90%">90%</div>
</div>
</div>
</div>
<div class="w-full md:w-1/3 p-4">
<div class="bg-gray-800 rounded-lg shadow-lg p-6 hover:bg-gray-700 transition-colors duration-300">
<i class="fab fa-css3-alt text-5xl text-blue-500 mb-4"></i>
<h3 class="font-bold text-xl mb-2 text-purple-300">CSS3</h3>
<div class="w-full bg-gray-700 rounded-full">
<div class="bg-blue-500 text-xs font-medium text-white text-center p-0.5 leading-none rounded-full" style="width: 85%">85%</div>
</div>
</div>
</div>
<div class="w-full md:w-1/3 p-4">
<div class="bg-gray-800 rounded-lg shadow-lg p-6 hover:bg-gray-700 transition-colors duration-300">
<i class="fab fa-js-square text-5xl text-yellow-500 mb-4"></i>
<h3 class="font-bold text-xl mb-2 text-purple-300">JavaScript</h3>
<div class="w-full bg-gray-700 rounded-full">
<div class="bg-yellow-500 text-xs font-medium text-white text-center p-0.5 leading-none rounded-full" style="width: 80%">80%</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Timeline Section -->
<section class="py-20 bg-gray-900 animate-slideIn">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-bold mb-12 text-center text-purple-400">My Journey</h2>
<div class="relative">
<div class="absolute h-full w-1 bg-purple-400 left-1/2 transform -translate-x-1/2"></div>
<!-- Timeline item 1 -->
<div class="relative z-10 mb-16">
<div class="timeline-item flex items-center">
<div class="w-1/2 pr-8 text-right">
<div class="bg-gray-800 p-6 rounded-lg shadow-lg hover:bg-gray-700 transition-colors duration-300">
<h3 class="font-bold text-xl mb-2 text-purple-300">Started Learning Web Development</h3>
<p class="text-gray-400">Began my journey into web development, learning HTML, CSS, and JavaScript.</p>
</div>
</div>
<div class="w-10 h-10 bg-purple-500 rounded-full border-4 border-gray-900 flex items-center justify-center timeline-dot">
<span class="text-white font-bold">1</span>
</div>
<div class="w-1/2 pl-8">
<span class="text-purple-400 font-bold text-lg">2015</span>
</div>
</div>
</div>
<!-- Timeline item 2 -->
<div class="relative z-10 mb-16">
<div class="timeline-item flex items-center flex-row-reverse">
<div class="w-1/2 pl-8">
<div class="bg-gray-800 p-6 rounded-lg shadow-lg hover:bg-gray-700 transition-colors duration-300">
<h3 class="font-bold text-xl mb-2 text-purple-300">First Professional Project</h3>
<p class="text-gray-400">Completed my first professional project for a local business, implementing responsive design.</p>
</div>
</div>
<div class="w-10 h-10 bg-purple-500 rounded-full border-4 border-gray-900 flex items-center justify-center timeline-dot">
<span class="text-white font-bold">2</span>
</div>
<div class="w-1/2 pr-8 text-right">
<span class="text-purple-400 font-bold text-lg">2017</span>
</div>
</div>
</div>
<!-- Timeline item 3 -->
<div class="relative z-10">
<div class="timeline-item flex items-center">
<div class="w-1/2 pr-8 text-right">
<div class="bg-gray-800 p-6 rounded-lg shadow-lg hover:bg-gray-700 transition-colors duration-300">
<h3 class="font-bold text-xl mb-2 text-purple-300">Joined a Tech Startup</h3>
<p class="text-gray-400">Became a full-time web developer at a growing tech startup, working on cutting-edge projects.</p>
</div>
</div>
<div class="w-10 h-10 bg-purple-500 rounded-full border-4 border-gray-900 flex items-center justify-center timeline-dot">
<span class="text-white font-bold">3</span>
</div>
<div class="w-1/2 pl-8">
<span class="text-purple-400 font-bold text-lg">2019</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="contact" class="py-20 animate-slideIn">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-bold mb-8 text-center text-purple-400">Get in Touch</h2>
<form class="max-w-lg mx-auto">
<div class="mb-4">
<label for="name" class="block text-gray-300 font-bold mb-2">Name</label>
<input type="text" id="name" name="name" class="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500 text-white" required>
</div>
<div class="mb-4">
<label for="email" class="block text-gray-300 font-bold mb-2">Email</label>
<input type="email" id="email" name="email" class="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500 text-white" required>
</div>
<div class="mb-4">
<label for="message" class="block text-gray-300 font-bold mb-2">Message</label>
<textarea id="message" name="message" rows="4" class="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500 text-white" required></textarea>
</div>
<button type="submit" class="bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600 text-white font-bold py-2 px-4 rounded-full transition duration-300">Send Message</button>
</form>
</div>
</section>
<!-- Footer -->
<footer class="bg-gray-900 text-white py-8">
<div class="container mx-auto px-4 text-center">
<p>© 2023 John Doe. All rights reserved.</p>
<div class="mt-4">
<a href="#" class="text-gray-400 hover:text-white mx-2"><i class="fab fa-twitter"></i></a>
<a href="#" class="text-gray-400 hover:text-white mx-2"><i class="fab fa-linkedin"></i></a>
<a href="#" class="text-gray-400 hover:text-white mx-2"><i class="fab fa-github"></i></a>
</div>
</div>
</footer>
<script>
const observerOptions = {
root: null,
rootMargin: '0px',
threshold: 0.1
};
const observer = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('is-visible');
observer.unobserve(entry.target);
}
});
}, observerOptions);
document.querySelectorAll('.animate-fadeIn, .animate-slideIn').forEach(el => {
observer.observe(el);
});
const timelineObserver = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('is-visible');
observer.unobserve(entry.target);
}
});
}, { threshold: 0.2 });
document.querySelectorAll('.timeline-item').forEach(item => {
timelineObserver.observe(item);
});
const menuButton = document.getElementById('menu-button');
const mobileMenu = document.getElementById('mobile-menu');
menuButton.addEventListener('click', () => {
mobileMenu.classList.toggle('hidden');
});
</script>
</body>
</html>By leveraging Claude AI's versatile capabilities, you can create a portfolio template that not only showcases your work beautifully but also stands out in a competitive digital landscape. Remember, while Claude provides valuable assistance, the final creative decisions are yours to make. Your unique perspective is what will truly make your portfolio shine.
Stackademic 🎓
Thank you for reading until the end. Before you go:
- Please consider clapping and following the writer! 👏
- Follow us X | LinkedIn | YouTube | Discord
- Visit our other platforms: In Plain English | CoFeed | Differ
- More content at Stackademic.com