aayanpathan.com/index.html at main · SyntaxSnipes/aayanpathan.com · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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=Comfortaa:wght@300;400;600;700&display=swap" rel="stylesheet">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mohammed Aayan Pathan</title>
    <link rel="stylesheet" href="styles/style.css">
    <link rel="apple-touch-icon" sizes="180x180" href="AAYANICON/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="AAYANICON/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="AAYANICON/favicon-16x16.png">
    <link rel="manifest" href="AAYANICON/site.webmanifest">
</head>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-TVH7K7MMYG"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-TVH7K7MMYG');
</script>

<body>
    <section id="sectionone" class="hidden">
        <div id="introText">
            <h3>Hey, it's me,</h3>
            <h1>Aayan<span class="blinking-cursor">|</span></h1>
            <p>An upcoming, aspiring novice front-end web developer who loves to code and create software. I have 5 years of general programming experience, with about a year of Web Development experience. </p>
        </div>
        <img src="images/aayanpicture.png" alt="Aayan's Picture">

    </section>
    <nav>
    <a href="index.html"><h3>Mohammed Aayan Pathan</h3></a>

    <a href="contact.html" id="link">Contact</a></li>

    </nav>
    <section id="sectiontwo" class="hidden s2">
        <div id="aboutme" class="hidden s2">
                <h2>About me</h2>
                <p>I'm Mohammed Aayan Pathan. I am 16 years old, and I am from India though currently residing and studying in the UAE. I have been fascinated by technology since I was a toddler, and ever since, I've been on a journey to understand and leverage technology for practically everything! I am currently in Year 12, on my first year of the A Level course in GEMS Founders School Al Barsha.</p>
        </div>
        <div id="programmingjourney" class="hidden s2">
            <h2>My Coding Journey</h2>
            <p>I began my programming journey in Middle School (Year 7) during the pandemic in 2020. Starting with Python, I aimed to grasp the basics of coding. I created projects like interactive quiz games and a simple "data-base" apps for my Year 8 class.

                Later, I dabbled in crafting apps for Apple devices like the iPhone and Mac, using Swift and SwiftUI. However, this pursuit didn't fully satisfy me, and I stopped doing it.

                After a year focused on my studies, I revived my programming interest. Web development stood out due to its accessibility and relevance. The field brimmed with options, technologies, and frameworks. I learned the basic of web development, and am now learning new frameworks such as Node/Express and React/</p>
        </div>
        <div id="myacademics" class="hidden s2">
            <h2>My Academics</h2>
            <p>As of 2025, I am currently doing my A Levels., taking the following subjects: Math, Further Math, Physics and Computer Science. I have attained 999988877 in my GCSEs</p>
        </div>
        <div id="myexpertise" class="hidden s2">
            <h2>My Expertise</h2>
                <p>I am  interested in Mathematics, especially in Algebra, Trigonometry and Calculus. I can converse and speak English fluently, with my second langauge being JavaScript. I'm educated and learning about AI and ML technologies to enhance and streamline my workflows. I can easily adapt to the rapidly changing landscape of SWE.</p>
        </div>
        <div id="myprojects" class="hidden s2">
            <h2>My Projects</h2>
            <span id="projects">
                <span class="hidden freeze" id="p1">
                    <img src="images/ibrahgif.gif" alt="">
                    <span id="projDesc">
                        <h3>M-IB:08 Product Website</h3>
                        <p>Created a product placement and store website, taking aspects from popular technology company websites to showcase the robot M:IB-08 - Built with Vanilla HTML, CSS, and JavaScript - <a href="https://syntaxsnipes.github.io/Splash-Page/">See here</a></p>
                    </span>
                </span>
                <span class="hidden freeze" id="p2">
                    <img src="images/PLACEHOLDER.jpg" alt="Coming soon">
                    <span id="FormulaMetric">
                        <h3>FormulaMetric</h3>
                        <p>A revolutionary app that tracks F1 drivers' performance in an objective and easy to use manner, with ReactJS + Tailwind, Node, Express and MySQL</p>
                    </span>
                </span>
                <span class="hidden freeze" id="p3">
                    <img src="images/PLACEHOLDER.jpg" alt="">
                    <span id="projDesc">
                        <h3>Lorem ipsum dolor sit amet.</h3>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo recusandae exercitationem vero et voluptatibus reprehenderit?</p>
                        </span>
                </span>
            </span>
        </div>
    </section>

    <section id="sectionthree">
        <h3>If you wish to contact me, press the button below! </h3>
        <a href="contact.html"><h4>Contact Me!</h4></a>
    </section>

<script src="index.js"></script>
</body>
</html>