2 Commits
6800c64637
...
136274aa4e
2 Commits
6800c64637
...
136274aa4e
| Author | SHA1 | Message | Date |
|---|---|---|---|
 khang
|
136274aa4e | contactform added | 6 months ago |
|
khang
|
8385f4ee7f | Projects card added | 6 months ago |
9 changed files with 362 additions and 214 deletions
Split View
Diff Options
-
+2 -1.gitignore
-
+15 -0package-lock.json
-
+1 -0package.json
-
+161 -121src/App.css
-
+7 -3src/App.js
-
+104 -0src/components/ContactForm.js
-
+21 -25src/components/Navbar.js
-
+51 -0src/components/Projects.js
-
+0 -64src/components/Skills.js
+ 2
- 1
.gitignore
View File
+ 15
- 0
package-lock.json
View File
+ 1
- 0
package.json
View File
+ 161
- 121
src/App.css
View File
+ 7
- 3
src/App.js
View File
+ 104
- 0
src/components/ContactForm.js
View File
| @ -0,0 +1,104 @@ | |||
| // src/components/ContactForm.js | |||
| import React, { useState } from 'react'; | |||
| import { Modal, Button, Form } from 'react-bootstrap'; | |||
| import emailjs from 'emailjs-com'; | |||
| import emailConfig from './apikey'; | |||
| const ContactForm = ({ show, handleClose }) => { | |||
| const [formData, setFormData] = useState({ | |||
| firstName: '', | |||
| lastName: '', | |||
| email: '', | |||
| message: '' | |||
| }); | |||
| const handleChange = (e) => { | |||
| const { name, value } = e.target; | |||
| setFormData({ | |||
| ...formData, | |||
| [name]: value | |||
| }); | |||
| }; | |||
| const handleSubmit = (e) => { | |||
| e.preventDefault(); | |||
| emailjs.send( | |||
| emailConfig.serviceId, // EmailJS service ID | |||
| emailConfig.templateId, // EmailJS template ID | |||
| formData, | |||
| emailConfig.userId // EmailJS user ID | |||
| ) | |||
| .then((result) => { | |||
| alert('Message sent successfully!'); | |||
| handleClose(); | |||
| }, (error) => { | |||
| alert('Failed to send message, please try again.'); | |||
| }); | |||
| }; | |||
| return ( | |||
| <Modal show={show} onHide={handleClose}> | |||
| <Modal.Header closeButton> | |||
| <Modal.Title>Contact Me</Modal.Title> | |||
| </Modal.Header> | |||
| <Modal.Body> | |||
| <Form onSubmit={handleSubmit}> | |||
| <Form.Group controlId="formFirstName"> | |||
| <Form.Label>First Name</Form.Label> | |||
| <Form.Control | |||
| type="text" | |||
| placeholder="Enter your first name" | |||
| name="firstName" | |||
| value={formData.firstName} | |||
| onChange={handleChange} | |||
| required | |||
| /> | |||
| </Form.Group> | |||
| <Form.Group controlId="formLastName"> | |||
| <Form.Label>Last Name</Form.Label> | |||
| <Form.Control | |||
| type="text" | |||
| placeholder="Enter your last name" | |||
| name="lastName" | |||
| value={formData.lastName} | |||
| onChange={handleChange} | |||
| required | |||
| /> | |||
| </Form.Group> | |||
| <Form.Group controlId="formEmail"> | |||
| <Form.Label>Email</Form.Label> | |||
| <Form.Control | |||
| type="email" | |||
| placeholder="Enter your email" | |||
| name="email" | |||
| value={formData.email} | |||
| onChange={handleChange} | |||
| required | |||
| /> | |||
| </Form.Group> | |||
| <Form.Group controlId="formMessage"> | |||
| <Form.Label>Message</Form.Label> | |||
| <Form.Control | |||
| as="textarea" | |||
| rows={3} | |||
| placeholder="Enter your message" | |||
| name="message" | |||
| value={formData.message} | |||
| onChange={handleChange} | |||
| required | |||
| /> | |||
| </Form.Group> | |||
| <Button variant="primary" type="submit"> | |||
| Send Message | |||
| </Button> | |||
| </Form> | |||
| </Modal.Body> | |||
| </Modal> | |||
| ); | |||
| }; | |||
| export default ContactForm; | |||
+ 21
- 25
src/components/Navbar.js
View File
+ 51
- 0
src/components/Projects.js
View File
| @ -0,0 +1,51 @@ | |||
| import React from 'react'; | |||
| import { Card, Container, Row, Col } from 'react-bootstrap'; | |||
| const projects = [ | |||
| { | |||
| title: 'Project One', | |||
| description: 'This is a brief description of project one.', | |||
| imageUrl: 'https://via.placeholder.com/150', | |||
| link: 'https://github.com/yourusername/project-one' | |||
| }, | |||
| { | |||
| title: 'Project Two', | |||
| description: 'This is a brief description of project two.', | |||
| imageUrl: 'https://via.placeholder.com/150', | |||
| link: 'https://github.com/yourusername/project-two' | |||
| }, | |||
| { | |||
| title: 'Project Three', | |||
| description: 'This is a brief description of project three.', | |||
| imageUrl: 'https://via.placeholder.com/150', | |||
| link: 'https://github.com/yourusername/project-three' | |||
| } | |||
| ]; | |||
| const Projects = () => { | |||
| const handleCardClick = (link) => { | |||
| window.open(link, '_blank'); | |||
| }; | |||
| return ( | |||
| <section className="projects-section" id="projects"> | |||
| <Container> | |||
| <Row> | |||
| {projects.map((project, index) => ( | |||
| <Col key={index} sm={12} md={6} lg={4}> | |||
| <Card className="mb-4" onClick={() => handleCardClick(project.link)}> | |||
| <Card.Img variant="top" src={project.imageUrl} /> | |||
| <Card.Body> | |||
| <Card.Title>{project.title}</Card.Title> | |||
| <Card.Text>{project.description}</Card.Text> | |||
| </Card.Body> | |||
| </Card> | |||
| </Col> | |||
| ))} | |||
| </Row> | |||
| </Container> | |||
| </section> | |||
| ); | |||
| }; | |||
| export default Projects; | |||
+ 0
- 64
src/components/Skills.js
View File
| @ -1,64 +0,0 @@ | |||
| import meter1 from "../assets/img/meter1.svg"; | |||
| import meter2 from "../assets/img/meter2.svg"; | |||
| import meter3 from "../assets/img/meter3.svg"; | |||
| import Carousel from 'react-multi-carousel'; | |||
| import 'react-multi-carousel/lib/styles.css'; | |||
| import colorSharp from "../assets/img/color-sharp.png" | |||
| const Skills = () => { | |||
| const responsive = { | |||
| superLargeDesktop: { | |||
| // the naming can be any, depends on you. | |||
| breakpoint: { max: 4000, min: 3000 }, | |||
| items: 5 | |||
| }, | |||
| desktop: { | |||
| breakpoint: { max: 3000, min: 1024 }, | |||
| items: 3 | |||
| }, | |||
| tablet: { | |||
| breakpoint: { max: 1024, min: 464 }, | |||
| items: 2 | |||
| }, | |||
| mobile: { | |||
| breakpoint: { max: 464, min: 0 }, | |||
| items: 1 | |||
| } | |||
| }; | |||
| return ( | |||
| <section className="skill" id="skills"> | |||
| <div className="container"> | |||
| <div className="row"> | |||
| <div className="col-12"> | |||
| <div className="skill-bx wow zoomIn"> | |||
| <h2>Skills</h2> | |||
| <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.<br></br> Lorem Ipsum has been the industry's standard dummy text.</p> | |||
| <Carousel responsive={responsive} infinite={true} className="owl-carousel owl-theme skill-slider"> | |||
| <div className="item"> | |||
| <img src={meter1} alt="Image" /> | |||
| <h5>Web Development</h5> | |||
| </div> | |||
| <div className="item"> | |||
| <img src={meter2} alt="Image" /> | |||
| <h5>Brand Identity</h5> | |||
| </div> | |||
| <div className="item"> | |||
| <img src={meter3} alt="Image" /> | |||
| <h5>Logo Design</h5> | |||
| </div> | |||
| <div className="item"> | |||
| <img src={meter1} alt="Image" /> | |||
| <h5>Web Development</h5> | |||
| </div> | |||
| </Carousel> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| <img className="background-image-left" src={colorSharp} alt="Image" /> | |||
| </section> | |||
| ) | |||
| } | |||
| export default Skills; | |||