portfolio/index.html at master · reckdata/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
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
191
192
193
194
195
196
197
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, minimum-scale=1">
    <meta charset="utf-8">
    <link rel="stylesheet" href="assets/css/styles.css">
    <title>Full-Stack Developer - Muthoni Ethan</title>
    <!-- <script src="assets/js/script.js"> -->

  </head>
  <body>
    <header class="navigation">
      <nav class="navbar">
        <a href="#home" class="name" title="Ethan Muthoni">reckafella</a>
        <div class="menu-icon" onclick="this.classList.toggle('hover'); Drop(0)">
          <div class="menubar menubar1"></div>
          <div class="menubar menubar2"></div>
          <div class="menubar menubar3"></div>
        </div>
      </nav>
      <ul id="menu">
        <li class="nav-item"><a href="#home" class="nav-item-link" title="Home">Home</a></li>
        <li class="nav-item"><a href="#about" class="nav-item-link" title="About me">About</a></li>
        <li class="nav-item"><a href="#skills" class="nav-item-link" title="My Skills">Skills</a></li>
        <li class="nav-item"><a href="#projects" class="nav-item-link" title="Projects">Projects</a></li>
        <li class="nav-item"><a href="#contacts" class="nav-item-link" title="Contact me">Contact</a></li>
      </ul>

    </header>

    <div class="main">
      <div id="home">
        <div class="intro-content">
          <p><span class="bold-text">Hello World,</span>
          <br>I am Ethan</p>
          <p class="developer-role">A Full Stack Developer</p>
          <div class="portfolio-resume">
            <a class="button" href="#projects">Portfolio</a>
            <a class="button" href="assets/docs/resume.pdf" target="_blank">Resume.pdf</a>
          </div>
        </div>
      </div>
      <div id="about">
        <div class="about-me">
          <p>Profile</p>
          <p>ALL ABOUT ME</p>
        </div>
        <!-- <hr class="separator"> -->
        <div class="description">
          <div class="desc_par">
            <div class="profile-image"></div>
            <p>FullStack Developer - Nairobi, Kenya</p>
            <p>Hello there,</p>
            <p>I am an Economics and Statistics graduate. However, what I know about web development is all self-taught.
              I enjoy building software applications that go a long way to help solve personal and business challenges.</p>
            <p>Being exposed to tech tools at the University, my urge to get into the Tech World intensified.
              I have learned how to build cool applications in Python and JavaScript in just months. I consider the day I wrote my fist piece of code, "hello, world!" to be the happiest day of my life.
              The joy that comes with building really amazing applications has been my drive. When not coding, you will either find me taking walks around the neighborhood, or playing mobile and console games.</p>
          </div>

        </div>
      </div>
      <!-- <hr class="separator"> -->
      <div id="skills">
        <p>Skills</p>
        <p class="expertise">MY AREA OF EXPERTISE</p>
        <div class="skills-icons">
          <a href="#" title="Data Analysis"><img src="assets/icons/skills/data-analysis-r-python-spss-excel.webp" alt="Data Analysis with R, Python, SPSS, EXCEL"></a>
          <a href="#" title="Database Design and Development"><img src="assets/icons/skills/postgresql.webp" alt="postgresql"></a>
          <a href="#" title="Data Visualization with Python"><img src="assets/icons/skills/python.webp" alt="Python Programming"></a>
          <a href="#" title="Web Development with Flask"><img src="assets/icons/skills/flask.webp" alt="Flask"></a>
          <a href="#" title="Web Development with Django"><img src="assets/icons/skills/django.webp" alt="django"></a>
          <a href="#" title="Web page manipulation with JavaScript"><img src="assets/icons/skills/js.webp" alt="JavaScript Programming"></a>
          <a href="#" title="Bootstrap for Web page manipulation"><img src="assets/icons/skills/bootstrap.webp" alt="bootstrap"></a>
          <a href="#" title="Angular JS"><img src="assets/icons/skills/angular.webp" alt="angular"></a>
          <a href="#" title="JQuery for Data Manipulation"><img src="assets/icons/skills/jquery.webp" alt="jquery"></a>
          <a href="#" title="Web Development with HTML and CSS"><img src="assets/icons/skills/html5.webp" alt="HTML5"></a>
          <a href="#" title="Web manipulation with Ajax"><img src="assets/icons/skills/ajax.webp" alt="ajax"></a>
        </div>
      </div>
      <div id="projects">
        <p>Projects</p>
        <p>Projects</p>
        <p>Welcome to My World</p>
        <div class="projects">
          <div class="card card1" title="Data Analysis Project">
            <!-- <img class="card_img"src="assets/img/data-analysis.jpeg" alt="Data Analysis - Python3"> -->
            <a class="card_button" href="#">
              <p class="card_h3">Data Analysis</p>
              View Project on GitHub</a>
          </div>
          <div class="card card2" title="Journal Catalogue Project">
            <!-- <img class="card_img"src="assets/img/icons/journal-catalogue.png" alt="Journal Catalogue project"> -->
            <a class="card_button" href="#">
              <p class="card_h3">Journals Catalogue</p>
              View Project on GitHub</a>
          </div>
          <div class="card card3" title="ACCA Study Planner Project">
            <!-- <img class="card_img"src="assets/img/icons/acca-study-planner.jpg" alt="Study planner planner"> -->
            <a class="card_button" href="#">
              <p class="card_h3">ACCA Study Planner</p>
              View Project on GitHub</a>
          </div>
          <div class="card card4" title="Photo Gallery Project">
              <!-- <img class="card_img"src="assets/img/wd1.jpeg" alt="Photo Gallery"> -->
              <a class="card_button" href="#">
                <p class="card_h3">Machine Learning</p>
                View Project on GitHub</a>
          </div>
        </div>
      </div>
      <!-- <hr class="separator"> -->

    <footer class="footer">
      <div id="contacts">
        <p>Connect with me</p>
          <ul class="socialmedia">
            <li title="Like our Facebook page">
              <a href="#"><img src="assets/icons/facebook.webp" alt="Facebook Logo"></a>
            </li>
            <li title="Follow me on Twitter">
              <a href="https://www.twitter.com/ethanmuthoni"></a><img src="assets/icons/twitter.webp" alt="Twitter logo"></a>
            </li>
            <li title="Follow me on GitHub">
              <a href="https://github.com/reckafella"><img src="assets/icons/github.webp" alt="GitHub logo"></a>
            </li>
            <li title="Contact me on Telegram">
              <a href="https://www.t.me/reckafella"><img src="assets/icons/telegram.webp" alt="Telegram logo"></a>
            </li>
            <li title="Call Me">
              <a href="tel:+254719272150"><img src="assets/icons/call-icon.webp" alt="icon indicating  phone call"></a>
            </li>
            <li title="Send Me an E-Mail">
              <a href="mailto:reckafella@proton.me"><img src="https://pbs.twimg.com/profile_images/1539538576735711236/eeJTBAwy_400x400.png" alt="Proton Mail"/></a>
            </li>
          </ul>
      </div>
      <div id="about-website">
        <p>Ethan Wanyoike Muthoni</p>
        <p>&copy;&nbsp;2021-2032, Reckafella Inc.<br>All Rights Reserved.</p>
      </div>
    </footer>
  </div> <!-- End of Main Page Content -->

  <script>
    var open = false;

function Drop(n) {
    var i; // value of i corresponds to the number items in the menu => "nav-item"
    if(open === false) {
        for (i = n; i < 5; i++) {
            Drp(i)
        }
        open = true;
    } else if(open === true) {
        for (i = n; i < 5; i++) {
            Cls(i)
        }
        open = false;
    }
}

function Drp(n) {
    var elem = document.getElementsByClassName("nav-item")[n];
    var pos = -1 * window.innerHeight - n * 100;
    var id = setInterval(frame, 5);

    function frame() {
        if (pos >= -10) {
            clearInterval(id);
            elem.style.top = 0 + 'px';
        } else {
            pos += 10;
            elem.style.top = pos + 'px';
        }
    }
}

function Cls(n) {
    var elems = document.getElementsByClassName("nav-item")[n];
    var poss = 0;
    var ids = setInterval(frames, 5);

    function frames() {
        if(poss <= -1 * window.innerHeight) {
            clearInterval(ids);
            elems.style.top = -1 * window.innerHeight + 'px';
        } else {
            poss += -7 - n * 2;
            elems.style.top = poss + 'px';
        }
    }
}

  </script>
  </body>
</html>