Update app.py

app.py

@@ -1,95 +1,310 @@
 import streamlit as st
 from PIL import Image
 import os
+import base64
+
+# ページ設定
+st.set_page_config(
+    page_title="Taisei Ozaki - AI Researcher",
+    page_icon="🚀",
+    layout="wide"
+)
 
 # セッションステートの初期化
 if 'initialized' not in st.session_state:
     st.session_state.initialized = True
 
-# カスタムCSSの適用
+# カスタムCSSの適用（モダンなダークテーマ）
 st.markdown("""
     <style>
     /* Google Fontsのインポート */
-    @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap');
+    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;900&family=JetBrains+Mono:wght@400;700&display=swap');
 
-    /* 全体のフォント設定 */
-    html, body, [class*="css"] {
-        font-family: 'Open Sans', sans-serif;
+    /* CSS変数 */
+    :root {
+        --primary: #6366f1;
+        --primary-dark: #4f46e5;
+        --secondary: #a78bfa;
+        --accent: #f472b6;
+        --bg-dark: #0f0f23;
+        --bg-card: rgba(30, 30, 46, 0.7);
+        --text-primary: #f8fafc;
+        --text-secondary: #94a3b8;
+        --gradient-1: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        --gradient-2: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
     }
 
-    /* 背景のグラデーション設定 */
+    /* 全体のスタイル */
     .stApp {
-        background: linear-gradient(135deg, #1ABC9C 0%, #16A085 100%);
+        background: 
+            radial-gradient(ellipse at top left, rgba(99, 102, 241, 0.15), transparent 40%),
+            radial-gradient(ellipse at bottom right, rgba(244, 114, 182, 0.15), transparent 40%),
+            var(--bg-dark);
+        color: var(--text-primary);
+        min-height: 100vh;
+    }
+
+    /* フォント設定 */
+    html, body, [class*="css"] {
+        font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+    }
+
+    /* ヘッダー */
+    h1 {
+        font-size: 3.5rem !important;
+        font-weight: 900 !important;
+        background: var(--gradient-1);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        margin-bottom: 0.5rem !important;
+        letter-spacing: -0.03em;
+        line-height: 1.1;
     }
 
-    /* メインコンテンツのスタイル */
-    .main {
-        background: rgba(0, 0, 0, 0.6);
-        padding: 20px;
-        border-radius: 10px;
+    h2 {
+        font-size: 2rem !important;
+        font-weight: 700 !important;
+        color: var(--text-primary) !important;
+        margin-top: 3rem !important;
+        margin-bottom: 1.5rem !important;
+        position: relative;
+        padding-left: 1rem;
     }
 
-    /* ヘッダーのスタイル */
-    h1, h2, h3, h4, h5, h6 {
-        color: #FFFFFF !important;
-        font-family: 'Open Sans', sans-serif;
-        font-weight: 700;
+    h2::before {
+        content: '';
+        position: absolute;
+        left: 0;
+        top: 50%;
+        transform: translateY(-50%);
+        width: 4px;
+        height: 70%;
+        background: var(--gradient-1);
+        border-radius: 2px;
     }
 
-    /* テキストの色設定 */
+    /* テキストスタイル */
     p, li {
-        color: #FFFFFF;
+        color: var(--text-secondary);
+        line-height: 1.8;
+        font-size: 1rem;
+    }
+
+    strong {
+        color: var(--text-primary);
+        font-weight: 600;
+    }
+
+    /* グロウカード */
+    .glow-card {
+        background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(244, 114, 182, 0.05));
+        backdrop-filter: blur(10px);
+        border: 1px solid rgba(99, 102, 241, 0.2);
+        border-radius: 20px;
+        padding: 2rem;
+        margin-bottom: 2rem;
+        position: relative;
+        overflow: hidden;
+        transition: all 0.3s ease;
+    }
+
+    .glow-card::before {
+        content: '';
+        position: absolute;
+        top: -2px;
+        left: -2px;
+        right: -2px;
+        bottom: -2px;
+        background: var(--gradient-1);
+        border-radius: 20px;
+        opacity: 0;
+        z-index: -1;
+        transition: opacity 0.3s ease;
+    }
+
+    .glow-card:hover::before {
+        opacity: 0.3;
+    }
+
+    .glow-card:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 10px 40px rgba(99, 102, 241, 0.2);
+    }
+
+    /* ヒーローセクション */
+    .hero-section {
+        text-align: center;
+        padding: 4rem 0;
+        position: relative;
+    }
+
+    .hero-subtitle {
+        font-size: 1.25rem;
+        color: var(--secondary);
+        font-weight: 500;
+        margin-bottom: 1rem;
+    }
+
+    .hero-badges {
+        display: flex;
+        gap: 1rem;
+        justify-content: center;
+        flex-wrap: wrap;
+        margin-top: 2rem;
+    }
+
+    .badge {
+        background: rgba(99, 102, 241, 0.15);
+        border: 1px solid rgba(99, 102, 241, 0.3);
+        padding: 0.5rem 1rem;
+        border-radius: 999px;
+        font-size: 0.875rem;
+        color: var(--secondary);
+        font-weight: 500;
+        transition: all 0.2s ease;
+    }
+
+    .badge:hover {
+        background: rgba(99, 102, 241, 0.25);
+        transform: scale(1.05);
     }
 
-    /* リンクの色設定とホバーエフェクト */
+    /* プロフィール画像 */
+    .profile-image-container {
+        position: relative;
+        display: inline-block;
+        margin: 2rem 0;
+    }
+
+    .profile-image-container img {
+        border-radius: 20px;
+        border: 3px solid transparent;
+        background: linear-gradient(white, white) padding-box,
+                    var(--gradient-1) border-box;
+        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
+    }
+
+    .profile-image-glow {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        width: 120%;
+        height: 120%;
+        background: var(--gradient-1);
+        filter: blur(40px);
+        opacity: 0.4;
+        z-index: -1;
+    }
+
+    /* タイムライン */
+    .timeline-item {
+        position: relative;
+        padding-left: 2rem;
+        margin-bottom: 2rem;
+        border-left: 2px solid rgba(99, 102, 241, 0.2);
+    }
+
+    .timeline-item::before {
+        content: '';
+        position: absolute;
+        left: -6px;
+        top: 0;
+        width: 10px;
+        height: 10px;
+        background: var(--primary);
+        border-radius: 50%;
+        box-shadow: 0 0 20px rgba(99, 102, 241, 0.5);
+    }
+
+    .timeline-date {
+        color: var(--primary);
+        font-weight: 600;
+        font-size: 0.875rem;
+        margin-bottom: 0.5rem;
+    }
+
+    /* リンク */
     a {
-        color: #1ABC9C !important;
+        color: var(--secondary) !important;
         text-decoration: none;
-        transition: color 0.3s ease;
+        position: relative;
+        transition: color 0.2s ease;
     }
+
     a:hover {
-        color: #16A085 !important;
-        text-decoration: underline;
+        color: var(--primary) !important;
     }
 
-    /* リストのスタイル */
-    ul {
-        list-style-type: none;
-        padding-left: 20px;
+    /* アニメーション */
+    @keyframes float {
+        0%, 100% { transform: translateY(0); }
+        50% { transform: translateY(-10px); }
     }
-    ul li::before {
-        content: '▹';
-        color: #1ABC9C;
-        margin-right: 8px;
+
+    .float-animation {
+        animation: float 3s ease-in-out infinite;
     }
 
-    /* カードスタイル */
-    .card {
-        background: rgba(255, 255, 255, 0.1);
-        padding: 20px;
-        border-radius: 10px;
-        margin-bottom: 20px;
+    /* スキルタグ */
+    .skill-tag {
+        display: inline-block;
+        background: rgba(167, 139, 250, 0.15);
+        border: 1px solid rgba(167, 139, 250, 0.3);
+        padding: 0.25rem 0.75rem;
+        border-radius: 999px;
+        font-size: 0.875rem;
+        color: var(--secondary);
+        margin-right: 0.5rem;
+        margin-bottom: 0.5rem;
+        transition: all 0.2s ease;
     }
 
-    /* プロフィール画像のスタイル */
-    .profile-pic img {
-        border-radius: 50%;
-        border: 2px solid #1ABC9C;
+    .skill-tag:hover {
+        background: rgba(167, 139, 250, 0.25);
+        transform: translateY(-2px);
     }
 
-    /* フッターの非表示 */
-    footer {
-        visibility: hidden;
+    /* コンタクトボタン */
+    .contact-button {
+        background: var(--gradient-1);
+        color: white;
+        padding: 1rem 2rem;
+        border-radius: 999px;
+        font-weight: 600;
+        text-decoration: none;
+        display: inline-block;
+        transition: all 0.3s ease;
+        box-shadow: 0 5px 20px rgba(99, 102, 241, 0.3);
     }
 
-    /* レスポンシブ対応 */
+    .contact-button:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 8px 30px rgba(99, 102, 241, 0.4);
+    }
+
+    /* フッター非表示 */
+    footer { visibility: hidden; }
+
+    /* レスポンシブ */
     @media (max-width: 768px) {
-        .main {
-            padding: 10px;
-        }
-        .profile-pic img {
-            width: 150px !important;
-        }
+        h1 { font-size: 2.5rem !important; }
+        .glow-card { padding: 1.5rem; }
+    }
+
+    /* カスタムスクロールバー */
+    ::-webkit-scrollbar {
+        width: 10px;
+    }
+    ::-webkit-scrollbar-track {
+        background: rgba(15, 15, 35, 0.5);
+    }
+    ::-webkit-scrollbar-thumb {
+        background: var(--primary);
+        border-radius: 5px;
+    }
+    ::-webkit-scrollbar-thumb:hover {
+        background: var(--primary-dark);
     }
     </style>
 """, unsafe_allow_html=True)
@@ -100,226 +315,206 @@ def image_exists(path):
 
 # メイン関数
 def main():
-    # タイトルとロゴの表示
-    col1, col2 = st.columns([1, 8])
-    with col1:
-        if image_exists('my_logo.jpg'):
-            st.image('my_logo.jpg', width=70)
-        else:
-            st.warning("Logo image not found")
+    # ��ーローセクション
+    st.markdown("""
+        <div class="hero-section">
+            <div class="hero-subtitle">AI Researcher & Machine Learning Engineer</div>
+            <h1>Taisei Ozaki</h1>
+            <div class="hero-badges">
+                <span class="badge">🎓 博士後期課程 D1</span>
+                <span class="badge">🤖 LLM Specialist</span>
+                <span class="badge">🚗 自動運転研究</span>
+                <span class="badge">🎮 eスポーツ</span>
+            </div>
+        </div>
+    """, unsafe_allow_html=True)
+
+    # プロフィール画像とイントロ
+    col1, col2, col3 = st.columns([1, 2, 1])
     with col2:
-        st.markdown("<h1 style='padding-top: 20px;'>Taisei Ozaki Profile Page</h1>", unsafe_allow_html=True)
+        if image_exists('profile_pic.jpg'):
+            st.markdown('<div class="profile-image-container">', unsafe_allow_html=True)
+            st.image('profile_pic.jpg', width=300)
+            st.markdown('<div class="profile-image-glow"></div></div>', unsafe_allow_html=True)
+        
+        st.markdown("""
+            <div class="glow-card" style="text-align: center;">
+                <p style="font-size: 1.1rem; line-height: 1.8;">
+                    大阪公立大学の博士後期課程（D1）で機械工学とAI・NLPを研究。<br>
+                    LLMの暗黙知、AIエージェント、自動運転に焦点を当てた研究を行い、<br>
+                    東京大学松尾研究所でもデータサイエンティストとして活動中。
+                </p>
+            </div>
+        """, unsafe_allow_html=True)
 
-    # プロフィール概要
-    st.markdown("<div class='main'>", unsafe_allow_html=True)
-    st.header("📝 プロフィール概要")
-    col1, col2 = st.columns([1, 2])
+    # メインコンテンツ
+    col1, col2 = st.columns([2, 3])
 
     with col1:
-        if image_exists('profile_pic.jpg'):
-            st.markdown("<div class='profile-pic'>", unsafe_allow_html=True)
-            st.image('profile_pic.jpg', width=200)
-            st.markdown("</div>", unsafe_allow_html=True)
-        else:
-            st.warning("Profile picture not found")
-
-    with col2:
-        st.write("""
-        **尾﨑 大晟** ：大阪公立大学の博士後期課程（D1）の学生で、機械工学とNLP・AI，とりわけLLMを専門としています。
-        私の研究は大規模言語モデル（LLM）とLLMの暗黙知やAIエージェント，LLM as a Control,自動運転に焦点を当てています。
-        大学では自然言語処理をテーマに、大規模言語モデルを議論的対話の観点から定量評価する研究を行っており、特にAIとその教育的価値に興味があります。
-        博士後期課程では，LLMを用いた機械力学システムの安全性評価に関する研究に取り組んでいます。
-        高校卒業後、個人事業主として投資・投機ビジネスを経験した後、学問や研究の深さに惹かれ大学進学を決意しました。
-        課外活動では、eスポーツチームの運営、Jリーグクラブでの副音声実況活動、東京大学松尾研究室との関わり、国立情報学研究所のLLM-jpプロジェクトへの参加など、多岐にわたる活動を行っています。
-        """)
-    
-    st.markdown("</div>", unsafe_allow_html=True)
-    
-    # 学歴セクション
-    st.markdown("""
-        <div class='section card'>
-            <h2>🎓 学歴</h2>
-            <ul>
-                <li><strong>2025年4月 - 現在：</strong> 大阪公立大学大学院 工学研究科 機械系専攻 博士後期課程課程</li>
-                <li><strong>2023年4月 - 2025年3月：</strong> 大阪公立大学大学院 工学研究科 機械系専攻 博士前期課程</li>
-                <li><strong>2019年4月 - 2023年3月：</strong> 大阪府立大学 工学域 機械系学類 学士課程</li>
-                <li><strong>2017年3月：</strong> 愛媛県立宇和島東高校 卒業</li>
-            </ul>
-        </div>
-        """, unsafe_allow_html=True)
-    
-    # 職務経験セクション
-    st.markdown("""
-        <div class='section card'>
-            <h2>💼 職務経験</h2>
-            <ul>
-                <li><strong>2025年4月 - 現在：</strong> 東京大学　松尾岩澤研究室 及び 株式会社松尾研究所／Matsuo Institute データサイエンティスト</li>
-                <li><strong>2023年7月 - 2025年3月：</strong> 株式会社松尾研究所／Matsuo Institute AIエンジニア</li>
-                <li><strong>2024年1月 - 2024年2月：</strong> 日本電信電話株式会社 長期研究インターン</li>
-                <li><strong>2023年10月 - 2023年12月：</strong> 株式会社PKSHA Technology アルゴリズムエンジニア インターン</li>
-                <li><strong>2023年7月 - 2023年9月：</strong> 日本電気株式会社(NEC) 長期有償型���究インターン</li>
-                <li><strong>2018年9月 - 2022年12月：</strong> 個人事業主（為替取引業などに従事）</li>
-            </ul>
-        </div>
-        """, unsafe_allow_html=True)
-    
-    # 受賞歴セクション
-    st.markdown("""
-        <div class='section card'>
-            <h2>🏆 受賞歴</h2>
-            <ul>
-                <li><strong>2025年3月：</strong> 大阪公立大学　学長表彰
-                    <ul>
-                        <li>優れた実績を出した学生に贈られる賞</li>
-                    </ul>
-                </li>
-                <li><strong>2025年3月：</strong> 経済産業省 AKATSUKIプロジェクト採択 関西テッククリエイターチャレンジ 関西地域代表
-                    <ul>
-                        <li>関西AKATSUKIで発表されたプロジェクトの中で代表として経産省に発表</li>
-                    </ul>
-                </li>
-                <li><strong>2025年2月：</strong> 東京大学松尾岩澤研究室　Deeplearning応用講座 世界モデル 優秀賞
-                    <ul>
-                        <li>講座の優秀修了</li>
-                    </ul>
-                </li>
-                <li><strong>2024年12月：</strong> 東京大学松尾岩澤研究室　Deeplearning応用講座 大規模言語モデル 優秀賞
-                    <ul>
-                        <li>講座の優秀修了</li>
-                    </ul>
-                </li>
-                <li><strong>2024年6月：</strong> 人工知能学会 全国大会 口頭発表部門 優秀賞
-                    <ul>
-                        <li>「LLM による前提生成ステップを用いた反論の攻撃力向上手法」</li>
-                    </ul>
-                </li>
-                <li><strong>2024年6月：</strong> GENIAC 松尾研 LLM開発プロジェクト コンペティション第3位
-                    <ul>
-                        <li>LLM開発コンペティションで3位入賞</li>
-                    </ul>
-                </li>
-                <li><strong>2024年3月：</strong> 大阪公立大学大学院 工学研究科 学生顕彰
-                    <ul>
-                        <li>学術研究で優れた成果を挙げた学生に贈られる賞</li>
-                    </ul>
-                </li>
-                <li><strong>2023年9月：</strong> 東京大学グローバル消費インテリジェンス寄付講座 優秀賞
-                    <ul>
-                        <li>講座の優秀修了</li>
-                    </ul>
-                </li>
-                <li><strong>2023年6月：</strong> 人工知能学会 全国大会 ポスター発表部門優秀賞
-                    <ul>
-                        <li>「大規模言語モデルが生成した反論文の評価」</li>
-                    </ul>
-                </li>
-            </ul>
-        </div>
+        # 現在の所属
+        st.markdown('<h2>🏢 現在の所属</h2>', unsafe_allow_html=True)
+        st.markdown("""
+            <div class="glow-card">
+                <div class="timeline-item">
+                    <div class="timeline-date">2025年4月 - 現在</div>
+                    <strong>大阪公立大学大学院</strong><br>
+                    工学研究科 機械系専攻 博士後期課程
+                </div>
+                <div class="timeline-item">
+                    <div class="timeline-date">2025年4月 - 現在</div>
+                    <strong>東京大学 松尾岩澤研究室</strong><br>
+                    データサイエンティスト
+                </div>
+            </div>
         """, unsafe_allow_html=True)
-    
-    # 論文セクション（リンク付き）
-    st.markdown("""
-        <div class='section card'>
-            <h2>📚 学術発表・論文</h2>
-            <ul>
-                <li><strong>2025年3月12日：</strong> <a href='https://www.ai-gakkai.or.jp/jsai2025/' target='_blank'>「JDERW ：世界モデルを要する推論問題に関する日本語LLM ベンチマーク」</a> 人工知能学会全国大会</li>
-                <li><strong>2025年3月12日：</strong> <a href='https://www.anlp.jp/proceedings/annual_meeting/2025/pdf_dir/C5-6.pdf' target='_blank'>「LLM as a Debate Judge: 学習者ディベーターへの自動フィードバック生成」</a> 言語処理学会年次大会</li>
-                <li><strong>2024年5月29日：</strong> 「異常検知モデルを用いた電動キックボード乗車時のドライバの障害物への気付きの推定」 日本機械学会 ロボティクス・メカトロニクス部門</li>
-                <li><strong>2024年5月28日：</strong> <a href='https://www.jstage.jst.go.jp/article/pjsai/JSAI2024/0/JSAI2024_3F1GS1004/_article/-char/ja' target='_blank'>「LLMを用いた反論文の攻撃力向上手法の提案」</a> 人工知能学会全国大会</li>
-                <li><strong>2024年5月28���：</strong> <a href='https://www.jstage.jst.go.jp/article/pjsai/JSAI2024/0/JSAI2024_4Xin292/_article/-char/ja' target='_blank'>「大規模言語モデルの生成反論文のテンプレート追従性」</a> 人工知能学会全国大会</li>
-                <li><strong>2024年3月15日：</strong> <a href='https://www.anlp.jp/proceedings/annual_meeting/2024/pdf_dir/P9-27.pdf' target='_blank'>「大規模言語モデルを用いた有効反論箇所としての前提生成」</a> 言語処理学会年次大会</li>
-                <li><strong>2023年5月28日：</strong> <a href='https://www.jstage.jst.go.jp/article/pjsai/JSAI2023/0/JSAI2023_4Xin111/_article/-char/ja/' target='_blank'>「大規模言語モデルが生成した反論文の品質評価」</a> 人工知能学会全国大会</li>
-            </ul>
-        </div>
-        """, unsafe_allow_html=True)
-    
-    # プロジェクトセクション
-    st.markdown("""
-        <div class='section card'>
-            <h2>🚀 プロジェクト</h2>
-            <ul>
-                <li><strong>2024年8月 - 2025年2月：</strong> 経済産業省 AKATSUKIプロジェクト採択 関西テッククリエイターチャレンジ
-                    <ul>
-                        <li>革新的なアイデアを持つ若手テック人材を応援するプログラム</li>
-                    </ul>
-                </li>
-                <li><strong>2024年9月 - 2025年1月：</strong> 経済産業省 NEDO採択 東京大学松尾研究所 大規模言語モデル開発プロジェクト「Geniac」 チームOzakiリーダー
-                    <ul>
-                        <li>国内の生成AI開発力強化を目的としたプロジェクト</li>
-                    </ul>
-                </li>
-            </ul>
-        </div>
+
+        # スキル
+        st.markdown('<h2>💻 技術スタック</h2>', unsafe_allow_html=True)
+        st.markdown("""
+            <div class="glow-card">
+                <div style="margin-bottom: 1rem;">
+                    <strong style="color: var(--primary);">AI/ML</strong><br>
+                    <span class="skill-tag">LLM</span>
+                    <span class="skill-tag">NLP</span>
+                    <span class="skill-tag">Deep Learning</span>
+                    <span class="skill-tag">世界モデル</span>
+                </div>
+                <div style="margin-bottom: 1rem;">
+                    <strong style="color: var(--primary);">Programming</strong><br>
+                    <span class="skill-tag">Python</span>
+                    <span class="skill-tag">C++</span>
+                    <span class="skill-tag">PyTorch</span>
+                </div>
+                <div>
+                    <strong style="color: var(--primary);">Research</strong><br>
+                    <span class="skill-tag">自動運転</span>
+                    <span class="skill-tag">AIエージェント</span>
+                    <span class="skill-tag">議論的対話</span>
+                </div>
+            </div>
         """, unsafe_allow_html=True)
-    
-    # 資格・講座セクション
-    st.markdown("""
-        <div class='section card'>
-            <h2>🎖 資格・講座</h2>
-            <ul>
-                <li><strong>2023年10月：</strong> 東京大学 世界モデル Deep Learning応用講座 2024</li>
-                <li><strong>2023年9月：</strong> 東京大学 大規模言語モデル Deep Learning応用講座 2024</li>
-                <li><strong>2024年7月：</strong> 東京大学 サマースクール2024 深層生成モデル</li>
-                <li><strong>2024年4月：</strong> 東京大学 深層学習 / Deep Learning基礎講座</li>
-                <li><strong>2023年9月：</strong> 東京大学 サマースクール2023 大規模言語モデル</li>
-                <li><strong>2023年8月：</strong> 東京大学 グローバル消費インテリジェンス寄付講座</li>
-            </ul>
-        </div>
+
+    with col2:
+        # 主な実績
+        st.markdown('<h2>🏆 主な実績</h2>', unsafe_allow_html=True)
+        st.markdown("""
+            <div class="glow-card">
+                <div class="timeline-item">
+                    <div class="timeline-date">2025年3月</div>
+                    <strong>大阪公立大学 学長表彰</strong><br>
+                    優れた研究実績が評価され受賞
+                </div>
+                <div class="timeline-item">
+                    <div class="timeline-date">2025年3月</div>
+                    <strong>経済産業省 AKATSUKI 関西地域代表</strong><br>
+                    革新的プロジェクトで地域代表に選出
+                </div>
+                <div class="timeline-item">
+                    <div class="timeline-date">2024年6月</div>
+                    <strong>人工知能学会 全国大会 優秀賞</strong><br>
+                    「LLMによる前提生成ステップを用いた反論の攻撃力向上手法」
+                </div>
+                <div class="timeline-item">
+                    <div class="timeline-date">2024年6月</div>
+                    <strong>GENIAC 松尾研 LLMコンペ 第3位</strong><br>
+                    LLM開発コンペティションで入賞
+                </div>
+            </div>
         """, unsafe_allow_html=True)
-    
-    # スキルセクション
+
+    # 研究発表
+    st.markdown('<h2>📚 最新の研究発表</h2>', unsafe_allow_html=True)
     st.markdown("""
-        <div class='section card'>
-            <h2>🛠 スキル</h2>
-            <ul>
-                <li><strong>プログラミング言語：</strong> Python、C++</li>
-                <li><strong>専門分野：</strong> 自然言語処理、大規模言語モデル（LLM）、機械学習、データ分析</li>
-                <li><strong>その他：</strong> 研究プロジェクトのリード、eスポーツチームの運営、プロサッカーリーグ実況解説</li>
-            </ul>
+        <div class="glow-card">
+            <div class="timeline-item">
+                <div class="timeline-date">2025年3月</div>
+                <strong>JDERW：世界モデルを要する推論問題に関する日本語LLMベンチマーク</strong><br>
+                <a href="https://www.ai-gakkai.or.jp/jsai2025/" target="_blank">人工知能学会全国大会</a>
+            </div>
+            <div class="timeline-item">
+                <div class="timeline-date">2025年3月</div>
+                <strong>LLM as a Debate Judge: 学習者ディベーターへの自動フィードバック生成</strong><br>
+                <a href="https://www.anlp.jp/proceedings/annual_meeting/2025/pdf_dir/C5-6.pdf" target="_blank">言語処理学会年次大会</a>
+            </div>
+            <div class="timeline-item">
+                <div class="timeline-date">2024年5月</div>
+                <strong>異常検知モデルを用いた電動キックボード乗車時の障害物検知推定</strong><br>
+                日本機械学会 ロボティクス・メカトロニクス部門
+            </div>
         </div>
-        """, unsafe_allow_html=True)
+    """, unsafe_allow_html=True)
+
+    # プロジェクト
+    st.markdown('<h2>🚀 進行中のプロジェクト</h2>', unsafe_allow_html=True)
+    col1, col2 = st.columns(2)
     
-    # 研究関心分野セクション
-    st.markdown("""
-        <div class='section card'>
-            <h2>🔬 研究関心</h2>
-            <ul>
-                <li>自然言語処理</li>
-                <li>AIと教育</li>
-                <li>eスポーツとAIの統合</li>
-            </ul>
-        </div>
+    with col1:
+        st.markdown("""
+            <div class="glow-card">
+                <h3 style="color: var(--primary); font-size: 1.3rem;">経産省 AKATSUKIプロジェクト</h3>
+                <p>革新的なアイデアを持つ若手テック人材を応援するプログラムで関西地域代表として採択</p>
+            </div>
         """, unsafe_allow_html=True)
     
-    # 連絡先情報セクション
-    st.markdown("""
-        <div class='section card'>
-            <h2>📍 連絡先</h2>
-            <p>所在地：大阪府 堺市,中区学園町 1-1　大阪公立大学　B4棟　E234室　</p>
-            <a href='https://www.omu.ac.jp/eng/dyna/' target='_blank'>「機械力学研究グループ」</a>
-            <p>Mail： [email protected] (個人)</p>
-            <p>Mail： [email protected] (大学)</p>
-            <p>Mail： [email protected] (松尾研究所)</p>
-        </div>
+    with col2:
+        st.markdown("""
+            <div class="glow-card">
+                <h3 style="color: var(--primary); font-size: 1.3rem;">NEDO Geniac プロジェクト</h3>
+                <p>東京大学松尾研究所の大規模言語モデル開発プロジェクトでチームリーダーを務める</p>
+            </div>
         """, unsafe_allow_html=True)
-    
-    # ソーシャルリンク
-    st.markdown("""
-        <div style='text-align: center; margin-top: 50px;'>
-            <a href='https://www.linkedin.com/in/taisei-ozaki-del/' target='_blank'>
-                <img src='https://cdn-icons-png.flaticon.com/512/174/174857.png' width='40'>
-            </a>
-        </div>
+
+    # コンタクト
+    st.markdown('<h2>📬 Contact</h2>', unsafe_allow_html=True)
+    col1, col2, col3 = st.columns([1, 2, 1])
+    with col2:
+        st.markdown("""
+            <div class="glow-card" style="text-align: center;">
+                <p style="margin-bottom: 1.5rem;">
+                    研究協力、技術相談、その他のお問い合わせはこちらから
+                </p>
+                <div style="margin-bottom: 1rem;">
+                    <strong>大阪公立大学</strong><br>
+                    <a href="mailto:[email protected]">[email protected]</a>
+                </div>
+                <div style="margin-bottom: 1rem;">
+                    <strong>松尾研究所</strong><br>
+                    <a href="mailto:[email protected]">[email protected]</a>
+                </div>
+                <div style="margin-bottom: 2rem;">
+                    <strong>個人</strong><br>
+                    <a href="mailto:[email protected]">[email protected]</a>
+                </div>
+                <a href="https://www.linkedin.com/in/taisei-ozaki-del/" target="_blank" class="contact-button">
+                    LinkedIn でつながる
+                </a>
+            </div>
         """, unsafe_allow_html=True)
-    
-    # フッターの非表示
+
+    # フローティングアニメーション要素
     st.markdown("""
-        <style>
-        footer {visibility: hidden;}
-        </style>
-        """, unsafe_allow_html=True)
-    
-    st.markdown("</div>", unsafe_allow_html=True)
+        <script>
+        // スムーズスクロール効果
+        document.addEventListener('DOMContentLoaded', function() {
+            const cards = document.querySelectorAll('.glow-card');
+            const observer = new IntersectionObserver((entries) => {
+                entries.forEach(entry => {
+                    if (entry.isIntersecting) {
+                        entry.target.style.opacity = '1';
+                        entry.target.style.transform = 'translateY(0)';
+                    }
+                });
+            });
+            
+            cards.forEach(card => {
+                card.style.opacity = '0';
+                card.style.transform = 'translateY(20px)';
+                card.style.transition = 'all 0.6s ease-out';
+                observer.observe(card);
+            });
+        });
+        </script>
+    """, unsafe_allow_html=True)
 
 if __name__ == "__main__":
     try: