HTML-CSS-portfolio/blog.html at master · wpham1/HTML-CSS-portfolio · 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
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
160
161
162
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <!-- instructs page to match screens width -->
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!-- style sheet references -->
        <link href="/styles/style.css" type="text/css" rel="stylesheet"></link>
        <!-- font families -->
        <link rel="preconnect" href="https://fonts.gstatic.com">
        <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
        <!-- google icon font -->
        <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
          rel="stylesheet">
        <!-- fontawesome icons -->
        <script src="https://kit.fontawesome.com/1ab8eae6e7.js" crossorigin="anonymous"></script>
        <title>Walter Pham Portfolio</title>
    </head>
    <header>
    <!-- navigation bar -->
        <nav class="navbar" id="myNavbar">
            <a href="index.html"><i class="fas fa-home"></i></a>
            <a href="projects.html"><i class="far fa-folder"></i> PROJECTS</a>
            <a href="blog.html" class="active"><i class="fas fa-book-open"></i> BLOG</a>
            <a href="contact.html"><i class="far fa-envelope"></i> CONTACT</a>
            <a href="javascript:void(0);" class="hamburger" onclick="hamburgerMenu()">
                <!-- hamburger icon -->
                <i class="fas fa-bars"></i>
            </a>
        </nav>
    <!-- title page -->

    </header>
<body>
    <!-- blog page container -->
    <div class="header-container">
        <!-- blog banner img -->
        <div class="blog-header">
            <img src="images/jp.jpg" alt="Japanese cityscape photo" class="blog-image">
            <!-- text over img banner title -->
            <div class="centered-text">BLOG.</div>
        </div>
    </div>
<!-- blog post grid flex-->
<div class="post-it-grid">
    <!-- blog post container -->
    <article class="post-it-container" id="post-it">
        <!-- date published text -->
        <header class="date-published">
            <p class="date-text">Published on 21/04/21</p>
        </header>
        <!-- blog post image -->
        <img class="post-img" src="images/games-source/GOLF_SLAYER/1.jpg" alt="golf slayer game screen">
        <!-- blog post title -->
        <h1 class="post-heading" id="post-heading">Golf Jam</h1>
        <!-- blog post teaser -->
        <article class="post-content" id="post-content">
            <p class="post-notes">This was the first game jam we made for a Ludum Dare jam in 2D. I worked on the art elements and we collaborated on the game design. This small game is meant to be like an RPG combat system mixed with putt-putt or mini golf...</p>
        </article>
        <!-- see blog post -->
        <footer class="post-it-footer" id="post-it-footer">
            <p class="post-see"><a href=blogarticle1.html>See article <i class="fas fa-long-arrow-alt-right"></i></a> </p>
        </footer>
    </article>
        <!-- blog post container -->
    <article class="post-it-container" id="post-it">
        <!-- date published text -->
        <header class="date-published">
            <p class="date-text">Published on 20/04/21</p>
        </header>
        <!-- blog post image -->
        <img class="post-img" src="images/fotr.jpg" alt="fellowshop of the ring">
        <!-- blog post title -->
        <h1 class="post-heading" id="post-heading">Every Step Counts </h1>
        <!-- blog post teaser -->
        <article class="post-content" id="post-content">
            <p class="post-notes">"If I take one more step, I'll be the farthest away from home I've ever been..."</p>
        </article>
        <!-- see blog post -->
        <footer class="post-it-footer" id="post-it-footer">
            <p class="post-see"><a href=blogarticle2.html>See article <i class="fas fa-long-arrow-alt-right"></i></a> </p>
        </footer>
    </article>
        <!-- blog post container -->
    <article class="post-it-container" id="post-it">
        <!-- date published text -->
        <header class="date-published">
            <p class="date-text">Published on 19/04/21</p>
        </header>
        <!-- blog post image -->
        <img class="post-img" src="images/spiderverse.jpeg" alt="spiderman miles and gwen">
        <!-- blog post title -->
        <h1 class="post-heading" id="post-heading">Enter the Spiderverse</h1>
        <!-- blog post teaser -->
        <article class="post-content" id="post-content">
            <p class="post-notes">Spiderman: Enter the Spiderverse is one of my favourite animated films...</p>
        </article>
        <!-- see blog post -->
        <footer class="post-it-footer" id="post-it-footer">
            <p class="post-see"><a href=blogarticle3.html>See article <i class="fas fa-long-arrow-alt-right"></i></a> </p>
        </footer>
    </article>
        <!-- blog post container -->
    <article class="post-it-container" id="post-it">
        <!-- date published text -->
        <header class="date-published">
            <p class="date-text">Published on 18/04/21</p>
        </header>
        <!-- blog post image -->
        <img class="post-img" src="images/monsterhunter.jpg" alt="group of hunters attacking a monster">
        <!-- blog post title -->
        <h1 class="post-heading" id="post-heading">Monster Hunting</h1>
        <!-- blog post teaser -->
        <article class="post-content" id="post-content">
            <p class="post-notes">I've recently been playing the new Monster Hunter Rise game on Nintendo Switch...</p>
        </article>
        <!-- see blog post -->
        <footer class="post-it-footer" id="post-it-footer">
            <p class="post-see"><a href=blogarticle4.html>See article <i class="fas fa-long-arrow-alt-right"></i></a> </p>
        </footer>
    </article>
        <!-- blog post container -->
    <article class="post-it-container" id="post-it">
        <!-- date published text -->
        <header class="date-published">
            <p class="date-text">Published on 17/04/21</p>
        </header>
        <!-- blog post title -->
        <img class="post-img" src="images/valorant.jpg" alt="sova character from valorant">
        <h1 class="post-heading" id="post-heading">Recon Bolt</h1>
        <!-- blog post teaser -->
        <article class="post-content" id="post-content">
            <p class="post-notes">VALORANT is a competitive tactical shooter from the first-person perspective. It takes place on a near-future ...</p>
        </article>
        <!-- see blog post -->
        <footer class="post-it-footer" id="post-it-footer">
            <p class="post-see"><a href=blogarticle5.html>See article <i class="fas fa-long-arrow-alt-right"></i></a> </p>
        </footer>
    </article>
</div>
    <!-- Social Media icons -->
    <footer>
        <div class="social-media-icons">
            <a href="https://github.com/wpham1" class="fab fa-github"></a>
            <a href="https://www.linkedin.com/in/walterpham/"  class="fab fa-linkedin-in"></a>
            <a href="https://twitter.com/WalterPham5"  class="fab fa-twitter"></a>
        </div>
    </footer>
<!-- JavaScript for navbar -->
<script>
function hamburgerMenu(){
    var x = document.getElementById("myNavbar");
    if (x.className === "navbar") {
        x.className += " responsive";
    } else{
        x.className = "navbar";
    }
}
</script>
</body>
</html>