import React, { Component } from "react";
import Projects from "./SpotlightProjects.js";

class Portfolio extends Component {
  render() {
    return (
      <section id="portfolio">
        <div className="row">
          <div className="twelve columns collapsed">
            <h1>Check out my 3 spotlight projects</h1>

            <div
              id="portfolio-wrapper"
              className="bgrid-thirds s-bgrid-thirds cf"
            >
              {Projects.map((projects) => (
                <div key={projects.title} className="columns portfolio-item">
                  <a
                    href={projects.url}
                    target="_blank"
                    rel="noopener noreferrer"
                    title={projects.title}
                  >
                    <div className="item-wrap">
                      <img alt={projects.title} src={projects.image} />
                      <div className="overlay">
                        <div className="portfolio-item-meta">
                          <h5>{projects.title}</h5>
                          <p>{projects.category}</p>
                        </div>
                      </div>
                    </div>
                  </a>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>
    );
  }
}

export default Portfolio;

@@ -846,50 +846,310 @@
 %3Cimg
- alt=%7Bprojects.title%7D src=%7Bprojects.image%7D
+%0A                        alt=%7Bprojects.title%7D%0A                        src=%7Bprojects.image%7D%0A                        style=%7B%7B%0A                          objectFit: %22cover%22,%0A                          width: %22100%25%22,%0A                          height: %22175px%22,%0A                        %7D%7D%0A                     
  /%3E%0A

Fix mobile CSS for highlighted projects section (#35)