index.html

<!--
**The-Young-Programmer/The-Young-Programmer** is a ✨ _special_ ✨ repository because its `README.md` (this file) appears on your GitHub profile.
Here are some ideas to get you started:
- 🔭 I’m currently working on ...myself 
- 🌱 I’m currently learning ...about myself 
- 👯 I’m looking to collaborate on ...myself 
- 🤔 I’m looking for help with ...myself 
- 💬 Ask me about ...myself 
- 📫 How to reach me: ...myself 
- 😄 Pronouns: ...myself 
- ⚡ Fun fact: ...myself 
-->


<!-- Created by The Young Programmer🏅 -->

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet" />
    <link rel="preconnect" href="https://fonts.gstatic.com" />

    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
      integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w=="
      crossorigin="anonymous"
    />
    <link
      href="https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap"
      rel="stylesheet"
    />
    
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>TYP Website</title>
    
    <link rel="icon" type="image/x-icon" href="image/favicon.ico">

  </head>

  <body>
	
  <i class="fa fa-arrow-up" aria-hidden="true" onclick = "scrollToTop();"></i>
    <section class="sec1" id="section1">		
      <div class="menuBar">
        <ul>
          <li><a href="#section1">Home</a></li>
          <li><a href="#section2">About</a></li>
          <li><a href="#section3">Projects</a></li>	 
          <li><a href="#section4">contact</a></li>
	   <li><a href="https://github.com/Team-TYP" target="_blank">Developers</a></li>
        </ul>
      </div>
      <div class="navBar">
        <div class="logo">
          <h1>The Young Programmer</h1>
        </div>
        <div class="navBar__menu">
          <ul>
            <li>
              <a href="#section1">Home</a>
            </li>
            <li>
              <a href="#section2">About</a>
            </li>
            <li>
              <a href="#section3">Projects</a>
            </li>
            <li>
              <a href="#section4">Contact</a>
            </li>
	     <li>
	      <a href="https://github.com/Team-TYP" target="_blank">Developers</a>
	     </li>
          </ul>
        </div>
        <div class="sec1__menuIcon"></div>
      </div>
      <div class="sec1__container">
        <div class="sec1__content">
          <div class="sec1__contentDetail">
            <div class="sec1__contentHider">
              <h1>hi,</h1>
            </div>
            <div class="sec1__contentHider">
              <h1>I'am <span>Nemonet</span></h1>
            </div>
            <div class="sec1__contentHider">
              <h1>The Young Programmer<br>🏅🏅🏅</h1>
            </div>
          </div>
              
          
          <a href="https://github.com/The-Young-Programmer">follow Me <i class="fab fa-github"></i></a>
        </div>
        <div class="sec1__imgContainer">
          <div class="sec1__imgBx">
            <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSI4ejwd8sboV9yPRvRbiesSd62QnzNLoX2oQ&usqp=CAU"  alt="" />
            <span class="sec1__design1"></span>
            <span class="sec1__design2"></span>
            <span class="sec1__design3"></span>
            <span class="sec1__design4"></span>
          </div>
        </div>
      </div>
    </section>
    <section class="sec2" id="section2">
      <div class="sec2__heading">
        <h2>about me</h2>
      </div>
      <div class="sec2__container">
        <div class="sec2__aboutme1" data-aos="fade-up" data-aos-offset="-90">
          <div class="sec2__aboutme1Img">
            <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRD7EiF-vp4ZHuSutzpL9A7p8z0yF_m9KeVhA&usqp=CAU" alt="Nemonet aka (TYP 💻)" />
         </div>
		
         	 <h2>Nemonet 👽</h2>
		<br>
		<h3>The Young Programmer 💻</h3>
		

          <div class="sec2__aboutme1Social">
            <ul>
              <li>
                <a href="https://www.linkedin.com/in/typ-nemonet"><i class="fab fa-linkedin"></i></a>
              </li>
              <li>
                <a href="https://www.instagram.com/invites/contact/?i=tpssan2t0kkn&utm_content=3zo4x47"><i class="fab fa-instagram"></i></a>
              </li>
              <li>
                <a href="https://twitter.com/TNemonet?s=09"><i class="fab fa-twitter"></i></a>
              </li>
              <li>
                <a href="https://github.com/The-Young-Programmer"><i class="fab fa-github"></i></a>
              </li>
		<li>
                <a href="mailto:the.young.programmer.team@gmail.com"><i class="fas fa-envelope"></i></a>
              </li>
            </ul>
          </div>
        </div>
        <div class="sec2__aboutme2" data-aos="fade-up" data-aos-delay="1000">
          <p>
            Hey guys, this is my homepage,
 so I have to say something about myself.<br /><br />
 My name is The Young Programmer aka {<b>Nemonet</b> }, but some people also call me Computer Wizard , some call me Computer Guru { Computer geek }, others call me Computer nerd.<br /><br />
 It not just about Programming, its also about Hacking.....
I Love Coding /Programming and Hacking 🖥️
also Love Mathematics 💕. <br />
<b>Favourite sport🏅:</b> Swimming 🏊 and Car Racing🏁
          </p>
        </div>
      </div>

	 <div class="sec2__container">
	 <div class="sec2__aboutme1">
	  <h2>Interests</h2><br>
	     <ul style="font-size: 1.5rem;">

		<li>Ethical Hacking (GHH)</li>
                <li>Software Engineer</li>
                <li>Networking</li>
		 <li>Dynamic Web Design</li>
		<li>Web Development</li>
		<li>Android App Development</li>
		<li>Online Marketing Manager</li>
	   </ul>
	</div>
		
	<div class="sec2__aboutme2"> 
	    <ul><h2 style="font-size: 1.9rem;">Education</h2> 
		 <br>
		<li style="font-size: 1.5rem;">
		  
		   <p>BSc in Computer Science, <i>2023</i></p>
		    <p><b>Institution :</b><i>School name is Not Needed</i></p>
		    <p><b>Description:</b> Don't know what to say, but it's cool to own a BSc Degree ☺<br><i>Computer Nerd to the Core.</i></p>
		</li></ul>
		</div>
              </div>
		
   	</section>


<!--###########		SKILLS SECTION		###########-->


         <section id="skills" class="home-section wg-featurette">
       
            <div class="containerzz">
                <div class="rowzz featurette">
			 
                    <div class="col-md-12 section-heading">
                        <h1>Skills</h1>
                    </div>

                    <div class="col-12 col-sm-4">
                        <div class="featurette-icon"><i class="fab fa-###"></i></div>
                        <h3>Languages</h3>
			<hr color="#e66060">
			<br>
			<img src="img/cplusplus.png"/>	<img src="img/c.png"/>	<img src="img/html.png"/>	<img src="img/css.png"/>	<img src="img/js.png"/>	<img src="img/jquery.png"/>	<img src="img/php.png"/>	<img src="img/perl.png"/>	<img src="img/python.png"/>	<img src="img/asm.png"/>	<img src="img/fortran.png"/>	<img src="img/pascal.png"/>	<img src="img/java.png"/>	<img src="img/csharp.png"/>	<img src="img/kotlin.png"/>

			<!--
                        <p>C++, C<br>HTML5, CSS3<br>JavaScript, JQuery<br>Python<br>PHP, Perl<br>Assembly (ASM)<br>Pascal<br>Fortran<br>Java, cSharp, kotlin</p> -->

                    </div> 

                    <div class="col-12 col-sm-4">
                        <div class="featurette-icon"><i class="fab fa-###"></i></div>
                        <h3>Hacking (EH)</h3>
			<hr color="#e66060">
			<br>

			<img src="img/text_encrypt.png"/>	<img src="img/cryptography.png"/>	<img src="img/CEHv8.png"/>	<img src="img/CEHv10.jpeg"/>	<img src="img/CEHv11.jpeg"/>	<img src="img/dataencryption.png"/>	<img src="img/terminal.png"/>	<img src="img/redhat.png"/>	<img src="img/rasberry_pi.png"/>	<img src="img/kali.jpeg"/>	<img src="img/bash.png"/>	<img src="img/power_shell.png"/>

			<!--
                        <p>Cryptography<br>Steganography<br>EH v8<br>EH v10, EH v11<br>Termux<br>Red Hat<br>Rasberry PI<br>Kali Linux<br>Bash, Power Shell</p>-->
                    </div>

                    <div class="col-12 col-sm-4">
                        <div class="featurette-icon"><i class="fab fa-###"></i></div>
                        <h3>Electronics skills</h3>
			<hr color="#e66060">
			<br>

			<img src="img/arduino.png"/>	<img src="img/cuircuit.png"/>	<img src="img/mechatronics.png"/>

			<!--
                        <p>Arduino<br>Mechatronics<br>Cuircuit board</p>-->
                    </div>

                    <div class="col-12 col-sm-4">
                        <div class="featurette-icon"><i class="fab fa-###"></i></div>
                        <h3>Frameworks</h3>
			<hr color="#e66060">
			<br>

			<img src="img/bootstrap.jpg"/>	<img src="img/flask.png"/>	<img src="img/django.png"/>	<img src="img/tkinter.jpeg"/>	<img src="img/react_js.png"/>	<img src="img/node_js.jpg"/>	<img src="img/angularjs.png"/>	<img src="img/ajax_js.png"/>

			<!--
                        <p>Bootstrap<br>Flask<br> Django<br>Tkinter<br> React JS<br>Node JS<br>Angular JS<br>Ajax JS</p>-->
                    </div>

                    <div class="col-12 col-sm-4">
                        <div class="featurette-icon"><i class="fas fa-###"></i></div>
                        <h3>OS</h3>
			<hr color="#e66060">
			<br>

			<img src="img/windows_os.png"/>	<img src="img/android_os.png"/>	<img src="img/debian.png"/>	<img src="img/linux.png"/>	<img src="img/tails.png"/>	<img src="img/qubes.png"/>

			<!--
                        <p>Windows OS<br>Remix OS<br>Linux OS<br>Tails OS<br>Qubes OS</p>-->
                    </div>

                    <div class="col-12 col-sm-4">
                        <div class="featurette-icon"><i class="fab fa-###"></i></div>
                        <h3>Others</h3>
			<hr color="#e66060">
			<br>

			<img src="img/andriod_studio.png"/>	<img src="img/visual_studio.png"/>	<img src="img/git.png"/>	<img src="img/github.png"/>	<img src="img/phpmyadmin.png"/>	<img src="img/mysql.png"/>	<img src="img/apache.png"/>	<img src="img/marketing-digital.png"/>	<img src="img/wordpress.png"/>	<img src="img/wix.png"/>	<img src="img/blogger.png"/>	

			<!--
                        <p>Andriod Studio<br>Visual Studio<br>Git, GitHub <br>phpMyAdmin<br> MySQL Database<br>Apache Web Server<br>Online Marketing<br>Wordpress<br>WIX<br>Blogger</p>-->
                    </div>
                </div>
            </div>
        </section>

	<!--###########		SKILLS SECTION	ENDS	###########-->


		<section id="skills" class="home-section wg-featurette">
       
            <div class="containerzz">
                <div class="rowzz featurette">
			 
                    <div class="col-md-12 section-heading">
                        <h1>Currently Learning</h1>
                    </div>
			<div class="col-12 col-sm-4">
                        <div class="featurette-icon"><i class="fab fa-###"></i></div>
                        <h3>Languages</h3>
			<hr color="#e66060">
			<br>
			
			
		<img src="img/swift.png"/>	<img src="img/ruby.png"/>	

			<!--
			<p>Swift Programming<br>Ruby Programming</p> -->
			
		</div>

		<div class="col-12 col-sm-4">
                        <div class="featurette-icon"><i class="fab fa-###"></i></div>
                        <h3>Hacking (EH)</h3>
			<hr color="#e66060">
			<br>
			
                   <img src="img/#GHH.jpeg"/>	<img src="img/#"/>	<img src="img/app-patching.png"/>	<img src="img/#"/>	<img src="img/#car-mb-hack.jpeg"/>

			<!--			
                        <p>GHH (master)<br>DDW Hacking<br>App Patching<br>Sattalite Hacking<br>Car MB Hacking</p> -->

                    </div>
		
 		<div class="col-12 col-sm-4">
                        <div class="featurette-icon"><i class="fab fa-###"></i></div>
                        <h3>Others</h3>
			<hr color="#e66060">
			<br>
			
			<img src="img/App-Store.png"/>	<img src="img/ios.png"/>	<img src="img/ui-ux.png"/>
			
			 <!--
                        <p>IOS App Dev.<br>UI/UX Design</p> -->
                    </div>
	
		</div>	
            </div>
        </section>


<!--#########		PROJECTS SECTION	###########-->

    <section class="sec3" id="section3">
      <h1>Projects</h1>
      <div class="sec3__container">		
        <div class="sec3__card" data-aos="fade-up" data-aos-delay="800">
          <div class="sec3__box">
            <div class="sec3__percent">            
              <div class="number">		
		<img src="image/img1.jpeg"/>		
               <!-- <h2>Image<span>1</span></h2>-->
              </div>
            </div>
            <h2 style="text-align:center;" class="sec3__text">Hangman Game<br>Written in: <span style="color:#ff6666;">JS,HTML,CSS</span><br><br>This involve guessing letters to reveal a<br> word or phrase. After a certain number of<br> incorrect guesses, a character on screen<br> is "Hanged".<br><br></h2>
		  
		<a style="text-decoration:none;" href="https://the-young-programmer.github.io/Hangman-Game/" target="_blank">
		<button>LIVE</button>
		</a>	
          </div>		
        </div>
        

        <div class="sec3__card" data-aos="fade-up" data-aos-delay="800">
          <div class="sec3__box">
            <div class="sec3__percent">              
              <div class="number">		
		<img src="image/img3.png"/>
                <!--<h2>Image<span>3</span></h2>-->
              </div>
            </div>
            <h2 style="text-align:center;" class="sec3__text">Scientific Calculator (GUI)<br>Written in: <span style="color:#ff6666;">C Language</span><br><br>This is an Adv GUI Calculator design<br> with C language. It performs both<br> Scientific and Basic Calculations.<br><br></h2>
          
		<a style="text-decoration:none;" href="https://github.com/The-Young-Programmer/C-CPP-Programming-Project/tree/main/Sci.%20Calculator%20(GUI)" target="_blank">  
		 <button>GitHub</button>
		  </a>	  
	 </div>
        </div>

        
        <div class="sec3__card" data-aos="fade-up" data-aos-delay="850">
          <div class="sec3__box">
            <div class="sec3__percent">
              <div class="number">		
		<img src="image/img4.jpeg"/>
                <!--<h2>Image<span>4</span></h2>-->
              </div>
            </div>
            <h2 style="text-align:center;" class="sec3__text">Neumorphic Calculator<br>Written in: <span style="color:#ff6666;">JS,HTML,CSS</span><br><br>A Calculator App designed with<br> simple UI in Neumorphic design styles.<br><br></h2>
		  
		  <a style="text-decoration:none;" href="https://the-young-programmer.github.io/Neumorphic-Calculator/" target="_blank">
		  <button>App</button>
		  </a>
          </div>
        </div>

        
        <div class="sec3__card" data-aos="fade-up" data-aos-delay="850">
          <div class="sec3__box">
            <div class="sec3__percent">
              <div class="number">
		
		<img src="image/img5.png"/>
                <!--<h2>Image<span>5</span></h2>-->
              </div>
            </div>
            <h2 style="text-align:center;" class="sec3__text">Voting System<br>Written in: <span style="color:#ff6666;">PHP, MySQL, JS,HTML,CSS,Bootstrap</span><br><br>This is a program that allows people<br> to securely and accurately conduct<br> votes and elections.<br><br></h2>
		  
		  <a style="text-decoration:none;" href="#" target="_blank">
		    <button>LIVE</button>
		  </a>
          </div>
        </div>

        
        <div class="sec3__card" data-aos="fade-up" data-aos-delay="900">
          <div class="sec3__box">
            <div class="sec3__percent">
              <div class="number">		
		<img src="image/img6.jpeg"/>
                <!--<h2>Image<span>6</span></h2>-->
              </div>
            </div>
            <h2 style="text-align:center;" class="sec3__text">Math Quiz App<br>Written in: <span style="color:#ff6666;">JS,HTML,CSS, React, XML, JAVA</span><br><br>This is created to Boost Human<br> knowledge in Mathematical calculations<br> and every day Life calculations.<br><br></h2>
          
	  <a style="text-decoration:none;" href="https://apkpure.com/p/com.typ.mathquiz" target="_blank">
	  <button>App</button>
	  </a>
	  </div>
        </div>
	

	 <div class="sec3__card" data-aos="fade-up" data-aos-delay="900">
          <div class="sec3__box">
            <div class="sec3__percent">
              <div class="number">		
		<img src="image/img17.jpg"/>
                <!--<h2>Image<span>7</span></h2>-->
              </div>
            </div>
            <h2 style="text-align:center;" class="sec3__text">Dictionary App<br>Written in: <span style="color:#ff6666;">JS,HTML,CSS, XML,JAVA</span><br><br>This a simple English Dictinary App that<br> helps in simplifyng the meaning of a world.<br><br></h2>
          
	  <a style="text-decoration:none;" href="https://the-young-programmer.github.io/Dictionary-App/" target="_blank">
	   <button>App</button>
	   </a>
	  </div>
        </div>
	

	<div class="sec3__card" data-aos="fade-up" data-aos-delay="950">
          <div class="sec3__box">
            <div class="sec3__percent">              
              <div class="number">		
		<img src="image/img2.jpg"/>
               <!-- <h2>Image<span>2</span></h2>-->
              </div>
            </div>
            <h2 style="text-align:center;" class="sec3__text">Shopping Site<br>Written in: <span style="color:#ff6666;">PHP, MySQL, JS,HTML,CSS</span><br><br>ABOUT Project goes here later on.<br><br></h2>
          
	  <a style="text-decoration:none;" href="https://github.com/The-Young-Programmer/Online-Shopping-Site" target="_blank">
	  <button>LIVE</button>
	  </a>
	  </div>
        </div>


	<div class="sec3__card" data-aos="fade-up" data-aos-delay="950">
          <div class="sec3__box">
            <div class="sec3__percent">
              <div class="number">		
		<img src="image/img8.jpg"/>
                <!--<h2>Image<span>8</span></h2>-->
              </div>
            </div>
            <h2 style="text-align:center;" class="sec3__text">Basic Calculator (GUI)<br>Written in: <span style="color:#ff6666;">C++</span><br><br>This is a normal GUI Basic<br> Mathematical Calculator develop in<br> C++ programming language.<br><br></h2>
          
	  <a style="text-decoration:none;" href="https://github.com/The-Young-Programmer/C-CPP-Programming-Project/tree/main/Basic%20Calculator%20(GUI)" target="_blank">
	    <button>GitHub</button>
	    </a>
	  </div>
        </div>


	<div class="sec3__card" data-aos="fade-up" data-aos-delay="1000">
          <div class="sec3__box">
            <div class="sec3__percent">
              <div class="number">		
		<img src="image/img7.png"/>
               <!-- <h2>Image<span>7</span></h2>-->
              </div>
            </div>
            <h2 style="text-align:center;" class="sec3__text">Hotel Management System<br>Written in: <span style="color:#ff6666;">C++ Language</span><br><br>This is based on the concept of<br> managing the hotel room’s bookings and <br>payments. In this system, there <br>are no login features.<br><br></h2>
          
	  
	  <a style="text-decoration:none;" href="https://github.com/The-Young-Programmer/C-CPP-Programming-Project/tree/main/Hotel%20Management%20System" target="_blank">
	  <button>GitHub</button>
	  </a></div>
        </div>

	
        <div class="sec3__card" data-aos="fade-up" data-aos-delay="1000">
          <div class="sec3__box">
            <div class="sec3__percent">
              <div class="number">		
		<img src="image/img9.jpeg"/>
               <!-- <h2>Image<span>7</span></h2>-->
              </div>
            </div>
            <h2 style="text-align:center;" class="sec3__text">Password Generator<br>Written in: <span style="color:#ff6666;">JS,HTML,CSS</span><br><br>ABOUT Project goes here later on<br><br></h2>
          
	  <a style="text-decoration:none;" href="#" target="_blank">
	  <button>LIVE</button>
	  </a>
	  </div>
        </div>


	<div class="sec3__card" data-aos="fade-up" data-aos-delay="1050">
          <div class="sec3__box">
            <div class="sec3__percent">
              <div class="number">		
		<img src="image/img18.jpg"/>
               <!-- <h2>Image<span>7</span></h2>-->
              </div>
            </div>
            <h2 style="text-align:center;" class="sec3__text">Hangman Game<br>Written in: <span style="color:#ff6666;">Python Language</span><br><br>The rules are simple; a player<br> writes down the first and last<br> letters of a word and another<br> player guesses the letters in between.<br><br></h2>
          
	  <a style="text-decoration:none;" href="https://github.com/The-Young-Programmer/Hangman-Game.py" target="_blank">
	    <button>GitHub</button>
	    </a>
	  </div>
        </div>

	
	<div class="sec3__card" data-aos="fade-up" data-aos-delay="1050">
          <div class="sec3__box">
            <div class="sec3__percent">
              <div class="number">		
		<img src="image/img10.jpg"/>
               <!-- <h2>Image<span>7</span></h2>-->
              </div>
            </div>
            <h2 style="text-align:center;" class="sec3__text">Face Recognition App<br>Written in: <span style="color:#ff6666;">C++ Language</span><br><br>ABOUT Project goes here later on<br><br></h2>
          	 
	  <a style="text-decoration:none;" href="#" target="_blank">
	   <button>GitHub</button>
	   </a>
	  </div>
        </div>


	<div class="sec3__card" data-aos="fade-up" data-aos-delay="1100">
          <div class="sec3__box">
            <div class="sec3__percent">
              <div class="number">		
		<img src="image/img11.jpg"/>
               <!-- <h2>Image<span>7</span></h2>-->
              </div>
            </div>
            <h2 style="text-align:center;" class="sec3__text">E-Commerce Website<br>Written in: <span style="color:#ff6666;">JS,HTML,CSS,BOOTSTRAP ,PHP</span><br><br>ABOUT Project goes here later on<br><br></h2>
          
	  <a style="text-decoration:none;" href="#" target="_blank">
	  <button>LIVE</button>
	  </a>
	  </div>
        </div>


	<div class="sec3__card" data-aos="fade-up" data-aos-delay="1100">
          <div class="sec3__box">
            <div class="sec3__percent">
              <div class="number">		
		<img src="image/img00.jpg"/>
               <!-- <h2>Image<span>7</span></h2>-->
              </div>
            </div>
            <h2 style="text-align:center;" class="sec3__text">Love Calculator (GUI)<br>Written in: <span style="color:#ff6666;"> JS,HTML,CSS</span><br><br>ABOUT Project goes here later on<br><br></h2>
          
	  <a style="text-decoration:none;" href="#" target="_blank">
	  <button>GitHub</button>
	  </a>
	  </div>
        </div>


	<div class="sec3__card" data-aos="fade-up" data-aos-delay="1150">
          <div class="sec3__box">
            <div class="sec3__percent">
              <div class="number">		
		<img src="image/img00.jpg"/>
               <!-- <h2>Image<span>7</span></h2>-->
              </div>
            </div>
            <h2 style="text-align:center;" class="sec3__text">Electricity Bill Calculator<br>Written in: <span style="color:#ff6666;">C Language</span><br><br>ABOUT Project goes here later on<br><br></h2>
          
	  <a style="text-decoration:none;" href="#" target="_blank">
	   <button>App</button>
	   </a>
	  </div>
        </div>


	<div class="sec3__card" data-aos="fade-up" data-aos-delay="1150">
          <div class="sec3__box">
            <div class="sec3__percent">
              <div class="number">		
		<img src="image/img00.jpg"/>
               <!-- <h2>Image<span>7</span></h2>-->
              </div>
            </div>
            <h2 style="text-align:center;" class="sec3__text">Advance Calculator (GUI)<br>Written in: <span style="color:#ff6666;">Python Language</span><br><br>ABOUT Project goes here later on<br><br></h2>
          
	  <a style="text-decoration:none;"href=" https://github.com/The-Young-Programmer/Advance-Calculator-in-Py-GUI.git" target="_blank">
	   <button>App</button>
	   </a>
	  </div>
        </div>


	<div class="sec3__card" data-aos="fade-up" data-aos-delay="1200">
          <div class="sec3__box">
            <div class="sec3__percent">
              <div class="number">
		<img src="image/img16.jpeg"/>
               <!-- <h2>Image<span>7</span></h2>-->
              </div>
            </div>
            <h2 style="text-align:center;" class="sec3__text">Automatic Timetable Creator<br>Written in: <span style="color:#ff6666;">JS,HTML,CSS,PHP </span><br><br>ABOUT Project goes here later on<br><br></h2>
          
	  <a style="text-decoration:none;" href="#" target="_blank">
	   <button>LIVE</button>
	   </a>
	  </div>
        </div>


	<div class="sec3__card" data-aos="fade-up" data-aos-delay="1200">
          <div class="sec3__box">
            <div class="sec3__percent">
              <div class="number">
		<img src="image/img13.jpg"/>
               <!-- <h2>Image<span>7</span></h2>-->
              </div>
            </div>
            <h2 style="text-align:center;" class="sec3__text">Archery Game<br>Written in: <span style="color:#ff6666;">JS,HTML,CSS</span><br><br>ABOUT Project goes here later on<br><br></h2>
          
	   <a style="text-decoration:none;" href="https://the-young-programmer.github.io/Archery-Game/" target="_blank">
	   <button>LIVE</button>
	   </a>
	  </div>
        </div>


	<div class="sec3__card" data-aos="fade-up" data-aos-delay="1250">
          <div class="sec3__box">
            <div class="sec3__percent">
              <div class="number">
		<img src="image/img14.png"/>
               <!-- <h2>Image<span>7</span></h2>-->
              </div>
            </div>
            <h2 style="text-align:center;" class="sec3__text">Sign-Up page (GUI)<br>Written in: <span style="color:#ff6666;">Python Language</span><br><br>This is a Simple Login/Sign In <br>page in Python (GUI) <br><br></h2>
          
	  <a style="text-decoration:none;" href="https://github.com/The-Young-Programmer/Login-Sign-In-Page-GUI" target="_blank">
	   <button>GitHub</button>
	   </a>
	  </div>
        </div>


	<div class="sec3__card" data-aos="fade-up" data-aos-delay="1250">
          <div class="sec3__box">
            <div class="sec3__percent">
              <div class="number">
		<img src="image/img15.jpeg"/>
               <!-- <h2>Image<span>7</span></h2>-->
              </div>
            </div>
            <h2 style="text-align:center;" class="sec3__text">Bank Management System<br>Written in: <span style="color:#ff6666;">C++ Language</span><br><br>ABOUT Project goes here later on<br><br></h2>
          
	  <a style="text-decoration:none;" href="https://github.com/The-Young-Programmer/C-CPP-Programming-Project/tree/main/Bank%20Management%20System" target="_blank">
	   <button>GitHub</button>
	   </a>
	  </div>
        </div>


	<div class="sec3__card" data-aos="fade-up" data-aos-delay="1300">
          <div class="sec3__box">
            <div class="sec3__percent">
              <div class="number">
		<img src="image/img00.jpg"/>
               <!-- <h2>Image<span>7</span></h2>-->
              </div>
            </div>
            <h2 style="text-align:center;" class="sec3__text">Tic-Tac-Toe Game<br>Written in: <span style="color:#ff6666;">C Language</span><br><br>ABOUT Project goes here later on<br><br></h2>
          
		  <a style="text-decoration:none;" href="#" target="_blank">
	   <button>GitHub</button>
	   </a>
		</div>         
	 </div>
		
        </div>
	</section>


	 <section class="sec3" id="section3">	
        <h1> Working On:</h1>
	<div class="sec3__container">
        <div class="sec3__card" data-aos="fade-up" data-aos-delay="1200">
          <div class="sec3__box">
            <div class="sec3__percent">
              <div class="number">
		<img src="image/img00.jpg"/>
               <!-- <h2>Image<span>7</span></h2>-->
              </div>
            </div>
            <h2 style="text-align:center;" class="sec3__text">TEST<br>Written in: <span style="color:#ff6666;">JS,HTML,CSS</span><br><br>ABOUT Project goes here later on<br><br></h2>
          
		 <a style="text-decoration:none;" href="#" target="_blank">
	   <button>GitHub</button>
	   </a>
		</div>
        </div>

	</div>
	</section>


	<!--	THIS WAS MADE COMMENT IN OTHER TO ADD MORE PROJECTS
                
        <div class="sec3__card" data-aos="fade-up" data-aos-delay="1200">
          <div class="sec3__box">
            <div class="sec3__percent">
              <svg>
                <circle cx="70" cy="70" r="70"></circle>
                <circle cx="70" cy="70" r="70"></circle>
              </svg>
              <div class="number">
                <h2>Image<span>9</span></h2>
              </div>
            </div>
            <h2 class="sec3__text">Project Name<br>ABOUT Project goes here later on</h2>
          </div>
        </div>
        
        <div class="sec3__card" data-aos="fade-up" data-aos-delay="1300">
          <div class="sec3__box">
            <div class="sec3__percent">
              <svg>
                <circle cx="70" cy="70" r="70"></circle>
                <circle cx="70" cy="70" r="70"></circle>
              </svg>
              <div class="number">
                <h2>Image<span>10</span></h2>
              </div>
            </div>
            <h2 class="sec3__text">Project Name<br>ABOUT Project goes here later on</h2>
          </div>
        </div>
        
        <div class="sec3__card" data-aos="fade-up" data-aos-delay="1300">
          <div class="sec3__box">
            <div class="sec3__percent">
              <svg>
                <circle cx="70" cy="70" r="70"></circle>
                <circle cx="70" cy="70" r="70"></circle>
              </svg>
              <div class="number">
                <h2>Image<span>11</span></h2>
              </div>
            </div>
            <h2 class="sec3__text">Project Name<br>ABOUT Project goes here later on</h2>
          </div>
        </div>

        <div class="sec3__card" data-aos="fade-up" data-aos-delay="1300">
          <div class="sec3__box">
            <div class="sec3__percent">
              <svg>
                <circle cx="70" cy="70" r="70"></circle>
                <circle cx="70" cy="70" r="70"></circle>
              </svg>
              <div class="number">
                <h2>Image<span>12</span></h2>
              </div>
            </div>
            <h2 class="sec3__text">Project Name<br>ABOUT Project goes here later on</h2>
          </div>
        </div>
        </div>
     </section>	
		END OF COMMENT -->
	

	<!--  	THIS WAS MADE COMMENT IN OTHER TO ADD MORE WORKING ON PROJECTS
 
      <section class="sec3" id="section3">     	
        <h1> Working On:</h1>
	<div class="sec3__container">
        <div class="sec3__card" data-aos="fade-up" data-aos-delay="1500">
          <div class="sec3__box">
            <div class="sec3__percent">
              <svg>
                <circle cx="70" cy="70" r="70"></circle>
                <circle cx="70" cy="70" r="70"></circle>
              </svg>
              <div class="number">
                <h2>CEH<span>v8</span></h2>
              </div>
            </div>
            <h2 class="sec3__text">BASIC hacking</h2>
          </div>
        </div>

        <div class="sec3__card" data-aos="fade-up" data-aos-delay="1500">
          <div class="sec3__box">
            <div class="sec3__percent">
              <svg>
                <circle cx="70" cy="70" r="70"></circle>
                <circle cx="70" cy="70" r="70"></circle>
              </svg>
              <div class="number">
                <h2>CEH<span>v10</span></h2>
              </div>
            </div>
            <h2 class="sec3__text">ADVANCE hacking</h2>
          </div>
        </div>

        <div class="sec3__card" data-aos="fade-up" data-aos-delay="1600">
          <div class="sec3__box">
            <div class="sec3__percent">
              <svg>
                <circle cx="70" cy="70" r="70"></circle>
                <circle cx="70" cy="70" r="70"></circle>
              </svg>
              <div class="number">
                <h2>CEH<span>v11</span></h2>
              </div>
            </div>
            <h2 class="sec3__text">MASTER hacking</h2>
          </div>
        </div>
   
        <div class="sec3__card" data-aos="fade-up" data-aos-delay="1600">
          <div class="sec3__box">
            <div class="sec3__percent">
              <svg>
                <circle cx="70" cy="70" r="70"></circle>
                <circle cx="70" cy="70" r="70"></circle>
              </svg>
              <div class="number">
                <h2>CEH<span>v12</span></h2>
              </div>
            </div>
            <h2 class="sec3__text">SATELLITE hacking</h2>
          </div>
        </div>
        </div>
    </section>
		END OF COMMENT -->


    <section class="sec4" id="section4">
      <div class="sec4__container">
        <div class="sec4__box1">
          <div class="sec4__content1" data-aos="fade-right">
            <h2>Nemo<span>Net</span>👽</h2>
            <p>
              Sometimes it is hard to introduce yourself because you know yourself so well that you do not know where to start with. <br />
              Let me give a try to see what kind of image you have about me through my self-description. I hope that my impression about myself and your impression about me are not so different.<br /><br />
            If you are interested in knowing more, contact me. Do not expect too much, and keep your sense of humor.
            </p>
          </div>
          <div
            class="sec4__content2"
            data-aos="fade-right"
            data-aos-delay="200"
          >
            <div class="sec4__content2Icon">
              <i class="fas fa-phone-alt"></i>
              <h2><a style="color: white", href="+012-345-6789">+012-345-6789</a></h2>
            </div>
            <div class="sec4__content2Icon">
              <i class="fas fa-envelope"></i>
              <h2><a style="color: white", href="+012-345-6789">+012-345-6789</a></h2>
            </div>
          </div>
          <div
            class="sec4__content3"
            data-aos="fade-right"
            data-aos-delay="500"
          >
            <ul> 
	      <li>
                <a href="https://www.linkedin.com/in/typ-nemonet"><i class="fab fa-linkedin"></i></a>
              </li>
              <li>
                <a href="https://www.instagram.com/invites/contact/?i=tpssan2t0kkn&utm_content=3zo4x47"><i class="fab fa-instagram"></i></a>
              </li>
              <li>
                <a href="https://telegram.com"><i class="fab fa-telegram"></i></a>
              </li>            
              <li>
                <a href="https://twitter.com/TNemonet?s=09"><i class="fab fa-twitter"></i></a>
              </li>
              <li>
                <a href="https://github.com/The-Young-Programmer"><i class="fab fa-github"></i></a>
              </li>
            </ul>
          </div>
        </div>
        <div class="sec4__box2" data-aos="fade-in" data-aos-delay="500">
          <h2>Quick links</h2>
          <div class="sec4__links">
            <ul>
              <li><a href="#section1">Home</a></li>
              <li><a href="#section2">About</a></li>
              <li><a href="#section3">Projects</a></li>
	      <li>
	      <a href="https://github.com/Team-TYP" target="_blank">Developers</a>
	     </li>
            </ul>
          </div>
        </div>
        <div class="sec4__box3">
          <h2>Contact Us</h2>
          <form>
          <input
              data-aos="fade-left"
              data-aos-delay="500"
              class="sec4__name"
              type="text"
              placeholder="Enter your Name"
            />
            <input
              data-aos="fade-left"
              data-aos-delay="800"
              class="sec4__email"
              type="email"
              placeholder="Enter your Email"
            />
            <input
              class="sec4__message"
              data-aos="fade-left"
              data-aos-delay="1000"
              type="text"
              placeholder="enter the feedback or suggestion"
            />
            <button type="submit">send</button>
          </form>
        </div>
      </div>
    </section>
    
        <footer>
      <div class="footer-body">
         <div> The Young Programmer</div>
         <br />
         <div>
            <p> The Life of a Programmer, error 404 sleep not found.<br />
            We have no life, we are just a machine that turns coffe into code.</p>
            <ul>
		 <li><a href="https://github.com/The-Young-Programmer"> Github </a></li>
               <li><a href="https://telegram.com"> Telegram </a></li> 
	       <li><a href="https://www.instagram.com/invites/contact/?i=tpssan2t0kkn&utm_content=3zo4x47"> Instagram </a></li>
               <li><a href="https://twitter.com/TNemonet?s=09"> Twitter </a></li>
		<li><a href="https://www.linkedin.com/in/typ-nemonet">LinkedIn </a></li>
            </ul>
         </div>
      </div>
      <div class="footer-copyright">
         © The Young Programmer | Nemonet. 
      </div>
   </footer>

    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js"
      integrity="sha512-cdV6j5t5o24hkSciVrb8Ki6FveC2SgwGfLE31+ZQRHAeSRxYhAQskLkq3dLm8ZcWe1N3vBOEYmmbhzf7NTtFFQ=="
      crossorigin="anonymous"
    ></script>
    <script>
      const tl = gsap.timeline({ defaults: { ease: "power1.out" } });

      tl.from(".navBar", { y: "-10rem", duration: 1 });
      tl.from(".navBar .navBar__menu ul li", {
        y: "-2rem",
        opacity: 0,
        duration: 1,
        stagger: 0.25,
      });
      tl.to(
        ".sec1__content .sec1__contentDetail h1",
        { y: "0rem", duration: 1, stagger: 0.25 },
        "=-1"
      );
      tl.from(".sec1__imgBx img", { opacity: 0, x: "50%", duration: 1.5 });
      tl.from(
        ".sec1__imgBx .sec1__design1",
        { opacity: 0, x: "3rem", duration: 1.5 },
        "=-1"
      );
      tl.from(
        ".sec1__imgBx .sec1__design2",
        { opacity: 0, x: "-3rem", duration: 1.5 },
        "=-1"
      );
      tl.from(
        ".sec1__design3",
        { opacity: 0, x: "-30%", duration: 1.5 },
        "=-2"
      );
      tl.from(".sec1__design4", { opacity: 0, duration: 1.5 }, "=-2");
      tl.from(".sec1__content a", { opacity: 0, duration: 1.5 }, "=-3");
    </script>
    <!-- our AOs will occur here -->
    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
    <script>
      AOS.init({
        duration: 1000,
        offset:0,
      });
    </script>
    <script>
      var sec1__menuIcon = document.querySelector(".sec1__menuIcon");
      var menuBar = document.querySelector(".menuBar");
      sec1__menuIcon.addEventListener("click", function () {
        sec1__menuIcon.classList.toggle("active");
        menuBar.classList.toggle("active");
      });
    </script>
    <script type = "text/javascript">
        window.addEventListener('scroll',function(){
            var scroll = document.querySelector('.fa');
            scroll.classList.toggle("active",window.scrollY>500)
        })
        function scrollToTop(){
            window.scrollTo({
                top:0,
                behavior:'smooth'
            })
        }
    </script>
  </body>
</html>