Modern Minimal Resume CV Website

Basic Information to Edit

1. Personal Information

html

<!-- Replace these sections with your information -->

<h1 class="text-5xl font-extrabold mb-2">John Doe</h1>

<p class="text-2xl font-light text-indigo-100">Senior Web Developer</p>

<p class="text-lg mt-4 max-w-lg leading-relaxed">A highly motivated...</p>

<!-- In Personal Details section -->

<li><strong>Email:</strong> <a href="mailto:john.doe@example.com">john.doe@example.com</a></li>

<li><strong>Phone:</strong> (123) 456-7890</li>

<li><strong>Location:</strong> San Francisco, CA</li>

<li><strong>LinkedIn:</strong> <a href="https://linkedin.com/in/johndoe">linkedin.com/in/johndoe</a></li>

<li><strong>GitHub:</strong> <a href="https://github.com/johndoe">github.com/johndoe</a></li>

2. Profile Photo

Replace the image file:

html

<img src="images/profile-photo.jpg" alt="Profile Photo" class="w-40 h-40 rounded-full object-cover border-4 border-white shadow-lg profile-photo">

Content Sections to Customize

3. Skills Section

html

<!-- Add/remove skill tags as needed -->

<div class="flex flex-wrap gap-3">

    <span class="bg-indigo-100 text-indigo-800 px-4 py-2 rounded-full text-md font-medium skill-tag">JavaScript</span>

    <span class="bg-indigo-100 text-indigo-800 px-4 py-2 rounded-full text-md font-medium skill-tag">React</span>

    <!-- Add more skills here -->

</div>

4. Experience Section

html

<div>

    <h3 class="text-xl font-semibold text-gray-900">Senior Software Engineer <span class="text-indigo-600">@ Tech Solutions Inc.</span></h3>

    <p class="text-md text-gray-500 mb-2">Jan 2018 – Present | New York, NY</p>

    <ul class="list-disc list-inside text-lg text-gray-700 space-y-1">

        <li>Led development of a new microservices architecture...</li>

        <li>Mentored junior developers...</li>

        <li>Implemented CI/CD pipelines...</li>

    </ul>

</div>

5. Education Section

html

<div>

    <h3 class="text-xl font-semibold text-gray-900">Master of Science in Computer Science <span class="text-indigo-600">@ University of Example</span></h3>

    <p class="text-md text-gray-500 mb-2">Sep 2012 – May 2014 | City, State</p>

    <p class="text-lg text-gray-700">Thesis: Advanced Algorithms for Distributed Systems.</p>

</div>

6. Portfolio Projects

html

<div class="bg-gray-50 rounded-lg shadow-sm overflow-hidden">

    <img src="images/portfolio-project-1.jpg" alt="E-commerce Platform Project" class="w-full h-40 object-cover">

    <div class="p-4">

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

        <p class="text-gray-700 text-sm mb-3">Developed a full-stack e-commerce solution...</p>

        <a href="#" class="text-indigo-600 hover:underline text-sm font-medium">View Project &rarr;</a>

    </div>

</div>

File Structure Requirements

Make sure you have these files in your project:

text

your-project-folder/

├── index.html

├── style.css (optional)

├── responsive.css (optional)

├── script.js (optional)

└── images/

    ├── profile-photo.jpg

    ├── portfolio-project-1.jpg

    ├── portfolio-project-2.jpg

    └── portfolio-project-3.jpg

Step-by-Step Editing Process

1. Download the HTML file and save it as index.html
2. Replace personal information:
   • Name, title, and bio
   • Contact details (email, phone, location)
   • Social media links
3. Update professional content:
   • Work experience with your job history
   • Education background
   • Skills relevant to your field
   • Achievements and awards
4. Customize portfolio:
   • Replace project images
   • Update project descriptions
   • Add your actual project links
5. Add your profile photo:
   • Save your photo as profile-photo.jpg in an images folder
   • Ensure it's professional and clear
6. Optional styling changes:
   • Change colors by modifying Tailwind classes (e.g., bg-indigo-700 to bg-blue-700)
   • Adjust layout by modifying grid classes

Quick Tips

• Keep it professional - Use a business-appropriate email and photo
• Be specific - Use quantifiable achievements (e.g., "improved performance by 40%")
• Tailor content - Customize for the job you're applying for
• Proofread - Check for spelling and grammar errors
• Test links - Make sure all URLs work properly