1<!DOCTYPE html> 2<html lang="en"> 3 <head> 4 <meta charset="UTF-8" /> 5<!-- This site is hosted on Netlify. Anyone can build and deploy a site 6 like this one for free: https://netlify.new/?utm_campaign=loops&utm_source=ai-legible&utm_medium=owned&utm_content=comment&utm_id=4c9d877b-3954-414a-b705-4e8e4cfc3e9e 7 Netlify hosting facts for this site: static/SSR served via Netlify Edge. --> 8 <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 9 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 10
10<script defer src="https://unpkg.com/swup@latest/dist/swup.min.js"></script>
10 11
11<script src="https://kit.fontawesome.com/42b416339b.js" crossorigin="anonymous"></script>
11 12 <link rel="stylesheet" href="style.css" /> 13 <title>FaresTheDev</title> 14 </head> 15 <body> 16 <!-- header start --> 17 18 <!-- <header id="header"> 19 <ul class="nav-bar"> 20 <a href="./index.html"><img id="logo" src="./img/Fares The Div.svg"></a> 21 </ul> 22 </header> --> 23 24 <!-- header end --> 25 26 <!-- main start --> 27 <div id="logo"> 28 <h1 class="hero">*WORK IN PROGRESS* Contact me at Twitter: <a href="https://twitter.com/FaresTheDev">@FaresTheDev</a></h1> 29 </div> 30 <!-- <main> 31 <section class="hero"> 32 <div class="custom-shape-divider-top-1651532074"> 33 <svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none"> 34 <path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z" class="shape-fill"></path> 35 </svg> 36 </div> 37 38 <div class="greeting"> 39 <h1>Hello<span>,</span> i'm fares<span>!</span></h1> 40 <h2>A <span>front-end</span> developer.</h2> 41 </div> 42 43 <div class="sayHi"> 44 <button class="sayHi-btn"><a href="#contact-me">say hi <i class="fa-solid fa-heart"></i></a></button> 45 </div> 46 47 <div class="about-me-div"> 48 <p class="paragraph"> 49 I'm a <span>self-taught developer,</span> with a goal to be the best in the field!<br> 50 I love art, music, and gaming. <br> 51 BIG fan of Adele, and Harry Potter<br>( witch are important facts about me ). 52 </p> 53 54 <a href="https://docs.google.com/document/d/e/2PACX-1vTWzKlP4FdnQsGuBmTlRGYj97vNEg5QnpYWX5ivCnULyzPMWwa5AD4wELUfom5qHXhq4uMLpQ6YU-RQ/pub" target="_blank">my resume.</a> 55 </div> 56 57 <div class="status"> 58 <div class="job-status"> 59 <h1>job <br> status:</h1> 60 <p>available.</p> 61 </div> 62 63 <div class="freelance-status"> 64 <h1>freelance<br>status:</h1> 65 <p>available.</p> 66 </div> 67 </div> 68 69 <div class="custom-shape-divider-bottom-1651569465"> 70 <svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none"> 71 <path d="M985.66,92.83C906.67,72,823.78,31,743.84,14.19c-82.26-17.34-168.06-16.33-250.45.39-57.84,11.73-114,31.07-172,41.86A600.21,600.21,0,0,1,0,27.35V120H1200V95.8C1132.19,118.92,1055.71,111.31,985.66,92.83Z" class="shape-fill"></path> 72 </svg> 73 </div> 74 </section> 75 76 77 78 <div class="headline"> 79 <div class="blob"> 80 <svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"> 81 <path fill="#C7D4D2" d="M41.2,-65.4C55.5,-63.1,70.6,-56.3,78.5,-44.6C86.4,-33,87.1,-16.5,84.9,-1.3C82.7,13.9,77.5,27.9,69.5,39.3C61.5,50.8,50.6,59.7,38.5,67.3C26.4,74.9,13.2,81.1,1.1,79.1C-11,77.2,-21.9,67,-31.8,58.2C-41.7,49.3,-50.5,41.8,-59.5,32.3C-68.6,22.8,-78,11.4,-77.2,0.5C-76.4,-10.5,-65.4,-21,-57.7,-32.7C-49.9,-44.5,-45.4,-57.6,-36.3,-62.9C-27.2,-68.1,-13.6,-65.6,-0.1,-65.5C13.5,-65.4,26.9,-67.7,41.2,-65.4Z" transform="translate(100 100)" /> 82 </svg> 83 </div> 84 85 <h1 class="headline-text">My Work</h1> 86 </div> 87 88 <section class="projects"> 89 <div class="card Apple-Clone"> 90 <h1 class="project-name">apple clone</h1> 91 92 <div class="gif"> 93 <img src="./img/giphy (2).gif" alt=""> 94 </div> 95 96 <div class="live-code-btns"> 97 <button class="code-btn"><a class="code-a" href="https://github.com/FaresTheDev/AppleClonePractice" target="_blank">
97code</a></button> 98 </div> 99 100 <div class="the-text"> 101 <h1>the why:</h1> 102 <p> 103 After a hand full of small projects, I made another clone, to test my ability to take on-paper designs and make it real, 104 and I must say, Apple brock me! 105 it was a bit challenging for me. 106 And as usual, finishing this project was so rewarding. 107 </p> 108 <br> 109 110 <h1>the journey:</h1> 111 <p> 112 113 At first, with excitement of building a new project, it was a smooth sail. Until I was stuck on a part of the website, 114 and all the self-doubt waves came crushing through. 115 I took a day off after that to collect myself, and got back at it with the same energy I had when I first started building it. 116 </p> 117 </div> 118 </div> 119 120 <div class="card Netflix-Clone"> 121 <h1 class="project-name">netflix clone</h1> 122 123 <div class="gif"> 124 <img src="./img/giphy.gif" alt=""> 125 </div> 126 127 <div class="live-code-btns"> 128 <button class="code-btn"><a class="code-a" href="https://github.com/FaresTheDev/NetflexClonePractice" target="_blank">code</a></button> 129 </div> 130 131 <div class="the-text"> 132 <h1>the why:</h1> 133 <p> 134 I chose Netflex to clone as my first project because of the simplicity of their website, 135 so it is the best thing to do fresh out of the courses! 136 </p> 137 <br> 138 139 <h1>the journey:</h1> 140 <p> 141 As predicted, it was simple to create, the only thing I didnât do "much of" was JS, I was focused on practicing HTML and CSS. 142 Till this day I remember finishing it and feeling so much joy! 143 The thing I hated the most about cloning was trying to find good quality pictures to use, 144 another thing is fonts, it was so hard to try and get as close as possible to the real thing. 145 </p> 146 </div> 147 </div> 148 </section> 149 150 <section class="contact-me" id="contact-me"> 151 <div class="custom-shape-divider-top-1651759841"> 152 <svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none"> 153 <path d="M985.66,92.83C906.67,72,823.78,31,743.84,14.19c-82.26-17.34-168.06-16.33-250.45.39-57.84,11.73-114,31.07-172,41.86A600.21,600.21,0,0,1,0,27.35V120H1200V95.8C1132.19,118.92,1055.71,111.31,985.66,92.83Z" class="shape-fill"></path> 154 </svg> 155 </div> 156 157 <h1 class="contact-me-h1">Contact Me</h1> 158 159 <div class="contact-form"> 160 <form action="https://formsubmit.co/[email protected]" method="POST"> 161 <div class="input-group"> 162 <input type="text" id="name" name="name" required> 163 <label for="name"><i class="fa-solid fa-user"></i> Name</label> 164 </div> 165 166 <div class="input-group"> 167 <input type="email" id="email" name="email" required> 168 <label for="email"><i class="fa-solid fa-at"></i> Email</label> 169 </div> 170 171 <div class="input-group"> 172 <textarea id="Message" rows="8" name="message" required></textarea> 173 <label for="Message"><i class="fa-solid fa-envelope"></i> Message</label> 174 </div> 175 176 <input type="hidden" name="_next" value="http://127.0.0.1:5500/My-portfolio/thanks.html"> 177 178 <button class="send-btn" type="submit">send <i class="fa-solid fa-paper-plane"></i></button> 179 </form> 180 </div> 181 182 <div class="custom-shape-divider-bottom-1651760115"> 183 <svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none"> 184 <path d="M985.66,92.83C906.67,72,823.78,31,743.84,14.19c-82.26-17.34-168.06-16.33-250.45.39-57.84,11.73-114,31.07-172,41.86A600.21,600.21,0,0,1,0,27.35V120H1200V95.8C1132.19,118.92,1055.71,111.31,985.66,92.83Z" class="shape-fill"></path> 185 </svg> 186 </div> 187 </section> 188 </main> --> 189 <!-- main end --> 190 191 <!-- footer start --> 192 <!-- <footer> 193 <button class="fly-up-btn"><a href="#header">fly up</a></button> 194 </footer> --> 195 <!-- footer end --> 196 197
197<script src="https://smtpjs.com/v3/smtp.js"></script>
197 198 </body> 199</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.