simplifications and fixes

luisa-li · Aug 30, 2024 · 9823eca · 9823eca
1 parent d26e2f1
commit 9823eca
Show file tree

Hide file tree

Showing 9 changed files with 101 additions and 56 deletions.
diff --git a/blog/home.css → blog.css b/blog/home.css → blog.css
@@ -36,6 +36,14 @@ a:hover {
     flex-direction: column;
 }
 
+.code-block {
+    font-family: monospace;
+    white-space: pre;
+    max-width: 80%;
+    overflow: auto;
+    text-align: left;
+}
+
 @media (max-width: 600px) {
 
     h1 {

diff --git a/blog.html b/blog.html
@@ -5,15 +5,15 @@
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title>luisa's blog</title>
         <link rel="stylesheet" href="base.css"/>
-        <link rel="stylesheet" href="blog/home.css"/>
+        <link rel="stylesheet" href="blog.css"/>
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
         <link rel="icon" type="image/png" href="../resources/tau.png">
     </head>
     <body>
         </div>
         <div class="center-box">
             <div class="header">
-                <a href="index.html">
+                <a href="main.html">
                     <i class="fas fa-home icon"></i> home
                 </a>
                 <h2> 

diff --git a/blog/a_violent_introduction_to_linear_regression.html b/blog/a_violent_introduction_to_linear_regression.html
@@ -5,21 +5,22 @@
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title>luisa's blog</title>
         <link rel="stylesheet" href="../base.css"/>
-        <link rel="stylesheet" href="blog.css">
+        <link rel="stylesheet" href="blogpost.css">
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
         <link rel="icon" type="image/png" href="../resources/tau.png">
         <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
         <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>    
     </head>
     <body>
+        <div class="center-box">
         <nav class="left-navbar">
             <a href="../blog.html">
                 <i class="fas fa-arrow-left icon"></i> Back
             </a>
         </nav>
         <div class="head">
             <div class="title-data">
-                <h1> 
+                <h2> 
                     <span class="blue-highlight">a</span>
                     <span class="yellow-highlight">violent</span>
                     <span class="aqua-highlight">introduction</span>
@@ -29,7 +30,7 @@ <h1>
                     <span class="blue-highlight">with</span>
                     <span class="yellow-highlight">gradient</span>
                     <span class="pink-highlight">descent</span>
-                </h1>
+                </h2>
                 <p> june 24, 2024 </p>
             </div>
             <p id="intro">sick and tired of gentle introductions to *insert an ml concept*? <br>  worry no more, for today, we will catapult you to the wolves of linear regression.</p>
@@ -68,9 +69,11 @@ <h1>
             <p> the derivation of the derivatives is relatively simple calculus, which actually took me way too long to do: </p>
 
             <p> \[ MSE = \frac{1}{n} \sum^n_{i = 1} (y_i - \hat{y}_i)^2, \space e = (y_i - (mx_i + b))\]</p>
-            <p> \[ \frac{\partial{e^2}}{\partial{b}} = \frac{\partial{(y_i - wx_i - b)}^2}{\partial{b}} = -1 \times 2(y_i - wx_i - b) = -2(y_i - wx_i - b) \] </p>
+            <p> \[ \frac{\partial{e^2}}{\partial{b}} = \frac{\partial{(y_i - wx_i - b)}^2}{\partial{b}} \] </p> 
+            <p> \[ = -1 \times 2(y_i - wx_i - b) = -2(y_i - wx_i - b) \] </p>
             <p> \[ \frac{\partial{MSE}}{\partial{b}} = \frac{1}{N} \sum^n_{i = 1} -2(y_i - wx_i - b)\] </p>
-            <p> \[ \frac{\partial{e^2}}{\partial{w}} = \frac{\partial{(y_i - wx_i - b)}^2}{\partial{w}} = -x_i \times 2(y_i - wx_i - b) = -2x_i(y_i - wx_i - b) \] </p>
+            <p> \[ \frac{\partial{e^2}}{\partial{w}} = \frac{\partial{(y_i - wx_i - b)}^2}{\partial{w}}  \] </p>
+            <p> \[ = -x_i \times 2(y_i - wx_i - b) = -2x_i(y_i - wx_i - b)\] </p>
             <p> \[ \frac{\partial{MSE}}{\partial{w}} = \frac{1}{N} \sum^n_{i = 1} -2x_i(y_i - wx_i - b)\] </p>
 
             <p> wielding one parameter in each hand, we can now improve our parameters by having them go a little bit towards the direction negative of their gradient: </p>
@@ -107,23 +110,21 @@ <h1>
 
             <p> and... this is the actual algorithm for linear regression with stochastic gradient descent, this should be straightforward after all that buildup: </p>
 
-            <pre> 
-                randomly initialize weights W and b in the correct shape
-                split the data into the train and test splits
-                for every epoch:
-                    for every data point in the training set: 
-                        update the weights W
-                        update the bias b
-                evaluate the model's predictions on the test set 
-            </pre>
+            <div class="code-block"> 
+randomly initialize weights W and b in the correct shape
+split the data into the train and test splits
+for every epoch:
+    for every data point in the training set: 
+        update the weights W
+        update the bias b
+evaluate the model's predictions on the test set 
+            </div>
 
             <p> the actual implementation of the above is left as an exercise for the reader... </p>
 
-            <p> just kidding, you can find it <a href="https://github.com/luisa-li/scratch-ml/blob/017314baa2c64b01c6c9fb224d5ffd360ffde8fc/linear_regression.py"> here </a>, written with just python and numpy. </p> 
+            <p> just kidding, you can find it <a href="https://github.com/luisa-li/scratch-ml/blob/017314baa2c64b01c6c9fb224d5ffd360ffde8fc/linear_regression.py">here</a>,  written with just python and numpy. </p> 
 
-            <p> souces: d2l book, chapter 3
-
         </div>
-        
+    </div>
     </body>
 </html>
diff --git a/blog/blog.css → blog/blogpost.css b/blog/blog.css → blog/blogpost.css
@@ -1,16 +1,43 @@
+h2 {
+    letter-spacing: 0.05em;
+}
+
 body {
     display: flex;
     flex-direction: column;
     align-items: center;
-    height: 100vh; 
-    padding: 5vh;   
+    height: 100vh;
+}
+
+a {
+    color: var(--lightwhite); 
+    justify-content: space-between;
+    text-decoration: none;
 }
 
-h3 {
-    color: var(--lightwhite)
+a:hover {
+    color: var(--blue); 
 }
 
-.centered {
+.code-block {
+    font-family: monospace;
+    white-space: pre-wrap; 
+    overflow: auto;
+    text-align: left;
+    align-items: center;
+    justify-content: center;
+}
+
+.center-box {
+    width: 90%;
+    max-width: 600px;
+    padding: 4vw;
+    display: flex;
+    flex-direction: column;
+    text-align: left;
+}
+
+.image {
     padding-top: 1vh;
     padding-bottom: 1vh;
     justify-content: center;
@@ -21,17 +48,14 @@ h3 {
 .head {
     display: flex;
     flex-direction: column;
-    width: 60vw;
     align-items: center;
     text-align: center;
 }
 
 .body {
     justify-content: start;
-    width: 60vw;
-    text-align: justify;
+    text-align: left;
     font-family: 'Book Antiqua', 'Palatino Linotype', 'Georgia', Palatino, serif;
-    font-size: 17px;
     letter-spacing: 0.03em;
     line-height: 1.7;
     padding-bottom: 9vh;
@@ -41,33 +65,27 @@ h3 {
     display: flex;
     justify-content: flex-start; 
     align-items: center;
-    width: 90%;
     gap: 3vw;
     height: auto;
     flex-direction: row;
 }
 
 .separator {
     background-color: var(--lightwhite);
-    width: 40vw;
     height: 1px;
     margin-top: 2vh;
     margin-bottom: 2vh;
 }
 
 
 .whisper {
-    font-size: 14px;
-    width: 60vw;
     color: var(--grey1);
     text-align: center;
     align-items: center;
     justify-content: center;
 }
 
 .glossary {
-    font-size: 15px;
-    width: 60vw;
     color: var(--grey1);
     text-align: right;
     align-items: center;
@@ -78,7 +96,6 @@ h3 {
 #intro {
     font-style: italic;
     text-align: center;
-    font-size: 17px;
     color : var(--lightwhite)
 }
 
@@ -93,18 +110,33 @@ a:hover {
     text-decoration: underline; 
 }
 
-@media (max-width: 600px) {
+#makeitup {
+    width: 50%;
+}
 
-    h1 {
-        font-size: 23px;
-    }
+#gptstatistics {
+    width: 80%
+}
+
+@media (max-width: 600px) {
 
     body {
+        line-height: 1.6;
+        display: flex;
+        flex-direction: column;
+        height: 100vh;
         font-size: 13px;
+        overflow-x: hidden;
+        text-align: center;
+        padding: 3vw;
+    }
+
+    #makeitup {
+        width: 100%;
     }
 
-    a {
-        font-size: 13px;
+    #gptstatistics {
+        width: 100%
     }
-
+    
 }
diff --git a/blog/statistics_for_evil.html b/blog/statistics_for_evil.html
@@ -5,31 +5,32 @@
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title>luisa's blog</title>
         <link rel="stylesheet" href="../base.css"/>
-        <link rel="stylesheet" href="blog.css">
+        <link rel="stylesheet" href="blogpost.css">
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
         <link rel="icon" type="image/png" href="../resources/tau.png">
         <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
         <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>    
     </head>
     <body>
+        <div class="center-box">
         <nav class="left-navbar">
             <a href="../blog.html">
                 <i class="fas fa-arrow-left icon"></i> Back
             </a>
         </nav>
         <div class="head">
             <div class="title-data">
-                <h1> 
+                <h2> 
                     <span class="pink-highlight">statistics</span>
                     <span class="aqua-highlight">for</span>
                     <span class="blue-highlight">evil</span>
-                </h1>
+                </h2>
                 <p> july 27, 2024 </p>
             </div>
             <p id="intro"> did you know that hong kong's higher life expectancy relative to india is directly related to their meat consumption? </p>
         </div>
         <div class="body">
-
+            
             <p> of course you didn't! someone on the internet made up that correlation. </p>
 
             <p> actually! it is not even a correlation! mathematically you can draw a line through any two points, i could be plotting the number of birkenstock sales in the united states and the ocurrence of foot fungus per 1000 people, and those two dots would still make a line. </p>
@@ -66,17 +67,18 @@ <h3> people who make their bed every morning are 206.8% more likely to be millio
 
             <p> titles like "want to be a millionaire? make your bed", and "making your bed can make you a millionaire" spin correlation into causation. which is arguably the deadliest sin of statistics. even GPT knows it's fake: </p>
 
-            <div class="centered">
-                <img class="image" src="../resources/gptstatistics.png" width="80%">
+            <div class="image">
+                <img src="../resources/gptstatistics.png" id="gptstatistics">
             </div>
 
             <p> thank you for listening to my rant about bad statistics on the internet. remember kids, don't believe everything you read, not just because statistics can be used to tell false stories, but because you can also just make things up: </p>
 
-            <div class="centered">
-                <img src="../resources/makeitup.png" width="50%">
+            <div class="image">
+                <img src="../resources/makeitup.png" id="makeitup">
             </div>
 
         </div>
-
+
+    </div>
     </body>
 </html>
diff --git a/blog/the_reading_itinerary.html b/blog/the_reading_itinerary.html
@@ -5,25 +5,26 @@
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title>luisa's blog</title>
         <link rel="stylesheet" href="../base.css"/>
-        <link rel="stylesheet" href="blog.css">
+        <link rel="stylesheet" href="blogpost.css">
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
         <link rel="icon" type="image/png" href="../resources/tau.png">
         <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
         <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>    
     </head>
     <body>
+        <div class="center-box">
         <nav class="left-navbar">
             <a href="../blog.html">
                 <i class="fas fa-arrow-left icon"></i> Back
             </a>
         </nav>
         <div class="head">
             <div class="title-data">
-                <h1> 
+                <h2> 
                     <span class="red-highlight">the</span>
                     <span class="yellow-highlight">reading</span>
                     <span class="green-highlight">itinerary</span>
-                </h1>
+                </h2>
                 <p> august 16, 2024 </p>
             </div>
             <p id="intro"> "In the instant before it was over and pure nothing, he heard all the human voices in the world." </p>
@@ -144,6 +145,7 @@ <h3> Purity by Jonathan Franzen </h3>
             <p> the source code for the map can be found <a href="https://github.com/luisa-li/misc/tree/main/reading_itinerary"> here</a></p>
 
         </div>
+    </div>
 
     </body>
 </html>
diff --git a/styles.css → main.css b/styles.css → main.css
diff --git a/index.html → main.html b/index.html → main.html
@@ -6,7 +6,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>luisali</title>
   <link rel="stylesheet" href="base.css" />
-  <link rel="stylesheet" href="styles.css" />
+  <link rel="stylesheet" href="main.css" />
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" />
   <link rel="icon" type="image/png" href="../resources/tau.png" />
 </head>

diff --git a/resources/luisaresume.pdf b/resources/luisaresume.pdf