-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindexOrig.html
133 lines (115 loc) · 4.38 KB
/
indexOrig.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cyril Anthony | Portfolio</title>
<link rel="stylesheet" href="styles.css">
<!-- import icons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
</head>
<body>
<!-- Navigation Bar -->
<div id="header">
<div class="container">
<nav>
<img src="images/javascript-logo.png" class="logo">
<ul>
<li><a href="#projects"><i class="bi bi-menu-app"></i> Projects</a></li>
<li><a href="#skills"><i class="bi bi-mortarboard"></i> Skills</a></li>
<li><a href="#contact"><i class="bi bi-file-person"></i> Contact</a></li>
<!-- Search Box -->
<li id="search-box" class="search-box">
<input type="text" id="search-input" placeholder="Search content...">
<button onclick="searchContent()"> <i class="bi bi-search"></i> Search</button>
</li>
</ul>
</nav>
</div>
</div>
<!-- Hero Section -->
<section id="hero">
<div class="intro">
<h1>Cyril Anthony</h1>
<p>Web Application Developer</p>
</div>
</section>
<!-- Projects Section -->
<section id="projects">
<h2>Projects</h2>
<div class="project-grid">
<!-- Project Cards -->
<div class="project-card">
<h3>Project 1</h3>
<p>Brief description of the project.</p>
</div>
<div class="project-card">
<h3>Project 2</h3>
<p>Brief description of the project.</p>
</div>
</div>
</section>
<!-- Skills Section -->
<section id="skills">
<h2>Skills</h2>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>Vue.js</li>
<li>Node.js</li>
</ul>
</section>
<!-- Contact Section -->
<section id="contact">
<h2>Contact Me</h2>
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="message">Message:</label>
<textarea id="message" name="message" required></textarea>
<button type="submit">Send Message</button>
</form>
<div class="social-links">
<a href="https://www.linkedin.com/in/cyril-anthony-ebron-9bb532244/" target="_blank"><i class="bi bi-linkedin"></i>LinkedIn</a>
<a href="https://github.com/cyebron" target="_blank"><i class="bi bi-github"></i>GitHub</a>
</div>
</section>
<!-- Footer -->
<footer>
<p>© 2024 Cyril Anthony</p>
</footer>
<!-- JavaScript for Search Functionality -->
<script>
function searchContent() {
var searchQuery = document.getElementById('search-input').value.toLowerCase();
// Get all elements that contain text
var allElements = document.querySelectorAll('body *');
let found = false;
// Loop through elements and check if any contain the search query
for (let element of allElements) {
let textContent = element.textContent || element.innerText;
if (textContent.toLowerCase().includes(searchQuery)) {
// Scroll to the element and highlight it
element.scrollIntoView({ behavior: 'smooth', block: 'center' });
element.style.backgroundColor = 'yellow'; // Highlight the element
found = true;
break;
}
}
if (!found) {
alert("No matching content found!");
}
}
// Trigger search on 'Enter' key press
function checkEnter(event) {
if (event.key === 'Enter') {
event.preventDefault(); // Prevents form submission if inside a form
searchContent();
}
}
</script>
</body>
</html>