🚀 Your Professional Portfolio Website - Setup & Customization Guide

Overview

Your modern, professional personal website is now ready! Built with Jekyll and the Minimal Mistakes theme, featuring a professional dark theme with deep blue and orange accent colors.

✨ What’s Included

🎨 Your New Pages

1. Homepage (/)

2. Academic Achievements (/academics/)

3. Projects Showcase (/projects/)

4. Contact & Connect (/contact/)

5. Navigation

📝 Quick Customization Guide

Step 1: Update Your Email & Social Links

File: _config.yml

Find the “Site Author” section and update:

author:
  name             : "Didier Barradas Bautista"
  email            : "your.email@example.com"  # ← Update this
  links:
    - label: "Email"
      url: "mailto:your.email@example.com"  # ← Update this
    - label: "Twitter"
      url: "https://twitter.com/dxbarradas"  # ← Update this
    - label: "GitHub"
      url: "https://github.com/yourusername"  # ← Update this
    - label: "LinkedIn"
      url: "https://linkedin.com/in/yourusername"  # ← Update this

Step 2: Fill in Your Project Details

File: index.html (Featured Projects section) or projects.md (Full projects page)

Replace placeholders:

<!-- Before -->
<h3 class="project-title">Project Title 1</h3>
<p class="project-description">
  [Add your project description here...]
</p>

<!-- After -->
<h3 class="project-title">Advanced Neural Network Classification</h3>
<p class="project-description">
  Developed a deep learning model achieving 95% accuracy on image classification. 
  Implemented using TensorFlow and deployed on AWS for production use.
</p>

Step 3: Add Your Skills

File: index.html - Skills & Technologies section

Replace the [Add Skill] placeholders:

<!-- Before -->
<div class="skill-item placeholder">
  <div class="skill-icon">?</div>
  <div class="skill-name">[Add Skill]</div>
  <div class="skill-level">Placeholder</div>
</div>

<!-- After -->
<div class="skill-item">
  <div class="skill-icon">🧠</div>
  <div class="skill-name">XGBoost</div>
  <div class="skill-level">Advanced</div>
</div>

Step 4: Update Academic Information

File: academics.md

Fill in your education and certifications:

<h3 style="color: var(--primary-blue); font-size: 1.2rem; margin-bottom: 8px;">[Degree Name]</h3>
<p style="color: var(--accent-orange); font-weight: 700; margin-bottom: 8px;">[University Name]</p>
<p style="color: #666; margin-bottom: 10px;">📅 [Year Graduated]</p>
<p style="color: #555; line-height: 1.6;">
  [Add degree details, major/minor, GPA, relevant coursework, thesis title, or honors received]
</p>

Step 5: Update Contact Information

File: contact.md

Update your contact methods:

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

🎯 Color Scheme Reference

The website uses a professional color palette you specified:

All CSS variables are defined in: assets/css/custom.css

🔧 Advanced Customization

Change the Color Scheme

File: assets/css/custom.css (Lines 1-13)

:root {
  --primary-blue: #003366;      /* Change this */
  --dark-blue: #001a33;         /* Change this */
  --light-blue: #004d99;        /* Change this */
  --accent-orange: #ff8c00;     /* Change this */
  --light-orange: #ffa500;      /* Change this */
  /* ... rest of colors ... */
}

Modify Section Styling

All custom styles are in: assets/css/custom.css

Common sections to customize:

Add a Profile Picture

File: _config.yml

author:
  avatar: /assets/images/profile-photo.jpg  # Add your image path here

Then place your image in: assets/images/profile-photo.jpg

📊 Statistics to Update

File: index.html - Stats Section

Update the numbers in the stats container:

<div class="stat-box">
  <div class="stat-number">50+</div>  <!-- Update this -->
  <div class="stat-label">Students Trained</div>
</div>

📱 Mobile Responsiveness

The website is fully responsive! It automatically adapts to:

No additional configuration needed. All components stack properly on smaller screens.

🚀 How to Deploy

  1. Push your changes to your GitHub repository
  2. Go to repository Settings → Pages
  3. Select the branch where your code is pushed
  4. Your site will be live at: https://yourusername.github.io/personal_wp/

Option 2: Local Testing

# Install dependencies (first time only)
bundle install

# Serve locally
bundle exec jekyll serve

# Visit: http://localhost:4000

✅ Checklist for Completion

🎓 File Structure

personal_wp/
├── index.html              ← Homepage
├── academics.md            ← Academic Achievements
├── projects.md             ← Projects Showcase
├── contact.md              ← Contact Page
├── _config.yml             ← Site configuration
├── assets/
│   └── css/
│       └── custom.css      ← Your custom styles (deep blue + orange)
├── _data/
│   └── navigation.yml      ← Navigation menu
└── _includes/
    └── head.html           ← Links custom CSS

🆘 Troubleshooting

Colors not showing correctly?

Projects not filtering?

Mobile layout broken?

📚 Resources

💡 Tips for Success

  1. Keep descriptions concise - 2-3 sentences per project or achievement
  2. Use emoji strategically - Adds visual interest without extra images
  3. Update regularly - Add new projects and achievements as you progress
  4. Test before deploying - Use bundle exec jekyll serve locally first
  5. Backup your content - Keep copies of your project descriptions
  6. SEO friendly - The site is already optimized for search engines

🎉 You’re All Set!

Your professional portfolio website is ready to showcase your work!

Next Steps:

  1. Fill in your personal details
  2. Add your projects and achievements
  3. Deploy to GitHub Pages
  4. Share your new website! 🚀

Good luck! 🌟

Questions or need help? Reach out and customize away! This is your professional space to shine.