Code Editor for app.py

import streamlit as st
from PIL import Image
import io

# Configure page
st.set_page_config(
    page_title="Logo Designer Portfolio",
    page_icon="🎨",
    layout="wide"
)

# Custom CSS
st.markdown("""
    <style>
    .main {
        padding: 2rem;
    }
    .stTitle {
        color: #1E1E1E;
        text-align: center;
    }
    .project-card {
        background-color: #ffffff;
        padding: 1.5rem;
        border-radius: 10px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        margin-bottom: 2rem;
    }
    </style>
""", unsafe_allow_html=True)

# Header Section
st.title("John Doe")
st.subheader("Logo Designer & Brand Identity Specialist")

# About Section
col1, col2 = st.columns([1, 2])
with col1:
    # Profile image placeholder
    st.image("https://via.placeholder.com/300x300", caption="John Doe")

with col2:
    st.markdown("""
    ## About Me
    I'm a passionate logo designer with over 8 years of experience creating memorable brand identities. 
    My approach combines creativity with strategic thinking to deliver logos that tell your brand's story.

    ### Skills
    - Logo Design
    - Brand Identity
    - Vector Graphics
    - Typography
    - Color Theory
    """)

# Portfolio Section
st.markdown("## Featured Projects")

# Project 1
with st.container():
    st.markdown('<div class="project-card">', unsafe_allow_html=True)
    col1, col2 = st.columns([1, 2])
    with col1:
        st.image("https://via.placeholder.com/400x300", caption="Tech Startup Logo")
    with col2:
        st.markdown("### Tech Startup Rebrand")
        st.markdown("""
        A modern and dynamic logo design for a tech startup that reflects their innovative approach 
        and forward-thinking vision.

        **Client:** TechCorp Inc.  
        **Duration:** 3 weeks  
        **Tools Used:** Adobe Illustrator, Photoshop
        """)
    st.markdown('</div>', unsafe_allow_html=True)

# Project 2
with st.container():
    st.markdown('<div class="project-card">', unsafe_allow_html=True)
    col1, col2 = st.columns([1, 2])
    with col1:
        st.image("https://via.placeholder.com/400x300", caption="Restaurant Brand Identity")
    with col2:
        st.markdown("### Restaurant Brand Identity")
        st.markdown("""
        Created a complete brand identity for a high-end restaurant, including logo, 
        menu design, and branded materials.

        **Client:** Gourmet Fusion  
        **Duration:** 4 weeks  
        **Tools Used:** Adobe Illustrator, InDesign
        """)
    st.markdown('</div>', unsafe_allow_html=True)

# Project 3
with st.container():
    st.markdown('<div class="project-card">', unsafe_allow_html=True)
    col1, col2 = st.columns([1, 2])
    with col1:
        st.image("https://via.placeholder.com/400x300", caption="Fitness Brand Logo")
    with col2:
        st.markdown("### Fitness Brand Logo")
        st.markdown("""
        Developed a powerful and energetic logo for a fitness brand that captures 
        the essence of strength and motivation.

        **Client:** PowerFit  
        **Duration:** 2 weeks  
        **Tools Used:** Adobe Illustrator
        """)
    st.markdown('</div>', unsafe_allow_html=True)

# Contact Section
st.markdown("## Let's Work Together")
contact_form = """
<form>
    <input type="text" placeholder="Your Name" required/>
    <input type="email" placeholder="Your Email" required/>
    <textarea placeholder="Project Details" required></textarea>
    <button type="submit">Send Message</button>
</form>
"""

# Additional CSS for contact form
st.markdown("""
    <style>
    form {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        max-width: 500px;
        margin: 0 auto;
    }
    input, textarea {
        padding: 0.5rem;
        border: 1px solid #ddd;
        border-radius: 4px;
        font-size: 1rem;
    }
    textarea {
        height: 150px;
    }
    button {
        background-color: #ff4b4b;
        color: white;
        padding: 0.75rem 1.5rem;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        font-size: 1rem;
    }
    button:hover {
        background-color: #ff3333;
    }
    </style>
""", unsafe_allow_html=True)

st.markdown(contact_form, unsafe_allow_html=True)

# Footer
st.markdown("""
---
### Connect With Me
[![LinkedIn](https://img.shields.io/badge/LinkedIn-0077B5?style=for-the-badge&logo=linkedin&logoColor=white)](https://linkedin.com)
[![Behance](https://img.shields.io/badge/Behance-1769FF?style=for-the-badge&logo=behance&logoColor=white)](https://behance.net)
[![Instagram](https://img.shields.io/badge/Instagram-E4405F?style=for-the-badge&logo=instagram&logoColor=white)](https://instagram.com)
""")