---
layout: default
id: projects
permalink: /projects/
title: Featured Projects
---


<article class="mb-6 pb-6">


    <div class="page-header">
        <div class="wrapper d-md-flex">
            <div class="col-md-6 col-lg-6 mb-4 mb-md-0">
                <!-- <p>Microsoft Open Source</p> -->
                <h1 class="h2">Featured Projects</h1>
            </div>
            <div class="col-md-6 pl-md-4 col-lg-4">
                <p>Check out featured open source projects and products, or search on your own.</p>

                <div data-animate-in="fade" data-animate-in-delay="240">
                    <a class="link-arrow text-white mt-4" href="{{ '/projects/explore/' | relative_url }}">All projects</a>
                </div>
            </div>
        </div>

        <img class="page-header__shapes-lg" src="{{ '/assets/images/direction/project-shapes.svg' | relative_url }}" alt="abstract shapes" />
    </div>


    <div class="wrapper d-lg-flex flex-justify-between my-6 py-lg-4">
        <div class="col-12 col-lg-7 pr-lg-6 mb-4 mb-md-0">

            {% for project in site.projects %}
            <div class="mb-6 pb-lg-4" data-animate-in="up">
                <div class="d-flex mb-3">
                    {% if project.logo == "" or project.logo == nil %}
                    {% octicon repo height:32 style:"margin-right: 12px" aria-label:repository %}
                    {% else %}
                    {% capture img %}/assets/images/projects/{{ project.logo }}{% endcapture %}
                    <img class="mr-3 icon" src="{{ img | relative_url }}" alt="{{ project.title }} logo" />
                    {% endif %}
                    <h2>{{ project.title }}</h2>
                </div>
                <p>{{ project.description }}</p>

                <a class="link-arrow-external mt-3" href="{{ project.projectUrl }}" target="_blank" rel= "noopener">{{ project.linkText }}</a>
                {% unless project.storeUrl == "" or project.storeUrl == nil %}
                 <a class="link-arrow-external mt-3" href="https://apps.microsoft.com/store/detail/{{ project.storeUrl }}" target="_blank" rel= "noopener">Download {{ project.title }} from Microsoft Store</a>
                {% endunless %}
            </div>
            {% endfor %}

        </div>
        <div class="col-12 col-lg-4 pl-lg-6 col-lg-4">
            <div class="sticky">
                <div class="cta">
                    <div class="cta__inner">
                        <p class="h5">Explore Microsoft projects</p>
                        <p>
                            Microsoft engineers and community members 
                            maintain thousands of GitHub repos: everything 
                            from complete samples, to product SDKs, to entire products.
                        </p>
                        <!--
                        <p>
                            Search, filter and explore to find what you're looking for, or an opportunity to join in the fun.
                        </p>
                        <a class="link-arrow text-white mt-4" href="{{ '/projects/explore/' | relative_url }}">View all projects</a>
                        <br />
                        <a class="link-arrow text-white mt-4" href="{{ '/collaborate/' | relative_url }}">Get involved</a>
                        <br/>
                        <a class="link-arrow text-white mt-4" href="https://github.com/microsoft">Microsoft on GitHub</a>
                        -->
                    </div>
                </div>
            </div>

        </div>
    </div>

    <hr class="wrapper" />

    <!-- TODO: Pull in other awesome projects -->

</article>