bsnehith1218/ML_Notebook

1import streamlit as st2from streamlit_lottie import st_lottie3import json4 5def load_lottie(path: str):6    with open(path, "r") as f:7        return json.load(f)8 9hero_animation = load_lottie("animations/ml_hero.json")10 11st.set_page_config(page_title="Zero to Hero ML", layout="wide")12 13# --- Custom CSS ---14st.markdown("""15<style>16/* Background Animation */17.stApp {18    background: linear-gradient(-45deg, #d4fc79, #96e6a1, #e0c3fc, #8ec5fc);19    background-size: 600% 600%;20    animation: gradientMove 20s ease infinite;21    font-family: 'Segoe UI', sans-serif;22    color: #111;23}24 25@keyframes gradientMove {26    0% { background-position: 0% 50%; }27    50% { background-position: 100% 50%; }28    100% { background-position: 0% 50%; }29}30 31/* Center Content */32.center-content {33    display: flex;34    justify-content: center;35    padding: 20px;36}37.center-box {38    width: 100%;39    max-width: 800px;40}41 42/* Glowing Title */43.main-title {44    font-size: 4em;45    font-weight: 800;46    text-align: center;47    color: #1a1a1a;48    padding: 30px 10px 10px;49    text-shadow: 2px 2px 10px rgba(0,0,0,0.2);50    animation: glow 2s ease-in-out infinite alternate;51}52@keyframes glow {53    from { text-shadow: 2px 2px 10px rgba(0,0,0,0.2); }54    to { text-shadow: 4px 4px 20px rgba(0,0,0,0.4); }55}56 57/* Subtitle */58.subtitle {59    text-align: center;60    font-size: 1.6em;61    color: #333;62    margin-top: -15px;63    margin-bottom: 40px;64    animation: fadeIn 2s ease-in;65}66 67/* Glassmorphism Section */68.section {69    background: rgba(255, 255, 255, 0.4);70    padding: 30px;71    margin: 25px 0;72    border-radius: 20px;73    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);74    backdrop-filter: blur(12px);75    -webkit-backdrop-filter: blur(12px);76    border: 1px solid rgba(255, 255, 255, 0.2);77    animation: slideUp 1.2s ease-in-out;78    transition: transform 0.3s;79}80.section:hover {81    transform: translateY(-5px);82}83 84.section h3 {85    color: #111;86    font-weight: 700;87    margin-bottom: 15px;88}89 90.section p, .section li {91    color: #222;92    font-size: 1.1em;93}94 95.features li {96    margin-bottom: 8px;97}98.features li:hover {99    color: #008c6e;100    transform: translateX(8px);101    transition: 0.3s ease;102}103 104/* Author Info */105.author-info {106    background: rgba(255, 255, 255, 0.35);107    padding: 25px;108    border-radius: 20px;109    margin-top: 40px;110    backdrop-filter: blur(10px);111    box-shadow: 0 0 20px rgba(0,0,0,0.1);112    border: 1px solid rgba(0,0,0,0.1);113}114 115/* Links */116a {117    color: #008c6e;118    text-decoration: none;119    font-weight: 600;120}121a:hover {122    color: #000;123}124 125/* Animations */126@keyframes fadeIn {127    0% {opacity: 0; transform: translateY(20px);}128    100% {opacity: 1; transform: translateY(0);}129}130@keyframes slideUp {131    0% {opacity: 0; transform: translateY(40px);}132    100% {opacity: 1; transform: translateY(0);}133}134@keyframes bounce {135    0%, 100% { transform: translateY(0); }136    50% { transform: translateY(10px); }137}138 139/* Scroll Down Arrow */140.scroll-down {141    text-align: center;142    margin-top: 20px;143    font-size: 2.5em;144    animation: bounce 2s infinite;145    color: #333;146}147 148/* Lottie Styling */149.st-lottie {150    display: flex;151    justify-content: center;152    align-items: center;153    margin-top: 20px;154    padding: 10px;155    background: transparent;156    animation: lottieFade 2s ease;157}158@keyframes lottieFade {159    0% {opacity: 0; transform: scale(0.95);}160    100% {opacity: 1; transform: scale(1);}161}162iframe[title="lottie"] {163    background: transparent !important;164    width: 100% !important;165    max-width: 500px;166    border: none;167    border-radius: 20px;168}169/* Button Styling */170.stButton > button {171    display: inline-block;172    padding: 14px 28px;173    margin: 30px auto;174    font-size: 1.3em;175    font-weight: bold;176    text-align: center;177    color: white;178    background: linear-gradient(135deg, #00c6ff, #0072ff);179    border: none;180    border-radius: 50px;181    cursor: pointer;182    transition: all 0.4s ease;183    box-shadow: 0 4px 15px rgba(0, 114, 255, 0.4);184    animation: bounce 2s infinite;185}186.stButton > button:hover {187    background: linear-gradient(135deg, #0072ff, #00c6ff);188    box-shadow: 0 6px 20px rgba(0, 114, 255, 0.6);189    transform: scale(1.05);190}191</style>192""", unsafe_allow_html=True)193 194# --- Title ---195st.markdown('<div class="main-title">Zero to Hero ML 🚀</div>', unsafe_allow_html=True)196 197# --- Subtitle ---198st.markdown('<div class="subtitle">Your journey from beginner to ML master begins here</div>', unsafe_allow_html=True)199 200# --- Lottie Animation ---201st_lottie(hero_animation, height=300, key="hero")202 203# --- Scroll Down Arrow ---204st.markdown('<div class="scroll-down">⬇️</div>', unsafe_allow_html=True)205 206# --- Introduction Section ---207st.markdown("""208<div class="center-content">209    <div class="section center-box">210        <h3>Welcome To Zero to Hero ML</h3>211        <p>This app is your ultimate guide to mastering Machine Learning — from basic concepts to real-world applications. Whether you're exploring AI for the first time or enhancing your skills, this is your launchpad to success!</p>212    </div>213</div>214""", unsafe_allow_html=True)215 216# --- Vision Section ---217st.markdown("""218<div class="center-content">219    <div class="section center-box">220        <h3>The Vision</h3>221        <p>Zero to Hero ML isn’t just a learning tool — it's a movement to bridge theory and practice. If you're passionate about innovation, data, and smart solutions, you're in the right place.</p>222        <p><em>"Machine Learning is not about code, it’s about creating impact."</em></p>223    </div>224</div>225""", unsafe_allow_html=True)226 227# --- Features Section ---228st.markdown("""229<div class="center-content">230    <div class="section center-box">231        <h3>Key Features</h3>232        <ul class="features">233            <li>🔍 Interactive ML Tutorials – Learn through hands-on examples and concepts</li>234            <li>🧠 Algorithm Explorer – Deep dive into ML algorithms with intuitive explanations</li>235            <li>📊 Dataset Explorer – Work with real-world datasets in-app</li>236            <li>📁 End-to-End Projects – Follow complete workflows to build and deploy ML models</li>237        </ul>238    </div>239</div>240""", unsafe_allow_html=True)241 242# --- Author Info ---243st.markdown("""244<div class="center-content">245    <div class="author-info center-box">246        <h3>About the Author</h3>247        <p>👋 Hi, I'm <b>Baratam Snehith</b>, a passionate Machine Learning Developer and Full-Stack Engineer. I love building intelligent applications that bridge data with decision-making.</p>248        <ul>249            <li>💻 Languages: Python, Java, JavaScript, SQL</li>250            <li>🧠 ML & Data: Scikit-Learn, Pandas, NumPy, Deep Learning, Flask</li>251            <li>🌐 Web: React.js, Node.js, Express.js, Tailwind, MongoDB</li>252            <li>🔗 <a href="https://github.com/bsnehith" target="_blank">GitHub</a> | <a href="https://linkedin.com/in/bsnehith" target="_blank">LinkedIn</a></li>253        </ul>254    </div>255</div>256""", unsafe_allow_html=True)257 258 259# --- Navigation Button ---260if st.button("🚀 Go to Next Page"):261    st.switch_page("pages/first_page.py")262