Portfolio page: New Projects and Old Projects section in Home Page

Newbie here in the forum so hopefully I know how to explain myself:

So basically I've been using a portfolio page as a way to show events, all my events on the portfolio grid are showing OK and with some code hacks I have been able to style the grid with titles, subtitles, etc.

There's one caveat tho, as you can see on my page all the events / projects (new and old) are showing on the same grid which sometimes is confusing to our visitors since is not super clear what are the upcoming events. So I was thinking to create two sections: "upcoming events" and "old event". My first idea was to create a new portfolio section and then just move the upcoming events there but apparently you can only have one portfolio showing up in your home page (or maybe I'm wrong, please feel free to correct me).

Is there any way to have old projects and new projects in two different sections in the home page ? I will really appreciate your feedback since I just can't find a way to do it. Many thanks.

@Lowtrux Hi! Unfortunately, you're correct. We can't have more than one portfolio on a single page.

As an alternative workaround, you can customize the portfolio items with custom code by adding a tag, such as "Upcoming Events," styled in a way that makes it easily noticeable. This will distinguish the upcoming events from the old ones. The "Upcoming Events" tag can be added before or after the portfolio item title.

If this is something you'd like to implement, let me know so I can come up with the custom code for this. Also, please share your site URL for context. Thank you!

Many thanks Lesum,

Yeah maybe that can at least help for the time being. Will really appreaciate if you can show a basic draft of the code so I can have more context.

The website is foggyhexbcn.com

Many thanks !

@Lowtrux Hi! You can add the following code under Website > Pages > Website Tools > Custom CSS to add a "Upcoming Event" tag to specific portfolio items. 

#gridThumbs .grid-item:nth-child(2) .grid-image::after {
    content: "Upcoming Event";
    position: absolute;
    top: 15px;
    left: 15px;
    background-color: #1e25bb;
    color: #fff;
    padding: 15px 10px 13px 10px;
    border-radius: 15px;
    font-size: 14px;
    font-weight: bold;
    z-index: 100;
}

The code above is intended to add the tag on top of the image of the second project titled "Céline Gillain + Adrianna Jornet" on your homepage. To add the same tag to other projects, for instance, to the sixth project, you can add this #gridThumbs .grid-item:nth-child(6) .grid-image::after followed by a comma in the first line of the code. The numbers 2 and 6 represent the order of the projects in the project list. Please let me know if you have any questions while adding the code. Thank you!

Amazing @Lesum many thanks for your help, this worked like a charm !