portfolio/journal.html at main · steph-and-e/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
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Stephanie Li - Journal</title>
    <link rel="stylesheet" href="css/styles.css" />
    <style>
      /* import fonts */
      @import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&family=Luxurious+Script&family=Space+Grotesk:wght@300..700&display=swap");
      @import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap");
      @import url("https://fonts.googleapis.com/css2?family=Baskervville:ital@0;1&family=Cormorant:ital,wght@0,300..700;1,300..700&family=EB+Garamond:ital,wght@0,400..800;1,400..800&family=Instrument+Serif:ital@0;1&family=Libre+Caslon+Display&family=Shippori+Mincho&display=swap");
    </style>
  </head>
  <body>
    <header>
      <div id="navbar">
        <a id="home" class="navlink" href="index.html">Home</a>
        <a id="about" class="navlink" href="about.html">About</a>
        <a id="work" class="navlink" href="work.html">Work</a>
        <a
          id="resume"
          class="navlink"
          href="files/Stephanie Li - Resume.pdf"
          target="blank"
          >Resume</a
        >
        <a id="journal" class="navlink" href="journal.html">Journal</a>
        <a id="menu" class="navlink" href="">Menu</a>
      </div>
    </header>
    <div class="subpage-hero hero-section section">
      <div class="hero-text-container">
        <div class="hero-text">
          <h1 class="hero-heading">
            Thoughts and <span class="Script">Reflections</span>
          </h1>
          <!-- <p id="asterisk">*</p> -->
        </div>
      </div>
    </div>
    <div class="section">
      <div class="container">
        <div class="section-title less-margin">
          <div class="journal-entry">
            <h2>
              <span class="header-italic">Week 1 Journal: </span>My First
              Webpage
            </h2>
            <!-- <h6>sajdhasljhdkjashdkjashd</h6> -->
            <p>
              Made iteration 1 of my portfolio today! If you're reading this
              within the first week, you'll see an empty index.html file with
              just my name in the default serif... LISTEN I'm prototyping
              designs on Figma right neow okay 😔 I promise I'll add some
              content once I decide on a design theme... Anyways, this is
              actually my third time taking a web development course! In grade
              10, my school had a Turing computing course which included one
              week of HTML and CSS. I also took a one-month full stack web
              development course last summer, which helped me build my first
              project — a crochet pattern 3D modeller that used graph theory to
              turn written patterns into 3D meshes (I only finished the frontend
              part...). Before I ever stepped foot into the tech scene, my heart
              lay in art and design, so I feel the web dev is the perfect haven
              for me to combine both interests :). I'm excited to learn some
              formal backend, and finally finish the 6.03E+23 projects I started
              in my head last year!
            </p>
          </div>
          <div class="journal-entry">
            <h2>
              <span class="header-italic">Week 2 Journal: </span>User Interfaces
            </h2>
            <!-- <h6>sajdhasljhdkjashdkjashd</h6> -->
            <p>
              I'm really happy with my updated portfolio! :) This week, I
              applied the principles of user-interfaces, responsive design,
              consistency, and HTML/CSS best practices to design a nicer version
              of my portfolio. I decided on a dark editorial-esque design with a
              grainy gradient I designed on Figma, as well as two header fonts
              and one body font from Google Fonts. To make my webpage
              responsive, I used media queries and nested flex boxes to change
              the layout from columns to rows depending on the screen width. On
              the side, I also designed a Tinder for pets to practice responsive
              grid layouts (pls check it out it's funny I promise). As much as
              I'm proud of making a fully responsive portfolio for all screen
              sizes, I struggled to make it look nice on all screen aspect
              ratios. For example, I used the "viewport width" and "viewport
              height" to determine the top margin of the hero text, which
              adjusted the iPad layout to correctly look like a smaller version
              of the desktop layout on the iPad's horizontal screen rotation,
              but the margin was then too little when the iPad was rotated to
              sit vertically. I'd like to do more research on responsive design
              best practices to understand the tricks involved for different
              aspect ratios. Next up, I'll be Javascript to implement a
              functional hamburger menu that shows on mobile screens!
            </p>
          </div>
        </div>
      </div>
    </div>
    <footer>
      <hr />
      <div class="section">
        <div class="container">
          <h6>Made with 💜 by Stephanie Li</h6>
          <div id="contact-links">
            <a href=""><img src="images/mail.png" /></a>
            <a href=""><img src="images/linkedin.png" /></a>
            <a href=""><img src="images/github.png" /></a>
          </div>
        </div>
      </div>
    </footer>
  </body>
</html>