diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..9607d34 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "livePreview.defaultPreviewPath": "/index.html" +} \ No newline at end of file diff --git a/images/2001.jpg b/images/2001.jpg new file mode 100644 index 0000000..fae1d8b Binary files /dev/null and b/images/2001.jpg differ diff --git a/images/2080299.png b/images/2080299.png new file mode 100644 index 0000000..e4243a1 Binary files /dev/null and b/images/2080299.png differ diff --git a/images/9591ed82caa8d20c30db96cb7298d3a9.png b/images/9591ed82caa8d20c30db96cb7298d3a9.png new file mode 100644 index 0000000..3e6871f Binary files /dev/null and b/images/9591ed82caa8d20c30db96cb7298d3a9.png differ diff --git a/images/CSS3_logo.svg.png b/images/CSS3_logo.svg.png new file mode 100644 index 0000000..b4bcb4f Binary files /dev/null and b/images/CSS3_logo.svg.png differ diff --git a/images/Google_Drive_icon_(2020).png b/images/Google_Drive_icon_(2020).png new file mode 100644 index 0000000..12fdc3c Binary files /dev/null and b/images/Google_Drive_icon_(2020).png differ diff --git a/images/c-logo.png b/images/c-logo.png new file mode 100644 index 0000000..4f8c968 Binary files /dev/null and b/images/c-logo.png differ diff --git a/images/enter_dragon.jpg b/images/enter_dragon.jpg new file mode 100644 index 0000000..2312c73 Binary files /dev/null and b/images/enter_dragon.jpg differ diff --git a/images/goodfellas.jpg b/images/goodfellas.jpg new file mode 100644 index 0000000..c9ddd19 Binary files /dev/null and b/images/goodfellas.jpg differ diff --git a/images/html-1.svg b/images/html-1.svg new file mode 100644 index 0000000..c62fabb --- /dev/null +++ b/images/html-1.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/javascript-1.svg b/images/javascript-1.svg new file mode 100644 index 0000000..b56c0b7 --- /dev/null +++ b/images/javascript-1.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/johnjay.png b/images/johnjay.png new file mode 100644 index 0000000..92abada Binary files /dev/null and b/images/johnjay.png differ diff --git a/images/linkedin.png b/images/linkedin.png new file mode 100644 index 0000000..3fbdd62 Binary files /dev/null and b/images/linkedin.png differ diff --git a/images/linkedinicon.svg b/images/linkedinicon.svg new file mode 100644 index 0000000..3b9cc05 --- /dev/null +++ b/images/linkedinicon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/profile.png b/images/profile.png new file mode 100644 index 0000000..78a2298 Binary files /dev/null and b/images/profile.png differ diff --git a/images/resume.pdf b/images/resume.pdf new file mode 100644 index 0000000..c6bc5fc Binary files /dev/null and b/images/resume.pdf differ diff --git a/images/square-github.svg b/images/square-github.svg new file mode 100644 index 0000000..db6fc37 --- /dev/null +++ b/images/square-github.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/yans.ttf b/images/yans.ttf new file mode 100644 index 0000000..ecf6255 Binary files /dev/null and b/images/yans.ttf differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..01ad7c4 --- /dev/null +++ b/index.html @@ -0,0 +1,166 @@ + + + + + + + + + Shawn Sinanan Website + + + + + +
+
+ +
+
+ +
+ +
+ + +
+ +
+ +
+
+
+
+
+ +
+
+ +
+
+ +
+
+ + +
+
Here are some of my favorite movie posters.
+
+ + +
+ +
+ +
+ + +
+ + +
+ + + +
+ +
+ + + + + + + \ No newline at end of file diff --git a/js/script.js b/js/script.js new file mode 100644 index 0000000..60ce560 --- /dev/null +++ b/js/script.js @@ -0,0 +1,55 @@ +const looker = new IntersectionObserver((entries) => { + entries.forEach((entry) => { + + console.log(entry) + + if (entry.isIntersecting){ + entry.target.classList.add('show'); + } + + }) +}); + +const hiddenElems = document.querySelectorAll('.hidden'); +hiddenElems.forEach((el) => looker.observe(el)); + +const icons = document.querySelectorAll('.portLinks'); + +icons.forEach(icon => { + + icon.addEventListener('click', () => { + window.open(icon.dataset.url, target="_blank"); + }) + + icon.style.cursor = "pointer"; + +}) + +const swiper = new Swiper('.swiper', { + // Optional parameters + loop: true, + + // Navigation arrows + navigation: { + nextEl: '.swiper-button-next', + prevEl: '.swiper-button-prev', + }, + +}); + +const swipe = document.getElementById('swipers'); + +const hiddenTop = document.getElementById('top') +const hiddenBot = document.getElementById('bot') + +swipe.addEventListener('mouseover', function handleMouseOver() { + hiddenTop.style.display = null; + hiddenBot.style.display = null; +}); + +swipe.addEventListener('mouseout', function handleMouseOut() { + hiddenTop.style.display = 'none'; + hiddenBot.style.display = 'none'; +}); + + diff --git a/styles/main.css b/styles/main.css new file mode 100644 index 0000000..b0e5f6d --- /dev/null +++ b/styles/main.css @@ -0,0 +1,531 @@ +:root { + --swiper-navigation-color: #E49A38; +} + +html, body { + padding:0; + margin:0; + scroll-snap-type: y mandatory; + overflow-x: hidden; + scroll-behavior: smooth; + font-family: 'myFont', sans-serif; + background-color: #15172b; +} + +@font-face { + font-family: 'myFont'; + src: url(/images/yans.ttf); + font-weight: bold; + font-style: shadowed; +} + +.hidden { + opacity: 0; + filter: blur(1px); + transform: translateX(-100%); + transition: all 1s; +} + +.show { + opacity: 1; + filter: blur(0); + transform: translateX(0); +} + +/*NAVIGATION BAR STYLING*/ + +li{ + list-style-type: none; +} + +a{ + text-decoration: none; + font-size: x-large; + color: white; + border-radius: 10px; + padding: 5px; +} + +a:hover{ + color: #08b; +} + +.navbar{ + + width: 100%; + height: 60px; + position: fixed; + margin: 0 auto; + z-index: 100; +} + +.navbar .links{ + padding-right: 2rem; + display: flex; + float: right; + gap: 2rem; +} + +/*ABOUT ME SECTION (FIRST ROW)*/ + +.pageGrid{ + display: grid; + grid-template-columns: 1fr; + grid-template-rows: repeat(6, 100vh); + margin-left:1%; + margin-right:1%; + gap: 10px; +} + +.firRow { + grid-column: 1 / 3; + grid-row: 1 / 2; + + flex-direction: column; +} + +#aboutContainer { + grid-column: 1 / 3; + grid-row: 2 / 3; +} + +#posterContainer{ + grid-column: 1 / 3; + grid-row: 3 / 4; + + flex-direction: column; + justify-content: center; +} + +#skillsContainer{ + grid-column: 1 / 3; + grid-row: 4 / 5; +} + +#portfolioContainer{ + grid-column: 1 / 3; + grid-row: 5 / 6; + + flex-direction: column; +} + +#contactContainer{ + grid-row: 6 / 7; + grid-column: 1 / 3; + + flex-direction: column; + justify-content: center; +} + +.container{ + display: flex; + justify-content: space-between; + align-items: center; + background-color: #15172b; + padding: 30px; + text-align: center; +} + +#intro{ + display: flex; + align-items: center; + justify-content: center; + border-radius: 10px; + padding: 10px; + width: 70%; + height: 75%; +} + +#picture{ + display: flex; + align-items: center; + justify-content: center; + width: 30%; + height: 75%; +} + +#picture img { + max-width: 100%; + max-height: 100%; + object-fit: scale-down; +} + +.name img{ + max-width: 100%; + max-height: 100%; + transition: 0.5s; + object-fit: scale-down; +} + +.name:hover img { + transform: scale(1.1); +} + +.name{ + color: #eee; + border-radius: 10px; + text-shadow: 2px 2px 3px rgba(0,0,0,0.3); + line-height: 2.2em; + font-size: x-large; +} + +.name p { + font-size: large; +} + +#aboutMe{ + display: flex; + justify-content: space-evenly; + align-items: center; + width: 100%; + height: 40rem; + padding: 30px; +} + +.bio{ + color: #eee; + width: 100%; + font-size: calc(5*0.8vw); +} + +.postertitle{ + font-size: calc(5*0.8vw); + color: white; + padding: 30px; +} + +.swiper { + height: 80%; + width: 80%; +} + +.swiper-slide { + text-align: center; + display: flex; + justify-content: center; + align-items: center; +} + +.swiper-slide img { + display: block; + width: 100%; + height: 100%; + object-fit: contain; +} + +.swiper-button-prev { + color: white; +} + +.swiper-button-next { + color: #eee; +} + +.navBtn{ + height: 4rem; + width: 4rem; + border-radius: 50%; + background: #08b; +} + +.gridTitle{ + color: white; + font-size: xx-large; + grid-column: 1 / -1; +} + +#skills{ + display: grid; + grid-template-rows: repeat(2, 1fr); + grid-template-columns: repeat(3, 1fr); + gap: 10px; + place-items: center; + + padding: 10px; + height: 30rem; + width: 100%; +} + +.logo { + max-width: 175px; + max-height: 175px; + width: 100%; + height: auto; + position: relative; + padding: 10px; +} + +.logo img { + width: 100%; + max-height: 100%; + object-fit: scale-down; + transition: transform 0.5s; +} + +.logo:hover img { + transform: scale(1.1); +} + +#html{ + grid-row: 1 / 2; + grid-column: 1 / 2; +} + +#css{ + grid-row: 1 / 2; + grid-column: 2 / 3; +} + +#javascript{ + grid-row: 1 / 2; + grid-column: 3 / 4; +} + +#python{ + grid-row: 2 / 3; + grid-column: 1 / 3; + +} + +#cplus{ + grid-row: 2 / 3; + grid-column: 2 / 4; +} + +#portfolio{ + display: flex; + align-items: center; + justify-content: center; + padding: 10px; + width: 50%; + height: 50%; +} + +#portfolio2{ + display: flex; + align-items: center; + justify-content: center; + padding: 10px; + width: 50%; + height: 50%; +} + +.portLinks { + max-width: 300px; + width: 100%; + height: auto; + position: relative; + transition: transform 0.5s; +} + +.portLinks p { + font-size: xx-large; + color: white +} + +.portLinks img { + width: 100%; + max-height: 100%; + object-fit: scale-down; + +} +.portLinks:hover { + transform: scale(1.1); +} + +.form1 { + background-color: #15172b; + border-radius: 20px; + box-sizing: border-box; + height: auto; + width: auto; +} + +.form2 { + display: flex; + align-items: center; + justify-content: center; + background-color: #15172b; + border-radius: 20px; + box-sizing: border-box; + height: 20rem; + padding: 20px; + width: 100%; + max-width: 20rem; +} + +.thanks { + color: #eee; + font-size: 35px; + font-weight: 600; + text-align: center; +} + +.title { + color: #eee; + font-size: 36px; + font-weight: 600; +} + +.input-container { + height: 50px; + position: relative; + width: 100%; +} + +.ic1 { + margin-top: 40px; +} + +.ic2 { + margin-top: 30px; + height: 100px; +} + +.ic2 .input{ + resize: none; +} + +.input { + background-color: #303245; + border-radius: 12px; + border: 0; + box-sizing: border-box; + color: #eee; + font-size: 18px; + height: 100%; + outline: 0; + padding: 4px 20px 0; + width: 100%; + overflow: hidden; +} + +.submitButton { + background-color: #08d; + border-radius: 12px; + border: 0; + box-sizing: border-box; + color: #eee; + cursor: pointer; + font-size: 18px; + height: 50px; + margin-top: 38px; + outline: 0; + text-align: center; + width: 100%; +} + +.submitButton:active { + background-color: #06b; +} + +#linked{ + display: flex; + align-items: center; + justify-content: center; + padding: 10px; + width: 50%; + height: 50%; +} + +#contact{ + display: flex; + justify-content: center; + align-items: center; + + width: 50%; + height: 50%; + padding: 10px; +} + +.footer{ + height: 120px; + width: 100%; + background-color: #303245; +} + +.icon{ + width: 100%; + display: flex; + justify-content: center; +} + +.icon img{ + width: 50px; + height: auto; + object-fit: scale-down; + padding: 20px; +} + +@media (min-width: 700px) { + + .pageGrid{ + grid-template-columns: repeat(2, 1fr); + grid-template-rows: repeat(4, 100vh); + } + + .firRow { + grid-column: 1 / 3; + grid-row: 1 / 2; + + flex-direction: row; + } + + .name{ + font-size: xxx-large; + } + + .name p { + font-size: xx-large; + } + + #aboutContainer { + grid-column: 1 / 2; + grid-row: 2 / 3; + } + + .bio{ + font-size: calc(2.5*0.8vw); + } + + #posterContainer{ + grid-column: 2 / 3; + grid-row: 2 / 3; + max-width: 700px; + } + + .postertitle{ + font-size: calc(2*0.8vw); + } + + #skillsContainer{ + grid-column: 1 / 2; + grid-row: 3 / 4; + } + + #portfolioContainer{ + grid-column: 2 / 3; + grid-row: 3 / 4; + + flex-direction: row; + } + + #portfolio{ + border-left: 10px solid rgb(0, 76, 104); + } + + #contactContainer{ + grid-row: 4 / 5; + grid-column: 1 / 3; + + flex-direction: row; + } + + #linked{ + height: 75%; + } + + #contact{ + height: 75%; + } +} \ No newline at end of file