diff --git a/assets/css/custom.css b/assets/css/custom.css new file mode 100644 index 0000000..c848d3e --- /dev/null +++ b/assets/css/custom.css @@ -0,0 +1,147 @@ +: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); +} + +.futuristic { + font-family: 'Rajdhani', sans-serif; + background-color: var(--background-color); + color: var(--text-color); +} + +.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; +} + +.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; +} + +.navbar .nav-link:hover, .navbar .navbar-brand:hover { + 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); +} + +.hero h1 { + font-weight: 700; + text-shadow: 0 0 15px var(--glow-color); +} + +.section { + padding: 5rem 0; + background-color: var(--background-color); +} + +.section h2 { + font-weight: 600; + color: var(--primary-color); + text-shadow: 0 0 10px var(--glow-color); + margin-bottom: 3rem !important; +} + +.card { + background-color: var(--surface-color); + border: 1px solid var(--primary-color); + box-shadow: 0 0 15px var(--glow-color); + transition: transform 0.3s, box-shadow 0.3s; + color: var(--text-color); +} + +.card:hover { + transform: translateY(-10px); + box-shadow: 0 0 30px var(--glow-color); +} + +.card-title { + 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); +} + +.form-control { + background-color: var(--surface-color); + border: 1px solid var(--primary-color); + color: var(--text-color); +} + +.form-control:focus { + background-color: var(--surface-color); + border-color: var(--primary-color); + color: var(--text-color); + box-shadow: 0 0 15px var(--glow-color); +} + +.form-label { + color: var(--primary-color); +} + +footer { + background-color: var(--surface-color) !important; + border-top: 1px solid var(--primary-color); +} + +footer a { + text-shadow: 0 0 5px var(--glow-color); + transition: color 0.3s, text-shadow 0.3s; +} + +footer a:hover { + color: var(--primary-color) !important; + text-shadow: 0 0 15px var(--glow-color); +} \ No newline at end of file diff --git a/assets/js/main.js b/assets/js/main.js new file mode 100644 index 0000000..2a3bf2e --- /dev/null +++ b/assets/js/main.js @@ -0,0 +1,32 @@ + +document.addEventListener('DOMContentLoaded', function () { + // Smooth scroll for anchor links + document.querySelectorAll('a[href^="#"]').forEach(anchor => { + anchor.addEventListener('click', function (e) { + e.preventDefault(); + document.querySelector(this.getAttribute('href')).scrollIntoView({ + behavior: 'smooth' + }); + }); + }); + + // Navbar shrink on scroll + const navbar = document.querySelector('.navbar'); + window.addEventListener('scroll', () => { + if (window.scrollY > 50) { + navbar.classList.add('navbar-scrolled'); + } else { + navbar.classList.remove('navbar-scrolled'); + } + }); + + // Contact form validation + const form = document.querySelector('#contactForm'); + form.addEventListener('submit', function (event) { + if (!form.checkValidity()) { + event.preventDefault(); + event.stopPropagation(); + } + form.classList.add('was-validated'); + }, false); +}); diff --git a/assets/pasted-20250908-193018-a1583c4b.png b/assets/pasted-20250908-193018-a1583c4b.png new file mode 100644 index 0000000..f452c62 Binary files /dev/null and b/assets/pasted-20250908-193018-a1583c4b.png differ diff --git a/index.php b/index.php index e13ae95..5712028 100644 --- a/index.php +++ b/index.php @@ -1,131 +1,243 @@ - - + - - - New Style - - - - + + + Alex Rubanau - Software Engineer + + + + + - -
-
-

Analyzing your requirements and generating your website…

-
- Loading… -
-

Flatlogic AI is collecting your requirements and applying the first changes.

-

This page will update automatically as the plan is implemented.

-

Runtime: PHP — UTC

-
-
- + + + + + + +
+
+

Alex Rubanau: Software Engineer

+

Crafting elegant and efficient solutions for the web.

+ Contact Me + View My Work +
+
+ +
+ +
+
+

My Work

+
+ +
+
+ Placeholder image for a software project. +
+
Project One
+

A brief description of the project, its goals, and the technologies used.

+
+
+
+ +
+
+ Placeholder image for a software project. +
+
Project Two
+

A brief description of the project, its goals, and the technologies used.

+
+
+
+ +
+
+ Placeholder image for a software project. +
+
Project Three
+

A brief description of the project, its goals, and the technologies used.

+
+
+
+ +
+
+ Placeholder image for a software project. +
+
Project Four
+

A brief description of the project, its goals, and the technologies used.

+
+
+
+ +
+
+ Placeholder image for a software project. +
+
Project Five
+

A brief description of the project, its goals, and the technologies used.

+
+
+
+ +
+
+ Placeholder image for a software project. +
+
Project Six
+

A brief description of the project, its goals, and the technologies used.

+
+
+
+
+
+
+ + +
+
+

Services

+
+
+

Web Development

+

Building responsive and performant websites and web applications from the ground up.

+
+
+

UI/UX Design

+

Designing intuitive and beautiful user interfaces that are a joy to use.

+
+
+

Cloud Solutions

+

Leveraging cloud platforms to build scalable and reliable infrastructure.

+
+
+
+
+ + +
+
+

What Clients Say

+
+
+
+
+

"Alex is a fantastic engineer who delivers high-quality work on time."

+
+ Avatar of a client. +
+ Client One
+ CEO, Company A +
+
+
+
+
+
+
+
+

"The attention to detail and commitment to excellence is truly impressive."

+
+ Avatar of a client. +
+ Client Two
+ CTO, Company B +
+
+
+
+
+
+
+
+

"A pleasure to work with. Highly recommended for any web project."

+
+ Avatar of a client. +
+ Client Three
+ Lead Designer, Company C +
+
+
+
+
+
+
+
+ + +
+
+
+
+ Professional headshot of Alex Rubanau. +
+
+

About Me

+

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.

+

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.

+
+
+
+
+ + +
+
+

Get In Touch

+
+
+
+
+ + +
Please enter your name.
+
+
+ + +
Please enter a valid email address.
+
+
+ + +
Please enter a message.
+
+ +
+
+
+
+
+
+ + + + + + - + \ No newline at end of file