Refactor app.component.html for responsiveness and clarity

sid-devspot · web-flow · commit 423bb78ef389 · 2026-01-06T18:26:33.000+05:30
Updated HTML structure and content for better responsiveness and clarity. Adjusted conditional rendering for screen width and improved text formatting.
diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -1,27 +1,27 @@
 <main>
   <section class="app-component app-home" #sectionRef>
     <div class="home-container">
-      <h3 class="type-effect" *ngIf="screenWidth > 700">
-        👋 Hey there, I'm Siddarth G
-      </h3>
-      <h3 *ngIf="screenWidth < 700">
+      @if (screenWidth > 700) {
+      <h3 class="type-effect">👋 Hey there, I'm Siddarth G</h3>
+      } @if (screenWidth < 700) {
+      <h3>
         👋 Hey there,
         <span class="type-effect">I'm Siddarth G</span>
       </h3>
+      }
       <p>
-        I'm a Frontend Developer who enjoys turning pixels into playful,
-        functional interfaces. I like building things that feel smooth, look
-        clean, and just work. Design is where I sketch ideas. Code is where I
-        bring them to life. I try to keep things simple, neat, and a little bit
-        shiny ✨
+        I'm a Frontend Developer who enjoys turning pixels into playful, functional interfaces. I
+        like building things that feel smooth, look clean, and just work. Design is where I sketch
+        ideas. Code is where I bring them to life. I try to keep things simple, neat, and a little
+        bit shiny ✨
       </p>
       <div class="icons">
         <a href="https://github.com/orgs/Sids-projects/repositories"
-          ><img src="./assets/Subtract.svg" alt="Github Logo" /> Github</a
+          ><img src="Subtract.svg" alt="Github Logo" /> Github</a
         >
-        <a href="#"><img src="./assets/Vector.svg" alt="Github Logo" /> NPM</a>
+        <a href="#"><img src="Vector.svg" alt="Github Logo" /> NPM</a>
         <a href="https://www.linkedin.com/in/mrsiddarth/"
-          ><img src="./assets/linkedin.svg" alt="Linkedin Logo" /> Linkedin</a
+          ><img src="linkedin.svg" alt="Linkedin Logo" /> Linkedin</a
         >
       </div>
     </div>
@@ -31,43 +31,63 @@ <h3 *ngIf="screenWidth < 700">
     <header>
       <h2>🧰 What I Use & How I Build</h2>
       <p>
-        I like making the web feel nice — from scribbles to pixels, clean and
-        fun all the way.
+        From sketching ideas to shipping features — here's the stack that helps me build smooth,
+        user-friendly experiences.
       </p>
     </header>
 
     <div class="app-body">
       <div class="about-container">
         <div class="about-content">
-          <h3 class="highlight">
+          <h3>Frontend Foundations</h3>
+          <p>
+            The frontend foundation — structuring layouts, styling interfaces, and adding
+            interactivity that feels smooth and intuitive.
+          </p>
+          <div class="highlight">
             <span>HTML</span>
             <span>CSS</span>
             <span>JavaScript</span>
             <span>TypeScript</span>
-          </h3>
+          </div>
+        </div>
+
+        <div class="about-content">
+          <h3>Frontend Frameworks</h3>
           <p>
-            The essentials — used to structure, style, and breathe life into the
-            frontend.
+            Where things level up — building fast, reactive applications and mobile experiences that
+            just feel right.
           </p>
+          <div class="highlight">
+            <span>Angular</span>
+            <span>React Native</span>
+          </div>
         </div>
+
         <div class="about-content">
-          <h3 class="highlight"><span>Angular</span></h3>
+          <h3>Backend & Data</h3>
           <p>
-            Where it all comes together — building smooth, reactive, single-page
-            applications.
+            Powering the frontend behind the scenes — handling data, logic, and APIs to keep
+            everything connected and working smoothly.
           </p>
+          <div class="highlight">
+            <span>PHP</span>
+            <span>MySQL</span>
+          </div>
         </div>
+
         <div class="about-content">
-          <h3 class="highlight">
+          <h3>Design Tools</h3>
+          <p>
+            My design toolkit — for wireframes, UI visuals, icons, and polishing details before they
+            turn into code.
+          </p>
+          <div class="highlight">
             <span>Figma</span>
             <span>Illustrator</span>
             <span>Photoshop</span>
             <span>Inkscape</span>
-          </h3>
-          <p>
-            My design toolkit — for wireframing, visual design, and keeping
-            everything neat and user-friendly.
-          </p>
+          </div>
         </div>
       </div>
     </div>
@@ -76,7 +96,7 @@ <h3 class="highlight">
   <section class="app-component app-experience" #sectionRef>
     <header>
       <h2>🧠 My Journey So Far</h2>
-      <p>From curious clicks to clean code — here's where I've been.</p>
+      <p>From building UI systems to shipping real-world features — here's what I've been up to.</p>
     </header>
     <div class="app-body experience-content">
       <div class="experience-content-01">
@@ -87,63 +107,35 @@ <h3 class="highlight">🛠 Vsolv Engineering Pvt Ltd</h3>
       <div class="experience-content-02">
         <div class="left-box">
           <p>
-            Built modern Angular web apps that run silky smooth across devices
+            Built a reusable Angular style package (Bootstrap-style) published to NPM — helping
+            teams create consistent layouts faster with shared utilities and components.
+          </p>
+          <p>
+            Designed a scalable SCSS architecture with clean structure for variables, mixins,
+            components, and utilities — keeping styles easy to maintain and extend.
           </p>
           <p>
-            Collaborated like a champ with developers, designers & product folks
+            Developed custom Angular directives for interactions, animations, tab scrolling, and
+            navigation — cutting down repetitive UI logic across apps.
           </p>
         </div>
+
         <div class="right-box">
           <p>
-            Wove in eye-catching UI/UX that didn't just look good, but made
-            sense
+            Led frontend development for the NAC Bank Vendor Management Process — an end-to-end
+            vendor onboarding system with secure data capture and multi-level approval workflows,
+            ensuring vendor information is validated before activation.
           </p>
           <p>
-            Always racing against time (and winning), delivering high-quality
-            code
+            Over 7 months, worked closely with backend teams and stakeholders to design clear,
+            user-friendly interfaces for complex banking workflows, focusing on form structure, data
+            accuracy, and smooth state handling to make critical processes intuitive and reliable.
           </p>
         </div>
       </div>
     </div>
   </section>
 
-  <section class="app-component app-qualify" #sectionRef>
-    <header>
-      <h2>🏫 A Bit of Background</h2>
-      <p>
-        Wrapped up higher secondary, figured out I liked tech more than
-        textbooks
-      </p>
-    </header>
-
-    <div class="app-body">
-      <div class="qualify-container">
-        <div class="qualify-content">
-          <h2 class="qualify-icon qualify-icon-01">🏣</h2>
-          <div>
-            <p>(2018 - 2020)</p>
-            <h3 class="highlight">St. Peter's Institute</h3>
-            <p>
-              B.Com — learned about business, numbers, and how not to mess up a
-              balance sheet
-            </p>
-          </div>
-        </div>
-        <div class="qualify-content">
-          <h2 class="qualify-icon qualify-icon-02">🏫</h2>
-          <div>
-            <p>(2016 - 2017)</p>
-            <h3 class="highlight">ICF Silver Jubilee School</h3>
-            <p>
-              Wrapped up higher secondary, figured out I liked tech more than
-              textbooks
-            </p>
-          </div>
-        </div>
-      </div>
-    </div>
-  </section>
-
   <section class="app-component app-projects" #sectionRef>
     <header>
       <div class="header-01">
@@ -152,8 +144,7 @@ <h2>
           <a href="https://walrec-9e5d8.web.app/" target="_blank">🔗 Link</a>
         </h2>
         <p>
-          A personal expense tracking app with dark UI and chart-based
-          insights.<br />
+          A personal expense tracking app with dark UI and chart-based insights.<br />
           🛠 Tech Stack: Angular | Firebase
         </p>
       </div>
@@ -166,10 +157,7 @@ <h2>
         </button>
         <div class="project-imgs">
           <div>
-            <img
-              [src]="walrectCurrentProject.img"
-              [alt]="walrectCurrentProject.alt"
-            />
+            <img [src]="walrectCurrentProject.img" [alt]="walrectCurrentProject.alt" />
             <p>
               <span>{{ walrectCurrentProject.title }}</span> -
               {{ walrectCurrentProject.content }}
@@ -183,70 +171,6 @@ <h2>
     </div>
   </section>
 
-  <section class="app-component app-projects" #sectionRef>
-    <header>
-      <div class="header-01">
-        <h2>🎨 Project - CSSFusion</h2>
-        <p>
-          It's like a little style toolkit — plug it into any project and build
-          with ready-made classes. Handy when you want less CSS clutter and more
-          styling freedom.
-        </p>
-      </div>
-
-      <div class="header-02">
-        <a href="https://github.com/sid-devspot/cssfusion" target="_blank"
-          >GitHub</a
-        >
-        <a href="https://sid-devspot.github.io/cssfusion/#/Home" target="_blank"
-          >🔗 Link</a
-        >
-      </div>
-    </header>
-
-    <div class="project-content">
-      <div class="projects-grid">
-        <div class="project-card">
-          <h3>📦 Overview</h3>
-          <p>
-            <strong>CSSFusion</strong> is a reusable Angular style package with
-            ready-made components and layout tools for fast, consistent UI
-            design.
-          </p>
-        </div>
-
-        <div class="project-card project-card-expand">
-          <h3>🧩 Components & Features:</h3>
-          <div class="project-card-points">
-            <p>
-              <span>Components</span> Includes reusable UI building blocks like
-              <strong>Tabs</strong>, <strong>Accordion</strong>,
-              <strong>Cards</strong>, and <strong>Buttons</strong> — all styled
-              and optimized for responsive layouts with simple directive usage.
-            </p>
-            <p>
-              <span>Grid & Layout</span> - Flex/grid utilities for screen
-              structure
-            </p>
-            <p>
-              <span>Customizer</span> - Live screen editor to visually build &
-              group components
-            </p>
-            <p>
-              <span>Theme Support</span> - Use built-in color palettes or
-              override with CSS variables
-            </p>
-          </div>
-        </div>
-
-        <div class="project-card">
-          <h3>🛠 Tech Stack:</h3>
-          <p>Angular | SCSS | TypeScript | npm</p>
-        </div>
-      </div>
-    </div>
-  </section>
-
   <section class="app-component app-projects" #sectionRef>
     <header>
       <div class="header-01">
@@ -255,37 +179,27 @@ <h2>
           <a href="https://travellerspond.com/" target="_blank">🔗 Live</a>
         </h2>
         <p>
-          Angular-based travel site with tours, deals, and easy booking. Hosted
-          on Bluehost. <br />
+          Angular-based travel site with tours, deals, and easy booking. Hosted on Bluehost. <br />
           🛠 Tech Stack: Angular | PHP | mySQL | bluehost
         </p>
       </div>
     </header>
 
     <div class="project-content">
       <div class="project-imgs-box">
-        <button
-          class="scroll-btn left"
-          (click)="previousProject('travellerspond')"
-        >
+        <button class="scroll-btn left" (click)="previousProject('travellerspond')">
           <span class="material-symbols-outlined"> arrow_circle_left </span>
         </button>
         <div class="project-imgs">
           <div>
-            <img
-              [src]="travellerCurrentProject.img"
-              [alt]="travellerCurrentProject.alt"
-            />
+            <img [src]="travellerCurrentProject.img" [alt]="travellerCurrentProject.alt" />
             <p>
               <span>{{ travellerCurrentProject.title }}</span> -
               {{ travellerCurrentProject.content }}
             </p>
           </div>
         </div>
-        <button
-          class="scroll-btn right"
-          (click)="nextProject('travellerspond')"
-        >
+        <button class="scroll-btn right" (click)="nextProject('travellerspond')">
           <span class="material-symbols-outlined"> arrow_circle_right </span>
         </button>
       </div>
@@ -298,8 +212,8 @@ <h2>
       <div class="contact-content">
         <h2>📮 Say Hello</h2>
         <p>
-          Always open to chat, share ideas, or collab on something cool. Whether
-          it's frontend fun, UI/UX design, or random side projects — I'm in.
+          Always open to chat, share ideas, or collab on something cool. Whether it's frontend fun,
+          UI/UX design, or random side projects — I'm in.
         </p>
       </div>
       <p class="contact-mail">
