shellwayne01.github.io/projects.html at master · shellwayne01/shellwayne01.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
<!DOCTYPE html>
<html lang="en">
  <head>
      <title>Passion Projects</title>
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
      <link rel="stylesheet" type="text/css" href="css/cover.css">
      <link rel="stylesheet" type="text/css" href="css/mystyle.css">
  </head>
  <body>
      <div class="site-wrapper">
        <div class="site-wrapper-inner">

          <div class="cover-container">

            <div class="masthead clearfix" style="position:static;">
              <div class="inner">
                <h3 class="masthead-brand">Yorranshell W.</h3>
                <nav class="nav nav-masthead">
                  <a class="nav-link" href="index.html">Home</a>
                  <a class="nav-link" href="aboutMe.html">About Me</a>
                  <a class="nav-link active" href="projects.html">Passion Projects</a>
                  <a class="nav-link" href="contact.html">Contact</a>
                </nav>
              </div>
            </div>


            <div class="projects">
              <p>
                Here, you will find a list of <b>independent passion projects</b> I am currently working on that are not publically visible on my github. I managed the entire front-end development, data processing, and back-end development. All projects were created from scratch.
              </p>

              <div class="project-info">
                <h2>OTBT Travel Site</h2>
                <div class="prev-btn" onclick="prev('otbt')"> < </div>
                <img id="otbt" class="project-img" src="images/landing1.png"/>
                <div class="next-btn" onclick="next('otbt')"> > </div>
                <p>
                  The OTBT site allows users to search for unconventional travel destinations and attractions. They further receive
                  revelant information and safety tips on these locations. It was created using HTML, CSS, JavaScript, Node, Express, and PHP.
                </p>
              </div>

              <div class="project-info">
                <h2>Energy Info Site</h2>
                <div class="prev-btn" onclick="prev('ee')"> < </div>
                <img id="ee" class="project-img" src="images/e0.png"/>
                <div class="next-btn"onclick="next('ee')"> > </div>
                <p>
                  This site allows readers to learn about energy topics. It also includes
                a choropleth map of the United States that shows the percentage of renewable energy
              produced by each state based on government data. It was created using HTML, CSS, JavaScript, Vue, D3, and Python.
                </p>
              </div>
            </div>

          </div>

        </div>
      </div>

      <script src="js/generator.js" type="text/javascript"></script>
      <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
  </body>
</html>