fixed all arrows

neeharavula · May 20, 2024 · e34a34b · e34a34b
1 parent 9a309ed
commit e34a34b
Show file tree

Hide file tree

Showing 6 changed files with 34 additions and 20 deletions.
diff --git a/res/script.js b/res/script.js
@@ -99,12 +99,12 @@ window.addEventListener("resize", () => {
 
 // WORK PAGE TILES
 var workExperiences = [
-    { path: "../src/nm.html", year: 2023, season: "SUMMER", projectName: "Northwestern Mutual", background: "../assets/logos/nm.png", description: "SEE INTERNSHIP 🡥" },
-    { path: "../src/melodics.html", year: 2023, season: "SPRING", projectName: "Melodics", background: "../assets/logos/melodics.png", description: "SEE PROJECT 🡥" },
-    { path: "../src/ga.html", year: 2022, season: "SUMMER", projectName: "General Atomics", background: "../assets/logos/ga.png", description: "SEE INTERNSHIP 🡥" },
-    { path: "../src/course-planner.html", year: 2023, season: "SPRING", projectName: "Course Planner", background: "../assets/logos/cp.png", description: "SEE PROJECT 🡥" },
-    { path: "../src/t4g.html", year: 2023, season: "SPRING", projectName: "Tech 4 Good", background: "../assets/logos/t4g1.png", description: "SEE EXPERIENCE 🡥" },
-    { path: "../src/ahacks.html", year: 2021, season: "WINTER", projectName: "USC AthenaHacks", background: "../assets/logos/ahacks.png", description: "SEE HACKATHON 🡥" },
+    { path: "../src/nm.html", year: 2023, season: "SUMMER", projectName: "Northwestern Mutual", background: "../assets/logos/nm.png", description: "SEE INTERNSHIP ➚" },
+    { path: "../src/melodics.html", year: 2023, season: "SPRING", projectName: "Melodics", background: "../assets/logos/melodics.png", description: "SEE PROJECT ➚" },
+    { path: "../src/ga.html", year: 2022, season: "SUMMER", projectName: "General Atomics", background: "../assets/logos/ga.png", description: "SEE INTERNSHIP ➚" },
+    { path: "../src/course-planner.html", year: 2023, season: "SPRING", projectName: "Course Planner", background: "../assets/logos/cp.png", description: "SEE PROJECT ➚" },
+    { path: "../src/t4g.html", year: 2023, season: "SPRING", projectName: "Tech 4 Good", background: "../assets/logos/t4g1.png", description: "SEE EXPERIENCE ➚" },
+    { path: "../src/ahacks.html", year: 2021, season: "WINTER", projectName: "USC AthenaHacks", background: "../assets/logos/ahacks.png", description: "SEE HACKATHON ➚" },
 ];
 
 // SORT WORK TILES BY YEAR AND SEASON (NEWEST -> OLDEST)

diff --git a/res/work.css b/res/work.css
@@ -6,6 +6,7 @@ body {
     animation: fadeInAnimation ease 1.3s;
 }
 
+
 /* WORK EXPERIENCE TILES */
 
 .work-tiles {
@@ -303,6 +304,7 @@ body {
 }
 
 #section3 .arrow-container i {
+    padding-top: 0.4em;
     font-size: 1em;
     color: #333333;
 }

diff --git a/src/ahacks.html b/src/ahacks.html
@@ -70,7 +70,7 @@ <h2>Overview</h2>
                     <p>We developed the flow control and voice functions of our application using <strong>Twilio Console Studio</strong>, using interactions such as "split based on dial or speech" and "connect call to." We linked our <strong>Twilio flow chart</strong>                        to our mobile user interface using <strong>React-Native</strong> and published the application through the <strong>Expo-CLI</strong> framework. Learn more at the link below!</p>
                 </div>
                 <div class="see-project-button">
-                    <a href="https://devpost.com/software/usc_sos" target="_blank" class="rounded-rectangle grow">USC SOS DEVPOST <span>&#8599;</span></a>
+                    <a href="https://devpost.com/software/usc_sos" target="_blank" class="rounded-rectangle grow">USC SOS DEVPOST ➚</a>
                 </div>
             </div>
         </section>

diff --git a/src/course-planner.html b/src/course-planner.html
@@ -67,7 +67,7 @@ <h2>Overview</h2>
                         a Python-based web framework that allows for the development of efficient database driven web applications (similar to Django or Flask). See our project below!</p>
                 </div>
                 <div class="see-project-button">
-                    <a href="https://github.com/CoursePlanner183/courseplanner/tree/main/apps/courseplanner" target="_blank" class="rounded-rectangle grow">SEE COURSE PLANNER <span>&#8599;</span></a>
+                    <a href="https://github.com/CoursePlanner183/courseplanner/tree/main/apps/courseplanner" target="_blank" class="rounded-rectangle grow">SEE COURSE PLANNER ➚</a>
                 </div>
             </div>
         </section>

diff --git a/src/nm.html b/src/nm.html
@@ -64,9 +64,10 @@ <h2>Northwestern Mutual<br>Software Engineering Internship</h2>
                 <div class="title-caption">
                     <h2>Overview</h2>
                     <p>
-                        <strong><a href="https://www.northwesternmutual.com/" target="_blank" class="hover-underline-animation">Northwestern Mutual (NM) <span>&#8599;</span></a></strong> &nbsp;is a financial services and life insurance company based in Milwaukee, WI. I spent the
-                        summer working on a <strong>client communications</strong> team within NM's <strong>Engineering Solutions Delivery</strong> division, which is responsible for modernizing the development and delivery of communications and applications
-                        used by over 10,000 field representatives. These client communications can consist of physical contracts, statements, bills, and correspondence, as well as digital notifications via text or email according to client preferences.
+                        <strong><a href="https://www.northwesternmutual.com/" target="_blank" class="hover-underline-animation">Northwestern Mutual (NM) <span>&#8599;</span></a></strong> &nbsp;is a financial services and life insurance company based in
+                        Milwaukee, WI. I spent the summer working on a <strong>client communications</strong> team within NM's <strong>Engineering Solutions Delivery</strong> division, which is responsible for modernizing the development and delivery
+                        of communications and applications used by over 10,000 field representatives. These client communications can consist of physical contracts, statements, bills, and correspondence, as well as digital notifications via text or email
+                        according to client preferences.
                     </p>
                 </div>
                 <div class="title-caption">

diff --git a/src/t4g.html b/src/t4g.html
@@ -63,42 +63,53 @@ <h2>UCSC Tech4Good<br>APIs & Frameworks</h2>
             <div class="titles-captions">
                 <div class="title-caption">
                     <h2>Overview</h2>
-                    <p><strong><a href="https://tech4good.soe.ucsc.edu/initiatives" target="_blank" class="hover-underline-animation">UC Santa Cruz's Tech4Good Lab <span>&#8599;</span></a></strong> &nbsp;is a research organization dedicated to social computing and developing systems to help individuals and communities to thrive in work, education, and more. During my time at the lab, I worked on the <strong>APIs and Frameworks</strong> team where I was involved in adding functionality to <strong><a href="https://causeway.soe.ucsc.edu/#/" target="_blank" class="hover-underline-animation">Causeway <span>&#8599;</span></a></strong>, an educational app where users can learn skills like web development through streamlined learning pathways, project hierarchies, mentorship, and collaboration.</p>
+                    <p><strong><a href="https://tech4good.soe.ucsc.edu/initiatives" target="_blank" class="hover-underline-animation">UC Santa Cruz's Tech4Good Lab <span>&#8599;</span></a></strong> &nbsp;is a research organization dedicated to social computing
+                        and developing systems to help individuals and communities to thrive in work, education, and more. During my time at the lab, I worked on the <strong>APIs and Frameworks</strong> team where I was involved in adding functionality
+                        to <strong><a href="https://causeway.soe.ucsc.edu/#/" target="_blank" class="hover-underline-animation">Causeway <span>&#8599;</span></a></strong>, an educational app where users can learn skills like web development through streamlined
+                        learning pathways, project hierarchies, mentorship, and collaboration.</p>
                 </div>
                 <div class="title-caption">
                     <h2 class="appear">Task</h2>
-                    <p class="appear">My teammate and I were responsible for developing an <strong>integrated development environment (IDE)</strong> that could be added to Causeway to allow users to learn programming concepts hands-on. The IDE had to include the following components:</p>
+                    <p class="appear">My teammate and I were responsible for developing an <strong>integrated development environment (IDE)</strong> that could be added to Causeway to allow users to learn programming concepts hands-on. The IDE had to include the following
+                        components:</p>
                     <li class="appear"><strong>Instructions Pane:</strong> containing step-by-step tutorials for specific tasks/projects</li>
                     <li class="appear"><strong>File Panel:</strong> to allow the user to select files</li>
                     <li class="appear"><strong>Code Editor:</strong> to allow the user to make changes to a selected file</li>
                     <li class="appear"><strong>Output Pane:</strong> to view the results of code changes (ex: a html webpage)</li>
                     <li class="appear"><strong>Terminal Pane:</strong> to allow the user to compile and run code</li>
-                    <p class="appear">To accomplish this task, we used the <strong><a href="https://webcontainers.io/" target="_blank" class="hover-underline-animation">Stackblitz WebContainers API <span>&#8599;</span></a></strong>, which allows us to boot up a <strong>WebContainer</strong>― a browser-based runtime for executing applications and operating system commands. From there, we can populate the container's file system, install packages, and finally run the IDE server in a browser window.</p>
+                    <p class="appear">To accomplish this task, we used the <strong><a href="https://webcontainers.io/" target="_blank" class="hover-underline-animation">Stackblitz WebContainers API <span>&#8599;</span></a></strong>, which allows us to boot up a <strong>WebContainer</strong>―
+                        a browser-based runtime for executing applications and operating system commands. From there, we can populate the container's file system, install packages, and finally run the IDE server in a browser window.</p>
                 </div>
                 <!-- DEVELOPMENT -->
                 <div class="title-caption">
                     <h2 class="appear">Development</h2>
                     <!-- SETTING UP WEBCONTAINER -->
                     <h3 class="appear">Setting up the WebContainer</h3>
-                    <p class="appear">First, we constructed the WebContainer using <strong><a href="https://vitejs.dev/" target="_blank" class="hover-underline-animation">Vite <span>&#8599;</span></a></strong>, a development tool equipped with a dev server and used for building modern web apps. This involved constructing referenceable HTML objects for our code editor/textarea and output boxes as depicted below:</p>
+                    <p class="appear">First, we constructed the WebContainer using <strong><a href="https://vitejs.dev/" target="_blank" class="hover-underline-animation">Vite <span>&#8599;</span></a></strong>, a development tool equipped with a dev server and used for
+                        building modern web apps. This involved constructing referenceable HTML objects for our code editor/textarea and output boxes as depicted below:</p>
                     <img src="../assets/t4g/ide1.png" alt="IDE Image 1" class="t4g-image appear">
-                    <p class="appear">Then, we installed the <strong>WebContainers API</strong> package and created an event listener for booting up a WebContainer instance, and imported an <strong>Express</strong> app to the WebContainer, which contains the files <strong>index.js</strong> (for app startup and routing) and <strong>package.json</strong> (to handle dependencies), into our main JS module. At this point, we were able to load the contents of a file in the code editor.</p>
+                    <p class="appear">Then, we installed the <strong>WebContainers API</strong> package and created an event listener for booting up a WebContainer instance, and imported an <strong>Express</strong> app to the WebContainer, which contains the files <strong>index.js</strong>                        (for app startup and routing) and <strong>package.json</strong> (to handle dependencies), into our main JS module. At this point, we were able to load the contents of a file in the code editor.</p>
                     <!-- RUNNING SERVER -->
                     <h3 class="appear">Running the Dev Server</h3>
-                    <p class="appear">To be able to run commands such as "npm install" from inside the WebContainer, we created an <strong>installDependencies</strong> function inside the event listener. From there, we created another function called <strong>startDevServer</strong>, which</p>
+                    <p class="appear">To be able to run commands such as "npm install" from inside the WebContainer, we created an <strong>installDependencies</strong> function inside the event listener. From there, we created another function called <strong>startDevServer</strong>,
+                        which</p>
                     <li class="appear">Runs the server using the command "npm run dev"</li>
                     <li class="appear">Listens to the server-ready event</li>
                     <li class="appear">Assigns a URL to the output box of the WebContainer</li>
                     <p class="appear">This allowed us to run the Express app inside the WebContainer, and successfully update the output box based on the code in the code editor.</p>
                     <h3 class="appear">Creating a File System Tree</h3>
-                    <p class="appear">We utilized the API's file system operations to build a <strong>file tree</strong>, which involved recursively traversing through the directories with the readdir function. Then, we used <strong>mat-tree</strong> (an Angular Material design component) to create the file tree pane UI. In order to make a selected file editable in the code editor, we created a function to write changes to the code editor and used <strong>CodeMirror</strong> to listen to the value changes and immediately update the output box accordingly. We also styled the code editor for better readability using the corresponding CodeMirror scss code.</p>
+                    <p class="appear">We utilized the API's file system operations to build a <strong>file tree</strong>, which involved recursively traversing through the directories with the readdir function. Then, we used <strong>mat-tree</strong> (an Angular Material
+                        design component) to create the file tree pane UI. In order to make a selected file editable in the code editor, we created a function to write changes to the code editor and used <strong>CodeMirror</strong> to listen to the value
+                        changes and immediately update the output box accordingly. We also styled the code editor for better readability using the corresponding CodeMirror scss code.</p>
                     <h3 class="appear">Connecting a Terminal</h3>
-                    <p class="appear">Finally, we used <strong>Xterm.js</strong> to embed a terminal in our IDE, which is the same terminal used by Visual Studio Code and other popular IDEs. We constructed a referenceable HTML object for the terminal window and redirected the output of our installDependencies and startDevServer methods to the terminal. Then, we created a button to toggle the visibility of the terminal for a better user experience.</p>
+                    <p class="appear">Finally, we used <strong>Xterm.js</strong> to embed a terminal in our IDE, which is the same terminal used by Visual Studio Code and other popular IDEs. We constructed a referenceable HTML object for the terminal window and redirected
+                        the output of our installDependencies and startDevServer methods to the terminal. Then, we created a button to toggle the visibility of the terminal for a better user experience.</p>
                     <img src="../assets/t4g/final-ide.gif" alt="final IDE" class="t4g-image appear">
                 </div>
                 <div class="title-caption">
                     <h2 class="appear">Reflections</h2>
-                    <p class="appear">Coming from very little experience with <strong>JavaScript</strong>, this task was super rewarding and helped me learn a lot about working with APIs and frameworks like Angular and Express.js. I enjoyed being able to work in a team alongside other passionate individuals and contribute to a cause that could improve means of education for future students!</p>
+                    <p class="appear">Coming from very little experience with <strong>JavaScript</strong>, this task was super rewarding and helped me learn a lot about working with APIs and frameworks like Angular and Express.js. I enjoyed being able to work in a team
+                        alongside other passionate individuals and contribute to a cause that could improve means of education for future students!</p>
                 </div>
             </div>
         </section>