Website Customization Guide

This guide will help you personalize your website and make it truly yours.

🎨 Visual Customization

1. Color Scheme

Edit assets/css/style.scss and modify the color variables:

:root {
  --primary-color: #2c5aa0;      /* Main brand color */
  --secondary-color: #1a3a6b;    /* Darker accent */
  --accent-color: #4a90e2;       /* Highlight color */
  --text-color: #333;            /* Main text */
  --light-text: #666;            /* Secondary text */
  --bg-color: #ffffff;           /* Background */
  --card-bg: #f8f9fa;           /* Card backgrounds */
  --border-color: #e1e4e8;      /* Borders */
  --success-color: #28a745;      /* Success/checkmarks */
}

Color Palette Suggestions:

Professional Blue: #2c5aa0, #1a3a6b, #4a90e2 (current)
Modern Purple: #6C63FF, #4B42C0, #8B85FF
Tech Green: #10B981, #059669, #34D399
Corporate Gray: #374151, #1F2937, #6B7280

2. Fonts

To change fonts, add to assets/css/style.scss:

/* Add custom Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap');

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

3. Logo/Favicon

Create or obtain your logo/favicon
Save in assets/images/
Add to _config.yml:

logo: "/assets/images/logo.png"
favicon: "/assets/images/favicon.ico"

📝 Content Customization

Personal Information

_config.yml

Update these key fields:

title: "Your Name"
tagline: "Your Professional Title"
description: "Your professional description"

author:
  name: "Your Name"
  email: "your.email@example.com"
  linkedin: "your-linkedin-username"
  github: "your-github-username"
  location: "Your Location"
  bio: "Your bio"

url: "https://yourusername.github.io"

About Page (about.md)

Replace placeholder content with:

Your actual education details
Your real work experience
Your authentic story
Your specific achievements
Your genuine interests

Experience Page (experience.md)

Update with:

Your actual job titles and dates
Your real companies (or keep anonymous)
Your specific achievements
Your actual education
Your real certifications

Skills Page (skills.md)

Customize to include:

Your actual technical skills
Your programming languages
Your domain expertise
Your tools and technologies

Projects

Edit projects.md to showcase your work:

<div class="card">

### Your Project Title

**Challenge**: Describe the problem you solved

**Approach**: How you approached it

**Technologies Used**:
<div class="tech-stack">
  <span class="badge">Python</span>
  <span class="badge">Your Tech</span>
</div>

**Results & Impact**:
- Your specific results
- Quantifiable outcomes

</div>

Update throughout your site:

[LinkedIn](https://www.linkedin.com/in/your-username/)

GitHub

Update your GitHub username:

[GitHub](https://github.com/your-username)

Twitter/X (Optional)

Add to _config.yml:

twitter:
  username: your_username
  card: summary

Edit contact.md to add more platforms:

<div class="contact-card">
  <div class="icon">🐦</div>
  <h3>Twitter</h3>
  <p>Follow for updates</p>
  <a href="https://twitter.com/your_username">@your_username</a>
</div>

📊 Analytics & SEO

Google Analytics

Create Google Analytics account
Get tracking ID
Add to _config.yml:

google_analytics: G-XXXXXXXXXX

SEO Optimization

Update _config.yml:

# SEO tags
title: "Your Name - Data Scientist"
description: "Your compelling description for search engines"
author: "Your Name"

# Social
social:
  name: Your Name
  links:
    - https://www.linkedin.com/in/your-profile
    - https://github.com/your-username
    - https://twitter.com/your-username

Meta Tags

Jekyll SEO Tag plugin automatically generates:

Title tags
Meta descriptions
Open Graph tags
Twitter Card tags

🎯 Feature Additions

Add Resume/CV Download

Create assets/files/ directory
Add your resume PDF
Add button to contact or experience page:

<a href="/assets/files/resume.pdf" download class="btn">Download Resume</a>

Integrate services like:

Mailchimp
ConvertKit
Substack

Add form to blog.md:

<form action="your-service-endpoint" method="post">
  <input type="email" placeholder="Your email" required>
  <button type="submit">Subscribe</button>
</form>

Add Comments to Blog Posts

Use services like:

Disqus
Utterances (GitHub-based)
Giscus

Add to _layouts/post.html:

<!-- Utterances Comments -->
<script src="https://utteranc.es/client.js"
        repo="your-username/your-repo"
        issue-term="pathname"
        theme="github-light"
        crossorigin="anonymous"
        async>
</script>

Add Search Functionality

Add Simple Jekyll Search:

Add to _config.yml:
```
plugins:
  - jekyll-search
```
Create search page

🌐 Advanced Customization

Custom Domain

Buy domain from registrar (Namecheap, GoDaddy, etc.)
Create CNAME file in root:
```
yourdomain.com
```
Update DNS settings: ``` Type: A Host: @ Value: 185.199.108.153 185.199.109.153 185.199.110.153 185.199.111.153

Type: CNAME Host: www Value: your-username.github.io

### Add Portfolio Images

1. Create `assets/images/projects/`
2. Add project screenshots
3. Reference in projects:

```markdown
![Project Screenshot](/assets/images/projects/project1.png)

Add Testimonials Section

Create testimonials.md:

## 💬 Testimonials

<div class="card">
  <blockquote>
    "Working with Anuj was fantastic..."
  </blockquote>
  <p><strong>- Client Name</strong>, Position, Company</p>
</div>

Add Publications Section

Create separate publications.md or add to experience:

## 📚 Publications

1. **Paper Title**  
   Authors, Journal Name, Year  
   [DOI Link](https://doi.org/...)

🔧 Performance Optimization

Optimize Images

Use WebP format for better compression
Resize images to appropriate dimensions
Use lazy loading:

<img src="image.jpg" loading="lazy" alt="Description">

Minify CSS

Jekyll automatically minifies in production.

Enable Caching

Add _headers file for Netlify:

/*
  Cache-Control: public, max-age=31536000

🎨 Layout Customization

Create Custom Layouts

Add new layout in _layouts/:

---
layout: default
---
<div class="custom-layout">
  <article class="post">

  <header class="post-header">
    <h1 class="post-title">Website Transformation Changelog</h1>
  </header>

  <div class="post-content">
    <h1 id="website-transformation-changelog">Website Transformation Changelog</h1>

<h2 id="-december-28-2025---complete-professional-redesign">🎉 December 28, 2025 - Complete Professional Redesign</h2>

<h3 id="-design--styling">🎨 Design &amp; Styling</h3>

<p><strong>Created Modern Professional Theme</strong></p>
<ul>
  <li>✅ Custom CSS with modern design system (<code class="language-plaintext highlighter-rouge">assets/css/style.scss</code>)</li>
  <li>✅ Professional color scheme (blues and grays)</li>
  <li>✅ Responsive grid layouts</li>
  <li>✅ Card-based design components</li>
  <li>✅ Smooth animations and transitions</li>
  <li>✅ Hero sections with gradients</li>
  <li>✅ Mobile-responsive design</li>
  <li>✅ Professional typography</li>
</ul>

<p><strong>Visual Components</strong></p>
<ul>
  <li>Modern hero sections</li>
  <li>Card layouts for projects</li>
  <li>Grid systems for skills</li>
  <li>Timeline design for experience</li>
  <li>Badge and tag systems</li>
  <li>Hover effects and animations</li>
  <li>Professional navigation</li>
  <li>Contact cards with icons</li>
</ul>

<h3 id="-new-pages-created">📄 New Pages Created</h3>

<ol>
  <li><strong>Enhanced Homepage</strong> (<code class="language-plaintext highlighter-rouge">index.md</code>)
    <ul>
      <li>Hero section with call-to-action buttons</li>
      <li>What I Do section with cards</li>
      <li>Core expertise grid</li>
      <li>Latest blog posts preview</li>
      <li>Featured projects showcase</li>
      <li>Professional approach section</li>
    </ul>
  </li>
  <li><strong>Comprehensive Skills Page</strong> (<code class="language-plaintext highlighter-rouge">skills.md</code>)
    <ul>
      <li>Domain expertise</li>
      <li>Statistical methods</li>
      <li>Machine learning &amp; AI</li>
      <li>Programming &amp; tools</li>
      <li>Advanced techniques</li>
      <li>Professional skills</li>
      <li>Key competencies section</li>
      <li>Continuous learning section</li>
    </ul>
  </li>
  <li><strong>Professional Experience Page</strong> (<code class="language-plaintext highlighter-rouge">experience.md</code>)
    <ul>
      <li>Career timeline with visual design</li>
      <li>Detailed job descriptions</li>
      <li>Education section with degrees</li>
      <li>Certifications &amp; training</li>
      <li>Publications &amp; presentations</li>
      <li>Areas of impact</li>
    </ul>
  </li>
  <li><strong>Enhanced About Page</strong> (<code class="language-plaintext highlighter-rouge">about.md</code>)
    <ul>
      <li>Personal philosophy</li>
      <li>What makes approach different</li>
      <li>Detailed background</li>
      <li>Perspective on AI in pharma</li>
      <li>Beyond work interests</li>
      <li>Call to connect</li>
    </ul>
  </li>
  <li><strong>Blog Landing Page</strong> (<code class="language-plaintext highlighter-rouge">blog.md</code>)
    <ul>
      <li>Article listings</li>
      <li>Topic categories</li>
      <li>Writing philosophy</li>
      <li>Subscribe options</li>
      <li>Topic suggestion CTA</li>
    </ul>
  </li>
  <li><strong>Modernized Contact Page</strong> (<code class="language-plaintext highlighter-rouge">contact.md</code>)
    <ul>
      <li>Multiple contact methods with cards</li>
      <li>Best ways to reach section</li>
      <li>Response time expectations</li>
      <li>Location &amp; availability</li>
      <li>Before you reach out tips</li>
    </ul>
  </li>
  <li><strong>Custom 404 Page</strong> (<code class="language-plaintext highlighter-rouge">404.md</code>)
    <ul>
      <li>Friendly error message</li>
      <li>Navigation to popular pages</li>
      <li>Professional design</li>
    </ul>
  </li>
</ol>

<h3 id="-enhanced-blog-posts">📝 Enhanced Blog Posts</h3>

<p><strong>“Why DOE Still Matters in the Age of Machine Learning”</strong></p>
<ul>
  <li>Expanded from 100 words to 2000+ words</li>
  <li>Added detailed sections:
    <ul>
      <li>What DOE provides that ML can’t</li>
      <li>When ML shines</li>
      <li>Winning strategy combining both</li>
      <li>Real-world examples</li>
      <li>Key takeaways</li>
      <li>Future outlook</li>
    </ul>
  </li>
</ul>

<p><strong>“Using AI in Bioprocessing: What Actually Works”</strong></p>
<ul>
  <li>Expanded from 100 words to 2500+ words</li>
  <li>Added comprehensive sections:
    <ul>
      <li>Start with problem, not algorithm</li>
      <li>Domain knowledge importance</li>
      <li>Data quality over quantity</li>
      <li>Interpretability critical</li>
      <li>Models support decisions</li>
      <li>Start simple, iterate</li>
      <li>Success factors</li>
      <li>Practical recommendations</li>
    </ul>
  </li>
</ul>

<h3 id="-custom-layouts">🎨 Custom Layouts</h3>

<p><strong>Blog Post Layout</strong> (<code class="language-plaintext highlighter-rouge">_layouts/post.html</code>)</p>
<ul>
  <li>Professional post header</li>
  <li>Meta information display</li>
  <li>Formatted content area</li>
  <li>Related content section</li>
  <li>Post navigation</li>
  <li>Discussion CTA</li>
  <li>Responsive design</li>
</ul>

<h3 id="️-configuration-updates">⚙️ Configuration Updates</h3>

<p><strong>Updated _config.yml</strong></p>
<ul>
  <li>Added comprehensive author information</li>
  <li>Enhanced SEO settings</li>
  <li>Added social media links</li>
  <li>Configured navigation</li>
  <li>Added blog settings</li>
  <li>Updated plugins list</li>
</ul>

<p><strong>Updated Navigation</strong> (<code class="language-plaintext highlighter-rouge">_data/navigation.yml</code>)</p>
<ul>
  <li>Added all new pages</li>
  <li>Logical menu structure</li>
  <li>Professional organization</li>
</ul>

<p><strong>Updated Gemfile</strong></p>
<ul>
  <li>Added all necessary plugins</li>
  <li>Platform-specific dependencies</li>
  <li>Updated for GitHub Pages compatibility</li>
</ul>

<h3 id="-documentation-created">📚 Documentation Created</h3>

<ol>
  <li><strong>README.md</strong> - Complete project documentation
    <ul>
      <li>Features overview</li>
      <li>Quick start guide</li>
      <li>Site structure</li>
      <li>Deployment instructions</li>
      <li>Customization guide</li>
      <li>Troubleshooting</li>
    </ul>
  </li>
  <li><strong>GETTING_STARTED.md</strong> - Step-by-step beginner guide
    <ul>
      <li>5-minute quick setup</li>
      <li>Making first edits</li>
      <li>Deploying to GitHub Pages</li>
      <li>Common commands</li>
      <li>Troubleshooting</li>
    </ul>
  </li>
  <li><strong>CUSTOMIZATION_GUIDE.md</strong> - Comprehensive customization
    <ul>
      <li>Visual customization</li>
      <li>Content personalization</li>
      <li>Social media integration</li>
      <li>Analytics &amp; SEO</li>
      <li>Feature additions</li>
      <li>Advanced topics</li>
    </ul>
  </li>
  <li><strong>CHANGELOG.md</strong> - This file!
    <ul>
      <li>Complete list of changes</li>
      <li>Feature documentation</li>
    </ul>
  </li>
</ol>

<h3 id="-development-files">🔧 Development Files</h3>

<p><strong>Created .gitignore</strong></p>
<ul>
  <li>Jekyll build files</li>
  <li>Ruby dependencies</li>
  <li>OS-specific files</li>
  <li>Editor configurations</li>
  <li>Temporary files</li>
</ul>

<h3 id="-features-added">📊 Features Added</h3>

<p>✅ <strong>Professional Design System</strong></p>
<ul>
  <li>Consistent colors and typography</li>
  <li>Reusable components</li>
  <li>Responsive layouts</li>
  <li>Accessibility considerations</li>
</ul>

<p>✅ <strong>Content Management</strong></p>
<ul>
  <li>Blog system with custom layout</li>
  <li>Project portfolio</li>
  <li>Skills showcase</li>
  <li>Experience timeline</li>
</ul>

<p>✅ <strong>SEO Optimization</strong></p>
<ul>
  <li>Meta tags</li>
  <li>Sitemap generation</li>
  <li>Social media tags</li>
  <li>Structured data ready</li>
</ul>

<p>✅ <strong>User Experience</strong></p>
<ul>
  <li>Clear navigation</li>
  <li>Call-to-action buttons</li>
  <li>Contact options</li>
  <li>Mobile-friendly design</li>
  <li>Fast loading</li>
</ul>

<p>✅ <strong>Developer Experience</strong></p>
<ul>
  <li>Well-documented code</li>
  <li>Modular CSS</li>
  <li>Clear file structure</li>
  <li>Easy to maintain</li>
</ul>

<h3 id="-content-statistics">📈 Content Statistics</h3>

<ul>
  <li><strong>Total Pages</strong>: 8 main pages</li>
  <li><strong>Blog Posts</strong>: 2 comprehensive articles (expandable)</li>
  <li><strong>Documentation Files</strong>: 4 guides</li>
  <li><strong>CSS Lines</strong>: 700+ custom styling</li>
  <li><strong>Word Count</strong>: 15,000+ total content</li>
  <li><strong>Projects Showcased</strong>: 7 detailed case studies</li>
</ul>

<h3 id="-technical-improvements">🎯 Technical Improvements</h3>

<p><strong>Performance</strong></p>
<ul>
  <li>Optimized CSS</li>
  <li>Efficient layouts</li>
  <li>Minimal dependencies</li>
  <li>Fast load times</li>
</ul>

<p><strong>Maintainability</strong></p>
<ul>
  <li>Modular code structure</li>
  <li>Clear documentation</li>
  <li>Reusable components</li>
  <li>Version controlled</li>
</ul>

<p><strong>Scalability</strong></p>
<ul>
  <li>Easy to add pages</li>
  <li>Simple blog posting</li>
  <li>Expandable portfolio</li>
  <li>Flexible styling</li>
</ul>

<h3 id="-ready-for-deployment">🔜 Ready for Deployment</h3>

<p><strong>What’s Ready:</strong></p>
<ul>
  <li>✅ All pages created and styled</li>
  <li>✅ Blog system configured</li>
  <li>✅ Navigation working</li>
  <li>✅ Responsive design</li>
  <li>✅ SEO optimized</li>
  <li>✅ Documentation complete</li>
</ul>

<p><strong>Next Steps:</strong></p>
<ol>
  <li>Personalize content with your specific details</li>
  <li>Update contact information</li>
  <li>Add your actual projects (or keep templates)</li>
  <li>Test locally</li>
  <li>Deploy to GitHub Pages</li>
</ol>

<h3 id="-notes">📝 Notes</h3>

<p><strong>Content Placeholders:</strong>
The site is populated with professionally written content based on:</p>
<ul>
  <li>Your existing basic site content</li>
  <li>Typical pharmaceutical data scientist profile</li>
  <li>Best practices for professional portfolios</li>
</ul>

<p><strong>Customization Required:</strong></p>
<ul>
  <li>Update personal details in <code class="language-plaintext highlighter-rouge">_config.yml</code></li>
  <li>Replace email with your actual email</li>
  <li>Update LinkedIn/GitHub URLs</li>
  <li>Adjust experience dates and details</li>
  <li>Add your specific achievements</li>
</ul>

<p><strong>Design Decisions:</strong></p>
<ul>
  <li>Professional blue color scheme (easily changeable)</li>
  <li>Card-based layouts for scannability</li>
  <li>Hero sections for impact</li>
  <li>Mobile-first responsive design</li>
  <li>Clean, modern aesthetic</li>
</ul>

<h3 id="-deployment-ready">🚀 Deployment Ready</h3>

<p>The site is 100% ready to:</p>
<ol>
  <li>Run locally for preview</li>
  <li>Deploy to GitHub Pages</li>
  <li>Customize with your specific details</li>
  <li>Expand with more content</li>
</ol>

<h3 id="-learning-resources-included">🎓 Learning Resources Included</h3>

<p>All documentation files include:</p>
<ul>
  <li>Step-by-step instructions</li>
  <li>Common troubleshooting</li>
  <li>Best practices</li>
  <li>Pro tips</li>
  <li>Resource links</li>
</ul>

<hr />

<h2 id="summary">Summary</h2>

<p><strong>Transformed from:</strong> Basic 4-page site with minimal content<br />
<strong>Transformed to:</strong> Full-fledged professional portfolio with 8+ pages, modern design, comprehensive content, and complete documentation</p>

<p><strong>Time Investment:</strong> Complete redesign and enhancement<br />
<strong>Result:</strong> Production-ready professional website</p>

<hr />

<p><strong>Version</strong>: 2.0.0<br />
<strong>Status</strong>: ✅ Complete &amp; Ready for Deployment<br />
<strong>Date</strong>: December 28, 2025</p>


  </div>

</article>

</div>

Modify Hero Section

Edit assets/css/style.scss:

.hero {
  background: linear-gradient(135deg, #your-color1 0%, #your-color2 100%);
  padding: 100px 20px; /* Adjust size */
}

Change Card Styles

.card {
  border-radius: 15px; /* More rounded corners */
  box-shadow: 0 4px 12px rgba(0,0,0,0.15); /* Stronger shadow */
}

📱 Mobile Optimization

Test on different devices and adjust breakpoints in style.scss:

@media (max-width: 768px) {
  /* Your mobile-specific styles */
}

@media (max-width: 480px) {
  /* Your small phone styles */
}

🔐 Privacy & Legal

Add Privacy Policy

Create privacy.md:

---
layout: page
title: "Privacy Policy"
---

## What information do we collect?
...

Add Terms of Use

Create terms.md with your terms.

If using analytics, add cookie consent banner.

🚀 Deployment Options

GitHub Pages (Current)

Free
Automatic builds
Custom domain support

Netlify

Advanced features
Better build times
Form handling

Vercel

Excellent performance
Edge functions
Analytics

📊 Monitoring

Set Up Alerts

Google Search Console for SEO
Uptime Robot for availability
Analytics for traffic

Track Performance

Google PageSpeed Insights
Lighthouse scores
WebPageTest

💡 Pro Tips

Keep Content Fresh: Update blog monthly
Optimize for Mobile: 60%+ visitors are mobile
Use Clear CTAs: Make it easy to contact you
Show Personality: Be authentic
Quantify Achievements: Use numbers and metrics
Keep Loading Fast: Optimize images and code
Update Regularly: Show you’re active
Cross-link Content: Guide visitors through your site

🎯 Checklist Before Launch

🆘 Need Help?

Refer to:

README.md for technical setup
GETTING_STARTED.md for quick start
Jekyll Documentation
GitHub Pages Guide

Remember: Your website is a reflection of you. Make it authentic, professional, and uniquely yours!