diff --git a/index.html b/index.html
index 88b7e82..c52e4a6 100644
--- a/index.html
+++ b/index.html
@@ -148,7 +148,7 @@ <h4 class="h4 service-item-title">Machine Learning Applications</h4>
                 </section>
 
             </article>
-                        <article class="resume" data-page="resume">
+            <article class="resume" data-page="resume">
                 <header>
                     <h2 class="h2 article-title">Resume</h2>
                 </header>
@@ -213,6 +213,105 @@ <h5 class="h5">Software Development</h5>
                     </ul>
                 </section>
             </article>
+
+            <article class="portfolio" data-page="portfolio">
+                <header>
+                    <h2 class="h2 article-title">Portfolio</h2>
+                </header>
+
+                <section class="projects">
+                    <ul class="filter-list">
+                        <li class="filter-item"><button class="active" data-filter-btn>All</button></li>
+                        <li class="filter-item"><button data-filter-btn>Data Analysis</button></li>
+                        <li class="filter-item"><button data-filter-btn>Machine Learning</button></li>
+                        <li class="filter-item"><button data-filter-btn>Web Development</button></li>
+                    </ul>
+
+                    <div class="filter-select-box">
+                        <button class="filter-select" data-select>
+                            <div class="select-value" data-select-value>Select Category</div>
+
+                            <div class="select-icon">
+                                <ion-icon name="chevron-down"></ion-icon>
+                            </div>
+                        </button>
+
+                        <ul class="select-list">
+                            <li class="select-item"><button data-select-item>All</button></li>
+                            <li class="select-item"><button data-select-item>Data Analysis</button></li>
+                            <li class="select-item"><button data-select-item>Machine Learning</button></li>
+                            <li class="select-item"><button data-select-item>Web Development</button></li>
+                        </ul>
+                    </div>
+
+                    <ul class="project-list">
+                        <li class="project-item active" data-filter-item data-category="data analysis">
+                            <a href="https://github.com/Joseecodm/data-analysis-project">
+                                <figure class="project-img">
+                                    <div class="project-item-icon-box">
+                                        <ion-icon name="eye-outline"></ion-icon>
+                                    </div>
+                                    <img src="" alt="data-analysis" loading="lazy">
+                                </figure>
+                                <h3 class="project-title">Sales Data Analysis</h3>
+                                <p class="project-category">Data Analysis</p>
+                            </a>
+                        </li>
+
+                        <li class="project-item active" data-filter-item data-category="machine learning">
+                            <a href="https://github.com/Joseecodm/machine-learning-project">
+                                <figure class="project-img">
+                                    <div class="project-item-icon-box">
+                                        <ion-icon name="eye-outline"></ion-icon>
+                                    </div>
+                                    <img src="" alt="machine-learning" loading="lazy">
+                                </figure>
+                                <h3 class="project-title">Predictive Model for Housing Prices</h3>
+                                <p class="project-category">Machine Learning</p>
+                            </a>
+                        </li>
+
+                        <li class="project-item active" data-filter-item data-category="web development">
+                            <a href="https://Joseecodm.github.io/portfolio-website">
+                                <figure class="project-img">
+                                    <div class="project-item-icon-box">
+                                        <ion-icon name="eye-outline"></ion-icon>
+                                    </div>
+                                    <img src="" alt="portfolio" loading="lazy">
+                                </figure>
+                                <h3 class="project-title">Personal Portfolio Website</h3>
+                                <p class="project-category">Web Development</p>
+                            </a>
+                        </li>
+
+                        <li class="project-item active" data-filter-item data-category="machine learning">
+                            <a href="https://github.com/Joseecodm/image-recognition-project">
+                                <figure class="project-img">
+                                    <div class="project-item-icon-box">
+                                        <ion-icon name="eye-outline"></ion-icon>
+                                    </div>
+                                    <img src="" alt="image-recognition" loading="lazy">
+                                </figure>
+                                <h3 class="project-title">Image Recognition System</h3>
+                                <p class="project-category">Machine Learning</p>
+                            </a>
+                        </li>
+
+                        <li class="project-item active" data-filter-item data-category="data analysis">
+                            <a href="https://github.com/Joseecodm/financial-analysis">
+                                <figure class="project-img">
+                                    <div class="project-item-icon-box">
+                                        <ion-icon name="eye-outline"></ion-icon>
+                                    </div>
+                                    <img src="https" alt="financial-analysis" loading="lazy">
+                                </figure>
+                                <h3 class="project-title">Financial Data Visualization</h3>
+                                <p class="project-category">Data Analysis</p>
+                            </a>
+                        </li>
+                    </ul>
+                </section>
+            </article>
 </body>
 
 </html>
\ No newline at end of file