Programming-Club-IAU · FarisAI24 · Oct 3, 2023
diff --git a/about.html b/about.html
@@ -0,0 +1,142 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>About FarisXP!</title>
+    <link rel="icon" type="image/x-icon" href="/images/favicon.png">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Lato:wght@700&display=swap" rel="stylesheet">
+</head>
+<body>
+   <!-- Header -->
+   <table border="O" width="100%" cellspacing="0"
+   bgcolor="#151515">
+ <tr><td>
+     <table border="0" width="85%" align="center" cellpadding="15">
+       <tr>
+         <td width="20%"></td>
+         <div style="font-family: 'Lato', sans-serif; text-align: center;">
+           <td align="center"> <a href="/index.html"><font color="#fff" face="Lato"> Home </a></font></td>
+           <td align="center"> <a href="/about.html"><font color="#fff" face="Lato"> About </a></font></td>
+           <td align="center"> <a href="/portfolio.html"><font color="#fff" face="Lato"> Portfolio </a></font></td>
+         </div>
+         <td width="20%"></td>
+       </tr>
+     </table> 
+   </td></tr>
+</table>
+ <!-- End Header -->
+
+
+ <!-- About -->
+    <div style="font-family: 'Open Sans', sans-serif;">
+    <table>
+        <tr>
+            <td>
+                <img src="images/profilePic.png" height="500px">
+            </td>
+            <td>
+                <h1>About Me!</h1><hr align="left" width="20%">
+                <h1><font size="5"> My name is Faris.</font></h1>
+                <p>
+                    I'm an AI student passionate about Game, App, and Web development.
+                    I specialize in integrating AI to create immersive gaming experiences and enhance web and app functionality.
+                    Join me in shaping the future of tech!
+                </p>
+
+
+            </td>
+        </tr>
+    </table>
+    </div>
+<!-- End About -->
+
+<!-- Experience -->
+<table width="100%">
+    <tr>
+        <td>
+        <table width="85%" border="0" align="center" cellpadding="15px">
+        <tr align="center">
+        <td colspan="3">
+            <font size="5" face="Open Sans, sans-serif"><b>Experience</b> </font><br>
+            <hr align="center" width="9%">    
+        </td>
+        </tr>
+    <tr align="center">
+        <td>
+        <img src="images/webdev.png" width="15%"><br><br>
+        <font size="5" face="Open Sans, sans-serif"> Web Development </font><br>
+        <font size="3"> There are many variations of passages of Lorem Ipsum available, but the majority h alteration in some form </font> 
+    </td>
+    <td>
+        <img src="images/appdev.png" width="15%"> <br><br>
+        <font size="5" face="Open Sans, sans-serif"> App Development </font><br>
+        <font size="3"> There are many variations of passages of Lorem Ipsum available, but the majority h alteration in some form </font>
+    </td>
+    <td>
+        <img src="images/gamedev.png" width="15%"> <br><br>
+        <font size="5" face="Open Sans, sans-serif"> Game Development </font><br>
+        <font size="3"> There are many variations of passages of Lorem Ipsum available, but the majority h alteration in some form </font>
+    </td>
+    </tr>
+    </table>
+    </td>
+    </tr>
+</table>
+<br>
+<!-- End Experience -->
+
+<!-- Skills -->
+<table width="100%" bgcolor="#25282f">
+    <tr>
+        <td>
+        <table width="80%" border="0" align="center" cellpadding="15px">
+        <tr align="center">
+        <td colspan="3">
+            <font size="5" face="Open Sans, sans-serif" color="#fff"><b>Skills</b> </font><br>
+            <hr align="center" width="6%">    
+        </td>
+        </tr>
+    <tr align="center">
+        <td>
+        <img src="images/python.png" width="15%"><br><br>
+        <font size="5" face="Open Sans, sans-serif" color="#fff"> Python </font><br>
+    </td>
+    <td>
+        <img src="images/java.png" width="15%"><br><br>
+        <font size="5" face="Open Sans, sans-serif" color="#fff"> Java </font><br>
+    </td>
+    <td>
+        <img src="images/cpp.png" width="15%"> <br><br>
+        <font size="5" face="Open Sans, sans-serif" color="#fff"> C++ </font><br>
+    </td>
+    <tr align="center">
+    <td>
+        <img src="images/html.png" width="15%"> <br><br>
+        <font size="5" face="Open Sans, sans-serif" color="#fff"> HTML </font><br>
+    </td>
+    <td>
+        <img src="images/c-sharp.png" width="15%"> <br><br>
+        <font size="5" face="Open Sans, sans-serif" color="#fff"> C# </font><br>
+    </td>
+    <td>
+        <img src="images/unity.png" width="15%"> <br><br>
+        <font size="5" face="Open Sans, sans-serif" color="#fff"> Unity </font><br>
+    </tr>
+    </table>
+    </td>
+    </tr>
+    </tr>
+</table>
+<!-- End Skills -->
+
+<!-- Footer -->
+<div align="center" style="font-family: 'Open Sans', sans-serif; text-align: center;">
+    <hr align="center" width="5%">
+    <p>&copy; 2023 | FarisXP</p>
+  </div>
+<!-- End Footer -->
+</body>
+</html>
diff --git a/images/appdev.png b/images/appdev.png
diff --git a/images/c-sharp.png b/images/c-sharp.png
diff --git a/images/cpp.png b/images/cpp.png
diff --git a/images/favicon.png b/images/favicon.png
diff --git a/images/gamedev.png b/images/gamedev.png
diff --git a/images/html.png b/images/html.png
diff --git a/images/java.png b/images/java.png
diff --git a/images/profilePic.png b/images/profilePic.png
diff --git a/images/python.png b/images/python.png
diff --git a/images/unity.png b/images/unity.png
diff --git a/images/webdev.png b/images/webdev.png
diff --git a/index.html b/index.html
@@ -0,0 +1,67 @@
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>FarisXP's website</title>
+    <link rel="icon" type="image/x-icon" href="/images/favicon.png" />
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Lato:wght@700&display=swap" rel="stylesheet">
+  </head>
+
+  <body>
+    <!-- Header -->
+      <table border="O" width="100%" cellspacing="0"
+      bgcolor="#151515">
+    <tr><td>
+        <table border="0" width="85%" align="center" cellpadding="15">
+          <tr>
+            <td width="20%"></td>
+            <div style="font-family: 'Lato', sans-serif; text-align: center;">
+              <td align="center"> <a href="/index.html"><font color="#fff" face="Lato"> Home </a></font></td>
+              <td align="center"> <a href="/about.html"><font color="#fff" face="Lato"> About </a></font></td>
+              <td align="center"> <a href="/portfolio.html"><font color="#fff" face="Lato"> Portfolio </a></font></td>
+            </div>
+            <td width="20%"></td>
+          </tr>
+        </table> 
+      </td></tr>
+  </table>
+    <!-- End Header -->
+
+    <!-- Intro -->
+    <div style="font-family: 'Open Sans', sans-serif;">
+      <table align="center"> 
+        <tr>
+          <td>
+            <table width="105%" border="0" align="center" cellpadding="15px">
+              <tr> 
+                <td>
+                  <h1> <font size="7">Hi, </font></h1>
+                  <h1> <font size="6">I'm FarisXP</font></h1>
+                  <h1> <font size="5">I'm an AI engineer. </font></h1>
+                  <h2> Welcome to my Website! </h2>
+                  <hr>
+                  <a href="/about.html"><button> About Me!</button></a>
+                  <a href="/portfolio.html"><button> Check my Portfolio!</button></a>
+                </td>
+                <td>
+                  <img src="images/profilePic.png" height="500px">
+                </td>
+              </tr>
+            </table>
+          </td>
+        </tr>
+      </table>
+    </div>
+    <!-- End Intro -->
+
+    <!-- Footer -->
+  <div align="center" style="font-family: 'Open Sans', sans-serif; text-align: center;">
+    <hr align="center" width="5%">
+    <p>&copy; 2023 | FarisXP</p>
+  </div>
+<!-- End Footer -->
+
+  </body>
+</html>
diff --git a/portfolio.html b/portfolio.html
@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>FarisXP's portfolio</title>
+    <link rel="icon" type="image/x-icon" href="/images/favicon.png">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Lato:wght@700&display=swap" rel="stylesheet">
+</head>
+<body>
+    <!-- Header -->
+   <table border="O" width="100%" cellspacing="0"
+   bgcolor="#151515">
+ <tr><td>
+     <table border="0" width="85%" align="center" cellpadding="15">
+       <tr>
+         <td width="20%"></td>
+         <div style="font-family: 'Lato', sans-serif; text-align: center;">
+           <td align="center"> <a href="/index.html"><font color="#fff" face="Lato"> Home </a></font></td>
+           <td align="center"> <a href="/about.html"><font color="#fff" face="Lato"> About </a></font></td>
+           <td align="center"> <a href="/portfolio.html"><font color="#fff" face="Lato"> Portfolio </a></font></td>
+         </div>
+         <td width="20%"></td>
+       </tr>
+     </table> 
+   </td></tr>
+</table>
+ <!-- End Header -->
+
+ <!-- Projects -->
+<table width="100%">
+    <tr>
+        <td>
+        <table width="85%" border="0" align="center" cellpadding="15px">
+        <tr align="center">
+        <td colspan="3">
+            <font size="5" face="Open Sans, sans-serif"><b>Projects</b> </font><br>
+            <hr align="center" width="9%">    
+        </td>
+        </tr>
+    <tr align="center">
+        <td>
+        <img src="images/webdev.png" width="15%"><br><br>
+        <font size="5" face="Open Sans, sans-serif"> 2D arcade game </font><br>
+        <font size="3"> There are many variations of passages of Lorem Ipsum available, but the majority h alteration in some form </font> 
+    </td>
+    <td>
+        <img src="images/appdev.png" width="15%"> <br><br>
+        <font size="5" face="Open Sans, sans-serif"> App Development </font><br>
+        <font size="3"> There are many variations of passages of Lorem Ipsum available, but the majority h alteration in some form </font>
+    </td>
+    <td>
+        <img src="images/gamedev.png" width="15%"> <br><br>
+        <font size="5" face="Open Sans, sans-serif"> Game Development </font><br>
+        <font size="3"> There are many variations of passages of Lorem Ipsum available, but the majority h alteration in some form </font>
+    </td>
+    </tr>
+    <tr align="center">
+        <td>
+        <img src="images/webdev.png" width="15%"><br><br>
+        <font size="5" face="Open Sans, sans-serif"> 2D arcade game </font><br>
+        <font size="3"> There are many variations of passages of Lorem Ipsum available, but the majority h alteration in some form </font> 
+    </td>
+    <td>
+        <img src="images/appdev.png" width="15%"> <br><br>
+        <font size="5" face="Open Sans, sans-serif"> App Development </font><br>
+        <font size="3"> There are many variations of passages of Lorem Ipsum available, but the majority h alteration in some form </font>
+    </td>
+    <td>
+        <img src="images/gamedev.png" width="15%"> <br><br>
+        <font size="5" face="Open Sans, sans-serif"> Game Development </font><br>
+        <font size="3"> There are many variations of passages of Lorem Ipsum available, but the majority h alteration in some form </font>
+    </td>
+    </table>
+    </td>
+    </tr>
+</table>
+<br>
+<!-- End Projects -->
+
+<!-- Footer -->
+<div align="center" style="font-family: 'Open Sans', sans-serif; text-align: center;">
+    <hr align="center" width="5%">
+    <p>&copy; 2023 | FarisXP</p>
+  </div>
+<!-- End Footer -->
+
+
+
+</body>
+</html>