Skip to content

Commit b0d5690

Browse files
committed
on another universe
1 parent 475fafd commit b0d5690

35 files changed

+755
-213
lines changed

.gitignore

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,3 +22,5 @@ dist-ssr
2222
*.njsproj
2323
*.sln
2424
*.sw?
25+
26+
.env

package.json

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
"preview": "vite preview"
1111
},
1212
"dependencies": {
13+
"@emailjs/browser": "^3.11.0",
1314
"@fortawesome/fontawesome-svg-core": "^6.4.2",
1415
"@fortawesome/free-brands-svg-icons": "^6.4.2",
1516
"@fortawesome/free-regular-svg-icons": "^6.4.2",
@@ -18,11 +19,13 @@
1819
"@reduxjs/toolkit": "^1.9.5",
1920
"react": "^18.2.0",
2021
"react-dom": "^18.2.0",
21-
"react-redux": "^8.1.2"
22+
"react-redux": "^8.1.2",
23+
"validator": "^13.11.0"
2224
},
2325
"devDependencies": {
2426
"@types/react": "^18.2.15",
2527
"@types/react-dom": "^18.2.7",
28+
"@types/validator": "^13.11.1",
2629
"@typescript-eslint/eslint-plugin": "^6.0.0",
2730
"@typescript-eslint/parser": "^6.0.0",
2831
"@vitejs/plugin-react-swc": "^3.3.2",

pnpm-lock.yaml

Lines changed: 23 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

src/assets/images/hero-alt.webp

64.1 KB
Binary file not shown.
20.6 KB
Binary file not shown.

src/assets/images/message_send.svg

Lines changed: 236 additions & 0 deletions
Loading

src/components/AltHeroSection.tsx

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import heroImage from '../assets/images/hero-alt.webp';
2+
// import HeroIllustration from '../assets/images/hero-illustration.webp';
3+
4+
const AltHeroSection = () => {
5+
return (
6+
<div className="flex flex-col items-center justify-center">
7+
<div className="mb-24 mt-32 flex flex-col px-3 pb-6 sm:mb-32 sm:mt-40">
8+
<h1 className="mb-6 text-center text-4xl font-black dark:text-primary-400 md:text-6xl">
9+
Frontend React Developer
10+
</h1>
11+
<p className="text-center text-xl text-dark-900 dark:text-white">
12+
Transforming Ideas into Immersive User Experiences with the Power of
13+
React
14+
</p>
15+
</div>
16+
<div>
17+
<img
18+
src={heroImage}
19+
alt=""
20+
aria-label=""
21+
className="mx-auto w-full md:w-2/3 lg:w-1/2"
22+
/>
23+
</div>
24+
</div>
25+
);
26+
};
27+
28+
export default AltHeroSection;

src/components/Button.tsx

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -24,14 +24,15 @@ const Button = ({
2424
onClick={onClick}
2525
disabled={disabled}
2626
className={twJoin(
27-
`rounded-lg px-5 py-2 font-medium text-white transition`,
27+
`transition-color flex items-center justify-center gap-4 rounded-lg px-5 py-2 font-medium duration-300 disabled:bg-dark-500 disabled:text-white-full`,
2828
fullWidth && 'w-full',
29-
buttonType === 'secondary' && 'bg-slate-500 hover:bg-slate-400',
29+
buttonType === 'secondary' &&
30+
'bg-secondary text-white hover:bg-secondary-500',
3031
buttonType === 'inverted' &&
31-
'border border-gray-500 hover:border-gray-700 hover:bg-gray-500',
32+
'border-2 border-primary text-dark hover:bg-primary hover:text-white',
3233
buttonType !== 'secondary' &&
3334
buttonType !== 'inverted' &&
34-
'bg-blue-500 hover:bg-blue-400',
35+
'bg-primary text-white hover:bg-primary-600 dark:bg-primary-500 dark:text-dark-800 dark:hover:bg-primary-400 ',
3536
)}
3637
>
3738
{children}

src/components/CVDownloadButton.tsx

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import Button from './Button';
2+
3+
const downloadFile = () => {
4+
const element = document.createElement('a');
5+
element.href = '/Lakshmikanta.pdf';
6+
element.download = 'Lakshmikanta.pdf';
7+
document.body.appendChild(element);
8+
element.click();
9+
};
10+
11+
const CVDownloadButton = ({
12+
buttonType,
13+
}: {
14+
buttonType?: 'secondary' | 'inverted' | undefined;
15+
}) => {
16+
return (
17+
<Button onClick={downloadFile} buttonType={buttonType}>
18+
Download CV
19+
</Button>
20+
);
21+
};
22+
23+
export default CVDownloadButton;

src/components/Contact.tsx

Lines changed: 8 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,13 @@
1-
import { faPaperPlane } from '@fortawesome/free-solid-svg-icons';
2-
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
3-
import { ChangeEvent, FormEvent, useState } from 'react';
4-
import { twJoin } from 'tailwind-merge';
1+
import { useSelector } from 'react-redux';
52

63
import connectImg from '../assets/images/connect1.svg';
4+
import { RootState } from '../store/store';
5+
import ContactForm from './ContactForm';
6+
import MessageSent from './MessageSent';
77

88
const Contact = () => {
9-
const [inputs, setInputs] = useState({ name: '', email: '', message: '' });
10-
11-
const handleChange = (
12-
e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
13-
) => {
14-
setInputs({ ...inputs, [e.target.name]: e.target.value });
15-
};
16-
17-
const handelSubmit = (e: FormEvent<HTMLFormElement>) => {
18-
e.preventDefault();
19-
console.log(inputs);
20-
};
21-
9+
const { form } = useSelector((state: RootState) => state);
10+
console.log(form);
2211
return (
2312
<div className="grid grid-cols-1 sm:grid-cols-2">
2413
<div className="flex items-center">
@@ -28,59 +17,8 @@ const Contact = () => {
2817
className="mx-auto h-64 w-64 sm:h-96 sm:w-96"
2918
/>
3019
</div>
31-
<div className="rounded-xl bg-black/20 sm:max-w-lg">
32-
<form className="flex flex-col gap-4 px-4 py-8" onSubmit={handelSubmit}>
33-
<div className="input__group">
34-
<input
35-
type="text"
36-
id="name"
37-
value={inputs.name}
38-
name="name"
39-
onChange={handleChange}
40-
/>
41-
<label
42-
htmlFor="name"
43-
className={twJoin(inputs.name.length > 0 && 'active')}
44-
>
45-
Enter your Name
46-
</label>
47-
</div>
48-
<div className="input__group">
49-
<input
50-
type="email"
51-
name="email"
52-
id="email"
53-
value={inputs.email}
54-
onChange={handleChange}
55-
/>
56-
<label
57-
htmlFor="email"
58-
className={twJoin(inputs.email.length > 0 && 'active')}
59-
>
60-
Enter Your Email
61-
</label>
62-
</div>
63-
<div className="input__group">
64-
<textarea
65-
name="message"
66-
id="message"
67-
cols={30}
68-
rows={5}
69-
value={inputs.message}
70-
onChange={handleChange}
71-
/>
72-
<label
73-
htmlFor="message"
74-
className={twJoin(inputs.message.length > 0 && 'active')}
75-
>
76-
Message
77-
</label>
78-
</div>
79-
<button className="flex items-center justify-center gap-4 rounded-md bg-blue-600 py-2 text-white hover:bg-blue-500 dark:bg-blue-400 dark:hover:bg-blue-300">
80-
<FontAwesomeIcon icon={faPaperPlane} />
81-
<span>Message</span>
82-
</button>
83-
</form>
20+
<div className="rounded-xl bg-secondary/40 sm:max-w-lg">
21+
{form.status !== 'completed' ? <ContactForm /> : <MessageSent />}
8422
</div>
8523
</div>
8624
);

0 commit comments

Comments
 (0)