Hi fellow nerds,
A few months ago I started to look into different ways to create a professional portfolio. I’ve been using Streamlit for over a year, and I decided to use it to display my work experience and programming skills. Once I finished it, I decided I’d create a template to share it with all of you. This is my portfolio app and this is the template. It looks like this 
When it came to the front end of the application, I found a bottleneck trying to implement URL links into images, like logos or YouTube videos. Methods like st.markdown weren’t hitting the mark – all I ended up with were titles and links under the image or video, not the look I had in mind. So, I tried different methods - and they worked!
GitHub Image Loading
I uploaded images to GitHub and used raw file links with st.image for a direct image embed. I used this to load my profile photo - to do that I used ‘st.columns’ to align the images/logos.
Here’s a snippet of the code:
# Adding columns
col1, col2, col3, col4 = st.columns(4)
# Profile photo section
with col1:
profile_pic = "https://raw.githubusercontent.com/youngpada1/portfolio-app/9fcb7438c028c7517786155b5be9cd1fc517447e/portfolio-app/portfolio_app/images/menu/profile%20icon.png"
st.image(profile_pic, width=100)
HTML-Embedded Image Links:
I played around with st.markdown and HTML to attach images to hyperlinks.
with col3:
github = 'https://raw.githubusercontent.com/youngpada1/portfolio-app/efa44604e838ff5218db9a9229b8fff256df5ae6/portfolio-app/portfolio_app/images/menu/github.png'
st.markdown(f'''
<a href='https://github.com'>
<img src='{github}' width='25px'/>
</a>''',
unsafe_allow_html=True
)
On the ‘Experience’ Page I streamlined the data-loading process by using a YAML file. I followed this approach to avoid having to individually hard-code details on each company I’ve worked with.
I added photos of some products I’ve delivered to the market and this is how it looks:
Company Name:
images:
- name: Product Name
url: https://raw.githubusercontent.com/youngpada1/portfolio-app/efa44604e838ff5218db9a9229b8fff256df5ae6/portfolio-app/portfolio_app/images/menu/streamlit.png
width: 94%
- name: Product Name
url: https://raw.githubusercontent.com/youngpada1/portfolio-app/efa44604e838ff5218db9a9229b8fff256df5ae6/portfolio-app/portfolio_app/images/menu/streamlit.png
width: 94%
- name: Product Name
url: https://raw.githubusercontent.com/youngpada1/portfolio-app/efa44604e838ff5218db9a9229b8fff256df5ae6/portfolio-app/portfolio_app/images/menu/streamlit.png
width: 94%
- name: Product Name
url: https://raw.githubusercontent.com/youngpada1/portfolio-app/efa44604e838ff5218db9a9229b8fff256df5ae6/portfolio-app/portfolio_app/images/menu/streamlit.png
width: 94%
Creating this app was a journey of trial and error, and I wanted to share these solutions with the community. I’m sure there are other ways to do this, so please feel free to share them. And if you’re looking for a template to create your portfolio, feel free to check out the app, use i,t and let me know what you think! 