given8.github.io/index.html at master · given8/given8.github.io · 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
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
<!DOCTYPE html>
<html lang="en">

<head>
  <script src="https://kit.fontawesome.com/72bd56f807.js" crossorigin="anonymous"></script>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta property="og:title" content="Given Tshuma" />
  <meta property="og:description" content="My personal website that showcases some of my work" />
  <meta property="og:url" content="given8.github.io" />
  <meta property="og:image" content="https://given8.github.io/images/favicon.ico" />

  <title>Given</title>
  <link rel="stylesheet" href="all.css" />
  <link rel="stylesheet" href="style.css" />
  <link rel="icon" href="https://given8.github.io/images/favicon.ico" type="image/x-icon" />
</head>

<body>
  <nav role="navigation">
    <a href="#" class="logo">Portfolio</a>
    <div class="toggle"></div>
    <ul class="menu">
      <li><a href="#home">Home</a></li>
      <li><a href="#about">About</a></li>
      <li><a href="#services">Skills</a></li>
      <li><a href="#work">Past Work</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
  </nav>
  <main role="main">
    <section class="banner" id="home">
      <video src="background.mp4" defer muted loop autoplay class="bgVid"></video>
      <div class="textBx">
        <h2>Hello,<br /><span>My name is Given.</span></h2>
        <h3>I am a Software Developer.</h3>
        <a href="#about" class="btn">About Me</a>
        <a href="GivenTshumaDevCV.pdf" class="btn">CV</a>
      </div>
    </section>
    <section class="about" id="about">
      <div class="heading">
        <h2>About Me</h2>
      </div>
      <div class="content">
        <div class="contentBx w50">
          <h3>I am a Software Engineer.</h3>
          <p>
            Greetings, I am a software developer from South Africa with a background in mechanical
            engineering. I have been programming professionally for 5 years with in office, hybrid and remote roles for local and international companies.
          </p>
          <br />
          <p>
            My career includes mobile, frontend and backend experience. I dabble in technologies
            I find interesting in my spare time. However, I'm keen on strengthening my skills in the
            backend space so that I can build better applications.
          </p>
          <br>
          <p>

          </p>
        </div>
      </div>
    </section>
    <section class="services" id="services">
      <div class="heading white">
        <h2>Programming Languages</h2>
      </div>
      <div class="content">
        <div class="servicesBx">
          <h2>Javascript</h2>
        </div>
        <div class="servicesBx">
          <h2>Dart</h2>
        </div>
        <div class="servicesBx">
          <h2>Ruby</h2>
        </div>
        <div class="servicesBx">
          <h2>Go</h2>
        </div>
      </div>
      <div class="heading white">
        <h2>Frameworks/Technologies</h2>
      </div>
      <div class="content">
        <div class="servicesBx">
          <h2>Flutter</h2>
        </div>
        <div class="servicesBx">
          <h2>React</h2>
        </div>
        <div class="servicesBx">
          <h2>Firebase</h2>
        </div>
        <div class="servicesBx">
          <h2>Ruby on Rails</h2>
        </div>
      </div>
    </section>
    <section class="work" id="work">
      <div class="heading">
        <h2>Past Projects</h2>
        <p>These are projects that I have done either by myself or in a team</p>
      </div>
      <div class="content">
        <div class="workBx">
          <img src="images/savr.png" alt="SavrIcon" srcset="" class="appIcon" />
          <div class="projectCnt">
            <p>
              The Savr mobile app was designed to help users find the cheapest price for their
              groceries. Prices were scraped from 3 South African Retailers and
              the user would be allowed to optimise their grocery list for the
              lowest prices.
            </p>
          </div>
        </div>
        <div class="workBx">
          <img src="images/tip.png" alt="tipIcon" srcset="" class="appIcon" />
          <p>
            This web app was made by following a design made on front end
            mentor. It allows users to calculate tips and the total bill per
            person. The app makes use of RxJs, Parcel and Sass. The app is
            available
            <a href="https://pedantic-ardinghelli-a98a0b.netlify.app/" class="link" target="_blank">here</a>
          </p>
        </div>
        <div class="workBx">
          <img src="images/lunchbox.png" alt="" srcset="" class="appIcon" />
          <p>
            This is an app called Lunchbox that I developed alone for a local
            organisation. This application was designed to help meeting
            participants place orders to the catering team so they know how many
            meals to make.
          </p>
        </div>
        <div class="workBx">
          <img src="images/VTradeIcon2.png" alt="" srcset="" class="appIcon" />
          <div class="projectCnt">
            <p>
              This is an app called Vtrade that I developed with a co-developer.
              The app was designed to allow university students buy and sell
              textbooks
            </p>
          </div>
        </div>
        <div class="workBx">
          <img src="images/EngConverter.png" alt="EngConverter" srcset="" class="appIcon" />
          <p>
            This application was developed using Electron JS. It was designed to
            help me in my day to day tasks as a mechanical engineer. It converts
            uncommon imperial units like KIPS to metric.
          </p>
        </div>
        <div class="workBx">
          <img src="images/wmsEventsIcon.png" alt="wmsEventsIcon" srcset="" class="appIcon" />
          <p>
            This application was developed using in Android Studio using Java.
            It integrated with Google calendar to create and delete
            appointments. It was made to help manage schedule events and
            meetings for a society that I was a part of.
          </p>
        </div>
      </div>
    </section>
  </main>
  <footer role="footer">
    <section class="contact">
      <div class="heading white">
        <h2>Contact Me</h2>
        <p>Please contact me if you would like to know more</p>
      </div>
      <div class="content">
        <div class="contactBx">
          <a href="https://www.linkedin.com/in/given-tshuma-59460068/">
            <i class="fab fa-linkedin"></i>
          </a>
        </div>
        <div class="contactBx">
          <a href="mailto:given8@gmail.com">
            <i class="fas fa-envelope" alt="click to send an email to the website creator"></i>
          </a>
        </div>
      </div>
    </section>
  </footer>
  <script src="index.js"></script>
</body>

</html>