acnolan.github.io/blogs.html at main · acnolan/acnolan.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
<!DOCTYPE html>
<html lang="en">

<head>
    <!-- Goat Counter (GDPR Friendly Analytics) -->
    <script data-goatcounter="https://andrewnolan.goatcounter.com/count"
        async src="./scripts/count.js"></script>
    <!-- my stuff -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="utf-8">
    <meta name="description" content="This is the home page of the blog section of Andrew Nolan's website">
    <meta name="keywords" content="Andrew Nolan, Andrew Nolan WPI, web dev, Computer Science, acnolan, Andrew Nolan MathWorks, Andrew Nolan Computer Science, blog, blogs, Andrew Nolan blogs, movies">
    <link rel='icon' href='./images/favicon.ico'>
    <title>Andrew's Blog</title>
    <link rel="stylesheet" type="text/css" href="./styles/styles.css">
    <link rel="stylesheet" type="text/css" href="./styles/blogs.css">
    <link rel="stylesheet" type="text/css" href="./styles/toggleStyles.css">
    <script defer src="./scripts/theming.js"></script>
    <script defer src="./scripts/blogs.js"></script>
</head>

<body class="dark-mode">
    <a href="#main" class="skip-to-main-content-link">Skip to main content</a>
    <div class="header">
        <div class="content">
            <h1><a href="./" class="page-title desktop-only">Andrew's Blog</a></h1>
            <h1><a href="./" class="page-title mobile-only">Andrew's Blog</a></h1>
            <div class="link-block">
                <a href="./" aria-label="home"><img class="fa fa-home" src = "./images/iconSvgs/home.svg" alt="Home icon"/></a>
                <a target="_blank" href="https://github.com/acnolan" rel="noopener noreferrer" aria-label="github"><img class="fa fa-github" src = "./images/iconSvgs/github.svg" alt="Github icon"/></a>
                <a target="_blank" href="https://www.linkedin.com/in/acnolan/" rel="noopener noreferrer" aria-label="linkedin"><img class="fa fa-linkedin" src = "./images/iconSvgs/linkedin.svg" alt="LinkedIn icon"/></a>
                <a name="Email to me" aria-label="Email to me" href="mailto:andrewnolanjr@gmail.com?Subject=Hello%20Andrew!&amp;body=You%20are%20super%20cool!"><img class="fa fa-envelope" src = "./images/iconSvgs/mail.svg" alt="Email icon"/></a>
            </div>
        </div>
    </div>
    <main id="main" class="content">
        <div>
            <p>Like what you see subscribe to the <a href="./rss.xml">RSS Feed</a>!</p>
            <p>Who is even writing this stuff? Check out my <a href="./about">About Me</a> page to find out!</p>
        </div>
        <div id="blog-stuff">
            <div id="blog-list">
                <!-- Added dynamically in JS -->
            </div>
            <div id="blog-filter">
                <div id="filter-box">
                    <h3>Filter</h3>
                    <strong>Sort by:</strong>
                    <select id="sort-by" onchange="updateSort()">
                        <option value="0">Newest First</option>
                        <option value="1">Oldest First</option>
                        <option value="2">Popularity</option>
                    </select>
                    <br>
                    <strong>Tags:</strong>
                    <p><input id="ai" type="checkbox" onchange="generatePosts()" checked><label for="ai">AI</label></p>
                    <p><input id="coding" type="checkbox" onchange="generatePosts()" checked><label for="coding">Coding</label></p>
                    <p><input id="design" type="checkbox" onchange="generatePosts()" checked><label for="design">Design</label></p>
                    <p><input id="edTech" type="checkbox" onchange="generatePosts()" checked><label for="edTech">EdTech</label></p>
                    <p><input id="movies" type="checkbox" onchange="generatePosts()" checked><label for="movies">Movies</label></p>
                    <p><input id="books" type="checkbox" onchange="generatePosts()" checked><label for="books">Books</label></p>
                    <p><input id="urbanism" type="checkbox" onchange="generatePosts()" checked><label for="urbanism">Urbanism</label></p>
                    <p><input id="politics" type="checkbox" onchange="generatePosts()" checked><label for="politics">Politics</label></p>
                    <p><input id="research" type="checkbox" onchange="generatePosts()" checked><label for="research">Research Papers</label></p>
                    <p><input id="misc" type="checkbox" onchange="generatePosts()" checked><label for="misc">Miscellaneous</label></p>
                    <br>
                    <form id="search-bar">
                        <!--Crazy fact: If the button is on a new line it displays differently-->
                        <!--What a wild HTML science fact, whitespace is bonkers-->
                        <input id="search-bar-input" name="query" type="text" placeholder="search blogs..."><button>Search</button>
                    </form>
                </div>
            </div>
        </div>
        <div class="footer-div">
            <a id="email" href="mailto:andrewnolanjr@gmail.com?Subject=Hello%20Andrew!&amp;body=You%20are%20super%20cool!">Contact
                Me!</a>
        </div>
        <div id="toggleDiv">
            <span>☀️</span>
            <label class="switch">
                <input type="checkbox" checked onclick="ToggleDarkMode()">
                <span class="slider"></span>
            </label>
            <span>🌙</span>
        </div>
    </main>
</body>

</html>