diff --git a/assets/css/custom.css b/assets/css/custom.css new file mode 100644 index 0000000..92fe7b3 --- /dev/null +++ b/assets/css/custom.css @@ -0,0 +1,79 @@ + +:root { + --primary-color: #0d6efd; + --secondary-color: #6c757d; + --background-color: #f8f9fa; + --surface-color: #ffffff; + --font-family-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif; +} + +body { + font-family: var(--font-family-sans-serif); + background-color: var(--background-color); + color: #212529; +} + +.navbar { + transition: background-color 0.3s ease-in-out, padding 0.3s ease-in-out; +} + +.navbar.scrolled { + background-color: var(--surface-color) !important; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); +} + +.hero-section { + height: 100vh; + background-image: linear-gradient(45deg, rgba(13, 110, 253, 0.8), rgba(78, 142, 255, 0.8)), url('https://picsum.photos/seed/hero-main/1600/900'); + background-size: cover; + background-position: center; + color: white; + display: flex; + align-items: center; + justify-content: center; + text-align: center; +} + +.section-icon { + font-size: 2.5rem; + color: var(--primary-color); +} + +.card { + border: none; + box-shadow: 0 4px 8px rgba(0,0,0,0.1); + transition: transform 0.2s ease-in-out; +} + +.card:hover { + transform: translateY(-5px); +} + +.testimonial-avatar { + width: 80px; + height: 80px; + border-radius: 50%; + object-fit: cover; +} + +.about-avatar { + width: 256px; + height: 256px; + border-radius: 50%; + object-fit: cover; + box-shadow: 0 4px 12px rgba(0,0,0,0.15); +} + +.footer { + background-color: #343a40; + color: white; +} + +.footer a { + color: white; + text-decoration: none; +} + +.footer a:hover { + text-decoration: underline; +} diff --git a/assets/js/main.js b/assets/js/main.js new file mode 100644 index 0000000..4f9bc9d --- /dev/null +++ b/assets/js/main.js @@ -0,0 +1,36 @@ + +document.addEventListener('DOMContentLoaded', function () { + // Navbar shrink on scroll + const navbar = document.querySelector('.navbar'); + if (navbar) { + window.addEventListener('scroll', () => { + if (window.scrollY > 50) { + navbar.classList.add('scrolled'); + } else { + navbar.classList.remove('scrolled'); + } + }); + } + + // Bootstrap form validation + const forms = document.querySelectorAll('.needs-validation'); + Array.prototype.slice.call(forms).forEach(function (form) { + form.addEventListener('submit', function (event) { + if (!form.checkValidity()) { + event.preventDefault(); + event.stopPropagation(); + } + form.classList.add('was-validated'); + }, false); + }); + + // 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' + }); + }); + }); +}); diff --git a/index.php b/index.php index e13ae95..bd34347 100644 --- a/index.php +++ b/index.php @@ -1,131 +1,299 @@ - + - - - New Style - - - - + + + Ava Reed | Creative Developer & Designer + + + + + + + -
-
-

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

-
-
- + + + + + +
+
+

Ava Reed: Creative Developer & Designer

+

Building beautiful, functional websites and applications.

+ Contact Me + See My Work +
+
+ +
+ +
+
+

My Work

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

A brief description of the project, its goals, and the outcome.

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

A brief description of the project, its goals, and the outcome.

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

A brief description of the project, its goals, and the outcome.

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

A brief description of the project, its goals, and the outcome.

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

A brief description of the project, its goals, and the outcome.

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

A brief description of the project, its goals, and the outcome.

+
+
+
+
+
+
+ + +
+
+

Services

+
+
+
+ +

Web Development

+

Fast, responsive, and scalable websites built with modern technologies.

+
+
+
+
+ +

UI/UX Design

+

Intuitive and engaging user interfaces designed for a great user experience.

+
+
+
+
+ +

Branding

+

Creating unique brand identities that stand out from the crowd.

+
+
+
+
+
+ + +
+
+

What Clients Say

+
+
+
+ Avatar of a satisfied client. +

"Ava is a true professional. The final product exceeded all our expectations."

+
Jane Doe
+
+
+
+
+ Avatar of a satisfied client. +

"The communication was excellent, and the project was delivered on time."

+
John Smith
+
+
+
+
+ Avatar of a satisfied client. +

"A talented developer with a great eye for design. Highly recommended!"

+
Sam Wilson
+
+
+
+
+
+ + +
+
+

About Me

+
+
+ Professional headshot of Ava Reed. +
+
+

I'm Ava Reed, a passionate and detail-oriented developer and designer based in [Your City]. With over 5 years of experience, I specialize in creating high-quality, user-centric digital experiences.

+

My goal is to help clients achieve their vision by combining clean code with beautiful design. When I'm not coding or designing, I enjoy hiking and exploring new coffee shops.

+
+
+
+
+ + +
+
+

Contact Me

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