Hi!
I had created my portfolio using Streamlit last year. It is nothing fancy but I was looking to build something quickly and getting it deployed.
https://streamlit-portfolio.herokuapp.com/
Any feedback or room for improvement is appreciated 
8 Likes
Hi there Rahul. This is a really great looking portfolio! I’m really new to Streamlit so I was wondering how you achieved adding different fonts and font colours?
Hi! Thanks! I just used standard inline CSS.
st.markdown( ''' <h2 style = "color: blue"> Hello World! </h2> ''', unsafe_allow_html= True)
For the fonts, I used the standard CSS fonts but I think you can also include google fonts by including link tags at the beginning of your program.
st.markdown(''' <link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Akaya+Telivigala&display=swap" rel="stylesheet">''', unsafe_allow_html = True)
st.markdown(''' <div style=" 1. font-family: 'Akaya Telivigala', cursive;" ''', unsafe_allow_html = True)
Although I have not used the above, I believe it should work. I also recommend using triple quotes ‘’’ ‘’’ instead of double/single quotes when writing markdown. Do not forget to set unsafe_allow_html tag to True when you want to render HTML/CSS, it is set to False by default.
Thanks so much Rahul, that’s exactly what I needed!!!
2 Likes
hi!
i just saw your portfolio . it’s really impressive.
i am making a “About myself” section in of my streamlit project and i want to put a picture of myself in a block.
can you please help me how to do this?
Hi! Thanks!
I am not sure I understand what you mean by block, do you mean inside a div container?
Streamlit has a method to display images
streamlit.image(image = , width =)
From the docs:
image ( numpy.ndarray , [ numpy.ndarray ] , BytesIO , str , or [ str ] )
width ( int or None )
I don’t think there is a way to align the images/ add margin but you could use
HTML for it.
streamlit.markdown(''' HTML CODE''', unsafe_allow_html = True)
Thank you Rahul for the immediate response. Yeah I meant about giving an image inside a div block. Will try your idea.
1 Like