Skip to content

Commit

Permalink
add iframes
Browse files Browse the repository at this point in the history
  • Loading branch information
@cyphersept
cyphersept committed Jun 28, 2024
1 parent bcd8f47 commit 9e8b848
Show file tree
Hide file tree
Showing 4 changed files with 252 additions and 113 deletions.
63 changes: 33 additions & 30 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ <h3 class="tagline text-xl text-zinc-800 mb-8"></h2>
</nav>
</aside>

<main class="right h-[80vh] px-8 snap-x snap-mandatory overflow-auto no-scrollbar">
<main class="right h-[80vh] px-8 snap-y snap-mandatory scroll-smooth overflow-auto no-scrollbar">
<section id="about" class="min-h-[80vh] p-8">
<h2 class="text-3xl font-bold mb-8 text-r-red-2">About</h2>
</section>
Expand All @@ -60,8 +60,8 @@ <h3 class="">Others</h3>
<li>Some proficiency in French</li>
</ul>
</section>
<section id="projects" class="min-h-[80vh] p-8">
<nav>
<section id="projects" class="min-h-[80vh] h-[80vh] p-8 relative">
<nav class="absolute">
<ul class="flex gap-2">
<li>
<a href="#repalette" onclick="showSection(this, 'repalette')" class="rounded-xl text-r-gray-5 pt-1 pb-2 hover:underline decoration-4 underline-offset-[1em] decoration-r-teal-3 bg-r-teal-3 selected">&nbsp;&nbsp;&nbsp;repalette&nbsp;&nbsp;&nbsp;</a>
Expand All @@ -83,32 +83,34 @@ <h3 class="">Others</h3>
</li>
</ul>
</nav>

<h2 class="text-3xl font-bold my-8 text-r-teal-2">Projects</h2>

<section id="repalette" class="not-hidden scroll-mt-36">
<h3>Repalette</h3>
<div class="text-xl text-zinc-800">One-page pixel art bulk recolouring tool</div>
<section id="repalette" class="flex scroll-mt-36 h-full flex-col">
<h2 class="text-3xl font-bold mt-14 text-r-teal-2">Projects — Repalette</h2>
<h3 class="text-xl my-2">One-page pixel art bulk recolouring tool</h3>
</section>
<section id="doodle" class="hidden scroll-mt-36">
<h3>Etch-a-Sketch</h3>
<div class="text-xl">Digital doodling</div>
<section id="doodle" class="hidden scroll-mt-36 h-full flex-col">
<h2 class="text-3xl font-bold mt-14 text-r-teal-2">Projects — Etch-a-Sketch</h2>
<h3 class="text-xl my-2">Digital doodling</h3>
<div class="grow"><iframe src="https://cyphersept.github.io/small-projects/etch" sandbox="allow-scripts" loading="lazy" style="--scalar: 0.8" class="rounded-xl"></iframe></div>
</section>
<section id="rps" class="hidden scroll-mt-36">
<h3>Rock Paper Scissors</h3>
<div class="text-xl">Best of three</div>
<section id="rps" class="hidden scroll-mt-36 h-full flex-col">
<h2 class="text-3xl font-bold mt-14 text-r-teal-2">Projects — Rock Paper Scissors</h2>
<h3 class="text-xl my-2">Best of three</h3>
<div class="grow"><iframe src="https://cyphersept.github.io/small-projects/rps" sandbox="allow-scripts" loading="lazy" style="--scalar: 0.8" class="rounded-xl"></iframe></div>
</section>
<section id="calculate" class="hidden scroll-mt-36">
<h3>Calculator</h3>
<div class="text-xl">Classic four function calculator, like you used to have</div>
<section id="calculate" class="hidden scroll-mt-36 h-full flex-col">
<h2 class="text-3xl font-bold mt-14 text-r-teal-2">Projects — Calculator</h2>
<h3 class="text-xl my-2">Classic four function calculator, like you used to have</h3>
<div class="grow"><iframe src="https://cyphersept.github.io/small-projects/calculator" sandbox="allow-scripts" loading="lazy" style="--scalar: 0.8" class="rounded-xl"></iframe></div>
</section>
<section id="signup" class="hidden scroll-mt-36">
<h3>Signup Page</h3>
<div class="text-xl">Create an account for a totally real service</div>
<section id="signup" class="hidden scroll-mt-36 h-full flex-col">
<h2 class="text-3xl font-bold mt-14 text-r-teal-2">Projects — Signup Page</h2>
<h3 class="text-xl my-2">Create an account for a totally real service</h3>
<div class="grow"><iframe src="https://cyphersept.github.io/small-projects/signup" sandbox="allow-scripts" loading="lazy" style="--scalar: 0.8" class="rounded-xl"></iframe></div>
</section>
<section id="dressup" class="hidden scroll-mt-36">
<h3>Dressup Game Maker (WIP)</h3>
<div class="text-xl">Lightweight app for creating HTML paperdolls with zero code</div>
<section id="dressup" class="hidden scroll-mt-36 h-full flex-col">
<h2 class="text-3xl font-bold mt-14 text-r-teal-2">Projects — Dressup Game Maker (WIP)</h2>
<h3 class="text-xl my-2">Lightweight app for creating HTML paperdolls with zero code</div> h3
</section>
</section>
<section id="contact" class="min-h-[80vh] p-8">
Expand All @@ -129,13 +131,13 @@ <h2 class="text-3xl font-bold mb-8 text-r-orange-4">Contact Me</h2>
<script>
function showSection(nav, id, ancestorId="projects") {
const ancestor = document.getElementById(ancestorId);
const prev = ancestor.querySelector(".not-hidden");
const prev = ancestor.querySelector("section.flex");
const next = document.getElementById(id);

// Hides all but selected section
prev.classList.remove("not-hidden");
prev.classList.remove("flex");
prev.classList.add("hidden");
next.classList.add("not-hidden");
next.classList.add("flex");
next.classList.remove("hidden");

// Selects element in nav
Expand All @@ -152,15 +154,16 @@ <h2 class="text-3xl font-bold mb-8 text-r-orange-4">Contact Me</h2>
// });

/* TO-DO:
- setup jquery
- smooth scroll animations
- https://www.youtube.com/watch?v=UmzFk68Bwdk use for scroll animations? else jquery
- record demo gifs
- add and style links to page and source code, lazy embed??
- host old projects
- create illustrations
FINISHED:
- smooth scroll animations
- host old projects
*/
</script>
</html>
63 changes: 57 additions & 6 deletions src/input.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,16 +2,22 @@
@tailwind components;
@tailwind utilities;

@layer base {
iframe {
--scalar: 1;
transform: scale(var(--scalar));
transform-origin: top left;
width: calc(1/var(--scalar) * 100%);
height: calc(1/var(--scalar) * 100%);
}
}
@layer components {
aside a {
@apply inline-block w-36 ml-4 align-middle py-1.5 text-center text-lg rounded-xl text-r-gray-5;
}
main > section {
@apply snap-center snap-always text-zinc-950;
}
main h3 {
@apply text-2xl font-bold my-4;
}
main li {
margin-bottom: 4px;
}
Expand All @@ -25,14 +31,59 @@
background-size: cover;
vertical-align: bottom;
}

.selected {
text-decoration-line: underline;
}

.no-scrollbar::-webkit-scrollbar {
display: none;
}
.no-scrollbar {
-ms-overflow-style: none;
scrollbar-width: none;
}

.hoverline {
position: relative;
}

.hoverline::before {
content: "";
position: absolute;
display: block;
width: 100%;
height: 4px;
bottom: 0;
left: 0;
background-color: inherit;
transform: scaleX(0);
transition: transform 0.3s ease;
}

.hoverline:hover::before {
transform: scaleX(1);
}

.skinny-scroll {
scrollbar-width: thin;
scrollbar-color: var(--c2) var(--c1);
}

/* Chrome, Edge, and Safari */
.skinny-scroll::-webkit-scrollbar {
width: 10px;
border-radius: 5px;
}

.skinny-scroll::-webkit-scrollbar-track {
background: var(--c1);
border-radius: 5px;
}
.no-scrollbar {
-ms-overflow-style: none;
scrollbar-width: none;

.skinny-scroll::-webkit-scrollbar-thumb {
background-color: var(--c2);
border-radius: 5px;
}

}
84 changes: 71 additions & 13 deletions src/output.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -446,6 +446,14 @@ video {
display: none;
}

iframe {
--scalar: 1;
transform: scale(var(--scalar));
transform-origin: top left;
width: calc(1/var(--scalar) * 100%);
height: calc(1/var(--scalar) * 100%);
}

*, ::before, ::after {
--tw-border-spacing-x: 0;
--tw-border-spacing-y: 0;
Expand Down Expand Up @@ -576,14 +584,6 @@ main > section {
color: rgb(9 9 11 / var(--tw-text-opacity));
}

main h3 {
margin-top: 1rem;
margin-bottom: 1rem;
font-size: 1.5rem;
line-height: 2rem;
font-weight: 700;
}

main li {
margin-bottom: 4px;
}
Expand Down Expand Up @@ -612,9 +612,19 @@ main li {
scrollbar-width: none;
}

.my-8 {
margin-top: 2rem;
margin-bottom: 2rem;
/* Chrome, Edge, and Safari */

.absolute {
position: absolute;
}

.relative {
position: relative;
}

.my-2 {
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}

.mb-4 {
Expand All @@ -633,6 +643,26 @@ main li {
margin-right: 1rem;
}

.mt-8 {
margin-top: 2rem;
}

.mt-9 {
margin-top: 2.25rem;
}

.mt-10 {
margin-top: 2.5rem;
}

.mt-16 {
margin-top: 4rem;
}

.mt-14 {
margin-top: 3.5rem;
}

.inline {
display: inline;
}
Expand All @@ -653,6 +683,18 @@ main li {
height: 100vh;
}

.h-\[calc\(100\%-\)\] {
height: calc(100% - );
}

.h-\[calc\(100\%-9rem\)\] {
height: calc(100% - 9rem);
}

.h-full {
height: 100%;
}

.min-h-\[80vh\] {
min-height: 80vh;
}
Expand All @@ -661,8 +703,16 @@ main li {
width: 100vw;
}

.snap-x {
scroll-snap-type: x var(--tw-scroll-snap-strictness);
.w-full {
width: 100%;
}

.grow {
flex-grow: 1;
}

.snap-y {
scroll-snap-type: y var(--tw-scroll-snap-strictness);
}

.snap-mandatory {
Expand All @@ -685,6 +735,10 @@ main li {
justify-content: center;
}

.justify-between {
justify-content: space-between;
}

.gap-2 {
gap: 0.5rem;
}
Expand All @@ -697,6 +751,10 @@ main li {
overflow: auto;
}

.scroll-smooth {
scroll-behavior: smooth;
}

.rounded-xl {
border-radius: 0.75rem;
}
Expand Down
Loading

0 comments on commit 9e8b848

Please sign in to comment.