HTML-CSS-JS-BookNotes-Project-v4/about.html at main · rossfion/HTML-CSS-JS-BookNotes-Project-v4 · 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
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Fionn Ross | BookNotes Project Built With HTML5, CSS Flexbox, CSS Grid, and Vanilla JavaScript ES6 Modules |
    About </title>

  <!-- font-awesome -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" />

  <!-- styles css -->
  <link rel="stylesheet" href="./style.css" />
</head>

<body>
  <nav class="navbar page">
    <div class="nav-center">
      <div>
        <button class="mobile-nav-toggle">
          <i class="fas fa-bars"></i>
        </button>
        <!-- links -->
        <ul class="nav-links">
          <li>
            <a href="index.html" class="nav-link">home</a>
          </li>
          <li>
            <a href="about.html" class="nav-link">about</a>
          </li>
          <li>
            <a href="books.html" class="nav-link">books</a>
          </li>
        </ul>
      </div>

      <a href="#"><img src="./images/logo.svg" class="logo" alt="logo" /></a>
      <!-- heart icon -->
      <div class="fav-icon-toggle-container">
        <button class="toggle-heart">
          <i class="fas fa-heart"></i>
        </button>
        <span class="favorite-book-count"></span>
      </div>
    </div>
  </nav>
  <!-- hero -->
  <section class="page-hero">
    <div class="section-center">
      <h3 class="page-hero-title">Home / About</h3>
    </div>
  </section>
  <!-- sidebar -->
  <div class="sidebar-overlay">
    <aside class="sidebar">
      <!-- close -->
      <button class="sidebar-close">
        <i class="fas fa-times"></i>
      </button>
      <!-- links -->
      <ul class="sidebar-links">
        <li>
          <a href="index.html" class="sidebar-link">
            <i class="fas fa-home fa-fw"></i>
            home
          </a>
        </li>
        <li>
          <a href="books.html" class="sidebar-link">
            <i class="fas fa-book fa-fw"></i>
            books
          </a>
        </li>
        <li>
          <a href="about.html" class="sidebar-link">
            <i class="fas fa-book fa-fw"></i>
            about
          </a>
        </li>
      </ul>
    </aside>
  </div>
  <!-- favorites -->
  <div class="favorites-overlay">
    <aside class="favorites">
      <button class="favorites-close">
        <i class="fas fa-times"></i>
      </button>
      <header>
        <h3 class="text-slanted">your favorites</h3>
      </header>
      <!-- favorites list -->
      <div class="favorites-list"></div>
    </aside>
  </div>
  <!-- about -->
  <section class="section section-center about-page">
    <div class="title">
      <h2><span>/</span> about this project</h2>
    </div>
    <h2 class="about-page-heading">Welcome to BookNotes 4.0 </h2>
    <p class="about-text">This is the fourth reworking of a <a href="https://github.com/rossfion/capstone-project-5"
        target="_blank">Node.js-based project</a> I built for Udemy Instructor Dr. Angela Yu's <a
        href="https://www.udemy.com/course/the-complete-web-development-bootcamp/" target="_blank">Web
        Developer Bootcamp</a>. It is inspired by <a href="https://sive.rs/book" target="_blank">David
        Siver's own website</a> devoted to documenting all the non-fiction books he has read with some
      information about them. The public API used for this project is from the <a href="https://openlibrary.org/dev/docs/api/covers"
        target="_blank">Open Library Book Covers API</a>.</p>
    <p class="about-text">This version is built with HTML5, CSS3 Grid, CSS Flexbox, and Vanilla JavaScript and was completed on a ten-year-old-plus laptop running Windows 8.1.</p>
    <p class="about-text"><a href="https://openlibrary.org/">Courtesy link to the Open Library</a></p>
    <p class="about-text">Many of the books featured on this site have already been read. However, I didn't make a note
      as to when I had finished them. It was only after doing the Capstone Project for the Bootcamp that I hit on the idea of adding the
      completion date.</p>
    <p class="about-text">Thus, any completion dates will reflect - at least - a second reading.</p>
    <p class="about-text"> If there are no dates, I am still reading/working through the book, though making notes as I
      go along. You are more than welcome to check them out. Howewer, because knowledge can evolve (if you allow it to), these notes may
      be updated to reflect new learning.</p>
      <p class="about-text">As for the reworking of this app, it was an opportunity to explore the idea of taking projects built with frameworks and third party libraries, breaking them down, and then rebuilding them using core languages only. They are all on Github and the <a href="https://github.com/rossfion/HTML-CSS-JS-BookNotes-Project-v1" target="_blank">first version can be accessed here</a>.</p>
    <p class="about-text">If anyone is interested in taking these revisions and/or the Node.js version further, you are free to do so, taking into account the requirements for using the API as laid down by the Open Library.</p>
    <p class="about-text">Peace!</p>
  </section>
  <script type="module" src="./src/pages/about.js"></script>
</body>

</html>