Main

README.md

@@ -1,7 +1,8 @@
 # Personal Portfolio ⚡️ 
 > A clean, beautiful, responsive portfolio template for Software Developers!
 
-> https://varadbhogayata.github.io
+> https://vusi-kunene-matlou.github.io
+
 
 ![GitHub stars](https://img.shields.io/github/stars/varadbhogayata/varadbhogayata.github.io) 
 ![GitHub forks](https://img.shields.io/github/forks/varadbhogayata/varadbhogayata.github.io)
@@ -13,7 +14,7 @@
 ### Website Preview
 <p align="center"> 
   <kbd>
-    <a href="https://varadbhogayata.github.io" target="_blank"><img src="examples/preview.gif">
+    <a href="https://vusi-kunene-matlou.github.io" target="_blank"><img src="examples/preview.gif">
   </a>
   </kbd>
 </p>
@@ -28,7 +29,7 @@
 
 ## Installation & Deployment 📦
 - Clone the repository and modify the content of <b>index.html</b> according to your requirement.
-- Add or remove images from `varadbhogayata.github.io/assets/img/` directory as per your requirement.
+- Add or remove images from `vusi-kunene-matlou.github.io//assets/img/` directory as per your requirement.
 - I highly recommend to use [Github Pages](https://create-react-app.dev/docs/deployment/#github-pages) to deploy the website the EASIEST WAY.
 - To deploy your website, first you need to create github repository with name `<your-github-username>.github.io`. Please don't give any other name.
 - Push the generated code to the `master` branch of this repository.
@@ -43,7 +44,7 @@
 ✔️ Contact Info\
 ✔️ Resume
 
-To view a live example, **[click here](https://varadbhogayata.github.io/)**
+To view a live example, **[click here](https://vusi-kunene-matlou.github.io/)**
 
 ## Tools Used 🛠️
 * [<b>GitHub Pages</b>](https://create-react-app.dev/docs/deployment/#github-pages) - To host my static website (HTML, CSS, JS).

assets/css/style.css

@@ -1,25 +1,21 @@
 .profile-pic {
-  position: relative;
-  max-width:130px;
-  max-height:130px;
-  width: auto;
-  height: auto;
+  width: 130px;
+  height: 130px;
   overflow: hidden;
-  /* display: inline-block; */
-
-
-  /* background-size: cover;  */
-  margin: -31px; 
-  margin-left:-7px;
-  border: 6px solid rgba(0, 77, 64, 0.4); 
-  border-radius: 50% !important;
+  border: 6px solid rgba(0, 77, 64, 0.4);
+  border-radius: 50%; /* Makes it a perfect circle */
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .profile-pic img {
   width: 100%;
-  height: auto;
+  height: 100%;
+  object-fit: cover; /* Ensures it fills the circle properly */
 }
 
+
 .tracker {
   /* visibility: hidden; */
   position: fixed;
@@ -154,6 +150,14 @@ a {
   padding-left: 1.5rem;
 } */
 
+.certificate-img {
+  width: 100%;
+  height: 250px; /* or any height that fits your design */
+  object-fit: cover;
+  border-radius: 4px;
+}
+
+
 blockquote {
   border-left: 5px solid #795548;
   color: #795548;