Elegant Personal Portfolio Template

Basic Information to Edit

1. Personal Information

• Name: Replace "John Doe" with your name
• Profile photo: Replace images/john-doe-profile.jpg with your photo
• Title: Change "Web Developer & UI/UX Designer" to your profession

2. About Section

Edit the text in the About Me section to reflect:

• Your background and experience
• Your skills and specialties
• Personal interests/hobbies
• Your professional philosophy

3. Skills Section

Update the skills to match your expertise:

html

<!-- Example of editing a skill card -->

<div class="bg-white p-6 rounded-lg shadow-md flex flex-col items-center text-center">

    <h3 class="text-xl font-semibold mb-2">Your Skill</h3>

    <p class="text-gray-600">Specific technologies or tools you know</p>

</div>

4. Portfolio Projects

For each project card, update:

• Project images (src="images/project-name.jpg")
• Project titles
• Project descriptions
• Project links

5. Services

Modify the services you offer:

• Service titles
• Service descriptions
• Icons (if needed)

6. Testimonials

Replace with:

• Real client testimonials
• Client names and positions
• Client photos

7. Contact Information

Update the contact form or add:

• Your email address
• Phone number
• Social media links

8. Social Media Links

Update the footer social media icons with your actual profiles:

html

<a href="your-linkedin-url" class="text-gray-400 hover:text-indigo-500">

    <!-- LinkedIn icon -->

</a>

Step-by-Step Editing Process

1. Text Content

• Open the HTML file in a text editor (VS Code, Sublime Text, etc.)
• Find and replace all "John Doe" instances with your name
• Update all descriptive text to match your background

2. Images

• Create an images folder in your project directory
• Add your photos with the same filenames as referenced in the HTML
• Or update the image paths to match your file names

3. Colors and Styling

The template uses Tailwind CSS classes. You can change colors by modifying classes like:

• text-indigo-600 → text-blue-600
• bg-indigo-600 → bg-blue-600
• border-indigo-500 → border-blue-500

4. Customization Options

Change Color Scheme

Replace all indigo classes with your preferred color:

html

<!-- Change from -->

class="bg-indigo-600 text-white"

<!-- To -->

class="bg-blue-600 text-white"

Modify Layout

You can rearrange sections by moving the entire section blocks in the HTML.

Add/Remove Sections

Copy existing section structure to add new sections, or delete sections you don't need.

File Structure You'll Need

text

your-portfolio/

├── index.html

├── images/

│   ├── your-profile-photo.jpg

│   ├── project-1.jpg

│   ├── project-2.jpg

│   └── testimonial-photos/

├── script.js

└── responsive.css

Quick Start Steps

1. Download the HTML code and save as index.html
2. Create an images folder and add your photos
3. Update personal information throughout the file
4. Replace project images and descriptions
5. Customize colors if desired
6. Test locally by opening index.html in a browser

Important Notes

• Make sure all image paths are correct
• Keep the file structure organized
• Test the responsive design on different screen sizes
• Consider adding your own custom CSS in the <style> tags if needed