From 1e5adc88f7d7c40dce6df14622c760b06f4e1e5b Mon Sep 17 00:00:00 2001
From: Manthan Ankolekar <manthan.ank46@gmail.com>
Date: Tue, 6 Aug 2024 18:05:11 +0530
Subject: [PATCH] Update profile picture size and layout in home component

---
 src/app/pages/contact/contact.component.html  | 10 +--
 .../experience/experience.component.html      | 23 ++++--
 src/app/pages/home/home.component.html        |  2 +-
 .../pages/projects/projects.component.html    | 75 ++++++-------------
 4 files changed, 45 insertions(+), 65 deletions(-)

diff --git a/src/app/pages/contact/contact.component.html b/src/app/pages/contact/contact.component.html
index 8e76541..9c677fe 100644
--- a/src/app/pages/contact/contact.component.html
+++ b/src/app/pages/contact/contact.component.html
@@ -1,7 +1,7 @@
-<section id="contact" class="py-2 px-4">
-    <h1 class="text-4xl font-bold text-gray-900 text-center mb-1">Contact Me</h1>
-    <p class="text-lg text-gray-700 text-center mb-1">Get in Touch</p>
-    <form class="space-y-4 max-w-lg mx-auto">
+<section id="contact" class="py-8 px-4 lg:py-16 lg:px-8">
+    <h1 class="text-3xl md:text-4xl font-bold text-gray-900 text-center mb-4">Contact Me</h1>
+    <p class="text-gray-600 text-center mb-8 max-w-2xl mx-auto">Feel free to reach out to me. I will get back to you as soon as possible.</p>
+    <form class="space-y-6 max-w-xl mx-auto">
         <div>
             <label for="name" class="block text-sm font-medium text-gray-700">Name:</label>
             <input type="text" id="name" name="name" required
@@ -20,4 +20,4 @@ <h1 class="text-4xl font-bold text-gray-900 text-center mb-1">Contact Me</h1>
         <button type="submit"
             class="w-full py-2 px-4 bg-indigo-600 text-white font-medium rounded-md shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">Submit</button>
     </form>
-</section>
\ No newline at end of file
+</section>
diff --git a/src/app/pages/experience/experience.component.html b/src/app/pages/experience/experience.component.html
index 69acf8c..82ce836 100644
--- a/src/app/pages/experience/experience.component.html
+++ b/src/app/pages/experience/experience.component.html
@@ -22,8 +22,9 @@ <h3 class="mb-3 font-bold text-gray-800 text-xl">Software Engineer</h3>
                 <div class="order-1 w-5/12"></div>
                 <div class="order-1 w-5/12 px-1 py-4 bg-white rounded-lg shadow-md">
                     <h3 class="mb-3 font-bold text-gray-800 text-xl">Full Stack Developer Intern</h3>
-                    <p class="text-sm leading-snug tracking-wide text-gray-900 text-opacity-100">AppiVa Software Pvt Ltd
-                        - Jul 2022 - Dec 2022
+                    <p class="text-sm leading-snug tracking-wide text-gray-900 text-opacity-100">
+                        <span class="font-bold text-blue-600">AppiVa Software Pvt Ltd</span> -
+                        <span class="italic text-gray-600">Jul 2022 - Dec 2022</span>
                     </p>
                     <p class="text-sm leading-snug tracking-wide text-gray-900 text-opacity-100">Worked for 6 months as
                         Full Stack Intern. Worked in both Front End as well as Backend Projects. Work is to design and
@@ -34,8 +35,9 @@ <h3 class="mb-3 font-bold text-gray-800 text-xl">Full Stack Developer Intern</h3
             <div class="mb-8 flex justify-between items-center w-full left-timeline">
                 <div class="order-1 w-5/12 px-1 py-4 bg-white rounded-lg shadow-md">
                     <h3 class="mb-3 font-bold text-gray-800 text-xl">Angular Developer Intern</h3>
-                    <p class="text-sm leading-snug tracking-wide text-gray-900 text-opacity-100">Faclon Labs Pvt Ltd -
-                        Nov 2021 - May 2022
+                    <p class="text-sm leading-snug tracking-wide text-gray-900 text-opacity-100">
+                        <span class="font-bold text-blue-600">Faclon Labs Pvt Ltd</span> -
+                        <span class="italic text-gray-600">Nov 2021 - May 2022</span>
                     </p>
                     <p class="text-sm leading-snug tracking-wide text-gray-900 text-opacity-100">Worked for 3 months as
                         Intern And 3 months as Full Time Front End Angular Developer. Work was to design and develop in
@@ -47,8 +49,10 @@ <h3 class="mb-3 font-bold text-gray-800 text-xl">Angular Developer Intern</h3>
                 <div class="order-1 w-5/12"></div>
                 <div class="order-1 w-5/12 px-1 py-4 bg-white rounded-lg shadow-md">
                     <h3 class="mb-3 font-bold text-gray-800 text-xl">Trainee</h3>
-                    <p class="text-sm leading-snug tracking-wide text-gray-900 text-opacity-100">SounderGrad Training
-                        Programmee - May 2021 - Aug 2021
+                    <p class="text-sm leading-snug tracking-wide text-gray-900 text-opacity-100">
+                        <span class="font-bold text-blue-600">SounderGrad Training
+                            Programmee</span> -
+                        <span class="italic text-gray-600">May 2021 - Aug 2021</span>
                     </p>
                     <p class="text-sm leading-snug tracking-wide text-gray-900 text-opacity-100">Completed two months
                         training in front-end development using HTML5, CSS, JavaScript, JSON, RestAPI, Angular. And
@@ -58,8 +62,11 @@ <h3 class="mb-3 font-bold text-gray-800 text-xl">Trainee</h3>
             <div class="mb-8 flex justify-between items-center w-full left-timeline">
                 <div class="order-1 w-5/12 px-1 py-4 bg-white rounded-lg shadow-md">
                     <h3 class="mb-3 font-bold text-gray-800 text-xl">Student Intern</h3>
-                    <p class="text-sm leading-snug tracking-wide text-gray-900 text-opacity-100">Karanji InfoTech
-                        Pvt.Ltd - May 2019 - June 2019</p>
+                    <p class="text-sm leading-snug tracking-wide text-gray-900 text-opacity-100">
+                        <span class="font-bold text-blue-600">Karanji InfoTech
+                            Pvt.Ltd</span> -
+                        <span class="italic text-gray-600">May 2019 - June 2019</span>
+                    </p>
                     <p class="text-sm leading-snug tracking-wide text-gray-900 text-opacity-100">Completed one month
                         internship and project on machine learning using python “Conversion Text to Speech Construction
                         Using Multiple Data (CSV file)”.</p>
diff --git a/src/app/pages/home/home.component.html b/src/app/pages/home/home.component.html
index 692b29a..c564d65 100644
--- a/src/app/pages/home/home.component.html
+++ b/src/app/pages/home/home.component.html
@@ -1,4 +1,4 @@
-<section id="profile" class="flex flex-col items-center justify-center mt-12 md:mt-16 lg:mt-24 p-6 rounded-lg">
+<section id="profile" class="flex flex-col items-center justify-center mt-12 md:mt-28 lg:mt-24 p-6 rounded-lg">
     <div class="flex flex-col items-center lg:flex-row lg:justify-between lg:w-full lg:max-w-4xl">
         <div class="mb-8 lg:mb-0 flex-1 flex justify-center lg:justify-start">
             <img src="picture.webp" alt="Manthan Ankolekar profile picture"
diff --git a/src/app/pages/projects/projects.component.html b/src/app/pages/projects/projects.component.html
index a3493d6..8dba4b4 100644
--- a/src/app/pages/projects/projects.component.html
+++ b/src/app/pages/projects/projects.component.html
@@ -1,87 +1,60 @@
-<section id="projects" class="py-2 pb-8">
-    <h1 class="text-4xl font-bold text-center mb-8">Projects</h1>
-    <p class="text-gray-600 text-center mb-8">Here are some of the projects I have worked on. Click on the buttons to
-        view the source code or live demo.</p>
+<section id="projects" class="py-8">
+    <h1 class="text-3xl md:text-4xl font-bold text-center mb-4">Projects</h1>
+    <p class="text-gray-600 text-center mb-8 px-4">Here are some of the projects I have worked on. Click on the buttons to view the source code or live demo.</p>
     <div class="container mx-auto">
-        <div class="grid grid-cols-1 md:grid-cols-3 gap-8 p-4">
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 px-4">
             <div class="bg-white shadow-md rounded-lg p-6">
                 <div class="mb-4">
-                    <img src="images/projects/url-shortener-app.png" alt="Project 1" class="w-full h-auto rounded-lg" />
+                    <img src="images/projects/url-shortener-app.png" alt="URL Shortener App" class="w-full h-auto rounded-lg" />
                 </div>
                 <h2 class="text-2xl font-semibold mb-4">URL Shortener App</h2>
                 <p class="text-gray-600 mb-4">
-                    A simple URL shortener app built with Angular, Node.js, Express, and MongoDB. It allows users to shorten long
-                    URLs and track the number of clicks on the shortened URLs.
+                    A simple URL shortener app built with Angular, Node.js, Express, and MongoDB. It allows users to shorten long URLs and track the number of clicks on the shortened URLs.
                 </p>
                 <div class="flex space-x-4">
-                    <button class="bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600">
-                        Github
-                    </button>
-                    <button class="bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600">
-                        Live Demo
-                    </button>
+                    <a href="https://github.com/your-github-repo" class="bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600">Github</a>
+                    <a href="https://your-live-demo-url" class="bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600">Live Demo</a>
                 </div>
             </div>
             <div class="bg-white shadow-md rounded-lg p-6">
                 <div class="mb-4">
-                    <img src="images/projects/expense-tracker-app.png" alt="Project 2" class="w-full h-auto rounded-lg" />
+                    <img src="images/projects/expense-tracker-app.png" alt="Expense Tracker App" class="w-full h-auto rounded-lg" />
                 </div>
-                <h2 class="text-2xl font-semibold mb-4">
-                    Expense Tracker App
-                </h2>
+                <h2 class="text-2xl font-semibold mb-4">Expense Tracker App</h2>
                 <p class="text-gray-600 mb-4">
-                    A simple expense tracker app built with Angular, Node.js, Express, and MongoDB. It allows users to track
-                    their expenses.
+                    A simple expense tracker app built with Angular, Node.js, Express, and MongoDB. It allows users to track their expenses.
                 </p>
                 <div class="flex space-x-4">
-                    <button class="bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600">
-                        Github
-                    </button>
-                    <button class="bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600">
-                        Live Demo
-                    </button>
+                    <a href="https://github.com/your-github-repo" class="bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600">Github</a>
+                    <a href="https://your-live-demo-url" class="bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600">Live Demo</a>
                 </div>
             </div>
             <div class="bg-white shadow-md rounded-lg p-6">
                 <div class="mb-4">
-                    <img src="images/projects/notes-app.png" alt="Project 3" class="w-full h-auto rounded-lg" />
+                    <img src="images/projects/notes-app.png" alt="Notes App" class="w-full h-auto rounded-lg" />
                 </div>
-                <h2 class="text-2xl font-semibold mb-4">
-                    Notes App
-                </h2>
+                <h2 class="text-2xl font-semibold mb-4">Notes App</h2>
                 <p class="text-gray-600 mb-4">
-                    A simple notes app built with Angular, Node.js, Express, and MongoDB. It allows users to create, read,
-                    update, and delete notes.
+                    A simple notes app built with Angular, Node.js, Express, and MongoDB. It allows users to create, read, update, and delete notes.
                 </p>
                 <div class="flex space-x-4">
-                    <button class="bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600">
-                        Github
-                    </button>
-                    <button class="bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600">
-                        Live Demo
-                    </button>
+                    <a href="https://github.com/your-github-repo" class="bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600">Github</a>
+                    <a href="https://your-live-demo-url" class="bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600">Live Demo</a>
                 </div>
             </div>
             <div class="bg-white shadow-md rounded-lg p-6">
                 <div class="mb-4">
-                    <img src="images/projects/task-management-app.png" alt="Project 3" class="w-full h-auto rounded-lg" />
+                    <img src="images/projects/task-management-app.png" alt="Task Management App" class="w-full h-auto rounded-lg" />
                 </div>
-                <h2 class="text-2xl font-semibold mb-4">
-                    Task Management App
-                </h2>
+                <h2 class="text-2xl font-semibold mb-4">Task Management App</h2>
                 <p class="text-gray-600 mb-4">
-                    A simple task management app built with Angular, Node.js, Express, and MongoDB. It allows users to create,
-                    read, update, and delete tasks.
+                    A simple task management app built with Angular, Node.js, Express, and MongoDB. It allows users to create, read, update, and delete tasks.
                 </p>
                 <div class="flex space-x-4">
-                    <button class="bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600">
-                        Github
-                    </button>
-                    <button class="bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600">
-                        Live Demo
-                    </button>
+                    <a href="https://github.com/your-github-repo" class="bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600">Github</a>
+                    <a href="https://your-live-demo-url" class="bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600">Live Demo</a>
                 </div>
             </div>
         </div>
     </div>
-</section>
\ No newline at end of file
+</section>