profile

snuweb · Jun 20, 2024 · 5ee76ba · 5ee76ba
1 parent a710e1f
commit 5ee76ba
Show file tree

Hide file tree

Showing 4 changed files with 88 additions and 7 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/images/IMG_0276.jpeg b/images/IMG_0276.jpeg
diff --git a/index.html b/index.html
@@ -9,11 +9,21 @@
 
     <body>
         <header>
-            <h1>Welcome to My Profile Page</h1>
-            <p>
-                Hi, I'm Saadaq, a passionate developer specializing in Go and
-                web development.
-            </p>
+            <div class="profile">
+                <img
+                    src="images/IMG_0276.jpeg"
+                    alt="Profile Picture"
+                    class="profile-pic"
+                />
+                <div class="profile-info">
+                    <h1>Saadaq Nur</h1>
+                    <p>
+                        Hi, I'm a passionate web developer specializing in
+                        Crypto with Golang!.
+                    </p>
+                    <p class="address">Austria, Feldkirch</p>
+                </div>
+            </div>
         </header>
 
         <nav>
@@ -66,6 +76,19 @@ <h2>Contact</h2>
 
         <footer>
             <p>&copy; 2024 Saadaq Nur</p>
+            <div class="social-links">
+                <a
+                    href="https://www.linkedin.com/in/saadaq-nuur-75a314228/"
+                    target="_blank"
+                    >LinkedIn</a
+                >
+                <a href="https://github.com/snuweb" target="_blank">GitHub</a>
+                <a
+                    href="https://join.skype.com/invite/zI4mdZbgbnF0"
+                    target="_blank"
+                    >Skype</a
+                >
+            </div>
         </footer>
 
         <script src="script.js"></script>

diff --git a/styles.css b/styles.css
@@ -21,15 +21,61 @@ header {
     color: #1c1c1c;
     padding: 2em 0;
     text-align: center;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+}
+
+.profile {
+    display: flex;
+    align-items: center;
+    gap: 20px;
+}
+
+.profile-pic {
+    width: 150px;
+    height: 150px;
+    border-radius: 50%;
+    object-fit: cover;
+    border: 3px solid #1c1c1c;
 }
 
-header h1 {
+.profile-info {
+    text-align: left;
+}
+
+.profile-info h1 {
     margin: 0;
     font-size: 2.5em;
+    color: #fff;
 }
 
-header p {
+.profile-info p {
     font-size: 1.2em;
+    margin: 0.2em 0;
+}
+
+.profile-info .address,
+.profile-info .employment-status {
+    font-size: 1em;
+    color: #fff;
+}
+
+header .social-links {
+    margin-top: 1em;
+}
+
+header .social-links a {
+    display: inline-block;
+    margin-right: 10px;
+    color: #1c1c1c;
+    text-decoration: none;
+    font-weight: bold;
+}
+
+header .social-links a:hover {
+    text-decoration: underline;
 }
 
 /* Navigation styles */
@@ -180,6 +226,18 @@ footer {
     bottom: 0;
 }
 
+footer .social-links {
+    margin-top: 1em;
+}
+
+footer .social-links a {
+    color: #3ed09a;
+}
+
+footer .social-links a:hover {
+    text-decoration: underline;
+}
+
 /* Animation styles */
 @keyframes fadeIn {
     from {