diff --git a/assets/css/custom.css b/assets/css/custom.css new file mode 100644 index 0000000..19d3e1e --- /dev/null +++ b/assets/css/custom.css @@ -0,0 +1,72 @@ + +@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap'); + +:root { + --primary-color: #2563EB; + --secondary-color: #475569; + --background-color: #F8FAFC; + --surface-color: #FFFFFF; + --text-color: #1E293B; + --border-radius: 0.5rem; +} + +body { + font-family: 'Inter', sans-serif; + background-color: var(--background-color); + color: var(--text-color); +} + +.navbar { + background-color: var(--surface-color); + box-shadow: 0 2px 4px rgba(0,0,0,0.05); +} + +.hero { + background: linear-gradient(45deg, rgba(37, 99, 235, 0.9), rgba(96, 165, 250, 0.9)), url('https://picsum.photos/seed/hero/1600/900') no-repeat center center; + background-size: cover; + color: white; + padding: 6rem 1rem; +} + +.hero h1 { + font-weight: 700; +} + +.section { + padding: 4rem 1rem; +} + +.section-title { + font-weight: 700; + color: var(--primary-color); + margin-bottom: 2rem; +} + +.card { + border: none; + border-radius: var(--border-radius); + box-shadow: 0 4px 6px rgba(0,0,0,0.1); + transition: transform 0.2s ease-in-out; +} + +.card:hover { + transform: translateY(-5px); +} + +.btn-primary { + background-color: var(--primary-color); + border-color: var(--primary-color); + border-radius: var(--border-radius); + padding: 0.75rem 1.5rem; + font-weight: 500; +} + +.btn-primary:hover { + opacity: 0.9; +} + +.footer { + background-color: var(--surface-color); + padding: 2rem 1rem; + border-top: 1px solid #e2e8f0; +} diff --git a/assets/js/main.js b/assets/js/main.js new file mode 100644 index 0000000..d8234f0 --- /dev/null +++ b/assets/js/main.js @@ -0,0 +1,20 @@ + +document.addEventListener('DOMContentLoaded', () => { + const navLinks = document.querySelectorAll('.nav-link'); + + navLinks.forEach(link => { + if (link.hash !== '') { + link.addEventListener('click', function(e) { + e.preventDefault(); + + const targetElement = document.querySelector(this.hash); + + if(targetElement) { + targetElement.scrollIntoView({ + behavior: 'smooth' + }); + } + }); + } + }); +}); diff --git a/index.php b/index.php index e13ae95..77f8fbb 100644 --- a/index.php +++ b/index.php @@ -1,131 +1,134 @@ - - + - - - New Style - - - - + + + John Doe - Personal Portfolio + + + + + + + + + + + + + + + -
-
-

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

+

I build beautiful and functional websites for the modern web.

+ View My Work +
+
+ + +
+
+

About Me

+
+
+

Hello! I'm John, a passionate web developer with a knack for creating elegant solutions in the least amount of time. I specialize in front-end development and love bringing ideas to life in the browser. When I'm not coding, you can find me exploring new technologies or enjoying a good cup of coffee.

+
+
+
+
+ + +
+
+

Portfolio

+
+
+
+ Placeholder for portfolio project one. +
+
Project One
+

A brief description of the project, highlighting the technologies used and the problems solved.

+
+
+
+
+
+ Placeholder for portfolio project two. +
+
Project Two
+

Another project description, focusing on the creative process and the final outcome.

+
+
+
+
+
+
+ + +
+
+

Get In Touch

+
+
+

Have a project in mind or just want to say hello? Drop me a line.

+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+
+
+
+
+ + + + + + + + + + - + \ No newline at end of file