liuffy.github.io/tracktive.html at master · liuffy/liuffy.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
<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="apple-touch-icon" sizes="180x180" href="img/favicon/apple-touch-icon.png">
    <link rel="icon" type="image/png" href="img/favicon/favicon-32x32.png" sizes="32x32">
    <link rel="icon" type="image/png" href="img/favicon/favicon-16x16.png" sizes="16x16">
    <link rel="manifest" href="img/favicon/manifest.json">
    <link rel="mask-icon" href="img/favicon/safari-pinned-tab.svg">
    <link rel="shortcut icon" href="img/favicon/favicon.ico">
    <meta name="msapplication-config" content="img/favicon/browserconfig.xml">
    <meta name="theme-color" content="#ffffff">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/animsition.min.css">
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/owl.carousel.css">
    <link rel="stylesheet" href="css/font-awesome.css">
    <link rel="stylesheet" href="css/animate.css">
    <link rel="stylesheet" href="css/magnific-popup.css">
    <link rel="stylesheet" href="css/graph.css">
    <link rel="stylesheet" href="css/main.css">
    <title> | Tracktive </title>
    <link rel="stylesheet" href="css/light.css">
  </head>
  <body class="animsition">
    <div class="showbox">
      <div class="loader">
        <svg viewBox="25 25 50 50" class="circular">
          <circle cx="50" cy="50" r="20" fill="none" stroke-width="6" stroke-miterlimit="10" class="path"></circle>
        </svg>
      </div>
    </div>
    <div class="background"></div>
    <div class="flex-wrapper">
      <div class="main-content align-center">
        <div class="container-fluid">
          <div class="row">
            <div class="container">
              <div class="row">
                <div class="col-md-7 col-md-offset-1 visible-lg visible-md">
                  <div class="open-project-lightbox">


                  <a href="img/portfolio/open/tracktive1.png"><span class="plus"><span></span><span></span></span>
                  <img alt="" src="img/portfolio/open/tracktive1.png"></a>

                  <a href="img/portfolio/open/tracktive2.png"><span class="plus"><span></span><span></span></span><img alt="" src="img/portfolio/open/tracktive2.png"></a>

                  <a href="img/portfolio/open/tracktive3.png"><span class="plus"><span></span><span></span></span><img alt="" src="img/portfolio/open/tracktive3.png"></a></div>

                </div>
                <div class="col-md-3 col-md-offset-0 col-sm-8 col-sm-offset-1 project-description">
                  <h5 class="text-1-opacity">Tracktive </h5>
                  <p>Tracktive is full-stack web application inspired by 8tracks designed to be a lightweight playlist creation website. It utilizes the Spotify API to build playlists and is built on a Ruby on Rails backend, a PostgreSQL database, and a React.js with Redux architectural framework on the front-end.</p>

                  <p><span class="cool-feature">Cool feature:</span> Tracktive features responsive design, optimizing user experience for different devices.
                  </p>
                  <div class="project-info">
                    <p><span class="info text-uppercase">client</span><span class="info-description"> Personal Project</span></p>
                    <p><span class="info text-uppercase">completed</span><span class="info-description"> December 2016</span></p>
                    <p><span class="info text-uppercase">github</span><span class="info-description"><a href="https://github.com/liuffy/Tracktive" target="_blank">Tracktive</a></span></p>
                    <p><span class="info text-uppercase">live</span><span class="info-description"><a href="http://tracktive.space/" target="_blank">tracktive.space</a></span></p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="container navigation">
      <div class="portfolio-open-nav"><a href="sleep.html" class="prev animsition-link"><i class="fa fa-angle-left"></i>prev</a><a href="open.html" class="next animsition-link">next<i class="fa fa-angle-right"></i></a>
      <a href="portfolio.html" class="close animsition-link back">EXIT</a></div>
    </div>
    <script>
      if(/MSIE \d|Trident.*rv:/.test(navigator.userAgent)) {
          document.write('<script src="js/browser-polyfill.min.js"><\/script>');
          document.write('<script src="js/innersvg.js"><\/script>');
      }
    </script>
    <script src="js/jquery-2.1.1.min.js"></script>
    <script src="js/animsition.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/owl.carousel.min.js"></script>
    <script src="js/jquery.nicescroll.min.js"></script>
    <script src="js/isotope.pkgd.js"></script>
    <script src="js/masonry-horizontal.js"></script>
    <script src="js/imagesloaded.pkgd.min.js"></script>
    <script src="js/jquery.magnific-popup.min.js"></script>
    <script src="js/graph.js"></script>
    <script src="js/main.js"></script>
  </body>
</html>