portfolio/index.html at main · tmjoris/portfolio · 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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Tanga's Portfolio</title>
  <link rel="icon" type="image/x-icon" href="favicon.ico"/>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <header>
    <nav class="navbar">
      <div class="logo">Welcome to my Portfolio</div>
      <ul class="nav-links">
        <li><a href="#home">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#projects">Projects</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </nav>
  </header>

  <section id="home" class="section">
    <h1>Hello, I'm <span class="highlight">Tanga Joris</span></h1>
    <p>a CS student who fell in love with web development.</p>
    <img src="Image2025-05-21.jpeg" height="300">
  </section>

  <section id="about" class="section">
    <h2>About Me</h2>
    <p>
        I study Applied Computer Technology at United States International University - Africa.
        But that is not all I do, I find time to develop platforms in areas I find interesting.
        When it comes to my passion, optimizing performance takes the lead.
        That is part of the reason I love Backend Development and Competitive Programming.
    </p>
  </section>

  <section id="projects" class="section">
    <h2>Projects</h2>
    <div class="project-grid">
      <div class="project-card">
        <h3>Maji ya Umma</h3>
        <p>
            A water billing system which is meant to assist customers track their water usage and make billing payments.
            This project was motivated by the problem of water usage tracking and billing in Nairobi localities from Nairobi Water and Sewarage Company
            which would bill homes but won't provide information on the usage.
        </p>
        <div style="display: flex; justify-content: center; margin-top: 20px;">
         <a
            id="Link"
            href="https://majiyaumma.onrender.com"
            target="_blank"
            rel="noopener noreferrer"
            onmouseover="this.style.backgroundColor='#125ea5'"
            onmouseout="this.style.backgroundColor='#191c1c'"
          >
            Try it out
          </a>
        </div>
        <a href="https://majiyaumma.onrender.com">
            <div class="iframe-container">
                <iframe
                src="https://majiyaumma.onrender.com"
                title="Maji ya Umma Preview"
                loading="lazy"
                frameborder="0">
                </iframe>
            </div>
        </a>
      </div>
      <div class="project-card">
        <h3>ElderCare</h3>
        <p>
            A platform created to ease communication between different healthcare providers in an elderly home setting.
            It will achieve this by helping link nurses, doctors, caregivers and patients.
            It would also allow patients to book appointments with the care providers, and the care providers to digitally record prescriptions among many other features.
        </p>
        <div style="display: flex; justify-content: center; margin-top: 20px;">
         <a
            id="Link"
            href="https://eldercarekali.onrender.com"
            target="_blank"
            rel="noopener noreferrer"
            onmouseover="this.style.backgroundColor='#125ea5'"
            onmouseout="this.style.backgroundColor='#191c1c'"
          >
            Try it out
          </a>
        </div>
        <a href="https://eldercarekali.onrender.com">
            <div class="iframe-container">
              <iframe
              src="https://eldercarekali.onrender.com"
              title="ElderCare Preview"
              loading="lazy"
              frameborder="0">
              </iframe>
            </div>
        </a>
      </div>
    </div>
  </section>

  <section id="contact" class="section">
    <h2>Contact</h2>
    <p>If you'd like to get in touch <a href="mailto:tangajoris@gmail.com">email</a> is your best bet</p>
    <div class="image-grid">
        <div class="image-card">
        <p> <a href="https://www.linkedin.com/in/joris-tanga">
            <img src="linkedinLogo.png" height="50">
            </a>
        </div>
        <div class="image-card">
            <a href="https://github.com/tmjoris">
                <img src="github.png" height="50">
            </a>
        </div>
        </div>
        </p>
  </section>

  <footer>
    <p>© 2025 Tanga Joris. All rights reserved.</p>
  </footer>

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