small improvment

Harsh-v3 · Oct 19, 2024 · 2e362c7 · 2e362c7
1 parent cc86cdb
commit 2e362c7
Show file tree

Hide file tree

Showing 8 changed files with 142 additions and 38 deletions.
diff --git a/index.html b/index.html
@@ -128,14 +128,23 @@ <h1 class="text-uppercase fw-semibold heading-text mb-5">Portfolio</h1>
 
         </div>
         <div class="row">
-          <div class="col-md-6 mb-5 px-4">
+          <div class="col-md-6 my-auto px-4 ">
             <div class="project shadow-lg rounded-4">
-              <a href="src/images/project1.jpg" data-lightbox="images" data-title="Ebook Website Overview">
-                <img src="src/images/project1.jpg" alt="" class="img-fluid rounded-3">
+              <a href="src/images/screen.png" data-lightbox="images" data-title="Ebook Website Overview">
+                <img src="src/images/screen.png" alt="" class="img-fluid rounded-3">
               </a>
             </div>
           </div>
-            <div class="col-md-6 d-none d-lg-block text-container text-center d-flex flex-column ">
+          <div class="col-md-6 mt-3 mb-5 d-md-none d-lg-none">
+            <div class="container">
+                <div class=" projects-buttons align-baseline gap-3 d-flex justify-content-center">
+                  <a href="https://harsh-v3.github.io/Ebook_Website/" target="_blank" class="btn btn-outline-primary btn-sm rounded-1">Live Preview</a>
+                  <a href="https://github.com/Harsh-v3/Ebook_Website" target="_blank" class="btn btn-primary btn-sm rounded-1">Code</a>
+                </div>
+
+            </div>
+          </div>
+            <div class="col-md-6 d-none d-md-block mb-5 text-container text-center d-flex flex-column ">
               <div class=" fs-2 fw-semibold">Ebook Website</div>
               <hr class="w-25 mx-auto border-dark">
               <p class="lead fs-6 text-start">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Reprehenderit minima repellat facilis hic mollitia porro sunt iure maxime illum, nemo perferendis reiciendis aliquid voluptatem nobis itaque, sint velit repellendus fuga?</p>
@@ -148,59 +157,77 @@ <h1 class="text-uppercase fw-semibold heading-text mb-5">Portfolio</h1>
               </div>
 
               <div class="projects-buttons align-baseline">
-                <a class="btn btn-outline-primary btn-sm rounded-1">Live Preview</a>
-                <a class="btn btn-primary btn-sm rounded-1">Code</a>
+                <a href="https://harsh-v3.github.io/Ebook_Website/" target="_blank" class="btn btn-outline-primary btn-sm rounded-1">Live Preview</a>
+                <a href="https://github.com/Harsh-v3/Ebook_Website" target="_blank" class="btn btn-primary btn-sm rounded-1">Code</a>
               </div>
             </div>
-            <div class="col-md-6 d-none d-lg-block text-container text-center d-flex flex-column ">
-              <div class=" fs-2 fw-semibold">Natours</div>
+            <div class="col-md-6 d-none d-md-block mb-5 text-container text-center d-flex flex-column mb-5">
+              <div class=" fs-2 fw-semibold">Quiz</div>
               <hr class="w-25 mx-auto border-dark">
               <p class="lead fs-6 text-start">Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo porro neque dolorum expedita, molestias placeat iure eius repudiandae aliquam aperiam magni reiciendis, dicta iusto. Distinctio sit quod aliquid hic vero!</p>
 
               <div class="d-flex flex-wrap justify-content-center mb-2">
                 <span class=" py-2 px-3 fs-6 fw-light m-1 rounded-2 bg-dark-subtle ">HTML</span>
                 <span class="py-2 px-3 fs-6  fw-light m-1 rounded-2  bg-dark-subtle ">CSS</span>
-                <span class="py-2 px-3 fs-6  fw-light m-1 rounded-2  bg-dark-subtle ">SASS</span>
+                <span class="py-2 px-3 fs-6  fw-light m-1 rounded-2  bg-dark-subtle ">Javascript</span>
               </div>
 
               <div class="projects-buttons align-baseline">
-                <a class="btn btn-outline-primary btn-sm rounded-1">Live Preview</a>
-                <a class="btn btn-primary btn-sm rounded-1">Code</a>
+                <a target="_blank" href="https://harsh-v3.github.io/Quiz-Application/" class="btn btn-outline-primary btn-sm rounded-1">Live Preview</a>
+                <a target="_blank" href="https://github.com/Harsh-v3/Quiz-Application" class="btn btn-primary btn-sm rounded-1">Code</a>
               </div>
             </div>
-            <div class="col-md-6 mb-5 px-4">
+            <div class="col-md-6 my-auto px-4 ">
               <div class="image-container">
                 <div class="project shadow-lg rounded-4">
-                    <a href="src/images/project3.jpg" data-lightbox="images" data-title="Natours Website Overview">
-                      <img src="src/images/project3.jpg" alt="" class="img-fluid rounded-3">
+                    <a href="src/images/HomePage.png" data-lightbox="images" data-title="Quiz Website Overview">
+                      <img src="src/images/HomePage.png" alt="" class="img-fluid rounded-3">
                     </a>
                 </div>
               </div>
             </div>
-            <div class="col-md-6 mb-5 px-4">
+            <div class="col-md-6 mt-3 mb-5 d-md-none d-lg-none">
+              <div class="container">
+                  <div class=" projects-buttons align-baseline gap-3 d-flex justify-content-center">
+                    <a href="https://harsh-v3.github.io/Ebook_Website/" target="_blank" class="btn btn-outline-primary btn-sm rounded-1">Live Preview</a>
+                    <a href="https://github.com/Harsh-v3/Ebook_Website" target="_blank" class="btn btn-primary btn-sm rounded-1">Code</a>
+                  </div>
+
+              </div>
+            </div>
+            <div class="col-md-6 my-auto px-4">
               <div class="image-container">
                 <div class="project shadow-lg rounded-4">
-                    <a href="src/images/project4.jpg" data-lightbox="images" data-title="Forkify Website Overview">
-                      <img src="src/images/project4.jpg" alt="" class="img-fluid rounded-1">
+                    <a href="src/images/portfolio_Bootstrap.png" data-lightbox="images" data-title="Portfolio Website Overview">
+                      <img src="src/images/portfolio_Bootstrap.png" alt="" class="img-fluid rounded-1">
                     </a>
                 </div>
               </div>
             </div>
-            <div class="col-md-6 d-none d-lg-block text-container text-center d-flex flex-column ">
-              <div class=" fs-2 fw-semibold">Forkify</div>
+            <div class="col-md-6 mt-3 mb-5 d-md-none d-lg-none">
+              <div class="container">
+                  <div class=" projects-buttons align-baseline gap-3 d-flex justify-content-center">
+                    <a href="https://harsh-v3.github.io/Ebook_Website/" target="_blank" class="btn btn-outline-primary btn-sm rounded-1">Live Preview</a>
+                    <a href="https://github.com/Harsh-v3/Ebook_Website" target="_blank" class="btn btn-primary btn-sm rounded-1">Code</a>
+                  </div>
+
+              </div>
+            </div>
+            <div class="col-md-6 d-none d-md-block  mb-5 text-container text-center d-flex flex-column ">
+              <div class=" fs-2 fw-semibold">Portfolio</div>
               <hr class="w-25 mx-auto border-dark">
               <p class="lead fs-6 text-start">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae temporibus quas magnam soluta tempora !</p>
 
               <div class="d-flex flex-wrap justify-content-center mb-2">
                 <span class=" py-2 px-3 fs-6 fw-light m-1 rounded-2 bg-dark-subtle ">HTML</span>
                 <span class="py-2 px-3 fs-6  fw-light m-1 rounded-2  bg-dark-subtle ">CSS</span>
-                <span class="py-2 px-3 fs-6  fw-light m-1 rounded-2  bg-dark-subtle ">SASS</span>
-                <span class="py-2 px-3 fs-6  fw-light m-1 rounded-2  bg-dark-subtle ">JavaScript</span>
+                <span class="py-2 px-3 fs-6  fw-light m-1 rounded-2  bg-dark-subtle ">Lightbox (JavaScript Library)</span>
+                <span class="py-2 px-3 fs-6  fw-light m-1 rounded-2  bg-dark-subtle ">Bootstrap</span>
               </div>
 
               <div class="projects-buttons align-baseline">
-                <a class="btn btn-outline-primary btn-sm rounded-1">Live Preview</a>
-                <a class="btn btn-primary btn-sm rounded-1">Code</a>
+                <a target="_blank" href="https://harsh-v3.github.io/Portfolio_Bootstrap/" class="btn btn-outline-primary btn-sm rounded-1">Live Preview</a>
+                <a href="https://github.com/Harsh-v3/Portfolio_Bootstrap" target="_blank" class="btn btn-primary btn-sm rounded-1">Code</a>
               </div>
             </div>
 
@@ -245,7 +272,7 @@ <h1 class="text-uppercase fw-semibold heading-text mb-5">Portfolio</h1>
                   <i class="fas fa-check me-3"></i> 1 Year Regular Modifications 
                 </li>
               </ul>
-              <a href="#" class="btn btn-light btn-outline-white rounded-2 ">
+              <a href="#" class="btn btn-light btn-outline-white rounded-2 mt-4">
                 Contact
               </a>
           </div>  
@@ -270,7 +297,7 @@ <h1 class="text-uppercase fw-semibold heading-text mb-5">Portfolio</h1>
                 <i class="fas fa-check me-3"></i> Any Niche 
               </li>
             </ul>
-            <a href="#" class="btn btn-light btn-outline-white rounded-2 ">
+            <a href="#" class="btn btn-light btn-outline-white rounded-2 mt-4">
               Contact
             </a>
         </div> 
@@ -295,7 +322,7 @@ <h1 class="text-uppercase fw-semibold heading-text mb-5">Portfolio</h1>
               <i class="fas fa-check me-3"></i> Low Prices
             </li>
           </ul>
-          <a href="#" class="btn btn-light btn-outline-white rounded-2">
+          <a href="#" class="btn btn-light btn-outline-white rounded-2 mt-4">
             Contact
           </a>
             </div>
@@ -382,13 +409,13 @@ <h2 class="text-uppercase fw-bold fs-3 text-white">
             <h2 class="text-uppercase fw-bold fs-4 text-white mb-3">
               Social
             </h2>
-            <div class="social_icons d-flex gap-3">
-              <a href="https://github.com/Harsh-v3" target="_blank"><i class="fab fa-github fa-2x"></i></a>
-              <a href="https://www.linkedin.com/in/harsh-kumar-7b017832a?" target="_blank"><i class="fab fa-linkedin fa-2x"></i></a>
-              <a href="whatsapp:contact=9518816505@s.whatsapp.com&message='I would like to chat with you'" target="_blank">
-                <i class="fab fa-whatsapp fa-2x"></i>
+            <div class="social_icons  d-flex gap-3">
+              <a href="https://github.com/Harsh-v3" target="_blank"><i class="fab fa-github fa-2x text-white-50"></i></a>
+              <a href="https://www.linkedin.com/in/harsh-kumar-7b017832a?" target="_blank"><i class="fab fa-linkedin fa-2x text-white-50"></i></a>
+              <a href="https://wa.me/9518816505?text=I20%would20%like20%to20%chat20%with20%you" target="_blank">
+                <i class="fab fa-whatsapp fa-2x text-white-50"></i>
               </a>
-              <a href="https://www.instagram.com/i.m_harsh_saini?igsh=cDZvNXRhNm43aHFh" target="_blank"><i class="fab fa-instagram fa-2x"></i></a>
+              <a href="https://www.instagram.com/i.m_harsh_saini?igsh=cDZvNXRhNm43aHFh" target="_blank"><i class="fab fa-instagram fa-2x text-white-50"></i></a>
             </div>
           </div>
         </div>

diff --git a/readme.md b/readme.md
@@ -0,0 +1,71 @@
+# Portfolio Website Using Bootstrap
+
+This portfolio website was created to showcase my web development skills and projects while learning and enhancing my expertise in Bootstrap. The site features a clean, responsive design that highlights my work, services, and background.
+
+## Demo
+
+<img src="src/imgaes/portfolio_Bootstrap.png" />
+
+## Features
+
+- **Landing Page**: Engaging landing page with a typing text effect.
+- **About Section**: A brief introduction about me and my skills.
+- **Portfolio Section**: A display of my projects with descriptions and links.
+- **Services Section**: An overview of the services I offer.
+- **Contact Section**: A user-friendly form for inquiries.
+- **Footer**: Essential links and information.
+- **Lightbox Integration**: A smooth gallery experience for viewing project images.
+- **Fully Responsive**: Optimized for various devices and screen sizes.
+
+## Technologies Used
+
+- HTML
+- CSS
+- Bootstrap
+- JavaScript (Lightbox library)
+- Fontawsome (installed via npm)
+
+## Usage
+
+Feel free to explore the website, download free e-books, and interact with the features. You can also modify the styles and contents as needed to make it your own.
+
+## Installation
+
+In order to customize this website, you need to install [Node.js](https://nodejs.org/en/). Then, clone this repository and run:
+
+1. **Clone the repository :**
+
+```bash
+git clone https://github.com/Harsh-v3/Portfolio_Bootstrap.git
+```
+
+2. **Navigate to the project directory :**
+
+```bash
+cd Portfolio_Bootstrap
+```
+
+3. **Install dependencies :**
+   This will install Bootstrap, Sass and Font Awesome. To build your CSS files from Sass.
+
+```bash
+npm install
+```
+
+4. **Run :**
+
+```bash
+npm run compile:sass
+```
+
+You can add Bootstrap variables to the `bootstrap.scss` file. You can look at the file `node_modules/bootstrap/dist/scss/_variables.scss` for a list of all the variables. Do NOT edit the `variables.scss` file directly, as it will be overwritten when you update Bootstrap.
+
+To add your own custom styles, use the `styles.scss` file.
+
+## Contributing
+
+Contributions are welcome! If you have suggestions for improvements or features, please fork the repository and submit a pull request.
+
+## Acknowledgments
+
+This website was fully developed by Harsh-v3 during the Bootstrap 5 Learning. I created this project to enhance my understanding of Bootstrap and SASS.
diff --git a/src/css/main.css b/src/css/main.css
@@ -44,6 +44,9 @@
 .social_icons i {
   cursor: pointer;
 }
+.social_icons i:hover {
+  color: white !important;
+}
 
 .services {
   background: #151515 url("../images/header-background.jpg") no-repeat center center;
@@ -70,9 +73,9 @@
   height: 200px;
   width: 200px;
   border-radius: 50%;
-  background-image: url("../images/instructor.jpg");
-  background-size: cover;
-  background-position: center;
+  background-image: url("../images/instructor_.png");
+  background-size: contain;
+  background-position: 100%;
 }
 
 .skills-heading {

diff --git a/src/images/HomePage.png b/src/images/HomePage.png
diff --git a/src/images/instructor_.png b/src/images/instructor_.png
diff --git a/src/images/portfolio_Bootstrap.png b/src/images/portfolio_Bootstrap.png
diff --git a/src/images/screen.png b/src/images/screen.png
diff --git a/src/scss/main.scss b/src/scss/main.scss
@@ -55,6 +55,9 @@ $light: #f4f4f4;
 
 .social_icons i {
   cursor: pointer;
+  &:hover {
+    color: white !important;
+  }
 }
 
 .services {
@@ -82,9 +85,9 @@ $light: #f4f4f4;
   height: 200px;
   width: 200px;
   border-radius: 50%;
-  background-image: url('../images/instructor.jpg');
-  background-size: cover;
-  background-position: center;
+  background-image: url('../images/instructor_.png');
+  background-size: contain;
+  background-position: 100%;
 }
 
 .skills-heading {