diff --git a/assets/css/custom.css b/assets/css/custom.css new file mode 100644 index 0000000..6d9fe09 --- /dev/null +++ b/assets/css/custom.css @@ -0,0 +1,72 @@ + +:root { + --primary-color: #3B82F6; + --secondary-color: #10B981; + --background-color: #F9FAFB; + --surface-color: #FFFFFF; + --text-color: #111827; + --heading-font: 'Inter', sans-serif; + --body-font: 'Inter', sans-serif; +} + +body { + font-family: var(--body-font); + background-color: var(--background-color); + color: var(--text-color); +} + +h1, h2, h3, h4, h5, h6 { + font-family: var(--heading-font); + font-weight: 700; +} + +.navbar { + transition: all 0.3s ease-in-out; +} + +.navbar-scrolled { + background-color: var(--surface-color); + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); +} + +.hero { + background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://picsum.photos/1600/900'); + background-size: cover; + background-position: center; + color: white; + padding: 8rem 0; +} + +.btn-primary { + background-color: var(--primary-color); + border-color: var(--primary-color); +} + +.btn-secondary { + background-color: var(--secondary-color); + border-color: var(--secondary-color); +} + +.section-title { + margin-bottom: 3rem; +} + +.card { + border: none; + box-shadow: 0 4px 12px rgba(0,0,0,0.08); + transition: transform 0.2s ease-in-out; +} + +.card:hover { + transform: translateY(-5px); +} + +.form-control:focus { + border-color: var(--primary-color); + box-shadow: 0 0 0 0.25rem rgba(59, 130, 246, 0.25); +} + +footer { + background-color: var(--text-color); + color: var(--background-color); +} diff --git a/assets/js/main.js b/assets/js/main.js new file mode 100644 index 0000000..459f8b2 --- /dev/null +++ b/assets/js/main.js @@ -0,0 +1,32 @@ + +document.addEventListener('DOMContentLoaded', function () { + // 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'); + } + }); + + // Smooth scrolling for internal links + document.querySelectorAll('a[href^="#"]').forEach(anchor => { + anchor.addEventListener('click', function (e) { + e.preventDefault(); + document.querySelector(this.getAttribute('href')).scrollIntoView({ + behavior: 'smooth' + }); + }); + }); + + // Contact form validation + const form = document.querySelector('#contactForm'); + form.addEventListener('submit', function (e) { + if (!form.checkValidity()) { + e.preventDefault(); + e.stopPropagation(); + } + form.classList.add('was-validated'); + }, false); +}); diff --git a/db/contacts.json b/db/contacts.json new file mode 100644 index 0000000..0637a08 --- /dev/null +++ b/db/contacts.json @@ -0,0 +1 @@ +[] \ No newline at end of file diff --git a/index.php b/index.php index e13ae95..ac2f3dc 100644 --- a/index.php +++ b/index.php @@ -1,131 +1,255 @@ - + - - - 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

-
-
- + + + + + +
+
+

Creative Developer & Designer.

+

Ava Reed builds beautiful, functional, and modern web experiences.

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

My Work

+
+ +
+
+ Placeholder for project showcase +
+
Project One
+

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

+
+
+
+ +
+
+ Placeholder for project showcase +
+
Project Two
+

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

+
+
+
+ +
+
+ Placeholder for project showcase +
+
Project Three
+

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

+
+
+
+ +
+
+ Placeholder for project showcase +
+
Project Four
+

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

+
+
+
+ +
+
+ Placeholder for project showcase +
+
Project Five
+

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

+
+
+
+ +
+
+ Placeholder for project showcase +
+
Project Six
+

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

+
+
+
+
+
+
+ + +
+
+

Services

+
+
+
+
+ +

Web Design

+

Creating stunning, user-friendly interfaces that are both beautiful and intuitive.

+
+
+
+
+
+
+ +

Web Development

+

Building responsive, high-performance websites from the ground up.

+
+
+
+
+
+
+ +

Branding

+

Developing a strong brand identity that resonates with your target audience.

+
+
+
+
+
+
+ + +
+
+

About Me

+
+
+ Headshot of Ava Reed +
+
+

I'm Ava Reed, a passionate developer and designer with a knack for creating engaging digital experiences. With a background in both art and computer science, I bring a unique perspective to every project.

+

My goal is to build products that are not only visually appealing but also highly functional and accessible to everyone. I love collaborating with clients to bring their visions to life.

+
+
+
+
+ + +
+
+

Get In Touch

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