-
Project 2
-
Developed a full-stack web application using Node.js and MongoDB. Implemented user authentication and integrated third-party APIs for enhanced functionality.
-
Skills and Tools: HTML, CSS, JavaScript, Node.js, MongoDB
-
-
+
-
-
Project 3
-
Built a mobile-responsive website using React.js. Integrated state management for a seamless user interface and employed RESTful API communication.
-
Skills and Tools: HTML, CSS, JavaScript, React.js
-
-
+
-
-
-
-
-
+
+
+
+
+
+
+
+
diff --git a/lmao.jpg b/lmao.jpg
new file mode 100644
index 0000000..cfff84b
Binary files /dev/null and b/lmao.jpg differ
diff --git a/styles.css b/styles.css
index 68b3dc8..373a469 100644
--- a/styles.css
+++ b/styles.css
@@ -3,15 +3,18 @@ body {
margin: 0;
padding: 0;
box-sizing: border-box;
+ color: black;
+
}
-
+/* Styling nav tags start==========================================================================================================================*/
nav {
background-color: #3498db;
color: #fff;
padding: 10px 0;
}
+/* Styling ul of nav - about, projects, contact*/
nav ul {
list-style: none;
margin: 0;
@@ -19,10 +22,12 @@ nav ul {
display: flex;
}
+/*Styling li of nav*/
nav li {
margin-right: 20px;
}
+/*Styling anchor tags of nav*/
nav a {
text-decoration: none;
color: #fff;
@@ -31,16 +36,13 @@ nav a {
transition: color 0.3s ease;
}
+/*Styling hover on nav*/
nav a:hover {
color: #2980b9;
}
+/* Nav Styling over===========================================================================================================================*/
-
-.container {
- max-width: 1200px;
- margin: 0 auto;
- padding: 20px;
-}
+/*Styling header start ====================================================================================================================*/
header {
background-color: #f4f4f4;
@@ -49,6 +51,12 @@ header {
height: 40vh;
}
+.container {
+ max-width: 1200px;
+ margin: 0 auto;
+ padding: 20px;
+}
+
header h1 {
margin: 0;
}
@@ -57,6 +65,86 @@ header p {
margin: 5px 0;
}
+/*Header styling end==========================================================================================================================*/
+
+
+/*Hero Section-------------------------------------------------------------------------------------------------*/
+.hero-section{
+ background-image: url("img_hero.jpg");
+ background-size:cover;
+ height: 200px;
+ display: flex;
+ width: 100%;
+ flex-direction: column;
+ justify-content: flex-start; /* Center horizontally */
+ align-items: center; /* Align to the top */
+}
+
+.hero-intro{
+ text-align: center;
+
+}
+
+h2{
+ margin-top: 20px;
+ margin-bottom: 10px;
+ color: black;
+ text-align: center;
+}
+
+.hero-socials {
+ display: flex;
+ gap: 10000px; /* Adjust this value to control the spacing between list items */
+ margin-top: auto; /* Add margin to push the list down from the top */
+ justify-content: center;
+ background-color: #f5f5f5;
+}
+
+.socials li {
+ display: inline-block;
+ margin-bottom: 30px;
+ margin-right: 20px;
+
+}
+
+.socials a {
+ display: inline;
+ width: 40px;
+ height: 40px;
+ border-radius: 50%;
+ text-align: center;
+ line-height: 40px;
+ transition: background-color 0.3s ease;
+}
+
+.socials {
+ list-style: none;
+ padding: 0;
+ display: flex;
+ justify-content: center;
+ gap: 100px;
+}
+
+.fa-brands,
+.fa-solid {
+ color: black;
+ font-size: 24px;
+}
+
+
+/*Hero para*/
+.hero-para{
+
+ font-size: small;
+ text-align: center;
+ margin: 10 px;
+ background-color: rgba(255, 255, 255, 0.5); /* Set the background color to yellow, adjust as needed */
+ color: black;
+}
+/*Hero Section End----------------------------------------------------------------------------------------------*/
+
+
+/* Section styling start====================================================================================================================*/
.about-me,
.projects,
.contact {
@@ -68,7 +156,7 @@ section h2 {
text-align: center;
}
-
+/*Project class*/
.project {
margin-bottom: 20px;
}
@@ -85,6 +173,7 @@ section h2 {
cursor: pointer;
transition: background-color 0.3s ease;
}
+/*Project button anchor tag*/
.project button a{
text-decoration: none;
color: #fff;
@@ -93,9 +182,11 @@ section h2 {
background-color: #2980b9;
}
+/*Footer start==============================================================================================================================*/
footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 10px 0;
}
+/*Footer End=================================================================================================================================*/