Added in contact section #12
1
.github/workflows/ftpDeploy.yml
vendored
1
.github/workflows/ftpDeploy.yml
vendored
@ -15,6 +15,7 @@ jobs:
|
||||
|
||||
- name: 🔨Run Gulp
|
||||
run: |
|
||||
export github="true"
|
||||
npm install
|
||||
npm start
|
||||
|
||||
|
||||
186
dist/api/index.php
vendored
186
dist/api/index.php
vendored
@ -49,10 +49,10 @@ $app->get("/timelineData/{timeline}", function (Request $request, Response $resp
|
||||
$json = json_encode($result);
|
||||
|
||||
$response->getBody()->write($json);
|
||||
//if it is an error give a 403 code since it can't find the data
|
||||
if(array_key_exists("errorMessage", $result[0]))
|
||||
//if it is an error give a 404 code since it can't find the data
|
||||
if(array_key_exists("errorMessage", $result))
|
||||
{
|
||||
$response = $response->withStatus(403);
|
||||
$response = $response->withStatus(404);
|
||||
}
|
||||
|
||||
//use content type json to indicate json data on frontend.
|
||||
@ -63,19 +63,193 @@ $app->get('/projectData', function (Request $request, Response $response)
|
||||
{
|
||||
global $projectData;
|
||||
|
||||
$result= $projectData->getProjectData();
|
||||
$result = $projectData->getProjectData();
|
||||
|
||||
$json = json_encode($result);
|
||||
|
||||
$response->getBody()->write($json);
|
||||
|
||||
if(array_key_exists("errorMessage", $result[0]))
|
||||
if(array_key_exists("errorMessage", $result))
|
||||
{
|
||||
$response = $response->withStatus(403);
|
||||
$response = $response->withStatus(404);
|
||||
}
|
||||
|
||||
//use content type json to indicate json data on frontend.
|
||||
return $response->withHeader("Content-Type", "application/json");
|
||||
});
|
||||
|
||||
$app->post('/contact', function (Request $request, Response $response)
|
||||
{
|
||||
$data = $request->getParsedBody();
|
||||
if(empty($data["fName"]) || empty($data["lName"]) || empty($data["email"]) || empty($data["subject"]) || empty($data["message"]))
|
||||
{
|
||||
$response->getBody()->write(json_encode(array("errorMessage" => "Please fill out all the fields")));
|
||||
$response = $response->withStatus(400);
|
||||
return $response->withHeader("Content-Type", "application/json");
|
||||
}
|
||||
|
||||
if (!filter_var($data["email"], FILTER_VALIDATE_EMAIL))
|
||||
{
|
||||
$response->getBody()->write(json_encode(array("errorMessage" => "Email is not the correct format")));
|
||||
$response = $response->withStatus(400);
|
||||
return $response->withHeader("Content-Type", "application/json");
|
||||
}
|
||||
|
||||
// email form filler/conatcter
|
||||
$headers1 = "From: noreply@rohitpai.tech\r\n";
|
||||
$headers1 .= "Reply-To: rohit@rohitpai.tech\r\n";
|
||||
$headers1 .= "MIME-Version: 1.0\r\n";
|
||||
$headers1 .= "Content-Type: text/html; charset=UTF-8\r\n";
|
||||
|
||||
$message1 = "
|
||||
<html>
|
||||
<head>
|
||||
<title>{$data['subject']}</title>
|
||||
<style>
|
||||
@import url(\"https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Share+Tech+Mono&family=Source+Sans+Pro:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700;1,900&display=swap\");
|
||||
body {
|
||||
font-family: Noto Sans KR, sans-serif;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-size: var(--generalFS);
|
||||
line-height: 1.625rem;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
table td, table th {
|
||||
border: 1px solid #ddd;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
table tr:nth-child(even) {
|
||||
background-color: #f2f2f2;
|
||||
}
|
||||
|
||||
table tr:hover {
|
||||
background-color: #ddd;
|
||||
}
|
||||
|
||||
table th {
|
||||
padding-top: 12px;
|
||||
padding-bottom: 12px;
|
||||
text-align: left;
|
||||
background-color: hsla(79, 62%, 59%, 1);
|
||||
color: white;
|
||||
}
|
||||
|
||||
hr {
|
||||
border-color: hsla(0, 0%, 78%, 1);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Thank you for filling out the form on my website, I will try to respond to your query as soon as I can.</p>
|
||||
<br>
|
||||
<p>Below is what you filled in for your record</p>
|
||||
<table>
|
||||
<thead>
|
||||
<th>Firstname</th>
|
||||
<th>Lastname</th>
|
||||
<th>Email</th>
|
||||
<th>Subject</th>
|
||||
<th>message</th>
|
||||
</thead>
|
||||
<tr>
|
||||
<td>{$data['fName']}</td>
|
||||
<td>{$data['lName']}</td>
|
||||
<td><a href=\"mailto:{$data['email']}\">{$data['email']}</a></td>
|
||||
<td>{$data['subject']}</td>
|
||||
<td>{$data['message']}</td>
|
||||
</tr>
|
||||
</table>
|
||||
<br>
|
||||
<hr>
|
||||
<p>Regards, <br> Rohit Pai <br> <a href=\"mailto:rohit@rohitpai.tech\">rohit@rohitpai.tech</a>
|
||||
</body>
|
||||
</html>
|
||||
";
|
||||
|
||||
mail($data["email"], $data["subject"], $message1, $headers1);
|
||||
|
||||
// email to me
|
||||
$headers2 = "From: noreply@rohitpai.tech\r\n";
|
||||
$headers2 .= "Reply-To: {$data['email']}\r\n";
|
||||
$headers2 .= "MIME-Version: 1.0\r\n";
|
||||
$headers2 .= "Content-Type: text/html; charset=UTF-8\r\n";
|
||||
|
||||
$message2 = "
|
||||
<html>
|
||||
<head>
|
||||
<title>{$data['subject']}</title>
|
||||
<style>
|
||||
@import url(\"https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Share+Tech+Mono&family=Source+Sans+Pro:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700;1,900&display=swap\");
|
||||
body {
|
||||
font-family: Noto Sans KR, sans-serif;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-size: var(--generalFS);
|
||||
line-height: 1.625rem;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
table td, table th {
|
||||
border: 1px solid #ddd;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
table tr:nth-child(even) {
|
||||
background-color: #f2f2f2;
|
||||
}
|
||||
|
||||
table tr:hover {
|
||||
background-color: #ddd;
|
||||
}
|
||||
|
||||
table th {
|
||||
padding-top: 12px;
|
||||
padding-bottom: 12px;
|
||||
text-align: left;
|
||||
background-color: hsla(79, 62%, 59%, 1);
|
||||
color: white;
|
||||
}
|
||||
|
||||
hr {
|
||||
border-color: hsla(0, 0%, 78%, 1);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>{$data['fName']} {$data['lName']} filled in the form on the website, here is what they sent.</p>
|
||||
<table>
|
||||
<thead>
|
||||
<th>Firstname</th>
|
||||
<th>Lastname</th>
|
||||
<th>Email</th>
|
||||
<th>Subject</th>
|
||||
<th>message</th>
|
||||
</thead>
|
||||
<tr>
|
||||
<td>{$data['fName']}</td>
|
||||
<td>{$data['lName']}</td>
|
||||
<td><a href=\"mailto:{$data['email']}\">{$data['email']}</a></td>
|
||||
<td>{$data['subject']}</td>
|
||||
<td>{$data['message']}</td>
|
||||
</tr>
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
||||
";
|
||||
|
||||
mail("rohit@rohitpai.tech", "{$data['fName']} {$data['lName']} filled in the form", $message2, $headers2);
|
||||
return $response->withStatus(201);
|
||||
});
|
||||
|
||||
$app->run();
|
||||
4
dist/api/timelineData.php
vendored
4
dist/api/timelineData.php
vendored
@ -25,7 +25,7 @@ class timelineData
|
||||
}
|
||||
else
|
||||
{
|
||||
return array(array("errorMessage" => "Error, edu data not found"));
|
||||
return array("errorMessage" => "Error, edu data not found");
|
||||
}
|
||||
}
|
||||
|
||||
@ -44,7 +44,7 @@ class timelineData
|
||||
}
|
||||
else
|
||||
{
|
||||
return array(array("errorMessage" => "Error, work data not found"));
|
||||
return array("errorMessage" => "Error, work data not found");
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
2
dist/css/main.css
vendored
2
dist/css/main.css
vendored
File diff suppressed because one or more lines are too long
1
dist/imgs/blog.svg
vendored
1
dist/imgs/blog.svg
vendored
@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M15.5 14.625c0 .484-.387.875-.864.875h-5.273c-.477 0-.863-.392-.863-.875s.387-.875.863-.875h5.272c.478 0 .865.391.865.875zm-6.191-4.375h2.466c.448 0 .809-.392.809-.875s-.361-.875-.81-.875h-2.465c-.447 0-.809.392-.809.875s.362.875.809.875zm14.691 1.75c0 6.627-5.373 12-12 12s-12-5.373-12-12 5.373-12 12-12 12 5.373 12 12zm-5-1.039c0-.383-.311-.692-.691-.692h-1.138c-.583 0-.69-.446-.69-.996-.001-2.36-1.91-4.273-4.265-4.273h-2.952c-2.355 0-4.264 1.913-4.264 4.272v5.455c0 2.36 1.909 4.273 4.264 4.273h5.474c2.353 0 4.262-1.913 4.262-4.272v-3.767z"/></svg>
|
||||
|
Before Width: | Height: | Size: 646 B |
1
dist/imgs/email.svg
vendored
1
dist/imgs/email.svg
vendored
@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M13.718 10.528c0 .792-.268 1.829-.684 2.642-1.009 1.98-3.063 1.967-3.063-.14 0-.786.27-1.799.687-2.58 1.021-1.925 3.06-1.624 3.06.078zm10.282 1.472c0 6.627-5.373 12-12 12s-12-5.373-12-12 5.373-12 12-12 12 5.373 12 12zm-5-1.194c0-3.246-2.631-5.601-6.256-5.601-4.967 0-7.744 3.149-7.744 7.073 0 3.672 2.467 6.517 7.024 6.517 2.52 0 4.124-.726 5.122-1.288l-.687-.991c-1.022.593-2.251 1.136-4.256 1.136-3.429 0-5.733-2.199-5.733-5.473 0-5.714 6.401-6.758 9.214-5.071 2.624 1.642 2.524 5.578.582 7.083-1.034.826-2.199.799-1.821-.756 0 0 1.212-4.489 1.354-4.975h-1.364l-.271.952c-.278-.785-.943-1.295-1.911-1.295-2.018 0-3.722 2.19-3.722 4.783 0 1.73.913 2.804 2.38 2.804 1.283 0 1.95-.726 2.364-1.373-.3 2.898 5.725 1.557 5.725-3.525z"/></svg>
|
||||
|
Before Width: | Height: | Size: 830 B |
1
dist/imgs/github.svg
vendored
1
dist/imgs/github.svg
vendored
@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm2.218 18.616c-.354.069-.468-.149-.468-.336v-1.921c0-.653-.229-1.079-.481-1.296 1.56-.173 3.198-.765 3.198-3.454 0-.765-.273-1.389-.721-1.879.072-.177.312-.889-.069-1.853 0 0-.587-.188-1.923.717-.561-.154-1.159-.231-1.754-.234-.595.003-1.193.08-1.753.235-1.337-.905-1.925-.717-1.925-.717-.379.964-.14 1.676-.067 1.852-.448.49-.722 1.114-.722 1.879 0 2.682 1.634 3.282 3.189 3.459-.2.175-.381.483-.444.936-.4.179-1.413.488-2.037-.582 0 0-.37-.672-1.073-.722 0 0-.683-.009-.048.426 0 0 .46.215.777 1.024 0 0 .405 1.25 2.353.826v1.303c0 .185-.113.402-.462.337-2.782-.925-4.788-3.549-4.788-6.641 0-3.867 3.135-7 7-7s7 3.133 7 7c0 3.091-2.003 5.715-4.782 6.641z"/></svg>
|
||||
|
Before Width: | Height: | Size: 832 B |
BIN
dist/imgs/hero before.jpg
vendored
Normal file
BIN
dist/imgs/hero before.jpg
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 368 KiB |
1
dist/imgs/instagram.svg
vendored
1
dist/imgs/instagram.svg
vendored
@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M14.829 6.302c-.738-.034-.96-.04-2.829-.04s-2.09.007-2.828.04c-1.899.087-2.783.986-2.87 2.87-.033.738-.041.959-.041 2.828s.008 2.09.041 2.829c.087 1.879.967 2.783 2.87 2.87.737.033.959.041 2.828.041 1.87 0 2.091-.007 2.829-.041 1.899-.086 2.782-.988 2.87-2.87.033-.738.04-.96.04-2.829s-.007-2.09-.04-2.828c-.088-1.883-.973-2.783-2.87-2.87zm-2.829 9.293c-1.985 0-3.595-1.609-3.595-3.595 0-1.985 1.61-3.594 3.595-3.594s3.595 1.609 3.595 3.594c0 1.985-1.61 3.595-3.595 3.595zm3.737-6.491c-.464 0-.84-.376-.84-.84 0-.464.376-.84.84-.84.464 0 .84.376.84.84 0 .463-.376.84-.84.84zm-1.404 2.896c0 1.289-1.045 2.333-2.333 2.333s-2.333-1.044-2.333-2.333c0-1.289 1.045-2.333 2.333-2.333s2.333 1.044 2.333 2.333zm-2.333-12c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm6.958 14.886c-.115 2.545-1.532 3.955-4.071 4.072-.747.034-.986.042-2.887.042s-2.139-.008-2.886-.042c-2.544-.117-3.955-1.529-4.072-4.072-.034-.746-.042-.985-.042-2.886 0-1.901.008-2.139.042-2.886.117-2.544 1.529-3.955 4.072-4.071.747-.035.985-.043 2.886-.043s2.14.008 2.887.043c2.545.117 3.957 1.532 4.071 4.071.034.747.042.985.042 2.886 0 1.901-.008 2.14-.042 2.886z"/></svg>
|
||||
|
Before Width: | Height: | Size: 1.2 KiB |
1
dist/imgs/linkedin.svg
vendored
1
dist/imgs/linkedin.svg
vendored
@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-2 16h-2v-6h2v6zm-1-6.891c-.607 0-1.1-.496-1.1-1.109 0-.612.492-1.109 1.1-1.109s1.1.497 1.1 1.109c0 .613-.493 1.109-1.1 1.109zm8 6.891h-1.998v-2.861c0-1.881-2.002-1.722-2.002 0v2.861h-2v-6h2v1.093c.872-1.616 4-1.736 4 1.548v3.359z"/></svg>
|
||||
|
Before Width: | Height: | Size: 407 B |
1
dist/imgs/phone.svg
vendored
1
dist/imgs/phone.svg
vendored
@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm3.445 17.827c-3.684 1.684-9.401-9.43-5.8-11.308l1.053-.519 1.746 3.409-1.042.513c-1.095.587 1.185 5.04 2.305 4.497l1.032-.505 1.76 3.397-1.054.516z"/></svg>
|
||||
|
Before Width: | Height: | Size: 324 B |
BIN
dist/imgs/profile.jpg
vendored
Normal file
BIN
dist/imgs/profile.jpg
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 81 KiB |
2
dist/index.html
vendored
2
dist/index.html
vendored
File diff suppressed because one or more lines are too long
2
dist/js/main.js
vendored
2
dist/js/main.js
vendored
File diff suppressed because one or more lines are too long
41
gulpfile.js
41
gulpfile.js
@ -3,13 +3,8 @@ const browserSync = require("browser-sync").create();
|
||||
const htmlMin = require("gulp-htmlmin");
|
||||
const cssMin = require("gulp-clean-css")
|
||||
const terser = require("gulp-terser");
|
||||
const ftp = require("vinyl-ftp");
|
||||
const env = require("gulp-env");
|
||||
|
||||
env({
|
||||
file: ".env",
|
||||
type: ".ini"
|
||||
});
|
||||
const github = (process.env.github) ? true : false;
|
||||
|
||||
gulp.task("minifyHTML", () =>
|
||||
{
|
||||
@ -57,25 +52,6 @@ gulp.task("watchFiles", () =>
|
||||
gulp.watch("src/api/*.php", gulp.task("movePHPFiles"))
|
||||
});
|
||||
|
||||
gulp.task("ftp", () =>
|
||||
{
|
||||
let conn = ftp.create(
|
||||
{
|
||||
host: process.env.host,
|
||||
user: process.env.user,
|
||||
pass: process.env.pass,
|
||||
parallel: 1,
|
||||
});
|
||||
return gulp.src("dist/**", {base: "dist", dot: true})
|
||||
.pipe(conn.newerOrDifferentSize("/"))
|
||||
.pipe(conn.dest("/"));
|
||||
});
|
||||
|
||||
gulp.task("deploy", () =>
|
||||
{
|
||||
gulp.watch("dist", gulp.task("ftp"));
|
||||
});
|
||||
|
||||
gulp.task("browserSync", () =>
|
||||
{
|
||||
browserSync.init({
|
||||
@ -89,4 +65,17 @@ gulp.task("browserSync", () =>
|
||||
gulp.watch("dist").on("change", browserSync.reload)
|
||||
});
|
||||
|
||||
gulp.task("default", gulp.series(gulp.parallel("watchFiles", "browserSync")));
|
||||
gulp.task("default", async () =>
|
||||
{
|
||||
if(github)
|
||||
{
|
||||
(gulp.series("movePHPFiles", "minifyJS", "minifyHTML", "minifyCSS")());
|
||||
}
|
||||
else
|
||||
{
|
||||
(gulp.series(gulp.parallel("watchFiles", "browserSync"))());
|
||||
}
|
||||
});
|
||||
|
||||
//gulp.task("default", gulp.series(gulp.parallel("watchFiles", "browserSync")));
|
||||
|
||||
|
||||
@ -49,10 +49,10 @@ $app->get("/timelineData/{timeline}", function (Request $request, Response $resp
|
||||
$json = json_encode($result);
|
||||
|
||||
$response->getBody()->write($json);
|
||||
//if it is an error give a 403 code since it can't find the data
|
||||
if(array_key_exists("errorMessage", $result[0]))
|
||||
//if it is an error give a 404 code since it can't find the data
|
||||
if(array_key_exists("errorMessage", $result))
|
||||
{
|
||||
$response = $response->withStatus(403);
|
||||
$response = $response->withStatus(404);
|
||||
}
|
||||
|
||||
//use content type json to indicate json data on frontend.
|
||||
@ -63,19 +63,193 @@ $app->get('/projectData', function (Request $request, Response $response)
|
||||
{
|
||||
global $projectData;
|
||||
|
||||
$result= $projectData->getProjectData();
|
||||
$result = $projectData->getProjectData();
|
||||
|
||||
$json = json_encode($result);
|
||||
|
||||
$response->getBody()->write($json);
|
||||
|
||||
if(array_key_exists("errorMessage", $result[0]))
|
||||
if(array_key_exists("errorMessage", $result))
|
||||
{
|
||||
$response = $response->withStatus(403);
|
||||
$response = $response->withStatus(404);
|
||||
}
|
||||
|
||||
//use content type json to indicate json data on frontend.
|
||||
return $response->withHeader("Content-Type", "application/json");
|
||||
});
|
||||
|
||||
$app->post('/contact', function (Request $request, Response $response)
|
||||
{
|
||||
$data = $request->getParsedBody();
|
||||
if(empty($data["fName"]) || empty($data["lName"]) || empty($data["email"]) || empty($data["subject"]) || empty($data["message"]))
|
||||
{
|
||||
$response->getBody()->write(json_encode(array("errorMessage" => "Please fill out all the fields")));
|
||||
$response = $response->withStatus(400);
|
||||
return $response->withHeader("Content-Type", "application/json");
|
||||
}
|
||||
|
||||
if (!filter_var($data["email"], FILTER_VALIDATE_EMAIL))
|
||||
{
|
||||
$response->getBody()->write(json_encode(array("errorMessage" => "Email is not the correct format")));
|
||||
$response = $response->withStatus(400);
|
||||
return $response->withHeader("Content-Type", "application/json");
|
||||
}
|
||||
|
||||
// email form filler/conatcter
|
||||
$headers1 = "From: noreply@rohitpai.tech\r\n";
|
||||
$headers1 .= "Reply-To: rohit@rohitpai.tech\r\n";
|
||||
$headers1 .= "MIME-Version: 1.0\r\n";
|
||||
$headers1 .= "Content-Type: text/html; charset=UTF-8\r\n";
|
||||
|
||||
$message1 = "
|
||||
<html lang=\"en\">
|
||||
<head>
|
||||
<title>{$data['subject']}</title>
|
||||
<style>
|
||||
@import url(\"https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Share+Tech+Mono&family=Source+Sans+Pro:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700;1,900&display=swap\");
|
||||
body {
|
||||
font-family: Noto Sans KR, sans-serif;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-size: var(--generalFS);
|
||||
line-height: 1.625rem;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
table td, table th {
|
||||
border: 1px solid #ddd;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
table tr:nth-child(even) {
|
||||
background-color: #f2f2f2;
|
||||
}
|
||||
|
||||
table tr:hover {
|
||||
background-color: #ddd;
|
||||
}
|
||||
|
||||
table th {
|
||||
padding-top: 12px;
|
||||
padding-bottom: 12px;
|
||||
text-align: left;
|
||||
background-color: hsla(79, 62%, 59%, 1);
|
||||
color: white;
|
||||
}
|
||||
|
||||
hr {
|
||||
border-color: hsla(0, 0%, 78%, 1);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Thank you for filling out the form on my website, I will try to respond to your query as soon as I can.</p>
|
||||
<br>
|
||||
<p>Below is what you filled in for your record</p>
|
||||
<table>
|
||||
<thead>
|
||||
<th>Firstname</th>
|
||||
<th>Lastname</th>
|
||||
<th>Email</th>
|
||||
<th>Subject</th>
|
||||
<th>message</th>
|
||||
</thead>
|
||||
<tr>
|
||||
<td>{$data['fName']}</td>
|
||||
<td>{$data['lName']}</td>
|
||||
<td><a href=\"mailto:{$data['email']}\">{$data['email']}</a></td>
|
||||
<td>{$data['subject']}</td>
|
||||
<td>{$data['message']}</td>
|
||||
</tr>
|
||||
</table>
|
||||
<br>
|
||||
<hr>
|
||||
<p>Regards, <br> Rohit Pai <br> <a href=\"mailto:rohit@rohitpai.tech\">rohit@rohitpai.tech</a>
|
||||
</body>
|
||||
</html>
|
||||
";
|
||||
|
||||
mail($data["email"], $data["subject"], $message1, $headers1);
|
||||
|
||||
// email to me
|
||||
$headers2 = "From: noreply@rohitpai.tech\r\n";
|
||||
$headers2 .= "Reply-To: {$data['email']}\r\n";
|
||||
$headers2 .= "MIME-Version: 1.0\r\n";
|
||||
$headers2 .= "Content-Type: text/html; charset=UTF-8\r\n";
|
||||
|
||||
$message2 = "
|
||||
<html lang=\"en\">
|
||||
<head>
|
||||
<title>{$data['subject']}</title>
|
||||
<style>
|
||||
@import url(\"https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Share+Tech+Mono&family=Source+Sans+Pro:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700;1,900&display=swap\");
|
||||
body {
|
||||
font-family: Noto Sans KR, sans-serif;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-size: var(--generalFS);
|
||||
line-height: 1.625rem;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
table td, table th {
|
||||
border: 1px solid #ddd;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
table tr:nth-child(even) {
|
||||
background-color: #f2f2f2;
|
||||
}
|
||||
|
||||
table tr:hover {
|
||||
background-color: #ddd;
|
||||
}
|
||||
|
||||
table th {
|
||||
padding-top: 12px;
|
||||
padding-bottom: 12px;
|
||||
text-align: left;
|
||||
background-color: hsla(79, 62%, 59%, 1);
|
||||
color: white;
|
||||
}
|
||||
|
||||
hr {
|
||||
border-color: hsla(0, 0%, 78%, 1);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>{$data['fName']} {$data['lName']} filled in the form on the website, here is what they sent.</p>
|
||||
<table>
|
||||
<thead>
|
||||
<th>Firstname</th>
|
||||
<th>Lastname</th>
|
||||
<th>Email</th>
|
||||
<th>Subject</th>
|
||||
<th>message</th>
|
||||
</thead>
|
||||
<tr>
|
||||
<td>{$data['fName']}</td>
|
||||
<td>{$data['lName']}</td>
|
||||
<td><a href=\"mailto:{$data['email']}\">{$data['email']}</a></td>
|
||||
<td>{$data['subject']}</td>
|
||||
<td>{$data['message']}</td>
|
||||
</tr>
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
||||
";
|
||||
|
||||
mail("rohit@rohitpai.tech", "{$data['fName']} {$data['lName']} filled in the form", $message2, $headers2);
|
||||
return $response->withStatus(201);
|
||||
});
|
||||
|
||||
$app->run();
|
||||
@ -25,7 +25,7 @@ class timelineData
|
||||
}
|
||||
else
|
||||
{
|
||||
return array(array("errorMessage" => "Error, edu data not found"));
|
||||
return array("errorMessage" => "Error, edu data not found");
|
||||
}
|
||||
}
|
||||
|
||||
@ -44,7 +44,7 @@ class timelineData
|
||||
}
|
||||
else
|
||||
{
|
||||
return array(array("errorMessage" => "Error, work data not found"));
|
||||
return array("errorMessage" => "Error, work data not found");
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
211
src/css/contact.css
Normal file
211
src/css/contact.css
Normal file
@ -0,0 +1,211 @@
|
||||
section#contact {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding: 0 2.5em;
|
||||
}
|
||||
|
||||
div#findMe, div#sayHello {
|
||||
width: 50%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 1em;
|
||||
}
|
||||
|
||||
div#findMe .findMeContainer {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
gap: 2em;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 5em 0;
|
||||
}
|
||||
|
||||
div#findMe .findMeContainer .profile {
|
||||
-webkit-border-radius: 50%;
|
||||
-moz-border-radius: 50%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
div#findMe .socialIcons {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 2em;
|
||||
}
|
||||
|
||||
div#findMe .socialIcons div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.5em;
|
||||
}
|
||||
|
||||
div#findMe .socialIcons div svg {
|
||||
width: 2.5em;
|
||||
fill: var(--primaryDefault);
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
div#findMe .socialIcons div a:hover svg {
|
||||
fill: var(--primaryHover);
|
||||
}
|
||||
|
||||
div#sayHello #contactForm{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#contactForm .flName {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 1em;
|
||||
}
|
||||
|
||||
#contactForm .formControl {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#contactForm input[type="submit"] {
|
||||
margin-top: 1em;
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
#contactForm .formControl input:not([type="submit"]), #contactForm .formControl textarea {
|
||||
width: 100%;
|
||||
border: 4px solid var(--primaryDefault);
|
||||
background: none;
|
||||
outline: none;
|
||||
-webkit-border-radius: 1em;
|
||||
-moz-border-radius: 1em;
|
||||
border-radius: 0.5em;
|
||||
padding: 0 0.5em;
|
||||
}
|
||||
|
||||
#contactForm .formControl textarea {
|
||||
padding: 0.5em;
|
||||
}
|
||||
|
||||
|
||||
#contactForm .formControl input:not([type="submit"]).invalid:invalid, #contactForm .formControl textarea.invalid:invalid {
|
||||
border: 4px solid var(--errorDefault);
|
||||
}
|
||||
|
||||
#contactForm .formControl input:not([type="submit"]).invalid:invalid:focus, #contactForm .formControl textarea.invalid:invalid:focus {
|
||||
border: 4px solid var(--errorHover);
|
||||
box-shadow: 0 4px 2px 0 var(--mutedBlack);
|
||||
}
|
||||
|
||||
#contactForm .formControl input:not([type="submit"]):focus, #contactForm .formControl textarea:focus {
|
||||
border: 4px solid var(--primaryHover);
|
||||
}
|
||||
|
||||
#contactForm .formControl input:not([type="submit"]) {
|
||||
height: 3em;
|
||||
}
|
||||
|
||||
#contactForm .flName {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 1em;
|
||||
}
|
||||
|
||||
#contactForm .formControl {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#contactForm input[type="submit"] {
|
||||
margin-top: 1em;
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
#contactForm .formControl input:not([type="submit"]), #contactForm .formControl textarea {
|
||||
width: 100%;
|
||||
border: 4px solid var(--primaryDefault);
|
||||
background: none;
|
||||
outline: none;
|
||||
-webkit-border-radius: 1em;
|
||||
-moz-border-radius: 1em;
|
||||
border-radius: 0.5em;
|
||||
padding: 0 0.5em;
|
||||
}
|
||||
|
||||
#contactForm .formControl textarea {
|
||||
padding: 0.5em;
|
||||
}
|
||||
|
||||
|
||||
#contactForm .formControl input:not([type="submit"]).invalid:invalid, #contactForm .formControl textarea.invalid:invalid {
|
||||
border: 4px solid var(--errorDefault);
|
||||
}
|
||||
|
||||
#contactForm .formControl input:not([type="submit"]).invalid:invalid:focus, #contactForm .formControl textarea.invalid:invalid:focus {
|
||||
border: 4px solid var(--errorHover);
|
||||
box-shadow: 0 4px 2px 0 var(--mutedBlack);
|
||||
}
|
||||
|
||||
#contactForm .formControl input:not([type="submit"]):focus, #contactForm .formControl textarea:focus {
|
||||
border: 4px solid var(--primaryHover);
|
||||
}
|
||||
|
||||
#contactForm .formControl input:not([type="submit"]) {
|
||||
height: 3em;
|
||||
}
|
||||
|
||||
div.message {
|
||||
background: var(--primaryDefault);
|
||||
color: #FFFFFF;
|
||||
padding: 0.5em 0.8em;
|
||||
-webkit-border-radius: 4px;
|
||||
-moz-border-radius: 4px;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
align-self: flex-start;
|
||||
flex-direction: row-reverse;
|
||||
position: relative;
|
||||
height: 75px;
|
||||
visibility: visible;
|
||||
overflow: hidden;
|
||||
-webkit-transition: all 0.5s ease-in-out;
|
||||
-moz-transition: all 0.5s ease-in-out;
|
||||
-ms-transition: all 0.5s ease-in-out;
|
||||
-o-transition: all 0.5s ease-in-out;
|
||||
transition: all 0.5s ease-in-out;
|
||||
opacity: 1;
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
div.message.error {
|
||||
background: var(--errorDefault);
|
||||
}
|
||||
|
||||
div.message button {
|
||||
border: none;
|
||||
background: none;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
color: #FFFFFF;
|
||||
font-size: 1.25rem;
|
||||
margin-top: -5px;
|
||||
position: absolute;
|
||||
transform: translate(0, 0);
|
||||
transform-origin: 0 0;
|
||||
right: 10px;
|
||||
top: 10px;
|
||||
}
|
||||
|
||||
div.message.hidden {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
div.message button:hover {
|
||||
text-shadow: -1px 2px var(--mutedBlack);
|
||||
}
|
||||
@ -7,6 +7,7 @@
|
||||
@import "about.css";
|
||||
@import "cv.css";
|
||||
@import "projects.css";
|
||||
@import "contact.css";
|
||||
|
||||
/****** Root Style ******/
|
||||
:root {
|
||||
@ -17,7 +18,8 @@
|
||||
--primaryDefault: hsla(var(--mainHue), var(--mainSat), var(--mainLight), 1);
|
||||
--primaryHover: hsla(var(--mainHue), var(--mainSat), calc(var(--mainLight) - 10%), 1);
|
||||
--timelineItemBrdr: hsla(var(--mainHue), var(--mainSat), calc(var(--mainLight) - 20%), 1);
|
||||
--errorDefault: hsla(0, var(--mainSat), var(--mainLight), 1);
|
||||
--errorDefault: hsla(0, calc(var(--mainSat) + 10%),calc(var(--mainLight) + 10%), 1);
|
||||
--errorHover: hsla(0, calc(var(--mainSat) + 10%), calc(var(--mainLight) - 10%), 1);
|
||||
--grey: hsla(0, 0%, 39%, 1);
|
||||
--notAvailableDefault: hsla(0, 0%, 39%, 1);
|
||||
--notAvailableHover: hsla(0, 0%,32%, 1);
|
||||
@ -308,6 +310,30 @@
|
||||
|
||||
}
|
||||
|
||||
section#contact {
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
div#findMe, div#sayHello {
|
||||
width: 100%;
|
||||
|
||||
}
|
||||
|
||||
|
||||
div#findMe .findMeContainer {
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
div#findMe .socialIcons {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
div#findMe .socialIcons div {
|
||||
flex-direction: row;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 55em) {
|
||||
@ -335,6 +361,15 @@
|
||||
border:none
|
||||
}
|
||||
|
||||
div#findMe .socialIcons {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#contactForm .flName {
|
||||
flex-direction: column;
|
||||
gap: 0;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 31em) {
|
||||
|
||||
@ -43,7 +43,7 @@ a.btn, form input[type="submit"] {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
a.btn:hover {
|
||||
a.btn:hover, form input[type="submit"]:hover {
|
||||
border: 0.3215em solid var(--primaryHover);
|
||||
}
|
||||
|
||||
|
||||
@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M15.5 14.625c0 .484-.387.875-.864.875h-5.273c-.477 0-.863-.392-.863-.875s.387-.875.863-.875h5.272c.478 0 .865.391.865.875zm-6.191-4.375h2.466c.448 0 .809-.392.809-.875s-.361-.875-.81-.875h-2.465c-.447 0-.809.392-.809.875s.362.875.809.875zm14.691 1.75c0 6.627-5.373 12-12 12s-12-5.373-12-12 5.373-12 12-12 12 5.373 12 12zm-5-1.039c0-.383-.311-.692-.691-.692h-1.138c-.583 0-.69-.446-.69-.996-.001-2.36-1.91-4.273-4.265-4.273h-2.952c-2.355 0-4.264 1.913-4.264 4.272v5.455c0 2.36 1.909 4.273 4.264 4.273h5.474c2.353 0 4.262-1.913 4.262-4.272v-3.767z"/></svg>
|
||||
|
Before Width: | Height: | Size: 646 B |
@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M13.718 10.528c0 .792-.268 1.829-.684 2.642-1.009 1.98-3.063 1.967-3.063-.14 0-.786.27-1.799.687-2.58 1.021-1.925 3.06-1.624 3.06.078zm10.282 1.472c0 6.627-5.373 12-12 12s-12-5.373-12-12 5.373-12 12-12 12 5.373 12 12zm-5-1.194c0-3.246-2.631-5.601-6.256-5.601-4.967 0-7.744 3.149-7.744 7.073 0 3.672 2.467 6.517 7.024 6.517 2.52 0 4.124-.726 5.122-1.288l-.687-.991c-1.022.593-2.251 1.136-4.256 1.136-3.429 0-5.733-2.199-5.733-5.473 0-5.714 6.401-6.758 9.214-5.071 2.624 1.642 2.524 5.578.582 7.083-1.034.826-2.199.799-1.821-.756 0 0 1.212-4.489 1.354-4.975h-1.364l-.271.952c-.278-.785-.943-1.295-1.911-1.295-2.018 0-3.722 2.19-3.722 4.783 0 1.73.913 2.804 2.38 2.804 1.283 0 1.95-.726 2.364-1.373-.3 2.898 5.725 1.557 5.725-3.525z"/></svg>
|
||||
|
Before Width: | Height: | Size: 830 B |
@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm2.218 18.616c-.354.069-.468-.149-.468-.336v-1.921c0-.653-.229-1.079-.481-1.296 1.56-.173 3.198-.765 3.198-3.454 0-.765-.273-1.389-.721-1.879.072-.177.312-.889-.069-1.853 0 0-.587-.188-1.923.717-.561-.154-1.159-.231-1.754-.234-.595.003-1.193.08-1.753.235-1.337-.905-1.925-.717-1.925-.717-.379.964-.14 1.676-.067 1.852-.448.49-.722 1.114-.722 1.879 0 2.682 1.634 3.282 3.189 3.459-.2.175-.381.483-.444.936-.4.179-1.413.488-2.037-.582 0 0-.37-.672-1.073-.722 0 0-.683-.009-.048.426 0 0 .46.215.777 1.024 0 0 .405 1.25 2.353.826v1.303c0 .185-.113.402-.462.337-2.782-.925-4.788-3.549-4.788-6.641 0-3.867 3.135-7 7-7s7 3.133 7 7c0 3.091-2.003 5.715-4.782 6.641z"/></svg>
|
||||
|
Before Width: | Height: | Size: 832 B |
@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M14.829 6.302c-.738-.034-.96-.04-2.829-.04s-2.09.007-2.828.04c-1.899.087-2.783.986-2.87 2.87-.033.738-.041.959-.041 2.828s.008 2.09.041 2.829c.087 1.879.967 2.783 2.87 2.87.737.033.959.041 2.828.041 1.87 0 2.091-.007 2.829-.041 1.899-.086 2.782-.988 2.87-2.87.033-.738.04-.96.04-2.829s-.007-2.09-.04-2.828c-.088-1.883-.973-2.783-2.87-2.87zm-2.829 9.293c-1.985 0-3.595-1.609-3.595-3.595 0-1.985 1.61-3.594 3.595-3.594s3.595 1.609 3.595 3.594c0 1.985-1.61 3.595-3.595 3.595zm3.737-6.491c-.464 0-.84-.376-.84-.84 0-.464.376-.84.84-.84.464 0 .84.376.84.84 0 .463-.376.84-.84.84zm-1.404 2.896c0 1.289-1.045 2.333-2.333 2.333s-2.333-1.044-2.333-2.333c0-1.289 1.045-2.333 2.333-2.333s2.333 1.044 2.333 2.333zm-2.333-12c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm6.958 14.886c-.115 2.545-1.532 3.955-4.071 4.072-.747.034-.986.042-2.887.042s-2.139-.008-2.886-.042c-2.544-.117-3.955-1.529-4.072-4.072-.034-.746-.042-.985-.042-2.886 0-1.901.008-2.139.042-2.886.117-2.544 1.529-3.955 4.072-4.071.747-.035.985-.043 2.886-.043s2.14.008 2.887.043c2.545.117 3.957 1.532 4.071 4.071.034.747.042.985.042 2.886 0 1.901-.008 2.14-.042 2.886z"/></svg>
|
||||
|
Before Width: | Height: | Size: 1.2 KiB |
@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-2 16h-2v-6h2v6zm-1-6.891c-.607 0-1.1-.496-1.1-1.109 0-.612.492-1.109 1.1-1.109s1.1.497 1.1 1.109c0 .613-.493 1.109-1.1 1.109zm8 6.891h-1.998v-2.861c0-1.881-2.002-1.722-2.002 0v2.861h-2v-6h2v1.093c.872-1.616 4-1.736 4 1.548v3.359z"/></svg>
|
||||
|
Before Width: | Height: | Size: 407 B |
@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm3.445 17.827c-3.684 1.684-9.401-9.43-5.8-11.308l1.053-.519 1.746 3.409-1.042.513c-1.095.587 1.185 5.04 2.305 4.497l1.032-.505 1.76 3.397-1.054.516z"/></svg>
|
||||
|
Before Width: | Height: | Size: 324 B |
BIN
src/imgs/profile.jpg
Normal file
BIN
src/imgs/profile.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 81 KiB |
@ -8,7 +8,6 @@
|
||||
<title>Rohit Pai - Portfolio</title>
|
||||
<link rel="stylesheet" href="css/main.css">
|
||||
<script src="https://kit.fontawesome.com/ed3c25598e.js" crossorigin="anonymous"></script>
|
||||
<script src="js/main.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
@ -37,7 +36,7 @@
|
||||
|
||||
<div>
|
||||
<h1>full stack developer</h1>
|
||||
<a href="" class="btn btnPrimary boxShadowIn boxShadowOut">Contact Me</a>
|
||||
<a href="#sayHello" class="btn btnPrimary boxShadowIn boxShadowOut">Contact Me</a>
|
||||
<a href="#about"><i class="fas fa-chevron-down"></i></a>
|
||||
</div>
|
||||
</header>
|
||||
@ -89,42 +88,66 @@
|
||||
</section>
|
||||
|
||||
<section id="contact">
|
||||
<div id="findme">
|
||||
<div id="findMe">
|
||||
<h1>find me</h1>
|
||||
<div class="findMeContainer">
|
||||
<div class="flexRow socialIcons">
|
||||
<div>
|
||||
<a href=""><img src="" alt=""></a>
|
||||
<a href=""><img src="" alt=""></a>
|
||||
<a href=""><img src="" alt=""></a>
|
||||
<a href="https://linkedin.com/in/rohitpai98">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-2 16h-2v-6h2v6zm-1-6.891c-.607 0-1.1-.496-1.1-1.109 0-.612.492-1.109 1.1-1.109s1.1.497 1.1 1.109c0 .613-.493 1.109-1.1 1.109zm8 6.891h-1.998v-2.861c0-1.881-2.002-1.722-2.002 0v2.861h-2v-6h2v1.093c.872-1.616 4-1.736 4 1.548v3.359z"/></svg>
|
||||
</a >
|
||||
<a href="https://github.com/rodude123">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#9ed035" d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm2.218 18.616c-.354.069-.468-.149-.468-.336v-1.921c0-.653-.229-1.079-.481-1.296 1.56-.173 3.198-.765 3.198-3.454 0-.765-.273-1.389-.721-1.879.072-.177.312-.889-.069-1.853 0 0-.587-.188-1.923.717-.561-.154-1.159-.231-1.754-.234-.595.003-1.193.08-1.753.235-1.337-.905-1.925-.717-1.925-.717-.379.964-.14 1.676-.067 1.852-.448.49-.722 1.114-.722 1.879 0 2.682 1.634 3.282 3.189 3.459-.2.175-.381.483-.444.936-.4.179-1.413.488-2.037-.582 0 0-.37-.672-1.073-.722 0 0-.683-.009-.048.426 0 0 .46.215.777 1.024 0 0 .405 1.25 2.353.826v1.303c0 .185-.113.402-.462.337-2.782-.925-4.788-3.549-4.788-6.641 0-3.867 3.135-7 7-7s7 3.133 7 7c0 3.091-2.003 5.715-4.782 6.641z"/></svg>
|
||||
</a>
|
||||
<a href="https://instagram.com/rodude123/">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M14.829 6.302c-.738-.034-.96-.04-2.829-.04s-2.09.007-2.828.04c-1.899.087-2.783.986-2.87 2.87-.033.738-.041.959-.041 2.828s.008 2.09.041 2.829c.087 1.879.967 2.783 2.87 2.87.737.033.959.041 2.828.041 1.87 0 2.091-.007 2.829-.041 1.899-.086 2.782-.988 2.87-2.87.033-.738.04-.96.04-2.829s-.007-2.09-.04-2.828c-.088-1.883-.973-2.783-2.87-2.87zm-2.829 9.293c-1.985 0-3.595-1.609-3.595-3.595 0-1.985 1.61-3.594 3.595-3.594s3.595 1.609 3.595 3.594c0 1.985-1.61 3.595-3.595 3.595zm3.737-6.491c-.464 0-.84-.376-.84-.84 0-.464.376-.84.84-.84.464 0 .84.376.84.84 0 .463-.376.84-.84.84zm-1.404 2.896c0 1.289-1.045 2.333-2.333 2.333s-2.333-1.044-2.333-2.333c0-1.289 1.045-2.333 2.333-2.333s2.333 1.044 2.333 2.333zm-2.333-12c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm6.958 14.886c-.115 2.545-1.532 3.955-4.071 4.072-.747.034-.986.042-2.887.042s-2.139-.008-2.886-.042c-2.544-.117-3.955-1.529-4.072-4.072-.034-.746-.042-.985-.042-2.886 0-1.901.008-2.139.042-2.886.117-2.544 1.529-3.955 4.072-4.071.747-.035.985-.043 2.886-.043s2.14.008 2.887.043c2.545.117 3.957 1.532 4.071 4.071.034.747.042.985.042 2.886 0 1.901-.008 2.14-.042 2.886z"/></svg>
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<a href=""><img src="" alt=""></a>
|
||||
<a href=""><img src="" alt=""></a>
|
||||
<a href=""><img src="" alt=""></a>
|
||||
<a href="#">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#9ed035" d="M15.5 14.625c0 .484-.387.875-.864.875h-5.273c-.477 0-.863-.392-.863-.875s.387-.875.863-.875h5.272c.478 0 .865.391.865.875zm-6.191-4.375h2.466c.448 0 .809-.392.809-.875s-.361-.875-.81-.875h-2.465c-.447 0-.809.392-.809.875s.362.875.809.875zm14.691 1.75c0 6.627-5.373 12-12 12s-12-5.373-12-12 5.373-12 12-12 12 5.373 12 12zm-5-1.039c0-.383-.311-.692-.691-.692h-1.138c-.583 0-.69-.446-.69-.996-.001-2.36-1.91-4.273-4.265-4.273h-2.952c-2.355 0-4.264 1.913-4.264 4.272v5.455c0 2.36 1.909 4.273 4.264 4.273h5.474c2.353 0 4.262-1.913 4.262-4.272v-3.767z"/></svg>
|
||||
</a>
|
||||
<a href="mailto:rohit@rohitpai.tech">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#9ed035" d="M13.718 10.528c0 .792-.268 1.829-.684 2.642-1.009 1.98-3.063 1.967-3.063-.14 0-.786.27-1.799.687-2.58 1.021-1.925 3.06-1.624 3.06.078zm10.282 1.472c0 6.627-5.373 12-12 12s-12-5.373-12-12 5.373-12 12-12 12 5.373 12 12zm-5-1.194c0-3.246-2.631-5.601-6.256-5.601-4.967 0-7.744 3.149-7.744 7.073 0 3.672 2.467 6.517 7.024 6.517 2.52 0 4.124-.726 5.122-1.288l-.687-.991c-1.022.593-2.251 1.136-4.256 1.136-3.429 0-5.733-2.199-5.733-5.473 0-5.714 6.401-6.758 9.214-5.071 2.624 1.642 2.524 5.578.582 7.083-1.034.826-2.199.799-1.821-.756 0 0 1.212-4.489 1.354-4.975h-1.364l-.271.952c-.278-.785-.943-1.295-1.911-1.295-2.018 0-3.722 2.19-3.722 4.783 0 1.73.913 2.804 2.38 2.804 1.283 0 1.95-.726 2.364-1.373-.3 2.898 5.725 1.557 5.725-3.525z"/></svg>
|
||||
</a>
|
||||
<a href="tel:07449063029">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#9ed035" d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm3.445 17.827c-3.684 1.684-9.401-9.43-5.8-11.308l1.053-.519 1.746 3.409-1.042.513c-1.095.587 1.185 5.04 2.305 4.497l1.032-.505 1.76 3.397-1.054.516z"/></svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<img src="" alt="" class="profile">
|
||||
<img src="./imgs/profile.jpg"
|
||||
alt="My professional picture taken in brighton near north street at night wearing a bage jacket and checkered shirt"
|
||||
class="profile"></div>
|
||||
</div>
|
||||
<div id="sayhello">
|
||||
<div id="sayHello">
|
||||
<h1>say hello</h1>
|
||||
<form action="" id="contactForm">
|
||||
<form action="" id="contactForm" method="POST">
|
||||
<div class="flName">
|
||||
<div class="formControl">
|
||||
<label for="fName">First Name</label>
|
||||
<input type="text" name="fName" id="fName">
|
||||
<input type="text" name="fName" id="fName" placeholder="John" required>
|
||||
</div>
|
||||
<div class="formControl">
|
||||
<label for="lName">Last Name</label>
|
||||
<input type="text" name="lName" id="lName">
|
||||
<input type="text" name="lName" id="lName" placeholder="Doe" required>
|
||||
</div>
|
||||
</div>
|
||||
<div class="formControl">
|
||||
<label for="email">Email</label>
|
||||
<input type="email" id="email" name="email">
|
||||
<input type="email" id="email" name="email" onchange="(this.value.length !== 0) ? this.classList.add('invalid') : this.classList.remove('invalid');" placeholder="john.doe@example.com" required>
|
||||
</div>
|
||||
<div class="formControl">
|
||||
<label for="subject">Subject</label>
|
||||
<input type="text" name="subject" id="subject" placeholder="Something very important..." required/>
|
||||
</div>
|
||||
<div class="formControl">
|
||||
<label for="message">Message</label>
|
||||
<textarea name="message" id="message" cols="30" rows="10"></textarea></div>
|
||||
<textarea name="message" id="message" cols="30" rows="10" placeholder="Heyyy!" required></textarea>
|
||||
</div>
|
||||
<div class="message hidden" id="contactError">
|
||||
<button class="close" type="button">×</button>
|
||||
<div></div>
|
||||
</div>
|
||||
<input type="submit" class="btn btnPrimary boxShadowIn boxShadowOut" value="Say Hello">
|
||||
</form>
|
||||
</div>
|
||||
@ -135,5 +158,6 @@
|
||||
<button class="goBackToTop"></button>
|
||||
</footer>
|
||||
</main>
|
||||
<script src="js/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -213,3 +213,55 @@ document.addEventListener('DOMContentLoaded', () =>
|
||||
// get projectData
|
||||
getProjectData();
|
||||
});
|
||||
|
||||
// contact error message
|
||||
document.querySelector("#contactError .close").addEventListener("click", () =>
|
||||
document.querySelector("#contactError").classList.toggle("hidden"));
|
||||
|
||||
// contact form
|
||||
document.querySelector("#contactForm").addEventListener("submit", e =>
|
||||
{
|
||||
e.preventDefault();
|
||||
let contactData = new FormData();
|
||||
contactData.append("fName", document.querySelector("#fName").value);
|
||||
contactData.append("lName", document.querySelector("#lName").value);
|
||||
contactData.append("email", document.querySelector("#email").value);
|
||||
contactData.append("subject", document.querySelector("#subject").value);
|
||||
contactData.append("message", document.querySelector("#message").value);
|
||||
|
||||
const fields = ['#fName', '#lName', '#email', '#subject', '#message'];
|
||||
let invalid = false;
|
||||
|
||||
fields.forEach(field => {
|
||||
const element = document.querySelector(field);
|
||||
if (element.value.length === 0) {
|
||||
element.classList.add("invalid");
|
||||
invalid = true;
|
||||
} else {
|
||||
element.classList.remove("invalid")
|
||||
document.querySelector("#contactError").classList.remove("error");
|
||||
}
|
||||
});
|
||||
|
||||
if (invalid)
|
||||
{
|
||||
// show error message
|
||||
document.querySelector("#contactError").classList.add("error");
|
||||
document.querySelector("#contactError").classList.remove("hidden");
|
||||
document.querySelector("#contactError div").innerText = "Please fill out all fields.";
|
||||
return;
|
||||
}
|
||||
|
||||
fetch("/api/contact",
|
||||
{
|
||||
method: "POST",
|
||||
body: contactData
|
||||
}).then(res =>
|
||||
{
|
||||
if(res.ok)
|
||||
{
|
||||
document.querySelector("#contactError").classList.remove("hidden");
|
||||
document.querySelector("#contactError div").innerText = "Thanks for contacting me, I will get back to you as soon as possible.";
|
||||
}
|
||||
});
|
||||
});
|
||||
Loading…
Reference in New Issue
Block a user