v3
This commit is contained in:
Flatlogic Bot
parent
14c4e1cd90
commit
ca7997f37e
@ -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;
|
||||
}
|
||||
}
|
||||
BIN
assets/pasted-20250908-193703-22598405.png
Normal file
BIN
assets/pasted-20250908-193703-22598405.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1018 KiB |
BIN
assets/pasted-20250908-194640-01832f45.png
Normal file
BIN
assets/pasted-20250908-194640-01832f45.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 428 KiB |
BIN
assets/pasted-20250908-194818-569bcc8f.png
Normal file
BIN
assets/pasted-20250908-194818-569bcc8f.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 428 KiB |
BIN
assets/pasted-20250908-194856-031f132d.png
Normal file
BIN
assets/pasted-20250908-194856-031f132d.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 428 KiB |
298
index.php
298
index.php
@ -3,241 +3,123 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Alex Rubanau - Software Engineer</title>
|
||||
<title>John Doe - Portfolio</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="assets/css/custom.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||||
<link rel="stylesheet" href="assets/css/custom.css?v=2">
|
||||
</head>
|
||||
<body class="futuristic">
|
||||
<body>
|
||||
|
||||
<!-- Navbar -->
|
||||
<nav class="navbar navbar-expand-lg navbar-dark fixed-top">
|
||||
<div class="container">
|
||||
<a class="navbar-brand" href="#">Alex Rubanau</a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarNav">
|
||||
<ul class="navbar-nav ms-auto">
|
||||
<li class="nav-item"><a class="nav-link" href="#work">Work</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#services">Services</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#about">About</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#contact">Contact</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="sidebar">
|
||||
<div class="text-center mb-5">
|
||||
<img src="https://i.imgur.com/your-profile-pic.jpg" alt="John Doe" class="profile-pic">
|
||||
<h3 class="mt-3">John Doe</h3>
|
||||
<p class="text-muted">Web Developer</p>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Hero Section -->
|
||||
<header class="hero text-center">
|
||||
<div class="container">
|
||||
<h1 class="display-4">Alex Rubanau: Software Engineer</h1>
|
||||
<p class="lead">Crafting elegant and efficient solutions for the web.</p>
|
||||
<a href="#contact" class="btn btn-primary btn-lg">Contact Me</a>
|
||||
<a href="#work" class="btn btn-secondary btn-lg">View My Work</a>
|
||||
<nav class="nav flex-column">
|
||||
<a class="nav-link active" href="#home"><i class="fas fa-home"></i> Home</a>
|
||||
<a class="nav-link" href="#about"><i class="fas fa-user"></i> About</a>
|
||||
<a class="nav-link" href="#services"><i class="fas fa-concierge-bell"></i> Services</a>
|
||||
<a class="nav-link" href="#work"><i class="fas fa-briefcase"></i> My Work</a>
|
||||
<a class="nav-link" href="#contact"><i class="fas fa-envelope"></i> Contact</a>
|
||||
</nav>
|
||||
<div class="social-icons mt-5">
|
||||
<a href="#"><i class="fab fa-twitter"></i></a>
|
||||
<a href="#"><i class="fab fa-linkedin-in"></i></a>
|
||||
<a href="#"><i class="fab fa-github"></i></a>
|
||||
</div>
|
||||
</header>
|
||||
</div>
|
||||
|
||||
<main>
|
||||
<!-- Work Gallery -->
|
||||
<section id="work" class="section">
|
||||
<div class="container">
|
||||
<h2 class="text-center mb-5">My Work</h2>
|
||||
<div class="row">
|
||||
<!-- Project 1 -->
|
||||
<div class="col-md-4 mb-4">
|
||||
<div class="card">
|
||||
<img src="https://picsum.photos/600/400?random=1" class="card-img-top" alt="Placeholder image for a software project.">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Project One</h5>
|
||||
<p class="card-text">A brief description of the project, its goals, and the technologies used.</p>
|
||||
</div>
|
||||
<div class="main-content">
|
||||
<section id="home" class="hero-section text-center">
|
||||
<h1>Welcome to My Portfolio</h1>
|
||||
<p>I create modern and responsive web applications.</p>
|
||||
<a href="#contact" class="btn btn-primary">Get in Touch</a>
|
||||
</section>
|
||||
|
||||
<section id="about" class="content-section">
|
||||
<h2>About Me</h2>
|
||||
<p>Hello! I'm John Doe, a passionate web developer with a knack for creating elegant and efficient solutions. I have a strong background in front-end and back-end technologies, and I love bringing ideas to life in the browser.</p>
|
||||
</section>
|
||||
|
||||
<section id="services" class="content-section">
|
||||
<h2>Services</h2>
|
||||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<i class="fas fa-laptop-code fa-2x"></i>
|
||||
<h5 class="card-title mt-3">Web Development</h5>
|
||||
<p class="card-text">Full-stack development of web applications.</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Project 2 -->
|
||||
<div class="col-md-4 mb-4">
|
||||
<div class="card">
|
||||
<img src="https://picsum.photos/600/400?random=2" class="card-img-top" alt="Placeholder image for a software project.">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Project Two</h5>
|
||||
<p class="card-text">A brief description of the project, its goals, and the technologies used.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<i class="fas fa-mobile-alt fa-2x"></i>
|
||||
<h5 class="card-title mt-3">Responsive Design</h5>
|
||||
<p class="card-text">Websites that work on all devices.</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Project 3 -->
|
||||
<div class="col-md-4 mb-4">
|
||||
<div class="card">
|
||||
<img src="https://picsum.photos/600/400?random=3" class="card-img-top" alt="Placeholder image for a software project.">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Project Three</h5>
|
||||
<p class="card-text">A brief description of the project, its goals, and the technologies used.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Project 4 -->
|
||||
<div class="col-md-4 mb-4">
|
||||
<div class="card">
|
||||
<img src="https://picsum.photos/600/400?random=4" class="card-img-top" alt="Placeholder image for a software project.">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Project Four</h5>
|
||||
<p class="card-text">A brief description of the project, its goals, and the technologies used.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Project 5 -->
|
||||
<div class="col-md-4 mb-4">
|
||||
<div class="card">
|
||||
<img src="https://picsum.photos/600/400?random=5" class="card-img-top" alt="Placeholder image for a software project.">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Project Five</h5>
|
||||
<p class="card-text">A brief description of the project, its goals, and the technologies used.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Project 6 -->
|
||||
<div class="col-md-4 mb-4">
|
||||
<div class="card">
|
||||
<img src="https://picsum.photos/600/400?random=6" class="card-img-top" alt="Placeholder image for a software project.">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Project Six</h5>
|
||||
<p class="card-text">A brief description of the project, its goals, and the technologies used.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<i class="fas fa-palette fa-2x"></i>
|
||||
<h5 class="card-title mt-3">UI/UX Design</h5>
|
||||
<p class="card-text">Intuitive and beautiful user interfaces.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Services -->
|
||||
<section id="services" class="section bg-light">
|
||||
<div class="container">
|
||||
<h2 class="text-center mb-5">Services</h2>
|
||||
<div class="row text-center">
|
||||
<div class="col-md-4">
|
||||
<h4>Web Development</h4>
|
||||
<p>Building responsive and performant websites and web applications from the ground up.</p>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<h4>UI/UX Design</h4>
|
||||
<p>Designing intuitive and beautiful user interfaces that are a joy to use.</p>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<h4>Cloud Solutions</h4>
|
||||
<p>Leveraging cloud platforms to build scalable and reliable infrastructure.</p>
|
||||
<section id="work" class="content-section">
|
||||
<h2>My Work</h2>
|
||||
<div class="row">
|
||||
<div class="col-md-6 mb-4">
|
||||
<div class="card project-card">
|
||||
<img src="https://i.imgur.com/project-1.jpg" class="card-img-top" alt="Project 1">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Project One</h5>
|
||||
<p class="card-text">A description of the first project.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Testimonials -->
|
||||
<section id="testimonials" class="section">
|
||||
<div class="container">
|
||||
<h2 class="text-center mb-5">What Clients Say</h2>
|
||||
<div class="row">
|
||||
<div class="col-md-4 mb-4">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<p class="card-text">"Alex is a fantastic engineer who delivers high-quality work on time."</p>
|
||||
<div class="d-flex align-items-center">
|
||||
<img src="https://picsum.photos/96/96?random=7" class="rounded-circle me-3" alt="Avatar of a client.">
|
||||
<div>
|
||||
<strong>Client One</strong><br>
|
||||
<small>CEO, Company A</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4 mb-4">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<p class="card-text">"The attention to detail and commitment to excellence is truly impressive."</p>
|
||||
<div class="d-flex align-items-center">
|
||||
<img src="https://picsum.photos/96/96?random=8" class="rounded-circle me-3" alt="Avatar of a client.">
|
||||
<div>
|
||||
<strong>Client Two</strong><br>
|
||||
<small>CTO, Company B</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4 mb-4">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<p class="card-text">"A pleasure to work with. Highly recommended for any web project."</p>
|
||||
<div class="d-flex align-items-center">
|
||||
<img src="https://picsum.photos/96/96?random=9" class="rounded-circle me-3" alt="Avatar of a client.">
|
||||
<div>
|
||||
<strong>Client Three</strong><br>
|
||||
<small>Lead Designer, Company C</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 mb-4">
|
||||
<div class="card project-card">
|
||||
<img src="https://i.imgur.com/project-2.jpg" class="card-img-top" alt="Project 2">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Project Two</h5>
|
||||
<p class="card-text">A description of the second project.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- About Section -->
|
||||
<section id="about" class="section bg-light">
|
||||
<div class="container">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-md-4 text-center">
|
||||
<img src="https://picsum.photos/256/256" class="img-fluid rounded-circle mb-4" alt="Professional headshot of Alex Rubanau.">
|
||||
</div>
|
||||
<div class="col-md-8">
|
||||
<h2 class="mb-4">About Me</h2>
|
||||
<p>I am a passionate software engineer with a focus on creating beautiful and functional web applications. With a background in computer science and several years of experience in the industry, I have a proven track record of delivering high-quality products that meet user needs and business goals.</p>
|
||||
<p>My expertise spans the full stack, from crafting pixel-perfect user interfaces to designing robust backend systems. I am always eager to learn new technologies and take on challenging projects.</p>
|
||||
</div>
|
||||
<section id="contact" class="content-section">
|
||||
<h2>Contact Me</h2>
|
||||
<form>
|
||||
<div class="mb-3">
|
||||
<input type="text" class="form-control" placeholder="Your Name">
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<input type="email" class="form-control" placeholder="Your Email">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<textarea class="form-control" rows="5" placeholder="Your Message"></textarea>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary">Send Message</button>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
<!-- Contact Form -->
|
||||
<section id="contact" class="section">
|
||||
<div class="container">
|
||||
<h2 class="text-center mb-5">Get In Touch</h2>
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-md-8">
|
||||
<form id="contactForm" class="needs-validation" novalidate>
|
||||
<div class="mb-3">
|
||||
<label for="name" class="form-label">Name</label>
|
||||
<input type="text" class="form-control" id="name" required>
|
||||
<div class="invalid-feedback">Please enter your name.</div>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="email" class="form-label">Email</label>
|
||||
<input type="email" class="form-control" id="email" required>
|
||||
<div class="invalid-feedback">Please enter a valid email address.</div>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="message" class="form-label">Message</label>
|
||||
<textarea class="form-control" id="message" rows="5" required></textarea>
|
||||
<div class="invalid-feedback">Please enter a message.</div>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary">Send Message</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="bg-dark text-white text-center py-4">
|
||||
<div class="container">
|
||||
<p class="mb-0">© 2025 Alex Rubanau. All Rights Reserved.</p>
|
||||
<a href="#" class="text-white">GitHub</a> |
|
||||
<a href="#" class="text-white">LinkedIn</a>
|
||||
</div>
|
||||
</footer>
|
||||
<footer class="text-center mt-5">
|
||||
<p>© 2025 John Doe. All Rights Reserved.</p>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script src="assets/js/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user