-
Notifications
You must be signed in to change notification settings - Fork 0
/
playlist-wizard.html
159 lines (133 loc) · 6.02 KB
/
playlist-wizard.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-QSJHM2CRY7"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-QSJHM2CRY7');
</script>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>Mazharul Islam Portfolio - Playlist Wizard</title>
<meta content="Playlist Wizard" name="description">
<meta content="Portfolio" name="keywords">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=https://fonts.googleapis.com/css?family=Inconsolata:400,500,600,700|Raleway:400,400i,500,500i,600,600i,700,700i" rel="stylesheet">
<!-- Vendor CSS Files -->
<link href="assets/vendor/aos/aos.css" rel="stylesheet">
<link href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/vendor/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
<link href="assets/vendor/swiper/swiper-bundle.min.css" rel="stylesheet">
<!-- Template Main CSS File -->
<link href="assets/css/style.css" rel="stylesheet">
</head>
<body>
<main id="main">
<section class="section">
<div class="container">
<div data-aos="fade-up">
<p class="back">
<a href="index.html" class="readmore">
<i class="bi bi-arrow-left"></i>
Back
</a>
</p>
</div>
<div class="row mb-4 align-items-center">
<div class="col-md-6" data-aos="fade-up">
<h2>Playlist Wizard</h2>
<p>
Organize, view and create Spotify playlists easily! Playlist wizard allows you to
create new playlists effortlessly by searching Spotify and picking songs from your
own playlists. You can also sort the playlists by song name, album, and date added.
</p>
</div>
</div>
</div>
<div class="site-section pb-0">
<div class="container">
<div class="row align-items-stretch">
<div class="col-md-8" data-aos="fade-up">
<div class="images-slider swiper-container" data-aos="fade-up" data-aos-delay="100">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="image-wrap">
<div class="image">
<img src="assets/img/playlist-wizard1.JPG" class="img-fluid" alt="Playlist Wizard main page.">
<p>Homepage</p>
</div>
</div>
</div><!-- End image item -->
<div class="swiper-slide">
<div class="image-wrap">
<div class="image">
<img src="assets/img/playlist-wizard2.JPG" class="img-fluid" alt="After login, playlists of the user are aggregated.">
<p>After the user is logged in, they are redirected to the page with all their playlists from Spotify.</p>
</div>
</div>
</div><!-- End image item -->
<div class="swiper-slide">
<div class="image-wrap">
<div class="image">
<img src="assets/img/playlist-wizard3.JPG" class="img-fluid" alt="Right click on a playlist to see options menu.">
<p>Right click on a playlist to see a menu of options that can be performed on the playlist.</p>
</div>
</div>
</div><!-- End image item -->
<div class="swiper-slide">
<div class="image-wrap">
<div class="image">
<img src="assets/img/playlist-wizard4.JPG" class="img-fluid" alt="Modal for creating a new playlist.">
<p>Modal for creating a new playlist</p>
</div>
</div>
</div><!-- End image item -->
</div>
<div class="swiper-pagination"></div>
</div>
</div>
<div class="col-md-3 ml-auto" data-aos="fade-up" data-aos-delay="100">
<div class="sticky-content">
<h4 class="h4 mb-3">Technologies used:</h4>
<ul class="list-unstyled list-line mb-5">
<li>React.JS</li>
<li>Material UI</li>
<li>Spotify API</li>
<li>Node.JS</li>
<li>Express.JS</li>
<li>MongoDB</li>
<li>Git</li>
<li>Github</li>
</ul>
<div class="row">
<p class="button-links">
<a href="https://github.com/MazharulIslam-Naim/Playlist_Wizard" target="_blank" title="Github" class="readmore" aria-labelledby="Plylist Wizard Github">
<i class="bi bi-github button-icons">
</i>
</a>
</p>
<p class="button-links">
<a href="https://www.playlist-wizard.app/" target="_blank" title="Live Site" class="readmore" aria-labelledby="Plylist Wizard application">
<i class="bi bi-globe2 button-icons">
</i>
</a>
</p>
</div>
</div>
</div>
</div>
</div>
</section>
</main><!-- End #main -->
<!-- Vendor JS Files -->
<script src="assets/vendor/aos/aos.js"></script>
<script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="assets/vendor/isotope-layout/isotope.pkgd.min.js"></script>
<script src="assets/vendor/swiper/swiper-bundle.min.js"></script>
<!-- Template Main JS File -->
<script src="assets/js/main.js"></script>
</body>
</html>