Merge pull request #2 from Rainyy21/main-content

added more text to the second page and style it

README.md

@@ -12,19 +12,29 @@ This document outlines what I'm currently working on and what my plans are.
 
 ---
 
+## Working On
+
+- Working on the second page:
+  - ✅ Finish the education section
+  - ✅ Finish the hobbies section
+  - ⏳ Add icon
+  - ⏳ Add short description about myself
+
+---
+
 ## Done
 
 - Completed dark and light mode toggle
-- Finalized color scheme with variables
+- Finalized color scheme with CSS variables
 - Built main content box to hold info
 - Created template layout
 - Added welcome text and introduction
+- Info button now links to the second page
 
 ---
 
 ## Notes
 
-- I committed a change to add color variables and the dark mode button.
+- Committed changes to add color variables and the dark mode button
-- The dark mode button is working.
+- The dark mode button is working
-- The structure and main content have been added.
+- Structure and main content have been added
-

css/about.css

@@ -1,3 +1,4 @@
+/* text box and make it so it doesn't overflow out of the box */
 #about.description{
     font-family: monospace;
     font-size: 1.5rems;
@@ -10,6 +11,25 @@
     width: 40rem;
 }
 
+/* tittle (contain name, and simple text with icon)  */
 #about.tittle_text{
-    padding-bottom: 2rem;
+    padding-bottom: 0rem;
+}
+#about.tittle_text h1{
+    font-size: 2.5rem;
+}
+
+/* education section */
+#textbox.brooklyncollege{
+   border-left: 3px solid rgba(17, 17, 17, 0.5);
+}
+
+#education.brooklyncollege{
+    padding-left: 4px;
+    font-size: .9rem;
+}
+
+/* hobbie section */
+#bulletpoint.hobbie{
+    font-size:1.2rem;
 }

info.html

@@ -52,15 +52,58 @@
                 <!-- this might be where the whole stuff should be in -->
                 <div class = "box_body" id = "about">
                 <!-- this is the text for the main page -->
-                    <p class = "tittle_text" id = "about">
-                        HI I'm <span class = "main_page_name"> Simon Zheng</span>
-                    </p>
-                    <h2 class = "description" id = "about">
-                        I'm a student at brookyln college.<br>
-                        I'm currently in my senior year and considering going for my master.<br>
                     
+                    <!-- adding my pfp image -->
+                    <div class = "tittle_text" id = "about">
+                        <h1>Simon Zheng</h1>
+                        <!-- add paragraph here to explain what i do -->
+                    </div>
 
+                    <div class = "description" id = "about">
+                        <h2>
+                            Hi I'm Simon, Student studying in computer science.
                         </h2>
+
+                        <br>
+
+                        <div class = "education" id = "textbox">
+                            <h1>
+                            Education
+                            </h1>
+                            <div class = "brooklyncollege" id = "textbox">
+                                <div class = "brooklyncollege" id = education>
+                                    <p>
+                                        Bachelor of Science in Computer Science
+                                    </p>
+                                    <span>
+                                        GRADUATE Brooklyn College 2026
+                                    </span>
+                                </div>
+                            </div>
+                        </div>
+                        <div class = "interest" id = "textbox">
+                            <h1>
+                                Other interest
+                            </h1>
+                            <ul class = "hobbie" id = "bulletpoint">
+                                <li>
+                                    Game
+                                </li>
+                                <li>
+                                    Coffee
+                                </li>
+                                <li>
+                                    Mahjong
+                                </li>
+                                <li>
+                                    coding
+                                </li>
+                            </ul>
+                        </div>
+
+                    </div>
+                    
+
                     <!-- social box might need to move it -->
                 </div>
              </div>