How to create a Portfolio

The theme for week #7 of the Weekly Coding Challenge is:

Portfolio

As a developer it is highly recommended to have a portfolio with some of the projects that you’ve been working on. I say some, because maybe not all of your projects are worthy to be put in a portfolio. In order to impress your future employer or client, you should only include your best work in your portfolio.

In this article I’m going to create a simple portfolio in which I’m going to showcase the past themes for the #weeklyCodingChallenge.

The challenge for you is to take this basic portfolio and add more features on top of it. Maybe something like:

• filtering
• animations
• skills used on each project
• multiple images

And you could really top up your game by writing a separate blog post about how you created each specific project in your portfolio. This will definitely impress your future employer/client. 👍

This is what we’re going to create in this article (Live on Codepen):

https://codepen.io/FlorinPop17/pen/jRGVNo

The HTML

<div class="portfolio-container">
    <div class="portfolio-item">
        <img
            src="https://www.florin-pop.com/static/240672c2f743eca5d4f91fae32980563/ff993/double-slider-sign-in-up-form.png"
            alt="wcc1"
        />
        <div class="portfolio-content">
            <p>Create a Sign in or Sign up form (or both)</p>
            <a
                href="https://www.florin-pop.com/blog/2019/03/double-slider-sign-in-up-form/"
                target="_blank"
                >Read More</a
            >
        </div>
    </div>
    <!-- Multiple portfolio-items -->
</div>

We have a wrapper, the portfolio-container which holds all the .portfolio-items. Each item has an image and some text within an overlay .portoflio-content - this will be positioned absolute in order to stay exactly on top of the image.

The CSS

.portfolio-container {
    display: flex;
    flex-wrap: wrap;
    max-width: 1120px;
    margin: 20px;
}

.portfolio-item {
    border-radius: 10px;
    margin: 20px 1.6%;
    overflow: hidden;
    position: relative;
    width: 30%;
}

The .portfolio-container has a fixed width and the .portfolio-items will take up 30% of that width plus a margin of 2 times 1.6% (left and right). This will add up to almost 100% and will create 3 columns.

.portfolio-item img {
    object-fit: cover;
    transition: transform 200ms ease-in;
    height: 100%;
    width: 100%;
}

.portfolio-item:hover img {
    transform: scale(1.1);
}

We want the img inside the .portfolio-item to cover the entire width and height of it, therefore we use the object-fit: cover property to do so. Also, on :hover we’ll scale up the img a little bit to add a nice effect.

.portfolio-content {
    background-color: #293347;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    color: #fff;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 200ms ease-in-out;
    width: 100%;
    height: 100%;
}

.portfolio-item:hover .portfolio-content {
    opacity: 1;
}

.portfolio-content p {
    color: #fff;
    font-size: 20px;
    padding: 0 40px;
}

.portfolio-content a {
    background-color: #fff;
    border-radius: 3px;
    color: #000;
    margin-top: 20px;
    padding: 7px 15px;
    text-decoration: none;
}

As mentioned above, the .portfolio-content acts as an overlay on top of the image and by default it has 0 opacity which makes it invisible, but by hovering over we’ll transition the opacity back to 1.

The style for the p and a tags are pretty straightforward so it doesn’t need an explanation.

And the last piece, let’s make sure it looks right on all devices by adding some styling within different media queries:

@media (max-width: 960px) {
    .portfolio-item {
        width: 48%;
        margin: 15px 1%;
    }
}

@media (max-width: 768px) {
    .portfolio-item {
        width: 100%;
        margin: 15px 0;
    }
}

Basically we convert the 3 column layout to 2 on tablet and then to 1 on mobile. That’s it! 😄

Conclusion

Can’t wait to see what you’re going to create for this challenge.

As always: BE CREATIVE! Add extra functionalities as the ones mentioned in the beginning of the article. You can get inspiration from sites like dribbble or behance or themeforest.

Also let me see what you created via Twitter @florinpop1705 or via email.

Happy Coding! 😇