-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(sections): add the sections and link them
- Loading branch information
Showing
6 changed files
with
195 additions
and
46 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,136 @@ | ||
| "use client"; | ||
| import { useState } from "react"; | ||
| import Background from "./background"; | ||
|
|
||
| type Email = { | ||
| name: string; | ||
| email: string; | ||
| subject: string; | ||
| message: string; | ||
| }; | ||
|
|
||
| const Contact: React.FC = () => { | ||
| const [formData, setFormData] = useState<Email>({ | ||
| name: "", | ||
| email: "", | ||
| subject: "", | ||
| message: "", | ||
| }); | ||
|
|
||
| const handleChange = ( | ||
| e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>, | ||
| ) => { | ||
| const { name, value } = e.target; | ||
| setFormData({ ...formData, [name]: value }); | ||
| }; | ||
|
|
||
| const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => { | ||
| e.preventDefault(); | ||
| console.log("Form submitted:", formData); | ||
| // Here you can handle form submission (send data to backend) | ||
| }; | ||
|
|
||
| return ( | ||
| <main id="contact"> | ||
| <Background styles="h-screen"> | ||
| <div className="max-w-lg mx-auto p-6 bg-white shadow-md rounded-lg"> | ||
| <h2 className="text-2xl font-semibold text-gray-800 mb-6"> | ||
| Contact Me | ||
| </h2> | ||
| <form onSubmit={handleSubmit}> | ||
| <div className="mb-4"> | ||
| {/* Name Field */} | ||
| <label | ||
| htmlFor="name" | ||
| className="block text-gray-700 font-medium mb-2" | ||
| > | ||
| Name | ||
| </label> | ||
|
|
||
| <input | ||
| type="text" | ||
| name="name" | ||
| id="name" | ||
| value={formData.name} | ||
| onChange={handleChange} | ||
| className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-black" | ||
| placeholder="Your Name" | ||
| required | ||
| /> | ||
| </div> | ||
|
|
||
| {/* Email Field */} | ||
| <div className="mb-4"> | ||
| <label | ||
| htmlFor="email" | ||
| className="block text-gray-700 font-medium mb-2" | ||
| > | ||
| </label> | ||
|
|
||
| <input | ||
| type="email" | ||
| name="email" | ||
| id="email" | ||
| value={formData.email} | ||
| onChange={handleChange} | ||
| className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-black" | ||
| placeholder="Your Email" | ||
| required | ||
| /> | ||
| </div> | ||
|
|
||
| {/* Subject Field */} | ||
| <div className="mb-4"> | ||
| <label | ||
| htmlFor="subject" | ||
| className="block text-gray-700 font-medium mb-2" | ||
| > | ||
| Subject | ||
| </label> | ||
| <input | ||
| name="subject" | ||
| value={formData.subject} | ||
| onChange={handleChange} | ||
| className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-black" | ||
| placeholder="Your Subject" | ||
| required | ||
| /> | ||
| </div> | ||
|
|
||
| {/* Message Field */} | ||
| <div className="mb-4"> | ||
| <label | ||
| htmlFor="message" | ||
| className="block text-gray-700 font-medium mb-2" | ||
| > | ||
| Message | ||
| </label> | ||
| <textarea | ||
| name="message" | ||
| id="message" | ||
| value={formData.message} | ||
| onChange={handleChange} | ||
| className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-black" | ||
| rows={6} | ||
| placeholder="Your Message" | ||
| required | ||
| style={{ resize: "none" }} | ||
| /> | ||
| </div> | ||
|
|
||
| {/* Submit Button */} | ||
| <button | ||
| type="submit" | ||
| className="w-full bg-blue-500 text-white py-2 px-4 rounded-md hover:bg-blue-600 transition duration-300" | ||
| > | ||
| Submit | ||
| </button> | ||
| </form> | ||
| </div> | ||
| </Background> | ||
| </main> | ||
| ); | ||
| }; | ||
|
|
||
| export default Contact; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,34 +1,41 @@ | ||
| import Link from "next/link"; | ||
| import Background from "./background"; | ||
| import { FaLinkedin } from "react-icons/fa"; | ||
| import { FaGithub } from "react-icons/fa"; | ||
|
|
||
| const Hero: React.FC = () => { | ||
| return ( | ||
| <Background styles="h-screen flex items-center justify-center"> | ||
| <div className="relative z-10 text-center text-white max-w-3xl"> | ||
| <h1 className="text-4xl md:text-6xl font-bold mb-6"> | ||
| Hi, I'm <span className="text-catppuccin_red">Dylan Zhou</span> | ||
| </h1> | ||
| <p className="text-lg md:text-xl mb-8"> | ||
| I'm a dedicated student passionate about{" "} | ||
| <span className="font-extrabold">Full Stack Developer</span>, always | ||
| seeking new challenges to grow my skills and improve my applications. | ||
| </p> | ||
| <div className="grid grid-cols-2 gap-10"> | ||
| <Link | ||
| href="#projects" | ||
| className="bg-catppuccin_rosewater text-black font-semibold py-3 px-6 rounded-full hover:bg-catppuccin_flamingo transition duration-300" | ||
| > | ||
| View My Work | ||
| </Link> | ||
| <Link | ||
| href="#resume" | ||
| className="bg-catppuccin_rosewater text-black font-semibold py-3 px-6 rounded-full hover:bg-catppuccin_flamingo transition duration-300" | ||
| > | ||
| View My Resume | ||
| </Link> | ||
| <main id="hero"> | ||
| <Background styles="h-screen flex items-center justify-center"> | ||
| <div className="relative z-10 text-center text-white max-w-3xl"> | ||
| <h1 className="text-4xl md:text-6xl font-bold mb-6"> | ||
| Hi, I'm <span className="text-catppuccin_red">Dylan Zhou</span> | ||
| </h1> | ||
| <p className="text-lg md:text-xl mb-8"> | ||
| I'm a dedicated student passionate about{" "} | ||
| <span className="font-extrabold">Full Stack Developer</span>, always | ||
| seeking new challenges to grow my skills and improve my | ||
| applications. | ||
| </p> | ||
| <div className="flex"> | ||
| <div className="flex items-center justify-center space-x-5 mx-10"> | ||
| <Link href={"https://www.linkedin.com/in/dylan-zhou-714110262/"}> | ||
| <FaLinkedin size={32} /> | ||
| </Link> | ||
| <Link href={"https://www.github.com/Aeonoi/"}> | ||
| <FaGithub size={32} /> | ||
| </Link> | ||
| <Link | ||
| href="#contact" | ||
| className="bg-catppuccin_rosewater text-black font-semibold py-3 px-6 rounded-full hover:bg-catppuccin_flamingo transition duration-300" | ||
| > | ||
| Contact Me | ||
| </Link> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </Background> | ||
| </Background> | ||
| </main> | ||
| ); | ||
| }; | ||
| export default Hero; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters