borvux.github.io/project2.html at main · borvux/borvux.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
---
layout: default
title: project2
---
<section class="py-24 sm:py-32 bg-dark-700 text-dark-100">
  <div class="container mx-auto px-4">

    <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-12">
      <h1 class="text-4xl md:text-5xl font-bold mb-4 md:mb-0">Music-Tabs</h1>
      <div class="flex items-center gap-4">
        <a href="https://github.com/borvux/music-tabs" target="_blank"
          class="inline-flex items-center px-4 py-2 bg-transparent text-primary font-medium rounded hover:bg-primary/10 border border-primary transition-colors duration-300">
          <i class="fab fa-github mr-2"></i>
          <span>View Code</span>
        </a>
        <a href="https://music-tab.onrender.com/" target="_blank"
          class="inline-flex items-center px-4 py-2 bg-primary text-secondary font-medium rounded hover:bg-transparent hover:text-primary border border-primary transition-colors duration-300">
          <i class="fas fa-external-link-alt mr-2"></i>
          <span>Live Demo</span>
        </a>
      </div>
    </div>

    <div class="mb-16 rounded-lg overflow-hidden shadow-2xl bg-dark-600">
      <img src="{{ '/assets/project2/landing-page.png' | relative_url }}" alt="Music-Tabs application landing page"
        class="w-full">
    </div>

    <div class="grid lg:grid-cols-3 gap-x-12 gap-y-16">

      <div class="lg:col-span-1">
        <div class="bg-dark-600 rounded-lg p-6 shadow-lg lg:sticky lg:top-24">
          <h3 class="text-xl font-bold mb-4 border-b border-primary/20 pb-3">Project Overview</h3>
          <p class="text-dark-200 mb-6 text-sm">
            Music-Tabs is a full-stack web application designed to allow users to create, share, and explore guitar tabs
            in a dynamic, user-friendly environment.
          </p>

          <h3 class="text-xl font-bold mb-4 border-b border-primary/20 pb-3">Technologies Used</h3>
          <ul class="flex flex-wrap gap-2 mb-6">
            <li class="px-3 py-1 bg-dark-500 rounded text-xs font-medium">Ruby on Rails</li>
            <li class="px-3 py-1 bg-dark-500 rounded text-xs font-medium">PostgreSQL</li>
            <li class="px-3 py-1 bg-dark-500 rounded text-xs font-medium">Bootstrap</li>
            <li class="px-3 py-1 bg-dark-500 rounded text-xs font-medium">JavaScript</li>
            <li class="px-3 py-1 bg-dark-500 rounded text-xs font-medium">AJAX</li>
            <li class="px-3 py-1 bg-dark-500 rounded text-xs font-medium">PWA</li>
          </ul>

          <h3 class="text-xl font-bold mb-4 border-b border-primary/20 pb-3">Key Features</h3>
          <ul class="text-dark-200 space-y-3 text-sm">
            <li class="flex items-start"><i class="fas fa-check-circle text-primary w-4 mr-3 mt-1"></i><span>Secure user
                authentication and account management via Devise.</span></li>
            <li class="flex items-start"><i class="fas fa-check-circle text-primary w-4 mr-3 mt-1"></i><span>Intuitive
                interface for creating and editing guitar tabs.</span></li>
            <li class="flex items-start"><i class="fas fa-check-circle text-primary w-4 mr-3 mt-1"></i><span>Dynamic
                page navigation using AJAX for a seamless experience.</span></li>
            <li class="flex items-start"><i class="fas fa-check-circle text-primary w-4 mr-3 mt-1"></i><span>Full
                Progressive Web App (PWA) capabilities for offline use.</span></li>
          </ul>
        </div>
      </div>

      <div class="lg:col-span-2">

        <div class="mb-12">
          <h3 class="text-2xl font-bold mb-4">The Challenge</h3>
          <p class="text-dark-200 leading-relaxed">
            Musicians often rely on static, hard-to-read text files or clunky platforms to find and share guitar tabs.
            The user experience is frequently disjointed, requiring full page reloads for navigation and lacking modern
            features like easy editing or offline access.
          </p>
        </div>

        <div class="mb-16">
          <h3 class="text-2xl font-bold mb-4">My Solution</h3>
          <p class="text-dark-200 leading-relaxed mb-6">
            I developed Music-Tabs to solve these problems by creating a fast, modern, and reliable platform for
            guitarists. By leveraging Ruby on Rails for a robust backend and AJAX for a dynamic frontend, the
            application feels incredibly responsive. It functions as a Progressive Web App (PWA), so users can install
            it on their home screen and access their tabs even without an internet connection.
          </p>
          <div class="bg-dark-500/50 border border-primary/20 rounded-lg p-6 flex items-center">
            <i class="fas fa-lightbulb text-primary text-4xl mr-6"></i>
            <div>
              <h4 class="font-bold text-lg">Core Idea</h4>
              <p class="text-dark-200">Build an installable, offline-capable web app that feels as fast and fluid as a
                native mobile application.</p>
            </div>
          </div>
        </div>

        <div>
          <h3 class="text-2xl font-bold mb-6">Application Gallery</h3>
          <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
            <div class="rounded-lg overflow-hidden border border-dark-400 shadow-md">
              <img src="{{ '/assets/project2/tabs.png' | relative_url }}" alt="List of guitar tabs" class="w-full">
              <p class="p-3 text-xs bg-dark-600 text-center">Tabs Library Page</p>
            </div>
            <div class="rounded-lg overflow-hidden border border-dark-400 shadow-md">
              <img src="{{ '/assets/project2/view-tab.png' | relative_url }}" alt="Viewing a single guitar tab"
                class="w-full">
              <p class="p-3 text-xs bg-dark-600 text-center">Individual Tab View</p>
            </div>
          </div>
        </div>

      </div>
    </div>

    <div class="flex flex-col sm:flex-row justify-between items-center mt-24 pt-8 border-t border-dark-400 gap-4">
      <a href="project1.html" class="flex items-center text-dark-200 hover:text-primary transition-colors duration-300">
        <i class="fas fa-arrow-left mr-2"></i> Previous Project
      </a>
      <a href="/#projects"
        class="flex items-center px-4 py-2 rounded-md bg-dark-500 text-dark-100 hover:text-primary transition-colors duration-300">
        <i class="fas fa-th-large mr-2"></i> All Projects
      </a>
      <a href="project3.html" class="flex items-center text-dark-200 hover:text-primary transition-colors duration-300">
        Next Project <i class="fas fa-arrow-right ml-2"></i>
      </a>
    </div>

  </div>
</section>