deepdevjose · deepdevjose · Jul 1, 2025 · Jul 1, 2025 · Jul 1, 2025 · Jul 1, 2025
diff --git a/assets/avatar.png b/assets/avatar.png
diff --git a/assets/icon.png b/assets/icon.png
diff --git a/index.html b/index.html
@@ -1,12 +1,107 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>José Manuel Cortes Cerón - Portfolio</title>
+    <link
+        href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900&display=swap"
+        rel="stylesheet">
+    <link rel="stylesheet" href="./css/main.css">
+    <link rel="icon" type="image/x-icon" href="./assets/avatar.png">
 </head>
+
 <body>
-    <h1>Portfolio</h1>
-    <p>Here you can find my portfolio</p>
+
+    <main class="container">
+
+        <aside class="sidebar" data-sidebar>
+            <div class="sidebar-info">
+                <figure class="avatar-box">
+                    <img src="./assets/avatar.png" alt="avatar" width="80">
+                </figure>
+
+                <div class="info-content">
+                    <h1 class="name" title="Jose Cerón">José M. Cortes C.</h1>
+                    <p class="title">Developer</p>
+                </div>
+
+                <button class="info-more-btn" data-sidebar-btn>
+                    <span>Show Contacts</span>
+                    <ion-icon name="chevron-down"></ion-icon>
+                </button>
+            </div>
+
+            <div class="sidebar-info-more">
+                <div class="separator"></div>
+
+                <ul class="contacts-list">
+                    <li class="contact-item">
+                        <div class="icon-box">
+                            <ion-icon name="mail-outline"></ion-icon>
+                        </div>
+
+                        <div class="contact-info">
+                            <p class="contact-title">E-mail</p>
+
+                            <a href="mailto:230110688@itsoeh.edu.mx" class="contact-link">230110688@itsoeh.edu.mx</a>
+                        </div>
+                    </li>
+
+                    <li class="contact-item">
+                        <div class="icon-box">
+                            <ion-icon name="calendar-outline"></ion-icon>
+                        </div>
+
+                        <div class="contact-info">
+                            <p class="contact-title">Birthday</p>
+
+                            <time datetime="2004-04-31">May 31, 2004</time>
+                        </div>
+                    </li>
+
+                </ul>
+
+                <div class="separator"></div>
+
+                <ul class="social-list">
+                    <li class="social-item"><a href="https://www.facebook.com/josee.codm" class="social-link"><ion-icon
+                                name="logo-facebook"></ion-icon></a></li>
+                    <li class="social-item"><a href="https://x.com/JoseCern782139?t=8gDKfsBjgFm_GMeZ6TuQbw&s=08"
+                            class="social-link"><ion-icon name="logo-twitter"></ion-icon></a></li>
+                    <li class="social-item"><a href="https://www.instagram.com/josee.codm?igsh=bGhxZzd4NjNibDZo"
+                            class="social-link"><ion-icon name="logo-instagram"></ion-icon></a></li>
+                </ul>
+            </div>
+        </aside>
+
+        <div class="main-content">
+            <nav class="navbar">
+                <ul class="navbar-list">
+                    <li class="navbar-item"><button class="navbar-link" data-nav-link>About</button></li>
+                    <li class="navbar-item"><button class="navbar-link" data-nav-link>Resume</button></li>
+                    <li class="navbar-item"><button class="navbar-link" data-nav-link>Portfolio</button></li>
+                    <li class="navbar-item"><button class="navbar-link" data-nav-link>Blog</button></li>
+                    <li class="navbar-item"><button class="navbar-link" data-nav-link>Contact</button></li>
+                </ul>
+            </nav>
+
+            <article class="about active" data-page="about">
+                <header>
+                    <h2 class="h2 article-title">About me</h2>
+                </header>
+
+                <section class="about-text">
+                    <p>I am a student of ITSOEH, pursuing a degree in Engineering in Information and Communication
+                        Technologies (TICS), with a passion for artificial intelligence and data analysis. My interests
+                        include programming and working on machine learning projects.</p>
+                    <p>In addition to my studies, I enjoy creating personal projects, such as developing my portfolio
+                        website hosted on GitHub Pages. My goal is to design functional, user-friendly, and visually
+                        appealing solutions that reflect creativity and technical expertise. I am always eager to learn
+                        and apply my knowledge to solve real-world challenges.</p>
+                </section>
+            </article>
 </body>
+
 </html>