LoRyder1.github.io/index.html at master · LoRyder1/LoRyder1.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
<html>
<head>
  <title>Lovinder Pnag | Web Developer</title>
  <link rel="stylesheet" type="text/css" href="assets/stylesheets/style.css">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="shortcut icon" type="image/png" href="assets/images/star2.jpg"/>
</head>
<body id="body-home">

  <div id="bigvid-container">
    <video autoplay loop id="bigvid-video" poster="assets/video/poster2.png">
      <source src="assets/video/dark-blue_star_trails.webm" type="video/webm"/>
      <source src="assets/video/dark-blue_star_trails2.mp4" type="video/mp4"/>
    </video>
  </div>

      <div id="navbar">
        <h1 id="navbar-initials"><a href="#" class="nav-link">LSP</a></h1>

        <span class="fa fa-bars fa-lg" id="menu-icon"></span>

        <ul id="navbar-options">
          <li><a href="#about" class="nav-link">ABOUT</a></li>
          <li><a href="#work" class="nav-link">WORK</a></li>
          <li><a href="#footer" class="nav-link">CONTACT</a></li>
        </ul>

      </div> <!-- #navbar -->


  <div id="index-nonvid">
    <div id="index-top">

      <div id="index-desc">
        <h2>
          Hi, I'm <span class="ital">Lovinder</span>.<br>
          I enjoy solving problems by writing <span class="ital">software</span>.
        </h2>
        <a href="#about" id="arrow-down" class="nav-link"><span class="fa fa-arrow-circle-down fa-2x"></span></a>
      </div> <!-- #index-desc -->

    </div> <!-- #index-top -->

    <div id="index-bottom">
      <div id="about">
        <h3>About</h3>
        <p id="about-desc">

          Graduated from UCLA with an Biochemistry degree.</br>
          Worked as a Peptide Chemist and did some Graduate School.</br></br>
          Discovered world of code and Computer Science.</br>

          Went to <a href="http://devbootcamp.com/">Dev Bootcamp</a>. Learned a ton. Realized, that passions are not discovered, but need to be developed.</br></br>

          Completed a software development apprenticeship at <a href="http://www.covermymeds.com/">CoverMyMeds</a> in Columbus, OH.
        </p>
        <a id="resume" href="resume.pdf">
          <div id="resume-box">View Resume</div>
        </a>
      </div> <!-- #about -->

      <div id="work">
        <h3>Work</h3>

        <ul id="work-examples-container">
          <li class='work-example-list-item'>
            <div class="work-example work-example-left">
              <h4>ExitSlips</h4>
              <h5 class="work-example-links"><a href="http://exit-slips.herokuapp.com/" class="work-example-demo">Live</a> | <a href="https://github.com/cwshevlin/exitslips" class="work-example-code">Code</a></h5>
              <h6 class="work-example-tech"><span class="example-built-with">Built with:</span> Ruby on Rails, D3, RSpec, PostgreSQL</h6>

              <p class="work-example-description">
                ExitSlips provides teachers with a simple way to collect data and act on it. Teachers add a class and students to that class, then create a quiz for that class. Students take the quiz and the results are immediately available for the teacher to view. ExitSlips also sorts students into groups based on the results of the quiz so the teacher can use them in the next day's instruction.
              <p>

            </div>
          </li>

          <li class='work-example-list-item'>
            <div class="work-example work-example-middle">
              <h4>You-Owe-Me-Homie</h4>
              <h5 class="work-example-links"><a href="http://owe-me-homie.herokuapp.com/" class="work-example-demo">Live</a> | <a href="https://github.com/inoda/you-owe-me-homie" class="work-example-code">Code</a></h5>
              <h6 class="work-example-tech"><span class="example-built-with">Built with:</span> Ruby on Rails, ActiveRecord, SendGrid, RSpec, Capybara</h6>

              <p class="work-example-description">
                You Owe Me Homie lets you track debit and credit between members of a customized group. Recipients must confirm each transaction before the app factors it into calculations. Users can view histories of confirmed, pending, and denied transactions between any two members.
              <p>

            </div>
          </li>

          <li class='work-example-list-item'>
            <div class="work-example work-example-last">
              <h4>Classic-Garages</h4>
              <h5 class="work-example-links"><a href="https://sleepy-everglades-86460.herokuapp.com" class="work-example-demo">Live</a> | <a href="https://github.com/LoRyder1/javascript-classic-garages" class="work-example-code">Code</a></h5>
              <h6 class="work-example-tech"><span class="example-built-with">Built with:</span> Ruby on Rails, React.js, Elasticsearch, Redis</h6>

              <p class="work-example-description">
                Classic Garage features a fully responsive page to add your favorite cars in a garage preferably classic ones. The page quickly updates when content is created and features custom urls that match the specific car created. Elasticsearch is also implemented for really large databases of classic cars. Built to learn about React.js, Redis, Elasticsearch, and to gain more experience with Rails development.
              <p>

            </div>
          </li>
        </ul> <!-- #work-examples-container -->

      </div> <!-- #work -->

      <div id="footer">
        <div id="footer-icons">
          <h4 id="footer-contact">Get in touch</h4>

          <a href="https://github.com/LoRyder1">
            <span class="fa fa-github-square fa-3x"></span>
          </a>
          <a href="https://twitter.com/LoRyderr">
            <span class="fa fa-twitter-square fa-3x"></span>
          </a>
          <a href="https://www.linkedin.com/in/lspnag">
            <span class="fa fa-linkedin-square fa-3x"></span>
          </a>
          <a href="mailto:lspnag@gmail.com">
            <span class="fa fa-envelope-square fa-3x"></span>
          </a>
        </div>

        <div id="copyright">
          <p>&copy; 2016 Lovinder Pnag</p>
        </div>
      </div> <!-- #footer -->
    </div>  <!-- #index-bottom -->
  </div> <!-- #index-nonvid -->

  <!-- Google fonts -->
  <!-- <link href='http://fonts.googleapis.com/css?family=Lato:100,100italic,300,300italic,400,400italic' rel='stylesheet' type='text/css'> -->

  <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700,400,300' rel='stylesheet' type='text/css'>

  <script src="assets/javascripts/all.js"></script>
</body>
</html>