Modern Developer Portfolio

Quick Edits to Get Started

1. Personal Information

Replace all placeholder text with your actual information:

html

<!-- In the title tag -->

<title>Your Name - Developer Portfolio</title>

<!-- Change to: -->

<title>John Doe - Full Stack Developer</title>

<!-- In the navbar -->

<a href="#home" class="text-2xl font-bold text-indigo-600">Your Name</a>

<!-- Change to: -->

<a href="#home" class="text-2xl font-bold text-indigo-600">John Doe</a>

<!-- In the home section -->

<h1 class="...">Hi, I'm <span class="...">Your Name</span></h1>

<p class="...">A <span class="...">Full Stack Developer</span> building modern web applications.</p>

<!-- Change to your name and title -->

2. Social Media Links

Update the GitHub and LinkedIn URLs:

html

<!-- In home section and contact section -->

<a href="https://github.com/yourusername" target="_blank">

<!-- Change to: -->

<a href="https://github.com/your-actual-username" target="_blank">

<a href="https://linkedin.com/in/yourusername" target="_blank">

<!-- Change to: -->

<a href="https://linkedin.com/in/your-actual-profile" target="_blank">

3. Contact Information

Update the email address:

html

<a href="mailto:your.email@example.com">

<!-- Change to: -->

<a href="mailto:your-real-email@domain.com">

📁 File Structure & Images

Required Image Files:

Create an images folder with these files:

text

images/

├── home-hero-background.jpg

├── about-me-profile.jpg

├── project-ecommerce.jpg

├── project-fitness-app.jpg

├── project-weather-api.jpg

├── project-personal-blog.jpg

├── testimonial-client-1.jpg

├── testimonial-client-2.jpg

└── tech-*.svg (tech stack icons)

Tech Stack Icons:

You can download SVG icons from:

• Heroicons (for UI icons)
• Simple Icons (for tech logos)
• Font Awesome (alternative)

🛠 Customization Options

1. Color Scheme

Change the primary color (currently indigo) by replacing all indigo- classes:

html

<!-- Change from: -->

class="text-indigo-600"

<!-- To: -->

class="text-blue-600"  <!-- or green-600, purple-600, etc. -->

2. Content Updates

About Section:

html

<p class="text-lg leading-relaxed mb-6">

    Hello! I'm Your Name, a passionate Full Stack Developer...

</p>

<!-- Update with your actual bio -->

Skills Section:
Update the skills lists with your actual technologies:

html

<ul class="list-none space-y-2 text-gray-700">

    <li>JavaScript (ES6+)</li>

    <li>React.js / Next.js</li>

    <!-- Update with your skills -->

</ul>

Projects Section:
Replace project details with your actual projects:

html

<h3 class="text-2xl font-bold mb-2">E-commerce Platform</h3>

<p class="text-gray-700 mb-4">Your actual project description...</p>

<a href="your-actual-demo-link" target="_blank">Live Demo</a>

<a href="your-actual-github-link" target="_blank">GitHub</a>

3. Resume/CV

html

<a href="#" download="Your-Name-Resume.pdf">

<!-- Change to: -->

<a href="path/to/your-actual-resume.pdf" download="Your-Name-Resume.pdf">

🎨 Advanced Customizations

1. Add New Sections

You can add new sections by copying the structure of existing ones:

html

<section id="new-section" class="mb-20 text-center">

    <h2 class="text-4xl font-bold mb-8 text-indigo-700">New Section</h2>

    <!-- Your content here -->

</section>

2. Modify Animations

The template uses Tailwind CSS animations. You can customize them in the style section or add custom CSS.

3. Add More Projects

Duplicate a project card and update the content:

html

<div class="project-card ..." data-category="web">

    <img src="images/your-new-project.jpg" alt="New Project">

    <div class="p-6">

        <h3 class="...">Your New Project</h3>

        <p class="...">Project description...</p>

        <!-- Links -->

    </div>

</div>

📱 Responsive Design

The template is already responsive, but you can adjust breakpoints:

• sm: (640px and up)
• md: (768px and up)
• lg: (1024px and up)
• xl: (1280px and up)

🚀 Deployment

Options:

1. Netlify (drag and drop your folder)
2. Vercel (connect your GitHub repo)
3. GitHub Pages (free hosting)
4. Your own hosting

💡 Pro Tips

1. Keep images optimized for faster loading
2. Test on multiple devices before deploying
3. Update the meta tags for better SEO
4. Add your Google Analytics tracking code
5. Customize the favicon

🔧 Troubleshooting

• If images don't load, check file paths
• If colors look wrong, ensure dark mode classes are consistent
• If animations don't work, check JavaScript console for errors