📊 Learning Analyst Portfolio

A modern, minimalist portfolio website designed specifically for learning analysts and data professionals in education. Features elegant typography, background photography, and a focus on clarity and impact.

✨ Key Features

• 🎨 Minimal & Modern Design - Clean, professional aesthetic that highlights your work
• 📸 Background Photography - Dramatic photo backgrounds with elegant overlays
• 🎯 Purpose-Built - Specifically designed for learning analytics professionals
• 📊 Data-Focused - Showcase your analytics projects and impact metrics
• 📱 Fully Responsive - Perfect on all devices
• ⚡ HTML & CSS Only - No JavaScript required, pure simplicity
• 🎨 Sophisticated Color Palette - Professional yet artistic color scheme

🎨 Color Palette

This template uses a sophisticated, professional color scheme:

• Space Indigo (#22223b) - Primary dark for text and backgrounds
• Dusty Grape (#4a4e69) - Secondary text and elements
• Lilac Ash (#9a8c98) - Mid-tone accents and highlights
• Almond Silk (#c9ada7) - Light accents and CTAs
• Parchment (#f2e9e4) - Lightest background color

🔤 Typography

Modern, accessible, web-safe fonts:

• Poppins - Headlines and display text (modern, bold)
• Inter - Body text (highly readable, professional)

Both fonts are loaded from Google Fonts for optimal performance and accessibility.

📁 File Structure

analyst-portfolio/
├── index.html          # Home page with hero and featured work
├── about.html         # Expertise, approach, and background
├── work.html          # Detailed project case studies
├── contact.html       # Contact form and services
├── styles.css         # Complete styling
└── README.md         # This file

🚀 Quick Start

1. Customize Content

Update All Pages:

• Replace "Your Name" throughout all files
• Update hero section with your value proposition
• Fill in About page with your expertise and background
• Add your actual projects to Work page
• Update contact information

Add Background Photos: The template uses placeholder backgrounds. To add real photos:

1. Prepare your images (recommended: 1920x1080px)
2. Save them in an images folder
3. Update CSS background-image URLs:

/* In styles.css, find these lines: */
.hero-bg {
    background-image: linear-gradient(...), url('images/hero-photo.jpg');
}

.header-bg {
    background-image: linear-gradient(...), url('images/header-photo.jpg');
}

.cta-bg, .stats-bg {
    background-image: linear-gradient(...), url('images/cta-photo.jpg');
}

Photo Tips:

• Use high-quality, professional images
• Images with depth/layers work well
• Darker images work better with text overlays
• Unsplash.com has great free professional photos

2. Customize Projects (Work Page)

Each project card includes:

• Challenge - The problem you were solving
• Solution - Your analytical approach
• Impact - Measurable results and outcomes
• Tags - Tools and methodologies used

Update the work.html file with your actual projects, metrics, and achievements.

3. Personalize Colors (Optional)

Edit styles.css (lines 8-12):

:root {
    --space-indigo: #22223b;
    --dusty-grape: #4a4e69;
    --lilac-ash: #9a8c98;
    --almond-silk: #c9ada7;
    --parchment: #f2e9e4;
}

🌐 Deploying to GitHub Pages

Personal Site (username.github.io)

1. Create repository: your-username.github.io
2. Upload all files including images folder
3. Site automatically available at: https://your-username.github.io

Project Site

1. Create any repository (e.g., portfolio)
2. Upload files
3. Settings → Pages → Select main branch
4. Site at: https://your-username.github.io/portfolio

📧 Making Contact Form Work

The contact form needs a backend service:

Formspree (Recommended)

1. Sign up at formspree.io
2. Create new form
3. In contact.html, update form tag:

   <form class="contact-form" action="https://formspree.io/f/YOUR_FORM_ID" method="POST">

💡 Tips for Learning Analysts

Showcasing Your Work

Be Specific with Metrics:

• Number of learners analyzed
• Percentage improvements achieved
• Cost savings or ROI demonstrated
• Completion rate increases
• Time saved for stakeholders

Show Your Process:

• What data sources you used
• Analytical methods applied
• Tools and technologies employed
• How insights led to action

Communicate Impact:

• Focus on outcomes, not just outputs
• Connect analysis to real-world results
• Show before/after comparisons
• Include stakeholder testimonials when possible

Project Descriptions

For each project in work.html, ensure you include:

1. Context - Organization type, scale, challenge
2. Your Role - What you specifically did
3. Methodology - Analytical approach and tools
4. Deliverables - Dashboards, reports, recommendations
5. Impact - Quantifiable results and decisions influenced

Building Credibility

Technical Skills Section:

• List specific tools (Python, R, Tableau, SQL, etc.)
• Mention statistical methods you're proficient in
• Include certifications or training
• Show breadth and depth of expertise

Professional Background:

• Years of experience
• Types of organizations you've worked with
• Academic credentials
• Publications or presentations

🎯 Perfect For

• Learning Analysts - Showcase data analysis and insights
• Educational Data Scientists - Demonstrate technical expertise
• Research Analysts - Present program evaluations
• Assessment Specialists - Display psychometric work
• Instructional Designers - Show data-driven design decisions
• EdTech Professionals - Highlight analytics capabilities

🛠️ Technologies Used

• HTML5 - Semantic markup
• CSS3 - Modern styling with Grid, Flexbox, CSS Variables
• Google Fonts - Poppins & Inter
• No JavaScript - Pure HTML/CSS for maximum simplicity and accessibility

📱 Browser Support

✅ Chrome/Edge (latest)
✅ Firefox (latest)
✅ Safari (latest)
✅ Mobile browsers

🎨 Design Philosophy

This template embodies:

• Clarity - Information is easy to find and understand
• Minimalism - No unnecessary elements, focus on content
• Professionalism - Sophisticated design that builds credibility
• Impact - Design supports rather than overshadows your work

🔧 Customization Ideas

Adding a Blog Section

Create blog.html:

<!-- Use similar structure to work.html -->
<!-- Replace project cards with blog post previews -->

Adding Resume/CV Download

In About page:

<a href="your-resume.pdf" class="btn btn-primary" download>Download Resume</a>

Adding Publications Section

In About page, after Timeline:

<section class="publications">
    <h2>Publications & Presentations</h2>
    <!-- List your papers, conference talks, etc. -->
</section>

Changing Background Photos by Section

You can use different photos for different pages/sections:

.page-header {
    background-image: url('images/about-bg.jpg');
}

.cta {
    background-image: url('images/contact-bg.jpg');
}

📚 Recommended Tools for Learning Analysts

If you're building your portfolio, consider showcasing expertise in:

Programming & Analysis:

• Python (pandas, scikit-learn, matplotlib, seaborn)
• R (tidyverse, ggplot2, caret)
• SQL
• Statistical analysis

Visualization:

• Tableau
• Power BI
• matplotlib/seaborn
• D3.js

Learning Analytics Platforms:

• LMS data (Canvas, Moodle, Blackboard)
• xAPI/SCORM
• Google Analytics
• Custom dashboards

🤝 Contributing

Improvements welcome! Feel free to:

• Fork this repository
• Create enhancements
• Submit pull requests

📄 License

Free to use for personal and commercial projects. Attribution appreciated but not required.

⭐ Show Your Support

If you use this template:

• Star this repository
• Share with fellow analysts
• Tag your live site!

💬 Questions?

Open an issue or reach out to the community for help.

---

Built for learning analysts who let data tell the story 📊

Transform data into insights that drive impact ✨