Skip to content

Commit

Permalink
new Changes
Browse files Browse the repository at this point in the history
  • Loading branch information
gangaweerakkody committed Dec 3, 2024
1 parent eef0ef1 commit 9169d07
Show file tree
Hide file tree
Showing 9 changed files with 2,068 additions and 177 deletions.
1,869 changes: 1,803 additions & 66 deletions package-lock.json

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@
"react-dom": "^18.3.1",
"react-scripts": "5.0.1",
"react-scroll": "^1.9.0",
"react-simple-chatbot": "^0.6.1",
"swiper": "^11.1.14",
"web-vitals": "^2.1.4"
},
Expand Down
3 changes: 3 additions & 0 deletions src/App.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import Skills from './Components/Skills';
import About from './Components/About';
import Contact from './Components/Contact';
import Services from './Components/Services';
import PortfolioChatBot from './Components/PortfolioChatBot';
function App() {
return (
<div>
Expand All @@ -18,6 +19,8 @@ function App() {
<About/>
<Services/>
<Contact/>


</div>
);
}
Expand Down
12 changes: 6 additions & 6 deletions src/Components/About.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import React from 'react';
import { Typography, Box, Container, Button, Avatar } from '@mui/material';
import GitHubIcon from '@mui/icons-material/GitHub';
import LinkedInIcon from '@mui/icons-material/LinkedIn';

import profile from '../Images/Profile.jpg';
const About = () => {
return (
<Box
Expand All @@ -18,11 +18,11 @@ const About = () => {
<Box display="flex" justifyContent="center" mb={4}>
<Avatar
alt="Your Name"
src="your-profile-picture-url" // Replace with the profile picture URL
src={profile} // Replace with the profile picture URL
sx={{
width: 150,
height: 150,
border: '3px solid #1976D2',
border: '3px solid #BA55D3',
'&:hover': {
transform: 'scale(1.1)',
transition: 'transform 0.3s ease-in-out',
Expand All @@ -36,7 +36,7 @@ const About = () => {
variant="h3"
textAlign="center"
gutterBottom
sx={{ fontWeight: 'bold', color: '#1976D2' }}
sx={{ fontWeight: 'bold', color: '#BA55D3' }}
>
About Me
</Typography>
Expand All @@ -46,8 +46,8 @@ const About = () => {
>
I’m a <b>software engineering student</b> passionate about web development.
My focus is on building <b>user-friendly</b>, <b>efficient web applications</b>.
I love exploring <span style={{ color: '#1976D2' }}>new technologies</span>
and finding <span style={{ fontStyle: 'italic' }}>creative solutions</span> for
I love exploring <span> new technologies
and finding</span> <span style={{ fontStyle: 'italic' }}>creative solutions</span> for
<b>complex problems</b>.
</Typography>

Expand Down
197 changes: 118 additions & 79 deletions src/Components/Contact.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React, { useState } from 'react';
import { Typography, TextField, Button, Box, Container, Alert, Snackbar } from '@mui/material';
import { Typography, TextField, Button, Box, Container, Alert, Snackbar, Grid } from '@mui/material';

const Contact = () => {
const [formData, setFormData] = useState({ name: '', email: '', message: '' });
Expand Down Expand Up @@ -33,88 +33,127 @@ const Contact = () => {
};

return (
<Container id="contact" sx={{ py: 5, textAlign: 'center' }}>
<Typography variant="h3" gutterBottom>Contact Me</Typography>
<Box id="contact" sx={{ py: 8, backgroundColor: '#f9f9f9' }}>
<Container maxWidth="md">
<Box sx={{ textAlign: 'center', mb: 4 }}>
<Typography variant="h4" fontWeight="bold" gutterBottom>
Contact Me
</Typography>
<Typography variant="body1" color="textSecondary">
Have a question or want to work together? Fill out the form below!
</Typography>
</Box>

<Box component="form" onSubmit={handleSubmit} noValidate>
<TextField
label="Name"
name="name"
variant="outlined"
fullWidth
sx={{ mb: 2 }}
value={formData.name}
onChange={handleChange}
error={!!errors.name}
helperText={errors.name}
/>
<TextField
label="Email"
name="email"
variant="outlined"
fullWidth
sx={{ mb: 2 }}
value={formData.email}
onChange={handleChange}
error={!!errors.email}
helperText={errors.email}
/>
<TextField
label="Message"
name="message"
variant="outlined"
multiline
rows={4}
fullWidth
sx={{ mb: 2 }}
value={formData.message}
onChange={handleChange}
error={!!errors.message}
helperText={errors.message}
/>
<Button
type="submit"
variant="contained"
color="primary"
sx={{ px: 4, py: 1 }}
<Box
component="form"
onSubmit={handleSubmit}
noValidate
sx={{
backgroundColor: '#fff',
borderRadius: 4,
boxShadow: '0px 4px 10px rgba(0, 0, 0, 0.1)',
p: 4,
}}
>
Send Message
</Button>
<Button
type="button"
variant="outlined"
color="secondary"
sx={{ ml: 2, px: 4, py: 1 }}
onClick={() => setFormData({ name: '', email: '', message: '' })}
>
Reset
</Button>
</Box>
<Grid container spacing={3}>
<Grid item xs={12} sm={6}>
<TextField
label="Name"
name="name"
variant="outlined"
fullWidth
value={formData.name}
onChange={handleChange}
error={!!errors.name}
helperText={errors.name}
/>
</Grid>
<Grid item xs={12} sm={6}>
<TextField
label="Email"
name="email"
variant="outlined"
fullWidth
value={formData.email}
onChange={handleChange}
error={!!errors.email}
helperText={errors.email}
/>
</Grid>
<Grid item xs={12}>
<TextField
label="Message"
name="message"
variant="outlined"
multiline
rows={5}
fullWidth
value={formData.message}
onChange={handleChange}
error={!!errors.message}
helperText={errors.message}
/>
</Grid>
<Grid item xs={12} sx={{ textAlign: 'center' }}>
<Button
type="submit"
variant="contained"
color="primary"
sx={{
px: 5,
py: 1.5,
mr: 2,
textTransform: 'none',
fontWeight: 'bold',
fontSize: '1rem',
}}
>
Send Message
</Button>
<Button
type="button"
variant="outlined"
color="secondary"
sx={{
px: 5,
py: 1.5,
textTransform: 'none',
fontWeight: 'bold',
fontSize: '1rem',
}}
onClick={() => setFormData({ name: '', email: '', message: '' })}
>
Reset
</Button>
</Grid>
</Grid>
</Box>

{/* Success Snackbar */}
<Snackbar
open={successMessage}
autoHideDuration={3000}
onClose={() => setSuccessMessage(false)}
anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
>
<Alert severity="success" onClose={() => setSuccessMessage(false)}>
Your message has been sent successfully!
</Alert>
</Snackbar>
{/* Success Snackbar */}
<Snackbar
open={successMessage}
autoHideDuration={3000}
onClose={() => setSuccessMessage(false)}
anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
>
<Alert severity="success" onClose={() => setSuccessMessage(false)}>
Your message has been sent successfully!
</Alert>
</Snackbar>

{/* Error Snackbar */}
<Snackbar
open={errorMessage}
autoHideDuration={3000}
onClose={() => setErrorMessage(false)}
anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
>
<Alert severity="error" onClose={() => setErrorMessage(false)}>
Please correct the errors and try again.
</Alert>
</Snackbar>
</Container>
{/* Error Snackbar */}
<Snackbar
open={errorMessage}
autoHideDuration={3000}
onClose={() => setErrorMessage(false)}
anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
>
<Alert severity="error" onClose={() => setErrorMessage(false)}>
Please correct the errors and try again.
</Alert>
</Snackbar>
</Container>
</Box>
);
};

Expand Down
79 changes: 57 additions & 22 deletions src/Components/Navbar.js
Original file line number Diff line number Diff line change
@@ -1,31 +1,66 @@

import React from 'react';
import React, { useState } from 'react';
import AppBar from '@mui/material/AppBar';
import Toolbar from '@mui/material/Toolbar';
import Typography from '@mui/material/Typography';
import IconButton from '@mui/material/IconButton';
import MenuIcon from '@mui/icons-material/Menu';
import { Link } from 'react-scroll';
import Button from '@mui/material/Button';
import logo from '../Images/logo.png'
import { Link } from 'react-scroll';
import { Drawer, IconButton } from '@mui/material';
import { Close as CloseIcon } from '@mui/icons-material';
import PortfolioChatBot from './PortfolioChatBot'; // Make sure this path is correct

const Navbar = () => {
return (
<AppBar position="fixed" image={logo} sx={{backgroundColor:"#BA55D3"}}>
<Toolbar>

<Typography variant="h6" sx={{ flexGrow: 1 }}>
W.A.I.Ganga
</Typography>
<Button color="inherit" component={Link} to="home" smooth>Home</Button>
<Button color="inherit" component={Link} to="about" smooth>About</Button>
<Button color="inherit" component={Link} to="skills" smooth>Skills</Button>
<Button color="inherit" component={Link} to="projects" smooth>Projects</Button>
<Button color="inherit" component={Link} to="Services" smooth>Services</Button>
<Button color="inherit" component={Link} to="contact" smooth>Contact</Button>

</Toolbar>
</AppBar>
const [openChat, setOpenChat] = useState(false);

const handleOpenChat = () => {
setOpenChat(true);
};

const handleCloseChat = () => {
setOpenChat(false);
};

return (
<>
{/* AppBar for the navigation */}
<AppBar position="fixed" sx={{ backgroundColor: "#BA55D3" }}>
<Toolbar>
<Typography variant="h6" sx={{ flexGrow: 1 }}>
W.A.I.Ganga
</Typography>
<Button color="inherit" component={Link} to="home" smooth>Home</Button>
<Button color="inherit" component={Link} to="about" smooth>About</Button>
<Button color="inherit" component={Link} to="skills" smooth>Skills</Button>
<Button color="inherit" component={Link} to="projects" smooth>Projects</Button>
<Button color="inherit" component={Link} to="Services" smooth>Services</Button>
<Button color="inherit" component={Link} to="contact" smooth>Contact</Button>
<Button color="inherit" onClick={handleOpenChat}>Chat</Button>
</Toolbar>
</AppBar>

{/* Sidebar Drawer for Chat Bot */}
<Drawer
anchor="right"
open={openChat}
onClose={handleCloseChat}
sx={{
width: '400px',
flexShrink: 0,
'& .MuiDrawer-paper': {
width: '400px',
backgroundColor: '#f5f8fb',
padding: '20px',
display: 'flex',
flexDirection: 'column',
justifyContent: 'space-between',
},
}}
>
<IconButton onClick={handleCloseChat} sx={{ alignSelf: 'flex-end' }}>
<CloseIcon />
</IconButton>
<PortfolioChatBot />
</Drawer>
</>
);
};

Expand Down
Loading

0 comments on commit 9169d07

Please sign in to comment.