diff --git a/assets/css/custom.css b/assets/css/custom.css
index c848d3e..cce8539 100644
--- a/assets/css/custom.css
+++ b/assets/css/custom.css
@@ -1,147 +1,225 @@
:root {
- --primary-color: #00f7ff;
- --secondary-color: #9400d3; /* Dark Violet for contrast */
- --background-color: #020c16;
- --surface-color: #0a192f;
- --text-color: #e6f1ff;
- --glow-color: rgba(0, 247, 255, 0.7);
- --glow-color-secondary: rgba(148, 0, 211, 0.7);
+ --sidebar-bg: #1a1a1a;
+ --main-bg: #f0f2f5;
+ --text-light: #e0e0e0;
+ --text-dark: #333;
+ --primary-color: #007bff;
+ --card-bg: #ffffff;
+ --shadow: 0 4px 8px rgba(0,0,0,0.1);
}
-.futuristic {
- font-family: 'Rajdhani', sans-serif;
- background-color: var(--background-color);
- color: var(--text-color);
+body {
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+ margin: 0;
+ display: flex;
+ background-color: var(--main-bg);
+ color: var(--text-dark);
}
-.navbar {
- background-color: rgba(10, 25, 47, 0.85);
- backdrop-filter: blur(10px);
- border-bottom: 1px solid var(--primary-color);
- transition: all 0.3s ease-in-out;
+.sidebar {
+ width: 280px;
+ background-color: var(--sidebar-bg);
+ color: var(--text-light);
+ position: fixed;
+ height: 100%;
+ padding: 30px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
}
-.navbar .navbar-brand, .navbar .nav-link {
- color: var(--text-color);
- text-shadow: 0 0 5px var(--glow-color);
- transition: color 0.3s, text-shadow 0.3s;
+.profile-pic {
+ width: 120px;
+ height: 120px;
+ border-radius: 50%;
+ border: 3px solid var(--primary-color);
}
-.navbar .nav-link:hover, .navbar .navbar-brand:hover {
+.sidebar h3 {
+ color: #fff;
+ margin-top: 15px;
+ margin-bottom: 5px;
+}
+
+.sidebar .nav-link {
+ color: var(--text-light);
+ margin: 10px 0;
+ font-size: 1.1rem;
+ transition: color 0.3s;
+}
+
+.sidebar .nav-link i {
+ margin-right: 15px;
+ width: 20px;
+ text-align: center;
+}
+
+.sidebar .nav-link:hover,
+.sidebar .nav-link.active {
color: var(--primary-color);
- text-shadow: 0 0 15px var(--glow-color);
}
-.hero {
- background: linear-gradient(rgba(2, 12, 22, 0.7), rgba(2, 12, 22, 1)), url('https://picsum.photos/1600/900?grayscale&blur=2');
- background-size: cover;
- background-position: center;
- color: white;
- padding: 12rem 0 8rem 0;
- border-bottom: 1px solid var(--primary-color);
+.social-icons {
+ margin-top: auto;
+ text-align: center;
}
-.hero h1 {
+.social-icons a {
+ color: var(--text-light);
+ margin: 0 10px;
+ font-size: 1.2rem;
+ transition: color 0.3s;
+}
+
+.social-icons a:hover {
+ color: var(--primary-color);
+}
+
+.main-content {
+ margin-left: 280px;
+ padding: 40px;
+ width: calc(100% - 280px);
+}
+
+.content-section {
+ padding: 60px 0;
+ border-bottom: 1px solid #ddd;
+}
+
+.hero-section {
+ text-align: center;
+ padding: 100px 0;
+}
+
+.hero-section h1 {
+ font-size: 3rem;
font-weight: 700;
- text-shadow: 0 0 15px var(--glow-color);
}
-.section {
- padding: 5rem 0;
- background-color: var(--background-color);
+.hero-section p {
+ font-size: 1.2rem;
+ color: #666;
}
-.section h2 {
- font-weight: 600;
- color: var(--primary-color);
- text-shadow: 0 0 10px var(--glow-color);
- margin-bottom: 3rem !important;
+h2 {
+ font-weight: 700;
+ margin-bottom: 40px;
+ text-align: center;
+ position: relative;
+}
+
+h2::after {
+ content: '';
+ position: absolute;
+ bottom: -10px;
+ left: 50%;
+ transform: translateX(-50%);
+ width: 60px;
+ height: 3px;
+ background-color: var(--primary-color);
}
.card {
- background-color: var(--surface-color);
- border: 1px solid var(--primary-color);
- box-shadow: 0 0 15px var(--glow-color);
+ border: none;
+ border-radius: 10px;
+ box-shadow: var(--shadow);
transition: transform 0.3s, box-shadow 0.3s;
- color: var(--text-color);
+ background-color: var(--card-bg);
+ text-align: center;
}
.card:hover {
transform: translateY(-10px);
- box-shadow: 0 0 30px var(--glow-color);
+ box-shadow: 0 8px 16px rgba(0,0,0,0.2);
}
-.card-title {
+.card .card-body {
+ padding: 30px;
+}
+
+.card i {
color: var(--primary-color);
- font-weight: 600;
}
-.btn-primary {
- background-color: transparent;
- border: 2px solid var(--primary-color);
- color: var(--primary-color);
- font-weight: 600;
- transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
-}
-
-.btn-primary:hover {
- background-color: var(--primary-color);
- color: var(--background-color);
- box-shadow: 0 0 20px var(--glow-color);
-}
-
-.btn-secondary {
- background-color: transparent;
- border: 2px solid var(--secondary-color);
- color: var(--secondary-color);
- font-weight: 600;
- transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
-}
-
-.btn-secondary:hover {
- background-color: var(--secondary-color);
- color: white;
- box-shadow: 0 0 20px var(--glow-color-secondary);
-}
-
-#services h4 {
- color: var(--primary-color);
- font-weight: 600;
-}
-
-#about .img-fluid {
- border: 3px solid var(--primary-color);
- box-shadow: 0 0 25px var(--glow-color);
+.project-card img {
+ border-top-left-radius: 10px;
+ border-top-right-radius: 10px;
}
.form-control {
- background-color: var(--surface-color);
- border: 1px solid var(--primary-color);
- color: var(--text-color);
+ border-radius: 5px;
+ padding: 12px;
}
-.form-control:focus {
- background-color: var(--surface-color);
+.btn-primary {
+ background-color: var(--primary-color);
border-color: var(--primary-color);
- color: var(--text-color);
- box-shadow: 0 0 15px var(--glow-color);
+ border-radius: 50px;
+ padding: 12px 30px;
+ font-weight: 600;
+ transition: background-color 0.3s;
}
-.form-label {
- color: var(--primary-color);
+.btn-primary:hover {
+ background-color: #0056b3;
+ border-color: #0056b3;
}
footer {
- background-color: var(--surface-color) !important;
- border-top: 1px solid var(--primary-color);
+ padding: 20px 0;
+ color: #777;
}
-footer a {
- text-shadow: 0 0 5px var(--glow-color);
- transition: color 0.3s, text-shadow 0.3s;
+/* Responsive */
+@media (max-width: 992px) {
+ .sidebar {
+ width: 100%;
+ height: auto;
+ position: relative;
+ flex-direction: row;
+ justify-content: space-between;
+ padding: 15px;
+ }
+
+ .sidebar .profile-pic {
+ width: 60px;
+ height: 60px;
+ }
+
+ .sidebar h3, .sidebar .text-muted {
+ display: none;
+ }
+
+ .sidebar .nav {
+ flex-direction: row;
+ }
+
+ .sidebar .nav-link {
+ margin: 0 5px;
+ font-size: 1rem;
+ }
+
+ .sidebar .nav-link i {
+ margin-right: 5px;
+ }
+
+ .social-icons {
+ margin-top: 0;
+ }
+
+ .main-content {
+ margin-left: 0;
+ width: 100%;
+ padding: 20px;
+ }
}
-footer a:hover {
- color: var(--primary-color) !important;
- text-shadow: 0 0 15px var(--glow-color);
+@media (max-width: 768px) {
+ .sidebar {
+ flex-direction: column;
+ align-items: center;
+ }
+ .sidebar .nav {
+ margin-top: 15px;
+ }
}
\ No newline at end of file
diff --git a/assets/pasted-20250908-193703-22598405.png b/assets/pasted-20250908-193703-22598405.png
new file mode 100644
index 0000000..cc19e13
Binary files /dev/null and b/assets/pasted-20250908-193703-22598405.png differ
diff --git a/assets/pasted-20250908-194640-01832f45.png b/assets/pasted-20250908-194640-01832f45.png
new file mode 100644
index 0000000..8e1d4b9
Binary files /dev/null and b/assets/pasted-20250908-194640-01832f45.png differ
diff --git a/assets/pasted-20250908-194818-569bcc8f.png b/assets/pasted-20250908-194818-569bcc8f.png
new file mode 100644
index 0000000..8e1d4b9
Binary files /dev/null and b/assets/pasted-20250908-194818-569bcc8f.png differ
diff --git a/assets/pasted-20250908-194856-031f132d.png b/assets/pasted-20250908-194856-031f132d.png
new file mode 100644
index 0000000..8e1d4b9
Binary files /dev/null and b/assets/pasted-20250908-194856-031f132d.png differ
diff --git a/index.php b/index.php
index 5712028..ab85103 100644
--- a/index.php
+++ b/index.php
@@ -3,241 +3,123 @@
- Alex Rubanau - Software Engineer
+ John Doe - Portfolio
-
-
-
-
+
+
-
+
-
-