act-programming-project/index.html at master · reksavertx/act-programming-project · 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
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Hello World</title>
  <link href='styles/styles.css' rel='stylesheet'>

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css" integrity="sha512-2SwdPD6INVrV/lHTZbO2nodKhrnDdJK9/kg2XD1r9uGqPo1cUbujc+IYdlYdEErWNu69gVcYgdxlmVmzTWnetw==" crossorigin="anonymous" referrerpolicy="no-referrer" />

  <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=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
</head>
<body>
  <!--NAVBAR-->
  <nav>
    <div class="left">
      <a href="/">FATHAN AL GATHA</a>
    </div>
    <div class="right">
      <a href="http://github.com/algatha" target="_blank" rel="noopener noreferrer">
        <i class="fa-brands fa-github"></i>
        <span>Github</span>
      </a>

      <a href="http://duolingo.com/profile/FATHANALGATHA?via=share_profile_link" target="_blank" rel="noopener noreferrer">
        <i class="fa-brands fa-duolingo"></i>
        <span>Duolingo</span>
      </a>

      <a href="mailto:gebra.gatha@proton.me" target="_blank" rel="noopener noreferrer">
        <i class="fa-solid fa-envelope"></i>
        <span>Email</span>
      </a>

    </div>
  </nav>

  <main>
    <!--Section 1: Hero-->
    <section class="hero-section">
      <div class="text">
        <h2>Hi, I'm Than  </h2>
        <p>I’m a vocational high school student majoring in Computer and Network Engineering. I’m really passionate about technology, especially cybersecurity, web development, and blockchain. Sometimes I lose motivation, but deep down I have big ambitions to keep learning and improving myself. Outside of school, I love exploring topics like bug bounty, ethical hacking, backend engineering, and even digital finance. I see myself as a curious learner who’s always looking for new challenges and ways to grow in the fast-changing world of technology.</p>

        <div class="links">
          <a href="#skills">
            <i class="fa-solid fa-code"></i>
            <span>Skills</span>
          </a>

          <a href="#testimony">
            <i class="fa-solid fa-pen"></i>
            <span>Testimony</span>
          </a>

          <a href="#contact">
            <i class="fa-solid fa-envelope"></i>
            <span>Contact</span>
          </a>
        </div>
      </div>

      <div class="headshot">
        <img src="images/hero-headshot.jpg" alt="FATHAN AL GATHA">
      </div>
    </section>

    <!--Section 2: Skills-->
    <section id="skills" class="skills-section">
      <h2>Skills</h2>
      <div class="text">I have foundational skill in HTML, CSS, PYTHON, JAVASCRIPT AND LINUX CLI, allowing me to create static wweb page, install some package, write simple script, handle logic and navigate system commands confiedenly as a growing learner</div>

      <div class="cells">
        <div class="cell">
          <img src="images/html-logo-removebg-preview.png" alt="html logo">
          <span>HTML</span>
        </div>

        <div class="cell">
          <img src="images/css-logo-removebg-preview.png" alt="css logo">
          <span>CSS</span>
        </div>

        <div class="cell">
          <img src="images/python-logo-removebg-preview.png" alt="python logo">
          <span>PYTHON</span>
        </div>

        <div class="cell">
          <img src="images/linux-logo-removebg-preview.png" alt="linux logo">
          <span>LINUX</span>
        </div>

        <div class="cell">
          <img src="images/js-logo-removebg-preview.png" alt="javascript logo">
          <span>JAVASCRIPT</span>
        </div>


      </div>
    </section>

    <!--Section 3: TESTIMONY-->
    <section id="Testimony" class="testimony-section">
      <h2>Testimony</h2>

      <div class="group">
        <div class="person-details">
          <img src="images/testimony-headshot.jpg" alt="person testimony photo" >
          <p>X_ALCHEMIST</p>
          <p>Anonym Trader</p>
        </div>

        <div class="teks">
          "I’ve studied with Than across coding, finance, blockchain, and English, and watching his growth has been impressive. He pushes himself even when unsure, asks sharp questions, and absorbs concepts quickly. His consistency is rising fast, and I’m confident he’ll become a strong engineer with real impact in the future.."
        </div>
      </div>
    </section>

    <!--Section 4: Contact-->
    <section id="contact" class="contact-section">
      <h2>CONTACT</h2>

      <div class="group">
        <div class="text">Anyone is welcome to connect, learn, or grow together with me. You can share ideas, advice, or even criticisms through the section below. I’m always open to collaboration and improving alongside others who share the same passion..</div>

        <form>
          <label for="name">Name</label>
          <input type="text" id="name">

          <label for="email">Email</label>
          <input type="email" id="email">

          <label for="message">Message</label>
          <textarea id="message" cols="30" rows="10"></textarea>
          <button type="submit">Send Message</button>
        </form>
      </div>
    </section>

  </main>

</body>
</html>