Skip to content

Commit a4b7b33

Browse files
sid-devspotsid-devspot
committed
Backup Push
1 parent 83d6961 commit a4b7b33

17 files changed

Lines changed: 297 additions & 206 deletions

‎src/app/app.component.html‎

Lines changed: 72 additions & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -39,21 +39,31 @@ <h2>🧰 What I Use & How I Build</h2>
3939
<div class="app-body">
4040
<div class="about-container">
4141
<div class="about-content">
42-
<h3 class="highlight">HTML / CSS / JavaScript / TypeScript</h3>
42+
<h3 class="highlight">
43+
<span>HTML</span>
44+
<span>CSS</span>
45+
<span>JavaScript</span>
46+
<span>TypeScript</span>
47+
</h3>
4348
<p>
4449
The essentials — used to structure, style, and breathe life into the
4550
frontend.
4651
</p>
4752
</div>
4853
<div class="about-content">
49-
<h3 class="highlight">Angular</h3>
54+
<h3 class="highlight"><span>Angular</span></h3>
5055
<p>
5156
Where it all comes together — building smooth, reactive, single-page
5257
applications.
5358
</p>
5459
</div>
5560
<div class="about-content">
56-
<h3 class="highlight">Figma / Illustrator / Photoshop / Inkscape</h3>
61+
<h3 class="highlight">
62+
<span>Figma</span>
63+
<span>Illustrator</span>
64+
<span>Photoshop</span>
65+
<span>Inkscape</span>
66+
</h3>
5767
<p>
5868
My design toolkit — for wireframing, visual design, and keeping
5969
everything neat and user-friendly.
@@ -137,46 +147,38 @@ <h3 class="highlight">ICF Silver Jubilee School</h3>
137147
<section class="app-component app-projects" #sectionRef>
138148
<header>
139149
<div class="header-01">
140-
<h2>💸 Project - WalRec</h2>
150+
<h2>
151+
💸 Project - WalRec
152+
<a href="https://walrec-9e5d8.web.app/" target="_blank">🔗 Link</a>
153+
</h2>
141154
<p>
142-
A personal expense tracking app with dark UI and chart-based insights.
155+
A personal expense tracking app with dark UI and chart-based
156+
insights.<br />
157+
🛠 Tech Stack: Angular | Firebase
143158
</p>
144159
</div>
145-
146-
<div class="header-02">
147-
<a href="https://walrec-9e5d8.web.app/" target="_blank">🔗 Link</a>
148-
</div>
149160
</header>
161+
150162
<div class="project-content">
151-
<div class="projects-grid">
152-
<div class="project-card">
153-
<h3>📦 Overview</h3>
154-
<p>
155-
A simple finance tracker to help keep an eye on daily expenses and
156-
incomes. Made with Angular + Firebase — login, track, and see your
157-
money move in real-time.
158-
</p>
159-
</div>
160-
<div class="project-card project-card-expand">
161-
<h3>🧭 Screens & Features:</h3>
162-
<div class="project-card-points">
163-
<p><span>Login</span> - Basic username/password auth</p>
164-
<p><span>Signup</span> - Email verification via Firebase</p>
165-
<p>
166-
<span>Auth Flow</span> - Blocks access until email is verified
167-
</p>
163+
<div class="project-imgs-box">
164+
<button class="scroll-btn left" (click)="previousProject('walrec')">
165+
<span class="material-symbols-outlined"> arrow_circle_left </span>
166+
</button>
167+
<div class="project-imgs">
168+
<div>
169+
<img
170+
[src]="walrectCurrentProject.img"
171+
[alt]="walrectCurrentProject.alt"
172+
/>
168173
<p>
169-
<span>Dashboard</span> - Income & expenses in chart/calendar view
174+
<span>{{ walrectCurrentProject.title }}</span> -
175+
{{ walrectCurrentProject.content }}
170176
</p>
171-
<p><span>Expense</span> - Add expenses with custom categories</p>
172-
<p><span>Budget</span> - Track EMIs, subscriptions, etc.</p>
173-
<p><span>Profile</span> - Emoji-based avatar and user info</p>
174177
</div>
175178
</div>
176-
<div class="project-card">
177-
<h3>🛠 Tech Stack:</h3>
178-
<p>Angular | Firebase</p>
179-
</div>
179+
<button class="scroll-btn right" (click)="nextProject('walrec')">
180+
<span class="material-symbols-outlined"> arrow_circle_right </span>
181+
</button>
180182
</div>
181183
</div>
182184
</section>
@@ -248,80 +250,62 @@ <h3>🛠 Tech Stack:</h3>
248250
<section class="app-component app-projects" #sectionRef>
249251
<header>
250252
<div class="header-01">
251-
<h2>🌍 Project - TravellersPond</h2>
253+
<h2>
254+
🌍 Project - TravellersPond
255+
<a href="https://travellerspond.com/" target="_blank">🔗 Live</a>
256+
</h2>
252257
<p>
253258
Angular-based travel site with tours, deals, and easy booking. Hosted
254-
on Bluehost.
259+
on Bluehost. <br />
260+
🛠 Tech Stack: Angular | PHP | mySQL | bluehost
255261
</p>
256262
</div>
257-
258-
<div class="header-02">
259-
<a href="https://travellerspond.com/" target="_blank">🔗 Live</a>
260-
</div>
261263
</header>
262264

263265
<div class="project-content">
264-
<div class="projects-grid">
265-
<div class="project-card">
266-
<h3>📦 Overview</h3>
267-
<p>
268-
<strong>TravellersPond</strong> is a responsive travel site for
269-
browsing tour packages and contacting support, with an admin panel
270-
for managing queries.
271-
</p>
272-
</div>
273-
274-
<div class="project-card project-card-expand">
275-
<h3>🧭 Screens & Features:</h3>
276-
<div class="project-card-points">
277-
<p>
278-
<span>Home</span> - Highlights travel categories with eye-catching
279-
visuals
280-
</p>
281-
<p>
282-
<span>Tour Listings</span> - Detailed international & domestic
283-
packages
284-
</p>
285-
<p>
286-
<span>Contact</span> - Users can submit queries for quick
287-
follow-up
288-
</p>
289-
<p>
290-
<span>Admin Login</span> - Authenticated access for travel agency
291-
staff
292-
</p>
293-
<p><span>Admin Panel</span> - View and respond to user inquiries</p>
266+
<div class="project-imgs-box">
267+
<button
268+
class="scroll-btn left"
269+
(click)="previousProject('travellerspond')"
270+
>
271+
<span class="material-symbols-outlined"> arrow_circle_left </span>
272+
</button>
273+
<div class="project-imgs">
274+
<div>
275+
<img
276+
[src]="travellerCurrentProject.img"
277+
[alt]="travellerCurrentProject.alt"
278+
/>
294279
<p>
295-
<span>Responsive Design</span> - Mobile-optimized and
296-
touch-friendly UI
280+
<span>{{ travellerCurrentProject.title }}</span> -
281+
{{ travellerCurrentProject.content }}
297282
</p>
298283
</div>
299284
</div>
300-
301-
<div class="project-card">
302-
<h3>🛠 Tech Stack:</h3>
303-
<p>Angular | PHP | MySQL | Bluehost</p>
304-
</div>
285+
<button
286+
class="scroll-btn right"
287+
(click)="nextProject('travellerspond')"
288+
>
289+
<span class="material-symbols-outlined"> arrow_circle_right </span>
290+
</button>
305291
</div>
306292
</div>
307293
</section>
308294

309295
<section class="app-component app-contact" #sectionRef>
310-
<header>
311-
<h2>📮 Say Hello</h2>
312-
<p>
313-
Always open to chat, share ideas, or collab on something cool. Whether
314-
it's frontend fun, UI/UX design, or random side projects — I'm in.
315-
</p>
316-
</header>
296+
<header></header>
317297
<div class="app-body contact-details">
318-
<p>
298+
<div class="contact-content">
299+
<h2>📮 Say Hello</h2>
300+
<p>
301+
Always open to chat, share ideas, or collab on something cool. Whether
302+
it's frontend fun, UI/UX design, or random side projects — I'm in.
303+
</p>
304+
</div>
305+
<p class="contact-mail">
319306
<span>📧</span>
320307
<a href="mailto:siddarthg.dev@gmail.com">siddarthg.dev&#64;gmail.com</a>
321308
</p>
322-
<small
323-
>🤝 Let's make the web a little cooler, one project at a time.</small
324-
>
325309
</div>
326310
</section>
327311
</main>

0 commit comments

Comments
 (0)