-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
132 lines (123 loc) · 7.51 KB
/
index.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Advanced Personal Portfolio">
<title>Suki Mizuhiki | Personal Website</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body class="bg-gray-100 text-gray-900 font-roboto transition-colors duration-500" id="main-body">
<!-- Navbar -->
<header class="bg-gray-900 text-white p-4 fixed w-full top-0 z-10">
<nav class="max-w-7xl mx-auto flex justify-between items-center">
<h1 class="text-2xl font-bold">Suki Mizuhiki</h1>
<ul class="flex space-x-6">
<li><a href="#projects" class="hover:text-gray-400">Projects</a></li>
<li><a href="#about" class="hover:text-gray-400">About</a></li>
<li><a href="#skills" class="hover:text-gray-400">Skills</a></li>
<li><a href="#contact" class="hover:text-gray-400">Contact</a></li>
<li><input type="text" id="project-search" class="p-2 rounded-lg" placeholder="Search Projects"></li>
<li>
<button id="theme-toggle" class="bg-gray-800 p-2 rounded-full">
<i class="fas fa-sun text-yellow-400"></i>
</button>
</li>
</ul>
</nav>
</header>
<!-- Hero Section -->
<section class="h-screen flex flex-col justify-center items-center bg-cover bg-center relative" style="background-image: url('https://source.unsplash.com/random/1600x900?tech');">
<div class="absolute inset-0 bg-black opacity-40"></div>
<div class="relative z-10 text-center">
<h2 class="text-5xl font-bold text-white mb-4 animate__animated animate__fadeIn">Hi, I'm Suki Mizuhiki</h2>
<p class="text-2xl text-gray-200 mb-4 animate__animated animate__fadeInUp">This is my new and improved website for my github!</p>
<a href="#projects" class="mt-8 bg-blue-500 hover:bg-blue-600 text-white py-2 px-6 rounded-full animate__animated animate__bounceIn">Explore My Work</a>
</div>
</section>
<!-- Projects Section with Filters -->
<section id="projects" class="p-10 bg-gray-100">
<div class="max-w-7xl mx-auto">
<h2 class="text-4xl font-bold mb-6">Projects</h2>
<!-- Filter Buttons -->
<div class="flex justify-start space-x-4 mb-6">
<button class="filter-btn bg-blue-500 text-white py-2 px-4 rounded" data-filter="all">All</button>
<button class="filter-btn bg-blue-500 text-white py-2 px-4 rounded" data-filter="web">Web Development</button>
<button class="filter-btn bg-blue-500 text-white py-2 px-4 rounded" data-filter="app">App Development</button>
<button class="filter-btn bg-blue-500 text-white py-2 px-4 rounded" data-filter="ml">Machine Learning</button>
</div>
<!-- Project Cards -->
<div id="project-gallery" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="project-card bg-white p-6 rounded-lg shadow-lg hover:shadow-2xl transition duration-300 transform hover:scale-105" data-category="web">
<h3 class="text-2xl font-semibold mb-2">Web Project 1</h3>
<p class="mb-4">A detailed description of Web Project 1 using HTML, CSS, and JavaScript.</p>
<button class="bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded">View Details</button>
</div>
<div class="project-card bg-white p-6 rounded-lg shadow-lg hover:shadow-2xl transition duration-300 transform hover:scale-105" data-category="app">
<h3 class="text-2xl font-semibold mb-2">App Project 1</h3>
<p class="mb-4">A detailed description of App Project 1 using React Native.</p>
<button class="bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded">View Details</button>
</div>
<div class="project-card bg-white p-6 rounded-lg shadow-lg hover:shadow-2xl transition duration-300 transform hover:scale-105" data-category="ml">
<h3 class="text-2xl font-semibold mb-2">ML Project 1</h3>
<p class="mb-4">A detailed description of ML Project 1 using Python and TensorFlow.</p>
<button class="bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded">View Details</button>
</div>
<!-- Add more project cards here -->
</div>
</div>
</section>
<!-- Skills Section with Progress Bars -->
<section id="skills" class="p-10 bg-white">
<div class="max-w-7xl mx-auto">
<h2 class="text-4xl font-bold mb-6">Skills</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<h3 class="text-2xl font-semibold mb-2">JavaScript</h3>
<div class="w-full bg-gray-200 rounded-full h-6 mb-4">
<div class="bg-blue-500 h-6 rounded-full text-center text-white text-sm" style="width: 85%;">85%</div>
</div>
</div>
<div>
<h3 class="text-2xl font-semibold mb-2">React</h3>
<div class="w-full bg-gray-200 rounded-full h-6 mb-4">
<div class="bg-blue-500 h-6 rounded-full text-center text-white text-sm" style="width: 90%;">90%</div>
</div>
</div>
<!-- Add more skills here -->
</div>
</div>
</section>
<!-- Contact Section with AJAX -->
<section id="contact" class="p-10 bg-gray-100">
<div class="max-w-7xl mx-auto">
<h2 class="text-4xl font-bold mb-6">Get in Touch</h2>
<p class="mb-4">Feel free to reach out via the form below or connect with me on social media.</p>
<form id="contact-form" class="space-y-4">
<div>
<label for="name" class="block text-sm font-medium">Name</label>
<input type="text" id="name" name="name" class="w-full p-2 border border-gray-300 rounded" required>
</div>
<div>
<label for="email" class="block text-sm font-medium">Email</label>
<input type="email" id="email" name="email" class="w-full p-2 border border-gray-300 rounded" required>
</div>
<div>
<label for="message" class="block text-sm font-medium">Message</label>
<textarea id="message" name="message" class="w-full p-2 border border-gray-300 rounded" rows="4" required></textarea>
</div>
<button type="submit" class="bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded">Send Message</button>
</form>
<p id="form-response" class="mt-4 text-green-500"></p>
</div>
</section>
<!-- Footer -->
<footer class="bg-gray-900 text-white text-center py-6">
<p>© 2024 Suki Mizuhiki. All rights reserved.</p>
</footer>
<script src="script.js"></script>
</body>
</html>