new musing post, new buttons

edmondywen · Jan 8, 2025 · 2e65257 · 2e65257
1 parent 45e36c7
commit 2e65257
Show file tree

Hide file tree

Showing 5 changed files with 140 additions and 11 deletions.
diff --git a/about.html b/about.html
diff --git a/index.html b/index.html
@@ -50,6 +50,7 @@ <h2>some favorites:</h2>
                     the night is short walk on girl
                 </li>
             </ul>
+            <h2>theme for jan 2025: demonstrate consistent, thoughtful effort in everything that I do </h2>
         </div>
     </body>
 </html>
diff --git a/musings.html b/musings.html
@@ -2,7 +2,7 @@
 
 <html>
     <head>
-        <title>Edmond Wen's Personal Website</title>
+        <title>Edmond Wen</title>
         <link rel="stylesheet" href="style.css" />
         <link rel="stylesheet" href="https://use.typekit.net/zwn2vse.css">
         <script src="https://unpkg.com/swup@latest/dist/swup.min.js"></script>
@@ -12,6 +12,44 @@
         <div id="musings">
             <h1>musings</h1>
             <a href="index.html" class="back-button"> < go back </a>
+            <p>days since last musing post: feature TBD</p>
+            <div id="musing-buttons">
+                <button id="open-all-musing-button" style="margin-right: 30px">Open All Musings</button>
+                <button id="random-musing-button" style="margin-right: 30px">Open a Random Musing</button>
+                <button id="close-all-musing-button">Close All Musings</button>
+            </div>
+            <div class="musing-post">
+                <h2>jan 8 / new year, new york city</h2>
+                <div class="musing-content">
+                    <p>
+                        I read an excellent blog post today titled <a href="https://simonwillison.net/2024/Jan/2/escalating-streaks/">"Tom Scott, and the formidable power of escalating streaks"</a> written by Simon Willison.
+                        It's a quick read and I highly recommend checking it out, but in effect, the post discusses the power of using streaks for self-improvement. To get good at anything, one needs to perform that thing regularly,
+                        and thoughtfully with the goal of improving at it marginally each time. This is well-known, but the key takeaway for me was the importance of using a streak with <strong>leniancy</strong> built in.
+                        For example, instead of setting a goal of running 1 mile each day, a more flexible but still well-defined goal would be to run 1 mile for 4/7 days of the week.
+                    </p>
+
+                    <p>
+                        Since moving to New York, I've already accomplished a few things that I'm proud of. I've started regularly attending social events for chess and melee. I've been reaching out to both old and new friends,
+                        expanding my social circle and skills. However, I feel that I can still do more. I feel as if I'm plateauing with many of my hobbies and have begun to accept mediocrity. For example, I go to the gym regularly
+                        but haven't pushed myself to go more than 2-3 times a week, especially in the mornings. I'm leaving a lot of progress on the table as a result. To push myself, I will declare and document my streaks more visibly
+                        on this page.
+                    </p>
+
+                    <ol>
+                        <li>
+                            Update this page 3 times per week. An update can be very minimal. Benefits: Github square :star eyes:, improve web dev skills, improve writing, outlet for other creative projects like photography. accountable
+                            using github activity.
+                        </li>
+                        <li>
+                            Gym 4 times a week. Why: I want to be stronger and maintain good health, feels good mentally. I go 2-3 times per week right now.
+                        </li>
+                        <li>
+                            arrive at the office by 10am consistently. 4/5 days of the week.
+                        </li>
+                    </ol>
+
+                </div>
+            </div>
 
             <div class="musing-post">
                 <h2>december 28 / berlin</h2>
@@ -76,8 +114,10 @@ <h2>november 1st / this is a musing</h2>
             </div>
             <div class="musing-post" id="musing-post-template">
                 <h2></h2>
-                <p>
-                </p>
+                <div class="musing-content">
+                    <p>
+                    </p>
+                </div>
             </div>
         </div>
     </body>

diff --git a/scripts/musings.js b/scripts/musings.js
@@ -1,9 +1,15 @@
+// create a class to manage state (which post is open at a time, date of posts to track most recent post update, etc.)
+
+function getAllPosts(){
+  // get list of all musing posts
+  return document.getElementById("musings").getElementsByClassName("musing-post");
+}
+
 function makePostsCollapsible(){
-    let posts = document.getElementById("musings");
-    let coll = posts.getElementsByClassName("musing-post");
+    let posts = getAllPosts();
     let i;
-    for (i = 0; i < coll.length; i++) {
-      coll[i].addEventListener("click", function() {
+    for (i = 0; i < posts.length; i++) {
+      posts[i].addEventListener("click", function() {
         content = this.getElementsByClassName("musing-content")[0];
         if (content.style.maxHeight){
           content.style.maxHeight = null;
@@ -26,15 +32,54 @@ function makeMusingPost(title, content){
     // create collapsible musing
     contentTag.style.transition = "max-height 0.2s ease-out";
 
-
     // update content
     titleTag.innerText = title;
     contentTag.innerText = content;
     root.appendChild(newPost);
 }
 
-makePostsCollapsible();
+function openFirstPost(){
+    // get the first post and uncollapse it using the "click" event
+    let posts = getAllPosts();
+    posts[0].click();
+}
+
+function closeAllPosts(){
+  let posts = getAllPosts();
+  for (let i = 0; i < posts.length; i++) {
+    content = posts[i].getElementsByClassName("musing-content")[0];
+    content.style.maxHeight = null;
+  }
+}
 
-// makeMusingPost("november 7th / post election blues, mom visit", "lol");
-// makeMusingPost("november 1st / this is a musing", "this is my first musing on this page. it is currently 5:34 pm at the office. I've been working on this little personal website for the past ~1.5 hrs. I finished my fde related task earlier this morning but I'm not sure what my next steps are so I decided to work on this instead. Raymond, Boyu, and Saurav are still in the office. I am killing time until Alan's birthday dinner at 7pm. There was jazz playing in the meatpacking plaza (idk its official name) earlier. I dropped off my ballot today at the nearby post office. It is now 5:39 pm. What should I get Alan? This site is public so he could be reading this 😳. Hi Alan! Happy birthday! I think I'll take a walk. \n \n I went to Chong's Pleasure Palace last night to watch Incantation. The F train home at 10:30pm last night was packed like a can of sardines. As of tomorrow, I will have been in NYC for 3 months. I've experienced ridiculous emotional swings. Some days I feel devastatingly lonely. On others, I feel exhilarated. Today, I feel alright.");
+function openRandomPost(){
+    // close all existing posts and open a random one.
+    // TODO: don't open a post that's already open
+    closeAllPosts();
+    let posts = getAllPosts();
+    let randomIndex = Math.floor(Math.random() * (posts.length - 1));
+    posts[randomIndex].click();
+}
+
+function openAllPosts(){
+  let posts = getAllPosts();
+  for (let i = 0; i < posts.length; i++) {
+    content = posts[i].getElementsByClassName("musing-content")[0];
+    content.style.maxHeight = "100%";
+  }
+}
+
+function addButtonEvents(){
+  const closeButton = document.getElementById("close-all-musing-button");
+  closeButton.addEventListener("click", closeAllPosts);
 
+  const openButton = document.getElementById("open-all-musing-button");
+  openButton.addEventListener("click", openAllPosts);
+
+  const randomButton = document.getElementById("random-musing-button");
+  randomButton.addEventListener("click", openRandomPost);
+}
+
+makePostsCollapsible();
+// openFirstPost();
+addButtonEvents();
diff --git a/style.css b/style.css
@@ -101,4 +101,47 @@ caption{
 
 h2{
     font-size: 1.25em;
+}
+
+/* CSS */
+button {
+  font-size: 14px;
+  font-weight: 200;
+  letter-spacing: 1px;
+  padding: 13px 20px 13px;
+  outline: 0;
+  border: 1px solid black;
+  cursor: pointer;
+  position: relative;
+  background-color: rgba(0, 0, 0, 0);
+  user-select: none;
+  -webkit-user-select: none;
+  touch-action: manipulation;
+}
+
+button:after {
+  content: "";
+  background-color: #ffe54c;
+  width: 100%;
+  z-index: -1;
+  position: absolute;
+  height: 100%;
+  top: 7px;
+  left: 7px;
+  transition: 0.2s;
+}
+
+button:hover:after {
+  top: 0px;
+  left: 0px;
+}
+
+@media (min-width: 768px) {
+  .button-52 {
+    padding: 13px 50px 13px;
+  }
+}
+
+#musing-buttons {
+    margin: 1vh 0 3vh 0;
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -50,6 +50,7 @@ <h2>some favorites:</h2> @@
                         the night is short walk on girl
                     </li>
                 </ul>
+                <h2>theme for jan 2025: demonstrate consistent, thoughtful effort in everything that I do </h2>
             </div>
         </body>
     </html>