🃏 Streamlit Cardfolio: A Portfolio Presentation App!

[TomJohn]

Hi!

I am pleased to share with you my latest small project - a Streamlit app that presents your portfolio/projects in the form of visually pleasing cards. I was inspired by a design I saw on CodePen and decided to bring it to life using Streamlit.

I wanted to create an easy and stylish way for people to showcase their work, skills, and achievements, and I think combination of streamlit and Hyperplexed html/css code succeeded in doing just that!

https://tomjohn.streamlit.app/

Comments

1. Obviously this is a technical demo, but may be a neat little part of your portfolio streamlit app.
2. As the app uses :hover it’s no good for mobile devices - if someone has an idea how to deal with that, please let me know!
3. Cards were made in figma.com with a little help with GoFullPage chrome extension.
4. Pyramid principle is a really good book! I highly recommend it for anyone looking to improve their writing and thinking skills

[nainiayoub]

Amazing!

[willhuang]

That is SO cool and such a beautiful app. Thanks for sharing!

[C_Quang]

This is awesome! Are you able to provide a link to your source code on GitHub? If not, could you describe what Streamlit library you used because I would love to be able to import other (free-to-use) examples from Code Pen into some projects I am working on. For instance, are you using streamlit’s component library?

[TomJohn]

Hi @C_Quang, thank you for your comment! The Streamlit community cloud is quite clever, and if your repository is open, you can always view the code by clicking “View App Source.” It links to my repo: GitHub - TomJohnH/streamlit-cv

The code of this Streamlit app is extremely simple. The majority of the functionality is achieved through the use of st.markdown and HTML & CSS that has been optimized for Streamlit.

I import the HTML code from a text file, but there is no specific reason to this approach other than it potentially making it easier for others to reuse the code.

[Wally]

This looks great. I was wondering, that is the use of the little cards? They are not clickable, right?

I haven’t looked into the css much, however, is it possible to make a card pop into the foreground while hovering over it? I guess this would be helpful to the user so that one can see the entire content of each card.
Another option would be to have the cards spread out even more/wider.

[Wally]

Answered it myself: Turned out this one will do the trick:

.big-card:hover {
    z-index: 3000;
}

Or is there any better solution?

[TomJohn]

Hi! @Wally I would go with z-index as well about the little cards: they are not, but they could be! In my example they are just a little visual gimmick.

[Wally]

Thank you