├── Portfolio
    ├── Streamlit_Portfolio.py
    ├── __pycache__
    │   └── st_functions.cpython-38.pyc
    ├── assets
    │   ├── folio.png
    │   ├── profile-pic (6).png
    │   ├── profile-pic(1).png
    │   └── style.css
    ├── st_functions.py
    ├── style.css
    ├── styles
    │   ├── main.css
    │   └── style.css
    └── timeline.json
├── README.md
└── ScreenShots
    ├── 1.png
    ├── 10.png
    ├── 11.png
    ├── 12.png
    ├── 13.png
    ├── 14.png
    ├── 15.png
    ├── 16.png
    ├── 2.png
    ├── 3.png
    ├── 4.png
    ├── 5.png
    ├── 6.png
    ├── 7.png
    ├── 8.png
    └── 9.png


/Portfolio/Streamlit_Portfolio.py:
--------------------------------------------------------------------------------
  1 | import streamlit as st
  2 | 
  3 | # Stating Paths 
  4 | from pathlib import Path
  5 | 
  6 | # for image import 
  7 | from PIL import Image
  8 | 
  9 | # for timeline showcase 
 10 | from streamlit_timeline import timeline
 11 | 
 12 | # For buttons 
 13 | 
 14 | from st_functions import *
 15 | 
 16 | # buy me coffe button :
 17 | from streamlit_extras.buy_me_a_coffee import button
 18 | 
 19 | # Graph using plotly :
 20 | import plotly.express as px
 21 | 
 22 | # Github & stackoverflow badges :
 23 | from streamlit_extras.badges import badge
 24 | 
 25 | # Colored header for the form :
 26 | from streamlit_extras.colored_header import colored_header
 27 | 
 28 | # Config.toml for overall look :
 29 | import toml
 30 | 
 31 | # Constant for the badge :
 32 | 
 33 | info = {'Stackoverflow_flair':'''<a href="https://stackoverflow.com/users/21148612/moad-hamousti"><img src="https://stackoverflow.com/users/flair/21148612.png" width="280" height="70" alt="profile for Moad Hamousti at Stack Overflow, Q&amp;A for professional and enthusiast programmers" title="profile for Moad Hamousti at Stack Overflow, Q&amp;A for professional and enthusiast programmers"></a>'''}
 34 | 
 35 | 
 36 | # Set the page title
 37 | st.set_page_config(page_title="Moad Hamousti Portfolio" , page_icon="🧑🏻", layout="wide")
 38 | 
 39 | 
 40 | # config.toml file configuration
 41 | 
 42 | 
 43 | @st.cache(allow_output_mutation=True)
 44 | def load_config():
 45 |     with open(".streamlit/config.toml") as f:
 46 |         config = toml.loads(f.read())
 47 |     return config
 48 | 
 49 | config = load_config()
 50 | 
 51 | 
 52 | # Path Settings
 53 | 
 54 | current_dir = Path(__file__).parent if "__file__" in locals() else Path.cwd()
 55 | css_file = current_dir / "styles" / "main.css"
 56 | profile_pic = current_dir / "assets" / "profile-pic(1).png"
 57 | 
 58 | # General Settings 
 59 | PAGE_TITLE = "Moad Hamousti | PORTFOLIO"
 60 | PAGE_ICON = "🚀"
 61 | NAME = "Moad Hamousti"
 62 | EMAIL = "moadhamousti@gmail.com"
 63 | icon_size = 20
 64 | 
 65 | # Page Title & icon 
 66 | 
 67 | badge(type="github", name="moadhamousti/MyInitialProjects")
 68 | 
 69 | # Sidebar Inputs 
 70 | 
 71 | # 1------Page Logo :
 72 | 
 73 | st.sidebar.image("assets/folio.png", width=200)
 74 | 
 75 | # 2------ Email :
 76 | 
 77 | st.sidebar.caption('Wish to connect?')
 78 | st.sidebar.write("""
 79 | <span style="color:black">📧 : moadhamousti@gmail.com</span>
 80 | """, unsafe_allow_html=True)
 81 | 
 82 | # 3------ Stack Over-flow Flair or Badge :
 83 | 
 84 | st.sidebar.markdown(info['Stackoverflow_flair'], unsafe_allow_html=True)
 85 | 
 86 | # Other Stuff in the sidebar 
 87 | 
 88 | with st.sidebar:
 89 |         # Buy Me Cafe Button 
 90 |         button(username="moadhamousti", floating=False, width=400)
 91 |         
 92 | # Load CSS, PDF & Profil Picture
 93 | with open(css_file) as f:
 94 |    st.markdown("<style>{}</style>".format(f.read()), unsafe_allow_html=True)
 95 | profile_pic = Image.open(profile_pic)
 96 | 
 97 | load_css()
 98 | 
 99 | 
100 | col1, col2, col3 = st.columns(3)
101 | col2.image(profile_pic)
102 | 
103 | st.header("MOAD  HAMOUSTI")
104 | 
105 | 
106 | 
107 | st.info("(●'◡'●)....Hello..! I am Just a beginner learner of Web Developpement who loves to apply HTML and CSS on real world projects. I am currently learning about Python and the framework Streamlit and have a keen interest in Web Developpement and WEB 3.0  🚀.")
108 | 
109 | st.image("https://cliply.co/wp-content/uploads/2019/12/371903520_SOCIAL_ICONS_TRANSPARENT_400px.gif")
110 | 
111 | icon_size = 20
112 | 
113 | st_button('linkedin', 'https://www.linkedin.com/in/moad-hamousti-49136b111/', 'LINKEDIN', icon_size)
114 | st_button('github', 'https://github.com/moadhamousti', 'GITHUB', icon_size)
115 | st_button('facebook', 'https://web.facebook.com/Moad.Hamousti', 'FACEBOOK', icon_size)
116 | st_button('', 'https://mail.google.com/mail/?view=cm&source=mailto&to=moadhamousti@gmail.com', 'moadhamousti@gmail.com', icon_size)
117 | 
118 | 
119 | 
120 | # Use Local CSS File
121 | def local_css(file_name):
122 |     with open(file_name) as f:
123 |         st.markdown(f"<style>{f.read()}</style>", unsafe_allow_html=True)
124 | local_css("assets/style.css")
125 | 
126 | # --- PATH SETTINGS ---
127 | current_dir = Path(__file__).parent if "__file__" in locals() else Path.cwd()
128 | css_file = current_dir / "styles" / "main.css"
129 | 
130 | # --- LOAD CSS ---
131 | with open(css_file) as f:
132 |     st.markdown("<style>{}</style>".format(f.read()), unsafe_allow_html=True)
133 |     
134 | 
135 | # Timeline Section : 
136 | 
137 | st.subheader('⌛ TIMELINE')
138 | 
139 | load_css()
140 | 
141 | 
142 | with st.spinner(text="Building line"):
143 |     with open('timeline.json', "r") as f:
144 |         data = f.read()
145 |         timeline(data, height=500)
146 |         
147 | # Education Section 
148 | 
149 | cola,colb,colc = st.columns(3)
150 | with colb:
151 |   st.subheader("🎓 EDUCATION")
152 | st.write("\n")
153 | 
154 | st.markdown('•  Baccalaureate in science Physics High School Al Amal (TIKIOUINE,AGADIR) : 2015 .')
155 | st.markdown('•  Studying Economics Currently in FSJES AGADIR (AGADIR).')
156 | st.markdown('•  Studying in eWa (Ecole Web Avancée) School of the Web. ')
157 | 
158 | # Table using pandas 
159 | 
160 | 
161 | data = [("AL AMAL High School", "Science Of Physics", "Baccalaureat", 2015),        ("FSJES AGADIR", "Economics", "Ongoing (3rd Year)", 2018),        ("eWa (ADVANCED WEB School)", "Web Development and Multimedia", "Ongoing (1st Year)", 2023)]
162 | 
163 | df = pd.DataFrame(data, columns=["Institute", "Qualification", "Stream", "Year"])
164 | 
165 | 
166 | # Use a style tag to set the font size
167 | st.write("<style>table {font-size: 20px;}</style>", unsafe_allow_html=True)
168 | 
169 | # Stretch the table to take the whole page
170 | st.write(df.style.set_caption("Table Caption"))
171 | 
172 | 
173 | 
174 | # Daily Routine Section 
175 | 
176 | cola,colb,colc = st.columns(3)
177 | with colb:
178 |   st.subheader("🗓 DAILY ROUTINE")
179 | 
180 | graph = """
181 | digraph {
182 |     "Wake up" -> "Check emails / Whatsapp Messages / Facebook"
183 |     "Check emails / Whatsapp Messages / Facebook" -> "eWa School"
184 |     "eWa School" -> "UNIX" -> "Break"
185 |     "Break" -> "Photoshop"
186 |     "Break" -> "Python" -> "HTML/CSS"
187 |     "Break" -> "Photoshop"
188 |     "Lunch" -> "Relax" -> "Random Projects / HomeWork"
189 |     "Break" -> "Relax / Watching TV / Series"
190 |     "UNIX" -> "Snack"
191 |     "Python" -> "Relax"
192 |     "HTML/CSS" -> "Relax"
193 |     "Snack" -> "Body Exercicing"
194 |     "Break" -> "Snack"
195 |     "running errands" -> "HTML/CSS"
196 |     "Break" -> "Surfing Internet / Reading"
197 |     "Random Projects / HomeWork" -> "End work"
198 |     "End work" -> "Dinner" -> "Relax" -> "Sleep"
199 | }
200 | """
201 | st.graphviz_chart(graph)
202 | 
203 | 
204 | # Skills and Tools Section 
205 | st.subheader("👨🏻‍💻 SKILLS & TOOLS")
206 | 
207 | cola,colb,colc = st.columns(3)
208 | with colb:
209 |     st.image("https://spansystech.com/images/hero/banner3.gif", width=250, clamp=False, channels="RGB")
210 | st.write("\n")
211 | 
212 | skills=["Python","Adobe illustrator", "After Effects", "Photoshop","Adobe Premiere","Git", "Algorithms", "Statistics", "Word", "Excel", "Linux/Ubuntu","Streamlit"]
213 | 
214 | for i in range(0, len(skills), 4):
215 |     cola,colb,colc,cold=st.columns(4)
216 |     with cola:
217 |         st.button(skills[i])
218 |     with colb:
219 |         try:
220 |             st.button(skills[i+1])
221 |         except:
222 |             pass
223 |     with colc:
224 |         try:
225 |             st.button(skills[i+2])
226 |         except:
227 |             pass
228 |     with cold:
229 |         try:
230 |             st.button(skills[i+3])
231 |         except:
232 |             pass
233 | st.write("\n")
234 | 
235 | # Hard Skills using Pandas :
236 |         
237 | cola,colb,colc = st.columns(3)
238 | with colb:
239 |     data = {"Skills": ["Python", "Adobe illustrator", "Excel","after effects", "JavaScript", "Photoshop","Streamlit", "Linux/Ubuntu", "Statistics","Algorithme", "Git", "Adobe Premiere"], "Percentage of Mastery": 
240 |     [10,40,98,60,5,75,15,50,60,60,70,90]}
241 |     df = pd.DataFrame(data)
242 | 
243 |     colors = ['#424bff ', 'goldenrod', '#2dab90', '#2d90ab', '  #b7d638  ', ' #4a92d5 ', 'lightskyblue', ' #769c9d ', ' #62f16d ', ' #425f44 ', ' #ba7c00 ', ' #2f45ff ']
244 | 
245 | #  Hard Skills Graph using Plotly :
246 | 
247 | st.title("📊 HARD SKILLS MASTERY")
248 | st.write(px.bar(df, x="Skills", y="Percentage of Mastery", color="Skills", color_discrete_sequence=colors))
249 | 
250 | # SOFT SKILLS Section :
251 | cola,colb,colc = st.columns(3)
252 | with colb:
253 |   st.subheader("🤵🏻‍♂️   SOFT SKILLS")
254 | st.markdown('➤  PROBLEM-SOLVING : ⭐ ⭐ ⭐ ⭐ ')
255 | st.markdown('➤  ADAPTABILITY : ⭐ ⭐ ⭐ ')
256 | st.markdown('➤  CREATIVITY : ⭐ ⭐ ⭐ ⭐ ')
257 | st.markdown('➤  MOTIVATION : ⭐ ⭐ ⭐ ⭐ ⭐')
258 | st.markdown('➤  ATTENTION TO DETAILS : ⭐ ⭐ ⭐ ')
259 | st.markdown('➤  ADAPTABILITY : ⭐ ⭐ ⭐ ⭐')
260 | st.markdown('➤  INTERPERSONAL SKILLS : ⭐ ⭐ ')
261 | st.markdown('➤  TIME MANAGEMENT : ⭐ ⭐ ⭐ ')
262 | 
263 | 
264 | 
265 | 
266 | 
267 | # Athletics Section :
268 | 
269 | cola,colb,colc = st.columns(3)
270 | with colb:
271 |   st.subheader("🏃‍♂️  ATHLETICS")
272 | st.markdown('➡  Won A Medal In a Regional Competition In KUNGFU (Việt Võ Đạo) In Middle School.')
273 | st.markdown('➡  Practiced KARATE and Taekwondo For The First 2 Years Of High School.')
274 | st.markdown('➡  Practicing CALISTHENICS & BODYBUILDING At The Moment To Stay In Shape.')
275 | 
276 | 
277 | # get in touch Form section :
278 | 
279 | colored_header(
280 |     label=":mailbox: GET IN TOUCH WITH ME!",
281 |     description="Feel free to send me any message you want :smile:",
282 |     color_name="blue-70",
283 | )
284 |         
285 | 
286 | 
287 | contact_form = """
288 | <form action="https://formsubmit.co/YOUREMAIL@EMAIL.COM" method="POST">
289 |      <input type="hidden" name="_captcha" value="false">
290 |      <input type="text" name="name" placeholder="Your name" required>
291 |      <input type="email" name="email" placeholder="Your email" required>
292 |      <textarea name="message" placeholder="Your message here"></textarea>
293 |      <button type="submit">Send</button>
294 | </form>
295 | """
296 | 
297 | st.markdown(contact_form, unsafe_allow_html=True)
298 | 
299 | 
300 | 
301 | # Portfolio signature 
302 | 
303 | cola,colb,colc = st.columns(3)
304 | with colb:
305 |     st.image("https://miro.medium.com/max/1400/0*s7-847-cMWNrfnyH.gif", width=240)
306 | 
307 | 
308 | 
309 | 


--------------------------------------------------------------------------------
/Portfolio/__pycache__/st_functions.cpython-38.pyc:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/moadhamousti/Python-Projects/50228c6c82550980b1f7dea545a6bfb23a35f902/Portfolio/__pycache__/st_functions.cpython-38.pyc


--------------------------------------------------------------------------------
/Portfolio/assets/folio.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/moadhamousti/Python-Projects/50228c6c82550980b1f7dea545a6bfb23a35f902/Portfolio/assets/folio.png


--------------------------------------------------------------------------------
/Portfolio/assets/profile-pic (6).png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/moadhamousti/Python-Projects/50228c6c82550980b1f7dea545a6bfb23a35f902/Portfolio/assets/profile-pic (6).png


--------------------------------------------------------------------------------
/Portfolio/assets/profile-pic(1).png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/moadhamousti/Python-Projects/50228c6c82550980b1f7dea545a6bfb23a35f902/Portfolio/assets/profile-pic(1).png


--------------------------------------------------------------------------------
/Portfolio/assets/style.css:
--------------------------------------------------------------------------------
 1 | /* Style inputs with type="text", type="email"and textareas */
 2 | input[type=text], input[type=email], textarea {
 3 |     width: 100%; /* Full width */
 4 |     padding: 12px; /* Some padding */ 
 5 |     border: 1px solid #ccc; /* Gray border */
 6 |     border-radius: 4px; /* Rounded borders */
 7 |     box-sizing: border-box; /* Make sure that padding and width stays in place */
 8 |     margin-top: 6px; /* Add a top margin */
 9 |     margin-bottom: 16px; /* Bottom margin */
10 |     resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
11 |   }
12 |   
13 |   /* Style the submit button with a specific background color etc */
14 |   button[type=submit] {
15 |     background-color: #04AA6D;
16 |     color: white;
17 |     padding: 12px 20px;
18 |     border: none;
19 |     border-radius: 4px;
20 |     cursor: pointer;
21 |   }
22 |   
23 |   /* When moving the mouse over the submit button, add a darker green color */
24 |   button[type=submit]:hover {
25 |     background-color: #45a049;
26 |   }
27 | 
28 | 
29 |   .css-12oz5g7.egzxvld2 {
30 |     padding-top: 0px;
31 |   }
32 |   
33 |   .css-1v0mbdj.etr89bj1 {
34 |     display: block;
35 |     margin-left: auto;
36 |     margin-right: auto;
37 |     min-width: 180px;
38 |     max-width: 40%;
39 |   }
40 |   
41 |   .css-10trblm.e16nr0p30 {
42 |     font-weight: bold;
43 |     text-align: center;
44 |   }
45 |   
46 |   p {
47 |     font-size: 19px;
48 |   }
49 |   
50 |   MainMenu {
51 |     visibility: hidden;
52 |   }
53 |   footer {
54 |     visibility: hidden;
55 |   }
56 |   header {
57 |     visibility: hidden;
58 |   }
59 |   
60 |   


--------------------------------------------------------------------------------
/Portfolio/st_functions.py:
--------------------------------------------------------------------------------
 1 | import streamlit as st
 2 | import pandas as pd
 3 | 
 4 | 
 5 | # Bootstrap icon library import :
 6 | def load_css():
 7 |     with open("style.css") as f:
 8 |         st.markdown('<style>{}</style>'.format(f.read()), unsafe_allow_html=True)
 9 |     st.markdown('<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">', unsafe_allow_html=True)
10 | 
11 | # Facebook : 
12 | 
13 | def st_button(icon, url, label, iconsize):
14 |     if icon == 'facebook':
15 |         button_code = f'''
16 |         <p>
17 |             <a href={url} class="btn btn-outline-primary btn-lg btn-block" type="button" aria-pressed="true">
18 |                 <svg xmlns="http://www.w3.org/2000/svg" width={iconsize} height={iconsize} fill="currentColor" class="bi bi-facebook" viewBox="0 0 16 16">
19 |                     <path fill-rule="evenodd" d="M15.053 12H8.947v-2.5h2.244v-1.908c0-2.012 1.792-3.584 4.056-3.584h1.687v2.5h-1.049c-.516 0-.973.295-1.049.776v1.3h2.29l-.31 2.5h-1.98v6zm-3.356-7.077c-.884 0-1.5-.994-1.5-2.026s.616-2.026 1.5-2.026 1.5.994 1.5 2.026-.616 2.026-1.5 2.026z"/>
20 |                 </svg>
21 |                 {label}
22 |             </a>
23 |         </p>'''
24 |     
25 | # Linkedin :     
26 |     
27 |     elif icon == 'linkedin':
28 |         button_code = f'''
29 |         <p>
30 |             <a href={url} class="btn btn-outline-warning  btn-lg btn-block" type="button" aria-pressed="true">
31 |                 <svg xmlns="http://www.w3.org/2000/svg" width={iconsize} height={iconsize} fill="currentColor" class="bi bi-linkedin" viewBox="0 0 16 16">
32 |                     <path d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854V1.146zm4.943 12.248V6.169H2.542v7.225h2.401zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248-.822 0-1.359.54-1.359 1.248 0 .694.521 1.248 1.327 1.248h.016zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016a5.54 5.54 0 0 1 .016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225h2.4z"/>
33 |                 </svg>
34 |                 {label}
35 |             </a>
36 |         </p>'''
37 |         
38 | # Github :        
39 |         
40 |     elif icon == 'github':
41 |         button_code = f'''
42 |         <p>
43 |             <a href={url} class="btn btn-outline-dark btn-lg btn-block" type="button" aria-pressed="true">
44 |                 <svg xmlns="http://www.w3.org/2000/svg" width={iconsize} height={iconsize} fill="currentColor" class="bi bi-github" viewBox="0 0 16 16">
45 |                     <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38C13.71 14.53 16 11.53 16 8c0-4.42-3.58-8-8-8z"/>
46 |                 </svg>
47 |                 {label}
48 |             </a>
49 |         </p>'''
50 |         
51 | # Email :        
52 |         
53 |     elif icon == '':
54 |         button_code = f'''
55 |         <p>
56 |             <a href={url} class="btn btn-outline-warning  btn-lg btn-block" type="button" aria-pressed="true">
57 |                 {label}
58 |             </a>
59 |         </p>'''
60 |     return st.markdown(button_code, unsafe_allow_html=True)
61 | 
62 | skill_col_size = 6
63 | 


--------------------------------------------------------------------------------
/Portfolio/style.css:
--------------------------------------------------------------------------------
 1 | .css-12oz5g7.egzxvld2 {
 2 |   padding-top: 0px;
 3 | }
 4 | 
 5 | .css-1v0mbdj.etr89bj1 {
 6 |   display: block;
 7 |   margin-left: auto;
 8 |   margin-right: auto;
 9 |   min-width: 180px;
10 |   max-width: 40%;
11 | }
12 | 
13 | .css-10trblm.e16nr0p30 {
14 |   font-weight: bold;
15 |   text-align: center;
16 | }
17 | 
18 | p {
19 |   font-size: 19px;
20 | }
21 | 
22 | MainMenu {
23 |   visibility: hidden;
24 | }
25 | footer {
26 |   visibility: hidden;
27 | }
28 | header {
29 |   visibility: hidden;
30 | }
31 | 
32 | 


--------------------------------------------------------------------------------
/Portfolio/styles/main.css:
--------------------------------------------------------------------------------
 1 | @import url('https://fonts.googleapis.com/css2?family=Readex+Pro:wght@300;400;500;600;700&display=swap');
 2 | 
 3 | 
 4 | * {font-family: 'Readex Pro';}
 5 | 
 6 | 
 7 | a {
 8 |     text-decoration: none;
 9 |     color: black !important;
10 |     font-weight: 500;
11 | }
12 | 
13 | a:hover {
14 |     color: #d0fd06 !important;
15 |     text-decoration: none;
16 | }
17 | 
18 | ul {list-style-type: none;}
19 | 
20 | hr {
21 |     margin-top: 0px;
22 |     margin-bottom: 5%;
23 | }
24 | 
25 | #MainMenu {visibility: hidden;}
26 | footer {visibility: hidden;}
27 | header {visibility: hidden;}


--------------------------------------------------------------------------------
/Portfolio/styles/style.css:
--------------------------------------------------------------------------------
 1 | /* Style inputs with type="text", type="email"and textareas */
 2 | input[type=text], input[type=email], textarea {
 3 |     width: 100%; /* Full width */
 4 |     padding: 12px; /* Some padding */ 
 5 |     border: 1px solid #ccc; /* Gray border */
 6 |     border-radius: 4px; /* Rounded borders */
 7 |     box-sizing: border-box; /* Make sure that padding and width stays in place */
 8 |     margin-top: 6px; /* Add a top margin */
 9 |     margin-bottom: 16px; /* Bottom margin */
10 |     resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
11 |   }
12 |   
13 |   /* Style the submit button with a specific background color etc */
14 |   button[type=submit] {
15 |     background-color: #01a2ff;
16 |     color: white;
17 |     padding: 12px 20px;
18 |     border: none;
19 |     border-radius: 4px;
20 |     cursor: pointer;
21 |   }
22 |   
23 |   /* When moving the mouse over the submit button, add a darker green color */
24 |   button[type=submit]:hover {
25 |     background-color: #fde508;
26 |   }


--------------------------------------------------------------------------------
/Portfolio/timeline.json:
--------------------------------------------------------------------------------
 1 | {"events": 
 2 | [{"start_date": {"year": "2015"},
 3 |     "media": {"url": "https://www.dreamhost.com/blog/wp-content/uploads/2018/09/elements-web-design-opt-750x498.jpg", 
 4 |         "credit": "dreamhost.com"}, 
 5 |             "text": {"headline": "The Introduction to the web design", 
 6 |                 "text": "My first steps of learning how to manipulate images using PHOTOSHOP, and used it to make Web sites using Adobe Dreamweaver."}}, 
 7 | 
 8 | 
 9 | 
10 | {"start_date": {"year": "2017"},
11 |     "media": {"url": "https://assets.justinmind.com/wp-content/uploads/2019/10/best-20-web-development-blogs.png", 
12 |         "credit": "justinmind.com"}, 
13 |             "text": {"headline": "My Introduction to Web Developpement", 
14 |                 "text": "<p>This was the time I started off with learning HTML and CSS on my own. But it was only for few months and made some simple HTML & CSS Pages .<p>"}}, 
15 | 
16 | 
17 | 
18 | {"start_date": {"year": "2019", "month": "7"}, 
19 |     "media": {"url": "https://www.htmlhints.com/image/html/html.png", 
20 |         "credit": "htmlhints.com"}, 
21 |             "text": {"headline": "1st project", 
22 |                 "text": "After a lot of failed attempts on using HTML and CSS, I made my 1st simple project and it was a simple site with a landing page and menus and it was an Email newsletter that sends emails regularely to the site subscribers."}}, 
23 | 
24 | 
25 | 
26 | 
27 | {"start_date": {"year": "2020"}, 
28 |     "media": {"url": "https://plopdo.com/wp-content/uploads/2021/10/istockphoto-1257967158-612x612-1.jpg", 
29 |         "credit": "plopdo.com"}, 
30 |             "text": {"headline": "Random Projects", 
31 |                 "text": " At this point i did some good amount of projects on my own ,But i needed an academic approach to learn All about Web Developpement and Web Design."}},
32 | 
33 | 
34 | 
35 | {"start_date": {"year": "2022"}, 
36 |     "media": {"url": "https://ewa.ma/wp-content/uploads/2020/05/logo200.png", 
37 |         "credit": "ewa.ma"}, 
38 |             "text": {"headline": "Taking the next step", 
39 |                 "text": " After a bad Two years of pandemic I decided to learn the Web developpement and Design the right way so I joined (eWa) The school of advanced Web to sharpen my skills."}},
40 |             
41 | 
42 | 
43 | 
44 | 
45 | {"start_date": {"year": "2022", "month": "11"},
46 |     "media":{"url":"https://www.pewresearch.org/internet/wp-content/uploads/sites/9/2017/02/PI_2017.02.08_Algorithms_featured.png",
47 |         "credit":"pewresearch.org"} ,
48 |             "text": {"headline": "The first steps on learning algorithms", 
49 |                 "text": "Learning Algorithm might be a challenging thing,But the more you dive into it the more you like learning it, Complicated but fun."}},
50 | 
51 | 
52 | 
53 | {"start_date": {"year": "2023", "month": "1"},
54 |     "media":{"url":"https://files.realpython.com/media/Introduction-to-Python-3_Watermarked.9d8dfef30c96.jpg",
55 |         "credit":"realpython.com"} ,
56 |             "text": {"headline": "Diving into Python Learning", 
57 |                 "text": "After Knowing the basics of Algorithms, learning a programming language will be the next step, considering Python as the go to for most beginners."}}
58 |             
59 | 
60 | 
61 | 
62 | ]}
63 | 
64 | 
65 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Streamlit Portfolio 🧑 :
 2 | 
 3 | ### This is a portfolio using streamlit. 🖥️
 4 | 
 5 | ### Screen Shoots 📷 :
 6 | 
 7 | 
 8 | ![10](https://github.com/moadhamousti/Python-Projects/assets/118165767/b7dc38df-2f70-4139-90a9-bd67d62c1eac)
 9 | 
10 | ![12](https://github.com/moadhamousti/Python-Projects/assets/118165767/37512a7e-bbf3-40a6-bd62-17dc0d1a2767)
11 | 
12 | ![16](https://github.com/moadhamousti/Python-Projects/assets/118165767/cb3449e2-31c4-49f7-b3d5-1f693bf8f076)
13 | 


--------------------------------------------------------------------------------
/ScreenShots/1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/moadhamousti/Python-Projects/50228c6c82550980b1f7dea545a6bfb23a35f902/ScreenShots/1.png


--------------------------------------------------------------------------------
/ScreenShots/10.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/moadhamousti/Python-Projects/50228c6c82550980b1f7dea545a6bfb23a35f902/ScreenShots/10.png


--------------------------------------------------------------------------------
/ScreenShots/11.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/moadhamousti/Python-Projects/50228c6c82550980b1f7dea545a6bfb23a35f902/ScreenShots/11.png


--------------------------------------------------------------------------------
/ScreenShots/12.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/moadhamousti/Python-Projects/50228c6c82550980b1f7dea545a6bfb23a35f902/ScreenShots/12.png


--------------------------------------------------------------------------------
/ScreenShots/13.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/moadhamousti/Python-Projects/50228c6c82550980b1f7dea545a6bfb23a35f902/ScreenShots/13.png


--------------------------------------------------------------------------------
/ScreenShots/14.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/moadhamousti/Python-Projects/50228c6c82550980b1f7dea545a6bfb23a35f902/ScreenShots/14.png


--------------------------------------------------------------------------------
/ScreenShots/15.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/moadhamousti/Python-Projects/50228c6c82550980b1f7dea545a6bfb23a35f902/ScreenShots/15.png


--------------------------------------------------------------------------------
/ScreenShots/16.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/moadhamousti/Python-Projects/50228c6c82550980b1f7dea545a6bfb23a35f902/ScreenShots/16.png


--------------------------------------------------------------------------------
/ScreenShots/2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/moadhamousti/Python-Projects/50228c6c82550980b1f7dea545a6bfb23a35f902/ScreenShots/2.png


--------------------------------------------------------------------------------
/ScreenShots/3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/moadhamousti/Python-Projects/50228c6c82550980b1f7dea545a6bfb23a35f902/ScreenShots/3.png


--------------------------------------------------------------------------------
/ScreenShots/4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/moadhamousti/Python-Projects/50228c6c82550980b1f7dea545a6bfb23a35f902/ScreenShots/4.png


--------------------------------------------------------------------------------
/ScreenShots/5.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/moadhamousti/Python-Projects/50228c6c82550980b1f7dea545a6bfb23a35f902/ScreenShots/5.png


--------------------------------------------------------------------------------
/ScreenShots/6.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/moadhamousti/Python-Projects/50228c6c82550980b1f7dea545a6bfb23a35f902/ScreenShots/6.png


--------------------------------------------------------------------------------
/ScreenShots/7.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/moadhamousti/Python-Projects/50228c6c82550980b1f7dea545a6bfb23a35f902/ScreenShots/7.png


--------------------------------------------------------------------------------
/ScreenShots/8.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/moadhamousti/Python-Projects/50228c6c82550980b1f7dea545a6bfb23a35f902/ScreenShots/8.png


--------------------------------------------------------------------------------
/ScreenShots/9.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/moadhamousti/Python-Projects/50228c6c82550980b1f7dea545a6bfb23a35f902/ScreenShots/9.png


--------------------------------------------------------------------------------