Merge pull request #1 from rodude123/header-and-nav
Finished header and nav
This commit is contained in:
GitHub
commit
519d38e70d
72
.gitignore
vendored
Normal file
72
.gitignore
vendored
Normal file
@ -0,0 +1,72 @@
|
|||||||
|
|
||||||
|
.idea/*
|
||||||
|
.idea/**/workspace.xml
|
||||||
|
.idea/**/tasks.xml
|
||||||
|
.idea/**/usage.statistics.xml
|
||||||
|
.idea/**/dictionaries
|
||||||
|
.idea/**/shelf
|
||||||
|
|
||||||
|
# AWS User-specific
|
||||||
|
.idea/**/aws.xml
|
||||||
|
|
||||||
|
# Generated files
|
||||||
|
.idea/**/contentModel.xml
|
||||||
|
|
||||||
|
# Sensitive or high-churn files
|
||||||
|
.idea/**/dataSources/
|
||||||
|
.idea/**/dataSources.ids
|
||||||
|
.idea/**/dataSources.local.xml
|
||||||
|
.idea/**/sqlDataSources.xml
|
||||||
|
.idea/**/dynamic.xml
|
||||||
|
.idea/**/uiDesigner.xml
|
||||||
|
.idea/**/dbnavigator.xml
|
||||||
|
|
||||||
|
# Gradle
|
||||||
|
.idea/**/gradle.xml
|
||||||
|
.idea/**/libraries
|
||||||
|
|
||||||
|
# Gradle and Maven with auto-import
|
||||||
|
# When using Gradle or Maven with auto-import, you should exclude module files,
|
||||||
|
# since they will be recreated, and may cause churn. Uncomment if using
|
||||||
|
# auto-import.
|
||||||
|
# .idea/artifacts
|
||||||
|
# .idea/compiler.xml
|
||||||
|
# .idea/jarRepositories.xml
|
||||||
|
# .idea/modules.xml
|
||||||
|
# .idea/*.iml
|
||||||
|
# .idea/modules
|
||||||
|
# *.iml
|
||||||
|
# *.ipr
|
||||||
|
|
||||||
|
# CMake
|
||||||
|
cmake-build-*/
|
||||||
|
|
||||||
|
# Mongo Explorer plugin
|
||||||
|
.idea/**/mongoSettings.xml
|
||||||
|
|
||||||
|
# File-based project format
|
||||||
|
*.iws
|
||||||
|
|
||||||
|
# IntelliJ
|
||||||
|
out/
|
||||||
|
|
||||||
|
# mpeltonen/sbt-idea plugin
|
||||||
|
.idea_modules/
|
||||||
|
|
||||||
|
# JIRA plugin
|
||||||
|
atlassian-ide-plugin.xml
|
||||||
|
|
||||||
|
# Cursive Clojure plugin
|
||||||
|
.idea/replstate.xml
|
||||||
|
|
||||||
|
# Crashlytics plugin (for Android Studio and IntelliJ)
|
||||||
|
com_crashlytics_export_strings.xml
|
||||||
|
crashlytics.properties
|
||||||
|
crashlytics-build.properties
|
||||||
|
fabric.properties
|
||||||
|
|
||||||
|
# Editor-based Rest Client
|
||||||
|
.idea/httpRequests
|
||||||
|
|
||||||
|
# Android studio 3.1+ serialized cache file
|
||||||
|
.idea/caches/build_file_checksums.ser
|
||||||
8
.idea/.gitignore
vendored
8
.idea/.gitignore
vendored
@ -1,8 +0,0 @@
|
|||||||
# Default ignored files
|
|
||||||
/shelf/
|
|
||||||
/workspace.xml
|
|
||||||
# Datasource local storage ignored files
|
|
||||||
/dataSources/
|
|
||||||
/dataSources.local.xml
|
|
||||||
# Editor-based HTTP Client requests
|
|
||||||
/httpRequests/
|
|
||||||
@ -1,8 +0,0 @@
|
|||||||
<?xml version="1.0" encoding="UTF-8"?>
|
|
||||||
<project version="4">
|
|
||||||
<component name="ProjectModuleManager">
|
|
||||||
<modules>
|
|
||||||
<module fileurl="file://$PROJECT_DIR$/.idea/my portfolio.iml" filepath="$PROJECT_DIR$/.idea/my portfolio.iml" />
|
|
||||||
</modules>
|
|
||||||
</component>
|
|
||||||
</project>
|
|
||||||
@ -1,8 +0,0 @@
|
|||||||
<?xml version="1.0" encoding="UTF-8"?>
|
|
||||||
<module type="WEB_MODULE" version="4">
|
|
||||||
<component name="NewModuleRootManager">
|
|
||||||
<content url="file://$MODULE_DIR$" />
|
|
||||||
<orderEntry type="inheritedJdk" />
|
|
||||||
<orderEntry type="sourceFolder" forTests="false" />
|
|
||||||
</component>
|
|
||||||
</module>
|
|
||||||
@ -1,4 +0,0 @@
|
|||||||
<?xml version="1.0" encoding="UTF-8"?>
|
|
||||||
<project version="4">
|
|
||||||
<component name="PhpProjectSharedConfiguration" php_language_level="8.0" />
|
|
||||||
</project>
|
|
||||||
@ -1,6 +0,0 @@
|
|||||||
<?xml version="1.0" encoding="UTF-8"?>
|
|
||||||
<project version="4">
|
|
||||||
<component name="VcsDirectoryMappings">
|
|
||||||
<mapping directory="$PROJECT_DIR$" vcs="Git" />
|
|
||||||
</component>
|
|
||||||
</project>
|
|
||||||
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
Normal file
1
dist/imgs/blog.svg
vendored
Normal file
@ -0,0 +1 @@
|
|||||||
|
<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>
|
||||||
|
After Width: | Height: | Size: 646 B |
1
dist/imgs/email.svg
vendored
Normal file
1
dist/imgs/email.svg
vendored
Normal file
@ -0,0 +1 @@
|
|||||||
|
<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>
|
||||||
|
After Width: | Height: | Size: 830 B |
1
dist/imgs/github.svg
vendored
Normal file
1
dist/imgs/github.svg
vendored
Normal file
@ -0,0 +1 @@
|
|||||||
|
<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>
|
||||||
|
After Width: | Height: | Size: 832 B |
BIN
dist/imgs/hero.jpg
vendored
Normal file
BIN
dist/imgs/hero.jpg
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
1
dist/imgs/instagram.svg
vendored
Normal file
1
dist/imgs/instagram.svg
vendored
Normal file
@ -0,0 +1 @@
|
|||||||
|
<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>
|
||||||
|
After Width: | Height: | Size: 1.2 KiB |
1
dist/imgs/linkedin.svg
vendored
Normal file
1
dist/imgs/linkedin.svg
vendored
Normal file
@ -0,0 +1 @@
|
|||||||
|
<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>
|
||||||
|
After Width: | Height: | Size: 407 B |
1
dist/imgs/phone.svg
vendored
Normal file
1
dist/imgs/phone.svg
vendored
Normal file
@ -0,0 +1 @@
|
|||||||
|
<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>
|
||||||
|
After Width: | Height: | Size: 324 B |
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
@ -1 +1 @@
|
|||||||
function formHandling(){console.log("Handle Forms")}
|
const scrollLimit=150;window.onscroll=()=>{document.body.scrollTop>=150||document.documentElement.scrollTop>=150?document.querySelector("nav").classList.add("scrolled"):document.querySelector("nav").classList.remove("scrolled");let e="";document.querySelectorAll("section").forEach((t=>{const o=t.offsetTop;window.pageYOffset>=o-60&&(e=t.getAttribute("id"))})),document.querySelectorAll("nav ul li a").forEach((t=>{t.classList.remove("active"),t.href.includes(e)&&""!==e?t.classList.add("active"):""===e&&document.querySelector("nav ul li a").classList.add("active")}))},document.addEventListener("DOMContentLoaded",(()=>{var e=["full stack developer","web designer","student","gamer","drummer"];function t(e,o,n){o<e.length?(document.querySelector("header div h1").innerHTML=e.substring(0,o+1)+'<span aria-hidden="true">_</span>',setTimeout((function(){t(e,o+1,n)}),100)):"function"==typeof n&&setTimeout(n,700)}!function o(n){void 0===e[n]?setTimeout((function(){o(0)}),1e3):n<e[n].length&&t(e[n],0,(function(){o(n+1)}))}(0)}));
|
||||||
23
gulpfile.js
23
gulpfile.js
@ -2,21 +2,21 @@ const gulp = require("gulp");
|
|||||||
const browserSync = require("browser-sync").create();
|
const browserSync = require("browser-sync").create();
|
||||||
const htmlMin = require("gulp-htmlmin");
|
const htmlMin = require("gulp-htmlmin");
|
||||||
const cssMin = require("gulp-clean-css")
|
const cssMin = require("gulp-clean-css")
|
||||||
const jsMin = require("gulp-uglify");
|
const terser = require("gulp-terser");
|
||||||
|
|
||||||
gulp.task("minifyHTML", () =>
|
gulp.task("minifyHTML", () =>
|
||||||
{
|
{
|
||||||
return gulp.src("src/*.html" )
|
return gulp.src("src/*.html" )
|
||||||
.pipe(htmlMin({collapseWhitespace: true}))
|
.pipe(htmlMin({collapseWhitespace: true}))
|
||||||
.pipe(gulp.dest("dist"));
|
.pipe(gulp.dest("dist"));
|
||||||
})
|
});
|
||||||
|
|
||||||
gulp.task("minifyCSS", () =>
|
gulp.task("minifyCSS", () =>
|
||||||
{
|
{
|
||||||
return gulp.src("src/css/*.css")
|
return gulp.src("src/css/*.css")
|
||||||
.pipe(cssMin({compatibility: "ie8"}))
|
.pipe(cssMin({compatibility: "ie8"}))
|
||||||
.pipe(gulp.dest("dist/css"));
|
.pipe(gulp.dest("dist/css"));
|
||||||
})
|
});
|
||||||
|
|
||||||
gulp.task("minifyJS", () =>
|
gulp.task("minifyJS", () =>
|
||||||
{
|
{
|
||||||
@ -28,11 +28,11 @@ gulp.task("minifyJS", () =>
|
|||||||
|
|
||||||
return gulp.src("src/js/*.js")
|
return gulp.src("src/js/*.js")
|
||||||
.on("error", createErrorHandler("gulp.src"))
|
.on("error", createErrorHandler("gulp.src"))
|
||||||
.pipe(jsMin())
|
.pipe(terser())
|
||||||
.on("error", createErrorHandler("uglify"))
|
.on("error", createErrorHandler("terser"))
|
||||||
.pipe(gulp.dest("dist/js"))
|
.pipe(gulp.dest("dist/js"))
|
||||||
.on("error", createErrorHandler("gulp.dest"));
|
.on("error", createErrorHandler("gulp.dest"));
|
||||||
})
|
});
|
||||||
|
|
||||||
gulp.task("browserSync", () =>
|
gulp.task("browserSync", () =>
|
||||||
{
|
{
|
||||||
@ -40,11 +40,12 @@ gulp.task("browserSync", () =>
|
|||||||
server: {
|
server: {
|
||||||
baseDir: "dist"
|
baseDir: "dist"
|
||||||
}
|
}
|
||||||
})
|
});
|
||||||
|
|
||||||
gulp.watch("src/*.html", gulp.task("minifyHTML"));
|
gulp.watch("src/*.html", gulp.task("minifyHTML"));
|
||||||
gulp.watch("src/css/*.css", gulp.task("minifyCSS"))
|
gulp.watch("src/css/*.css", gulp.task("minifyCSS"));
|
||||||
gulp.watch("src/js/*.js", gulp.task("minifyJS"))
|
gulp.watch("src/js/*.js", gulp.task("minifyJS"));
|
||||||
gulp.watch("dist/*", browserSync.reload)
|
gulp.watch("dist").on("change", browserSync.reload)
|
||||||
});
|
});
|
||||||
|
|
||||||
gulp.task("default", gulp.series("browserSync"))
|
gulp.task("default", gulp.series("browserSync"));
|
||||||
|
|||||||
9415
package-lock.json
generated
9415
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
10
package.json
10
package.json
@ -11,14 +11,14 @@
|
|||||||
],
|
],
|
||||||
"author": "Rohit Pai",
|
"author": "Rohit Pai",
|
||||||
"license": "ISC",
|
"license": "ISC",
|
||||||
"devDependencies": {
|
"dependencies": {
|
||||||
"browser-sync": "^2.26.14",
|
"browser-sync": "^2.26.14",
|
||||||
"gulp": "^4.0.2",
|
"gulp": "^4.0.2",
|
||||||
"gulp-clean-css": "^4.3.0",
|
"gulp-clean-css": "^4.3.0",
|
||||||
"gulp-uglify": "^3.0.2"
|
"gulp-uglify": "^3.0.2",
|
||||||
},
|
|
||||||
"dependencies": {
|
|
||||||
"gulp-htmlmin": "^5.0.1",
|
"gulp-htmlmin": "^5.0.1",
|
||||||
"require": "^2.4.20"
|
"gulp-terser": "^2.0.1",
|
||||||
|
"normalize.css": "^8.0.1",
|
||||||
|
"require": "^0.4.4"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
379
src/css/main.css
379
src/css/main.css
@ -1,4 +1,377 @@
|
|||||||
body{
|
/******** Imports ********/
|
||||||
margin: 0;
|
@import "/node_modules/normalize.css/normalize.css";
|
||||||
padding: 0;
|
@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');
|
||||||
|
|
||||||
|
/****** Root Style ******/
|
||||||
|
:root {
|
||||||
|
/* colours */
|
||||||
|
--primaryDefault: hsla(79, 62%, 51%, 1);
|
||||||
|
--primaryHover: hsla(79, 75%, 41%, 1);
|
||||||
|
--errorDefault: hsla(0, 62%, 51%, 1);
|
||||||
|
--grey: hsla(0, 0%, 39%, 1);
|
||||||
|
--mutedGrey: hsla(0, 0%, 67%, 0.58);
|
||||||
|
--mutedBlack: hsla(0, 0%, 0%, 0.25);
|
||||||
|
--navBack: hsl(0, 0%, 30%);
|
||||||
|
|
||||||
|
/* font sizes */
|
||||||
|
--titleFS: 2.25rem;
|
||||||
|
--generalFS: 1.125rem;
|
||||||
|
--headingFS: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*** Template Styles ****/
|
||||||
|
|
||||||
|
html {
|
||||||
|
scroll-behavior: smooth;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: Noto Sans KR, sans-serif;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 1.125rem;
|
||||||
|
line-height: 1.625rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:visited {
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1, nav {
|
||||||
|
font-family: Share Tech Mono, monospace;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: normal;
|
||||||
|
font-size: 2.25rem;
|
||||||
|
line-height: 2.5625rem;
|
||||||
|
text-transform: lowercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-family: Noto Sans KR, sans-serif;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
line-height: 2.1875rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
a.btn, form input[type="submit"] {
|
||||||
|
text-decoration: none;
|
||||||
|
display: inline-block;
|
||||||
|
padding: 1rem 2rem;
|
||||||
|
border-radius: 0.625em;
|
||||||
|
border: 0.3215em solid var(--primaryDefault);
|
||||||
|
color: #FFFFFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
a.btn:hover {
|
||||||
|
border: 0.3215em solid var(--primaryHover);
|
||||||
|
}
|
||||||
|
|
||||||
|
a.btnPrimary, form input[type="submit"] {
|
||||||
|
background: var(--primaryDefault);
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
a.btnOutline {
|
||||||
|
background: #FFFFFF;
|
||||||
|
color: var(--primaryDefault);
|
||||||
|
}
|
||||||
|
|
||||||
|
a.btnPrimary:hover, form input[type="submit"]:hover {
|
||||||
|
background: var(--primaryHover);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
a.btn:active, form input[type="submit"]:active {
|
||||||
|
padding: 0.8rem 1.8rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.boxShadowOut:hover {
|
||||||
|
box-shadow: 0 6px 4px 0 var(--mutedBlack);
|
||||||
|
}
|
||||||
|
|
||||||
|
.boxShadowIn:active {
|
||||||
|
box-shadow: inset 0 6px 4px 0 var(--mutedBlack);
|
||||||
|
}
|
||||||
|
|
||||||
|
.textShadow:hover {
|
||||||
|
text-shadow: 0 6px 4px var(--mutedBlack);
|
||||||
|
}
|
||||||
|
|
||||||
|
/*** Navigation Styles **/
|
||||||
|
|
||||||
|
header {
|
||||||
|
background: #6A6A6A url("../imgs/hero.jpg") no-repeat bottom;
|
||||||
|
background-size: cover;
|
||||||
|
height: 40%;
|
||||||
|
color: #FFFFFF;
|
||||||
|
backdrop-filter: grayscale(100%);
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 0.25em;
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
width: 100%;
|
||||||
|
transition: background-color 0.4s ease-in;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav.scrolled {
|
||||||
|
background-color: var(--navBack);
|
||||||
|
}
|
||||||
|
|
||||||
|
nav #nav-check {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav .nav-btn {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav h1 {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav a {
|
||||||
|
text-decoration: none;
|
||||||
|
color: #FFFFFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav ul {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
gap: 1em;
|
||||||
|
margin: 0;
|
||||||
|
justify-content: flex-end;
|
||||||
|
align-items: flex-end;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav ul li {
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav ul li span {
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav ul li a:hover span, nav ul li .active span {
|
||||||
|
visibility: visible;
|
||||||
|
}
|
||||||
|
|
||||||
|
header div {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
padding-top: 10em;
|
||||||
|
}
|
||||||
|
|
||||||
|
header div .btn {
|
||||||
|
margin: 2em 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
header div button {
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
display: inline-block;
|
||||||
|
text-align: center;
|
||||||
|
text-decoration: none;
|
||||||
|
font-size: 2rem;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
i.fa-chevron-down {
|
||||||
|
color: var(--mutedGrey);
|
||||||
|
font-size: 3.75em;
|
||||||
|
margin: 1.5rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
div h1 span {
|
||||||
|
visibility: visible;
|
||||||
|
animation: caret 1s steps(1) infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes caret {
|
||||||
|
50% {
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**** Media Queries *****/
|
||||||
|
|
||||||
|
@media screen and (max-width: 75em) {
|
||||||
|
/*** Navigation styles **/
|
||||||
|
|
||||||
|
nav {
|
||||||
|
display: block;
|
||||||
|
height: 50px;
|
||||||
|
width: 100%;
|
||||||
|
background-color: var(--navBack);
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav a h1{
|
||||||
|
margin-left: 1ch;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav .nav-btn {
|
||||||
|
display: inline-block;
|
||||||
|
position: absolute;
|
||||||
|
right: 75px;
|
||||||
|
top: -360px;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav ul {
|
||||||
|
position: fixed;
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
background-color: #333;
|
||||||
|
transition: all 0.4s ease-in;
|
||||||
|
overflow-y: hidden;
|
||||||
|
padding-left: 0;
|
||||||
|
margin-top: 7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav ul li a {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
transform: translateX(-30px);
|
||||||
|
transition: all 0.4s ease-in;
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-btn label {
|
||||||
|
display: inline-block;
|
||||||
|
cursor: pointer;
|
||||||
|
width: 60px;
|
||||||
|
height: 50px;
|
||||||
|
position: fixed;
|
||||||
|
-webkit-transform: rotate(0deg);
|
||||||
|
-moz-transform: rotate(0deg);
|
||||||
|
-o-transform: rotate(0deg);
|
||||||
|
transform: rotate(0deg);
|
||||||
|
-webkit-transition: .5s ease-in;
|
||||||
|
-moz-transition: .5s ease-in;
|
||||||
|
-o-transition: .5s ease-in;
|
||||||
|
transition: .5s ease-in;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-btn label span {
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
height: 5px;
|
||||||
|
width: 100%;
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
opacity: 1;
|
||||||
|
right: 0;
|
||||||
|
top: 20px;
|
||||||
|
-webkit-transform: rotate(0deg);
|
||||||
|
-moz-transform: rotate(0deg);
|
||||||
|
-o-transform: rotate(0deg);
|
||||||
|
transform: rotate(0deg);
|
||||||
|
-webkit-transition: .25s ease-in;
|
||||||
|
-moz-transition: .25s ease-in;
|
||||||
|
-o-transition: .25s ease-in;
|
||||||
|
transition: .25s ease-in;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** burger not clicked **/
|
||||||
|
|
||||||
|
nav #nav-check:not(:checked) ~ ul{
|
||||||
|
height: auto;
|
||||||
|
max-height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav #nav-check:not(:checked) ~ .nav-btn label span:nth-child(1) {
|
||||||
|
top: 8px;
|
||||||
|
-webkit-transform-origin: left center;
|
||||||
|
-moz-transform-origin: left center;
|
||||||
|
-o-transform-origin: left center;
|
||||||
|
transform-origin: left center;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav #nav-check:not(:checked) ~ .nav-btn label span:nth-child(2) {
|
||||||
|
top: 23px;
|
||||||
|
-webkit-transform-origin: left center;
|
||||||
|
-moz-transform-origin: left center;
|
||||||
|
-o-transform-origin: left center;
|
||||||
|
transform-origin: left center;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav #nav-check:not(:checked) ~ .nav-btn label span:nth-child(3) {
|
||||||
|
top: 38px;
|
||||||
|
-webkit-transform-origin: left center;
|
||||||
|
-moz-transform-origin: left center;
|
||||||
|
-o-transform-origin: left center;
|
||||||
|
transform-origin: left center;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav .nav-btn label:hover, nav #nav-check:checked ~ .nav-btn label {
|
||||||
|
background-color: rgba(-1, 0, 0, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**** burger clicked ****/
|
||||||
|
|
||||||
|
nav #nav-check:checked ~ ul{
|
||||||
|
max-height: 50vh;
|
||||||
|
overflow-y: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav #nav-check:checked ~ ul li a {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateX(0px);
|
||||||
|
}
|
||||||
|
|
||||||
|
nav #nav-check:checked ~ ul li:nth-child(1) a {
|
||||||
|
transition-delay: 0.15s;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav #nav-check:checked ~ ul li:nth-child(2) a {
|
||||||
|
transition-delay: 0.25s;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav #nav-check:checked ~ ul li:nth-child(3) a {
|
||||||
|
transition-delay: 0.35s;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav #nav-check:checked ~ ul li:nth-child(4) a {
|
||||||
|
transition-delay: 0.45s;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav #nav-check:checked ~ ul li:nth-child(5) a {
|
||||||
|
transition-delay: 0.55s;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav #nav-check:checked ~ .nav-btn label span:first-child {
|
||||||
|
-webkit-transform: rotate(45deg);
|
||||||
|
-moz-transform: rotate(45deg);
|
||||||
|
-o-transform: rotate(45deg);
|
||||||
|
transform: rotate(45deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
nav #nav-check:checked ~ .nav-btn label span:nth-child(2){
|
||||||
|
width: 0;
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav #nav-check:checked ~ .nav-btn label span:last-child {
|
||||||
|
-webkit-transform: rotate(-45deg);
|
||||||
|
-moz-transform: rotate(-45deg);
|
||||||
|
-o-transform: rotate(-45deg);
|
||||||
|
transform: rotate(-45deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 31em) {
|
||||||
|
/** not to squish name **/
|
||||||
|
|
||||||
|
header div h1{
|
||||||
|
width: min-content;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Binary file not shown.
|
Before Width: | Height: | Size: 368 KiB After Width: | Height: | Size: 1.1 MiB |
151
src/index.html
151
src/index.html
@ -7,8 +7,157 @@
|
|||||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||||
<title>Document</title>
|
<title>Document</title>
|
||||||
<link rel="stylesheet" href="css/main.css">
|
<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>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
header>nav>h1{rohit pai}+ul>(li>a)*4 Ok after all this it should reload right?
|
<header>
|
||||||
|
<nav>
|
||||||
|
<input type="checkbox" id="nav-check">
|
||||||
|
<a href="/">
|
||||||
|
<h1>rohit pai</h1>
|
||||||
|
</a>
|
||||||
|
<div class="nav-btn">
|
||||||
|
<label for="nav-check">
|
||||||
|
<span></span>
|
||||||
|
<span></span>
|
||||||
|
<span></span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#about" class="textShadow active"><span><</span>about<span>></span></a></li>
|
||||||
|
<li><a href="#curiculumvitae" class="textShadow"><span><</span>cv<span>></span></a></li>
|
||||||
|
<li><a href="#projects" class="textShadow"><span><</span>projects<span>></span></a></li>
|
||||||
|
<li><a href="#contact" class="textShadow"><span><</span>contact<span>></span></a></li>
|
||||||
|
<li><a href="#" class="textShadow"><span><</span>blog<span>></span></a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
<div>
|
||||||
|
<h1>full stack developer</h1>
|
||||||
|
<a href="" class="btn btnPrimary boxShadowIn boxShadowOut">Contact Me</a>
|
||||||
|
<a href="#about"><i class="fas fa-chevron-down"></i></a>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<main>
|
||||||
|
<section id="about">
|
||||||
|
<h1>about</h1>
|
||||||
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae debitis dolore, illum minus molestias
|
||||||
|
officiis quidem similique ut. Autem consectetur eum, fugit illum ipsam laudantium magnam magni minima
|
||||||
|
nesciunt numquam officia, soluta unde, voluptates! Aliquid aut, beatae dignissimos, dolorem ex
|
||||||
|
exercitationem fugiat harum itaque laudantium placeat repellat suscipit velit! Aliquam architecto autem
|
||||||
|
beatae consectetur, dicta dolorum eligendi esse harum hic iure labore, libero molestias nemo neque nisi
|
||||||
|
nostrum odio sed sunt tempora totam voluptatem voluptatibus.</p>
|
||||||
|
<a href="other/rohitpaicv.pdf" class="btn btnPrimary boxShadowIn boxShadowOut" download="">Download CV</a></section>
|
||||||
|
<section id="curiculumvitae">
|
||||||
|
<h1>curriculum vitae</h1>
|
||||||
|
<div class="cvGrid">
|
||||||
|
<div>
|
||||||
|
<h2>Education</h2>
|
||||||
|
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem ipsum nobis officia sequi. Beatae hic molestiae quibusdam repellendus vero voluptatem!</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h2>Work</h2>
|
||||||
|
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid aperiam atque blanditiis doloribus labore minima odio recusandae tempore. Totam, ut!</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section id="projects">
|
||||||
|
<div class="mainProj">
|
||||||
|
<h1>project title to be generated</h1>
|
||||||
|
<div><img src="" alt="">
|
||||||
|
<div class="flexRow">
|
||||||
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus dolorem dolores esse itaque
|
||||||
|
iure iusto libero molestias nobis nostrum placeat praesentium quia quo reprehenderit,
|
||||||
|
repudiandae.</p>
|
||||||
|
<div class="flexCol">
|
||||||
|
<a href="" class="btn btnPrimary boxShadowIn boxShadowOut">testing</a>
|
||||||
|
<a href="" class="btn btnOutline boxShadowIn boxShadowOut">testing</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="otherProj">
|
||||||
|
<h1>other projects</h1>
|
||||||
|
<div class="oProjGrid"><img src="" alt="">
|
||||||
|
<div class="flexCol">
|
||||||
|
<div>
|
||||||
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, voluptates.</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<a href="" class="btn btnPrimary boxShadowIn boxShadowOut"></a>
|
||||||
|
<a href="" class="btn btnOutline boxShadowIn boxShadowOut"></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="oProjGrid"><img src="" alt="">
|
||||||
|
<div class="flexCol">
|
||||||
|
<div>
|
||||||
|
<p>Adipisci aspernatur consectetur debitis fugiat minus mollitia rem ullam, voluptate.</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<a href="" class="btn btnPrimary boxShadowIn boxShadowOut"></a>
|
||||||
|
<a href="" class="btn btnOutline boxShadowIn boxShadowOut"></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="oProjGrid"><img src="" alt="">
|
||||||
|
<div class="flexCol">
|
||||||
|
<div>
|
||||||
|
<p>Beatae culpa distinctio dolorum eius et fugit optio reiciendis soluta!</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<a href="" class="btn btnPrimary boxShadowIn boxShadowOut"></a>
|
||||||
|
<a href="" class="btn btnOutline boxShadowIn boxShadowOut"></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<a href="" class="btn btnPrimary boxShadowIn boxShadowOut"></a></div>
|
||||||
|
</section>
|
||||||
|
<section id="contact">
|
||||||
|
<div id="findme">
|
||||||
|
<h1>find me</h1>
|
||||||
|
<div class="flexRow socialIcons">
|
||||||
|
<div>
|
||||||
|
<a href=""><img src="" alt=""></a>
|
||||||
|
<a href=""><img src="" alt=""></a>
|
||||||
|
<a href=""><img src="" alt=""></a>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<a href=""><img src="" alt=""></a>
|
||||||
|
<a href=""><img src="" alt=""></a>
|
||||||
|
<a href=""><img src="" alt=""></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<img src="" alt="" class="profile">
|
||||||
|
</div>
|
||||||
|
<div id="sayhello">
|
||||||
|
<h1>say hello</h1>
|
||||||
|
<form action="" id="contactForm">
|
||||||
|
<div class="flName">
|
||||||
|
<div class="formControl">
|
||||||
|
<label for="fName">First Name</label>
|
||||||
|
<input type="text" name="fName" id="fName">
|
||||||
|
</div>
|
||||||
|
<div class="formControl">
|
||||||
|
<label for="lName">Last Name</label>
|
||||||
|
<input type="text" name="lName" id="lName">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="formControl">
|
||||||
|
<label for="email">Email</label>
|
||||||
|
<input type="email" id="email" name="email">
|
||||||
|
</div>
|
||||||
|
<div class="formControl">
|
||||||
|
<label for="message">Message</label>
|
||||||
|
<textarea name="message" id="message" cols="30" rows="10"></textarea></div>
|
||||||
|
<input type="submit" class="btn btnPrimary boxShadowIn boxShadowOut" value="Say Hello">
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<footer class="flexRow">
|
||||||
|
<p>© 2021 Rohit Pai all rights reserved</p>
|
||||||
|
<button class="goBackToTop"></button>
|
||||||
|
</footer>
|
||||||
|
</main>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -1,5 +1,85 @@
|
|||||||
//Handle forms in contact page
|
// scrolling effect
|
||||||
function formHandling()
|
const scrollLimit = 150;
|
||||||
|
window.onscroll = () =>
|
||||||
{
|
{
|
||||||
console.log("Handle Forms");
|
// check if scrolled past limit if so add scrolled class to change background of nav
|
||||||
}
|
if (document.body.scrollTop >= scrollLimit || document.documentElement.scrollTop >= scrollLimit)
|
||||||
|
{
|
||||||
|
document.querySelector("nav").classList.add("scrolled");
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
document.querySelector("nav").classList.remove("scrolled");
|
||||||
|
}
|
||||||
|
|
||||||
|
let current = ""; //id of current section scrolled to, set to "" if at top
|
||||||
|
// go through all sections and find current section id scrolled to
|
||||||
|
document.querySelectorAll("section").forEach((section) =>
|
||||||
|
{
|
||||||
|
const sectionTop = section.offsetTop;
|
||||||
|
if (window.pageYOffset >= sectionTop - 60)
|
||||||
|
{
|
||||||
|
current = section.getAttribute("id");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// go through all nav links, remove active class and add it to the link whose href matches the current id scrolled
|
||||||
|
// to
|
||||||
|
document.querySelectorAll("nav ul li a").forEach((a) =>
|
||||||
|
{
|
||||||
|
a.classList.remove("active");
|
||||||
|
if (a.href.includes(current) && current !== "")
|
||||||
|
{
|
||||||
|
a.classList.add("active");
|
||||||
|
}
|
||||||
|
else if (current === "")
|
||||||
|
{
|
||||||
|
document.querySelector("nav ul li a").classList.add("active"); // at the top
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
document.addEventListener('DOMContentLoaded', () =>
|
||||||
|
{
|
||||||
|
// array with texts to type in typewriter
|
||||||
|
var dataText = [ "full stack developer", "web designer", "student", "gamer", "drummer"];
|
||||||
|
|
||||||
|
// type one text in the typwriter
|
||||||
|
// keeps calling itself until the text is finished
|
||||||
|
function typeWriter(text, i, fnCallback) {
|
||||||
|
// chekc if text isn't finished yet
|
||||||
|
if (i < (text.length)) {
|
||||||
|
// add next character to h1
|
||||||
|
document.querySelector("header div h1").innerHTML = text.substring(0, i+1) +'<span aria-hidden="true">_</span>';
|
||||||
|
|
||||||
|
// wait for a while and call this function again for next character
|
||||||
|
setTimeout(function() {
|
||||||
|
typeWriter(text, i + 1, fnCallback)
|
||||||
|
}, 100);
|
||||||
|
}
|
||||||
|
// text finished, call callback if there is a callback function
|
||||||
|
else if (typeof fnCallback == 'function') {
|
||||||
|
// call callback after timeout
|
||||||
|
setTimeout(fnCallback, 700);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// start a typewriter animation for a text in the dataText array
|
||||||
|
function StartTextAnimation(i) {
|
||||||
|
if (typeof dataText[i] === 'undefined'){
|
||||||
|
setTimeout(function() {
|
||||||
|
StartTextAnimation(0);
|
||||||
|
}, 1000);
|
||||||
|
// StartTextAnimation(0);
|
||||||
|
}
|
||||||
|
else if (i < dataText[i].length) {
|
||||||
|
// text exists! start typewriter animation
|
||||||
|
typeWriter(dataText[i], 0, function(){
|
||||||
|
// after callback (and whole text has been animated), start next text
|
||||||
|
StartTextAnimation(i + 1);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// start the text animation
|
||||||
|
StartTextAnimation(0);
|
||||||
|
});
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user