The profile pages have undergone a little design refresh. Here's mine:

new-profiles

Part of it was just to make them look nicer. We've been wanting to use Gotham forever (our logo is based on it), and now that we can, we first started using it on the signup pages when that rolled out, and since it went well, now we're using it site-wide.

But there are new features as well!

Organize Your Showcase

We used to have a feature where you could "feature" one specific Pen. It was a step toward customizing your profile, and a lot of people used and liked it. But it wasn't enough. Not being able to customize all the Pens shown on your profile meant you were stuck with whatever Pens of yours were at the top of our popularity algorithm, even if it was something you were bored of or otherwise not proud of.

Now you can customize every Pen on your Showcase. Click the "Organize" button from your Settings > Profile page.

organize-button

And you'll come to the new Organize page:

organize-page

On the left, you find your Pens. Find them by date (your Public tab), popularity, tag, or use search. On the right, seven empty spaces for Pens to go. Drag them over from the left to the right. Re-arrange at will. To remove one, drag it down to the trash can. Your profile will then show those exact seven Pens, in that arrangement.

Few things to note about Organize:

  • If you featured a Pen before, that will still be your big front-and-center Pen until you use the new Organize feature, which will override that.
  • If you've never featured a Pen before, or used the new Organize feature, your Showcase is made up from your most popular Pens.
  • If you leave any blanks in Organize, they fill in with your most popular Pens.

Customize Your Profile With CSS

If you're a PRO user, you can take complete design control of your Profile by adding Custom CSS. You have to do it by linking to a Pen (it can be private or public). We'll pull that Pen's CSS and add it to your profile page.

profile-css

We put it after our CSS, so you can override us with the same selectors. Or use a more powerful selector or however you'd like to do it. We put ID's on most stuff and usually don't use ID's in our CSS, so that's an easy way to do it. If you need a style hook that you feel like you should be there but isn't, let us know.

We kinda soft-rolled-out this feature at the start of the weekend and people have been doing some super nice work already.

michael-profile
Michael Arestad's profile

charlotte-profile
Charlotte Dann's profile

ty-profile
Ty Strong's profile

Fabrice Weinberg put together a little template you can use while customizing. Tim Pietrusky figured out if you iframe your own profile you can kinda work on it in real time.

Can't wait to see what you folks come up with!

"Following You"

There was no way to see if another developer was following you on CodePen before. Now you can tell by visiting their profile.

follows
Aww. Thanks Sara.

Search Within Profile

You you do a search from a Profile now, the search results open up right on the profile page rather than whisking you away to our site-wide search page. Just a bit nicer.

Pagination Cleanup

If you don't notice this change, good. We rejiggered how our internal pagination system works, because there were some bugs and inconsistencies. So if you noticed those problems before, hopefully they are gone for you now.

Collections and Tags More Visible

You could always view the Collections and Tags that a someone had created (or you yourself created), but now they are a bit more front-and-center with their own column. If you've never created a collection, but have created a Tag, that area will default to Tags.

collections-and-tags
Tim Holman's Collections and Tags

The Future

When we were first starting in on this feature, we were actually doing it to prepare for another totally different feature. We're going to have to keep you guessing on that one, I just mention it because Team CodePen is excited to have this piece of the puzzle done. It fuels at least two other major projects we have cooking.