chore: Update grid layout and add padding to projects and uses compon…

…ents

src/app/pages/experience/experience.component.html

@@ -1,38 +1,68 @@
 <section id="timeline" class="py-2 mb-10">
     <h1 class="text-4xl font-bold text-center mb-8">Experience</h1>
     <p class="text-gray-600 text-center mb-8">Here is a timeline of my work experience.</p>
-    <div class="container mx-auto">
+    <div class="container mx-auto p-2">
         <div class="relative">
             <div class="border-r-2 border-gray-300 absolute h-full top-0 left-1/2 transform -translate-x-1/2"></div>
+            <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">Software Engineer</h3>
+                    <p class="text-sm leading-snug tracking-wide text-gray-900 text-opacity-100">
+                        <span class="font-bold text-blue-600">Blackcoffer</span> -
+                        <span class="italic text-gray-600">Feb 2023 - Present</span>
+                    </p>
+                    <p class="text-sm leading-snug tracking-wide text-gray-900 text-opacity-100 mt-2">Working as Software
+                        Engineer currently. Working in both Front End as well as Backend Projects. Works mostly in
+                        dashboard type projects using MEAN Stack. And also manage the projects & deploy it. Angular
+                        Framework in Front End & In backend Nodejs. With MongoDB, MySQL, Firebase as Databse.</p>
+                </div>
+                <div class="order-1 w-5/12"></div>
+            </div>
             <div class="mb-8 flex justify-between items-center w-full right-timeline">
                 <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">Job Title 1</h3>
-                    <p class="text-sm leading-snug tracking-wide text-gray-900 text-opacity-100">Company Name - Duration</p>
-                    <p class="text-sm leading-snug tracking-wide text-gray-900 text-opacity-100">Description of the job and responsibilities.</p>
+                    <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>
+                    <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
+                        develop in projects. And also manage the projects & deploy it. Angular Framework in Front End &
+                        In backend Nodejs + Python. With Frebase as Databse.</p>
                 </div>
             </div>
             <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">Job Title 2</h3>
-                    <p class="text-sm leading-snug tracking-wide text-gray-900 text-opacity-100">Company Name - Duration</p>
-                    <p class="text-sm leading-snug tracking-wide text-gray-900 text-opacity-100">Description of the job and responsibilities.</p>
+                    <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>
+                    <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
+                        projects like Admin Panel, IOSense(Main Project), Report UI.</p>
                 </div>
                 <div class="order-1 w-5/12"></div>
             </div>
             <div class="mb-8 flex justify-between items-center w-full right-timeline">
                 <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">Job Title 3</h3>
-                    <p class="text-sm leading-snug tracking-wide text-gray-900 text-opacity-100">Company Name - Duration</p>
-                    <p class="text-sm leading-snug tracking-wide text-gray-900 text-opacity-100">Description of the job and responsibilities.</p>
+                    <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>
+                    <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
+                        completed one project in angular ie, Covid-19 Tracker Web Page using API.</p>
                 </div>
             </div>
             <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">Job Title 4</h3>
-                    <p class="text-sm leading-snug tracking-wide text-gray-900 text-opacity-100">Company Name - Duration</p>
-                    <p class="text-sm leading-snug tracking-wide text-gray-900 text-opacity-100">Description of the job and responsibilities.</p>
+                    <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">Completed one month
+                        internship and project on machine learning using python “Conversion Text to Speech Construction
+                        Using Multiple Data (CSV file)”.</p>
                 </div>
                 <div class="order-1 w-5/12"></div>
             </div>
@@ -43,7 +73,7 @@ <h3 class="mb-3 font-bold text-gray-800 text-xl">Job Title 4</h3>
 <section id="experience" class="py-8">
     <h1 class="text-4xl font-bold text-center mb-8">Skills</h1>
     <div class="container mx-auto">
-        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+        <div class="grid grid-cols-1 md:grid-cols-3 gap-8 p-2">
             <div class="bg-white shadow-md rounded-lg p-6">
                 <h2 class="text-2xl font-semibold mb-4">Frontend</h2>
                 <div class="space-y-4">

src/app/pages/projects/projects.component.html

@@ -3,14 +3,16 @@ <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>
     <div class="container mx-auto">
-        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+        <div class="grid grid-cols-1 md:grid-cols-3 gap-8 p-4">
             <div class="bg-white shadow-md rounded-lg p-6">
                 <div class="mb-4">
-                    <img src="images/keyboard-mouse.png" alt="Project 1" class="w-full h-auto rounded-lg" />
+                    <img src="images/projects/url-shortener-app.png" alt="Project 1" class="w-full h-auto rounded-lg" />
                 </div>
-                <h2 class="text-2xl font-semibold mb-4">Project One</h2>
-                <p class="text-gray-600 mb-4">This is a brief description of Project One. It highlights the main
-                    features and technologies used.</p>
+                <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.
+                </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
@@ -22,11 +24,15 @@ <h2 class="text-2xl font-semibold mb-4">Project One</h2>
             </div>
             <div class="bg-white shadow-md rounded-lg p-6">
                 <div class="mb-4">
-                    <img src="images/keyboard-mouse.png" alt="Project 2" class="w-full h-auto rounded-lg" />
+                    <img src="images/projects/expense-tracker-app.png" alt="Project 2" class="w-full h-auto rounded-lg" />
                 </div>
-                <h2 class="text-2xl font-semibold mb-4">Project Two</h2>
-                <p class="text-gray-600 mb-4">This is a brief description of Project Two. It highlights the main
-                    features and technologies used.</p>
+                <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.
+                </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
@@ -38,11 +44,35 @@ <h2 class="text-2xl font-semibold mb-4">Project Two</h2>
             </div>
             <div class="bg-white shadow-md rounded-lg p-6">
                 <div class="mb-4">
-                    <img src="images/keyboard-mouse.png" alt="Project 3" class="w-full h-auto rounded-lg" />
+                    <img src="images/projects/notes-app.png" alt="Project 3" class="w-full h-auto rounded-lg" />
                 </div>
-                <h2 class="text-2xl font-semibold mb-4">Project Three</h2>
-                <p class="text-gray-600 mb-4">This is a brief description of Project Three. It highlights the main
-                    features and technologies used.</p>
+                <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.
+                </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>
+                </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" />
+                </div>
+                <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.
+                </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

src/app/pages/uses/uses.component.html

@@ -2,7 +2,7 @@
     <h1 class="text-4xl font-bold text-center mb-12 text-gray-800">Uses</h1>
     <p class="text-gray-600 text-center mb-12">Here are some of the tools and equipment I use for development.</p>
     <div class="container mx-auto">
-        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-12">
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-12 p-4">
             <div class="bg-white shadow-lg rounded-lg p-8 text-center transform transition-transform hover:scale-105">
                 <div class="mb-6">
                     <i class="fa-solid fa-laptop fa-4x text-blue-500"></i>