Skip to content

Commit

Permalink
Merge pull request #117 from 0nikhilkumar/new-branch
Browse files Browse the repository at this point in the history 
Add- Adding dark mode to website #112
  • Loading branch information
@jofftiquez
jofftiquez authored Oct 13, 2023
2 parents 230d985 + 1460840 commit 1dcec9b
Show file tree
Hide file tree
Showing 4 changed files with 73 additions and 78 deletions.
Binary file added images/moon.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/sun.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 2 additions & 2 deletions index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2448,9 +2448,9 @@ video {
content: var(--tw-content);
}

.\[a-zA-Z0-9\:\\\\-\\\\\._\$\] {
/* .\[a-zA-Z0-9\:\\\\-\\\\\._\$\] {
a-z-a--z0-9: \\-\\. $;
}
} */

@media (min-width: 640px) {
.sm\:container {
Expand Down
147 changes: 71 additions & 76 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,11 @@
<meta property="og:title" content="OSSPH Freefolio" />
<meta
property="og:description"
content="100% FREE Professional Portfolio Templates"
/>
content="100% FREE Professional Portfolio Templates" />
<meta property="og:type" content="website" />
<meta
property="og:image"
content="https://i.postimg.cc/85rXg2LD/oss-ph-og.png"
/>
content="https://i.postimg.cc/85rXg2LD/oss-ph-og.png" />
<meta property="og:image:type" content="image/png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
Expand All @@ -22,208 +20,194 @@
<meta name="twitter:title" content="OSSPH Freefolio" />
<meta
name="twitter:description"
content="100% FREE Professional Portfolio Templates"
/>
content="100% FREE Professional Portfolio Templates" />
<title>Freefolio by OSSPH</title>
<link rel="shortcut icon" href="./clean/img/logo.svg" type="image/x-icon" />
<link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet" />
<script src="https://cdn.tailwindcss.com"></script>
</head>

<script>
tailwind.config = {
darkMode: "class",
};
</script>

<body class="bg-violet-200 text-violet-800">
<header class="bg-violet-500">
<header class="bg-violet-500 dark:bg-[#271d3a]">
<div
class="container mx-auto px-5 py-8 flex flex-row flex-wrap gap-4 justify-between items-center"
>
class="container mx-auto px-5 py-8 flex flex-row flex-wrap gap-4 justify-between items-center">
<a href="https://ossph.org/" target="_blank"
><img
class="h-14"
src="./images/osslogo-text-white.png"
alt="OSSPH logo"
/></a>
<div class="flex items-center gap-4">
<h1 class="text-violet-900 text-3xl lg:text-5xl font-black">
<h1
class="text-violet-900 text-3xl lg:text-5xl font-black dark:text-white">
Freefolio
</h1>
<div class="bg-red-100 h-[10px] w-[10px] rounded-full"></div>
<div class="bg-red-100 h-[10px] w-[10px] rounded-full mt-3"></div>
<a
href="https://github.com/OSSPhilippines/freefolio"
class="text-violet-900 text-3xl lg:text-5xl font-black"
>
class="text-violet-900 text-3xl lg:text-5xl font-black dark:text-white">
GitHub
</a>
<img
src="./images/moon.png"
alt="sun image"
id="theme-toggle"
class="border rounded-md text-center p-1 w-9 mr-4 mt-2 dark:w-8 transition-all transition-duration: 150ms; flex-1 align-center justify-center cursor-pointer hover:scale-[1.4] hover:bg-black" />
</div>
</div>
</header>

<main>
<div class="container mx-auto px-5 py-24 grid md:grid-cols-2 gap-12">
<main class="dark:bg-[#201c29]">
<div
class="container mx-auto px-5 py-24 grid md:grid-cols-2 gap-12">
<a
href="hacker"
class="relative bottom-0 hover:bottom-2 hover:transition-all"
class="relative bottom-0 hover:bottom-2 hover:transition-all"
target="_blank"
data-aos="fade-up"
>
data-aos="fade-up">
<img
src="./images/hacker.png"
alt="Hacker folio"
class="rounded-md shadow object-cover aspect-video"
/>
<h2 class="text-3xl font-bold mt-2">Hacker</h2>
class="rounded-md shadow object-cover aspect-video" />
<h2 class="text-3xl font-bold mt-2 dark:text-white">Hacker</h2>
</a>

<a
href="indify"
class="relative bottom-0 hover:bottom-2 hover:transition-all"
target="_blank"
data-aos="fade-up"
>
data-aos="fade-up">
<img
src="./images/indify.png"
alt="Indify folio img"
class="rounded-md shadow object-cover w-full aspect-video"
/>
<h2 class="text-3xl font-bold mt-2">Indify</h2>
class="rounded-md shadow object-cover w-full aspect-video" />
<h2 class="text-3xl font-bold mt-2 dark:text-white">Indify</h2>
</a>

<a
href="plain"
class="relative bottom-0 hover:bottom-2 hover:transition-all"
target="_blank"
data-aos="fade-up"
>
data-aos="fade-up">
<img
src="./images/plain.png"
alt="Plain folio"
class="rounded-md shadow object-cover w-full aspect-video"
/>
<h2 class="text-3xl font-bold mt-2">Plain</h2>
class="rounded-md shadow object-cover w-full aspect-video" />
<h2 class="text-3xl font-bold mt-2 dark:text-white">Plain</h2>
</a>

<a
href="clean"
class="relative bottom-0 hover:bottom-2 hover:transition-all"
target="_blank"
data-aos="fade-up"
>
data-aos="fade-up">
<img
src="./images/clean.png"
alt="Clean folio"
class="rounded-md shadow object-cover w-full aspect-video"
/>
<h2 class="text-3xl font-bold mt-2">Clean</h2>
class="rounded-md shadow object-cover w-full aspect-video" />
<h2 class="text-3xl font-bold mt-2 dark:text-white">Clean</h2>
</a>

<a
href="beginner"
class="relative bottom-0 hover:bottom-2 hover:transition-all"
target="_blank"
data-aos="fade-up"
>
data-aos="fade-up">
<img
src="./images/beginner.png"
alt="Beginner folio"
class="rounded-md shadow object-cover w-full aspect-video"
/>
<h2 class="text-3xl font-bold mt-2">Beginner</h2>
class="rounded-md shadow object-cover w-full aspect-video" />
<h2 class="text-3xl font-bold mt-2 dark:text-white">Beginner</h2>
</a>

<a
href="outlines"
class="relative bottom-0 hover:bottom-2 hover:transition-all"
target="_blank"
data-aos="fade-up"
>
data-aos="fade-up">
<img
src="./images/outlines.png"
alt="Outlines folio"
class="rounded-md shadow object-cover w-full aspect-video"
/>
<h2 class="text-3xl font-bold mt-2">Outlines</h2>
class="rounded-md shadow object-cover w-full aspect-video" />
<h2 class="text-3xl font-bold mt-2 dark:text-white">Outlines</h2>
</a>

<a
href="simple"
class="relative bottom-0 hover:bottom-2 hover:transition-all"
target="_blank"
data-aos="fade-up"
>
data-aos="fade-up">
<img
src="./images/simple.PNG"
alt="Simple folio"
class="rounded-md shadow object-cover w-full aspect-video"
/>
<h2 class="text-3xl font-bold mt-2">Simple</h2>
class="rounded-md shadow object-cover w-full aspect-video" />
<h2 class="text-3xl font-bold mt-2 dark:text-white">Simple</h2>
</a>

<a
href="deepsea"
class="relative bottom-0 hover:bottom-2 hover:transition-all"
target="_blank"
data-aos="fade-up"
>
data-aos="fade-up">
<img
src="./images/deepsea.png"
alt="Deepsea folio"
class="rounded-md shadow object-cover w-full aspect-video"
/>
<h2 class="text-3xl font-bold mt-2">Deep Sea</h2>
class="rounded-md shadow object-cover w-full aspect-video" />
<h2 class="text-3xl font-bold mt-2 dark:text-white">Deep Sea</h2>
</a>

<a
href="dark-hack"
class="relative bottom-0 hover:bottom-2 hover:transition-all"
target="_blank"
data-aos="fade-up"
>
data-aos="fade-up">
<img
src="./images/dark-hack.png"
alt="Dark Hack folio"
class="rounded-md shadow object-cover w-full aspect-video"
/>
<h2 class="text-3xl font-bold mt-2">Dark Hack</h2>
class="rounded-md shadow object-cover w-full aspect-video" />
<h2 class="text-3xl font-bold mt-2 dark:text-white">Dark Hack</h2>
</a>

<a
href="ingolfur"
class="relative bottom-0 hover:bottom-2 hover:transition-all"
target="_blank"
data-aos="fade-up"
>
data-aos="fade-up">
<img
src="./images/ingolfur.png"
alt="Ingólfur"
class="rounded-md shadow object-cover w-full aspect-video"
/>
<h2 class="text-3xl font-bold mt-2">Ingólfur</h2>
class="rounded-md shadow object-cover w-full aspect-video" />
<h2 class="text-3xl font-bold mt-2 dark:text-white">Ingólfur</h2>
</a>

<a
href="anime"
class="relative bottom-0 hover:bottom-2 hover:transition-all"
target="_blank"
data-aos="fade-up"
>
data-aos="fade-up">
<img
src="./images/anime.png"
alt="Anime"
class="rounded-md shadow object-cover w-full aspect-video"
/>
<h2 class="text-3xl font-bold mt-2">Anime</h2>
class="rounded-md shadow object-cover w-full aspect-video" />
<h2 class="text-3xl font-bold mt-2 dark:text-white">Anime</h2>
</a>

<a
href="easy"
class="relative bottom-0 hover:bottom-2 hover:transition-all"
target="_blank"
data-aos="fade-up"
>
data-aos="fade-up">
<img
src="./images/easy.png"
alt="Anime"
class="rounded-md shadow object-cover w-full aspect-video"
/>
<h2 class="text-3xl font-bold mt-2">easy</h2>
class="rounded-md shadow object-cover w-full aspect-video" />
<h2 class="text-3xl font-bold mt-2 dark:text-white">easy</h2>
</a>
</div>
</main>
Expand All @@ -235,5 +219,16 @@ <h2 class="text-3xl font-bold mt-2">easy</h2>
delay: 0,
});
</script>
<script>
var theme_toggle = document.getElementById("theme-toggle");
theme_toggle.addEventListener("click", () => {
document.body.classList.toggle("dark");
if (document.body.classList.contains("dark")) {
theme_toggle.src = "./images/sun.png";
} else {
theme_toggle.src = "./images/moon.png";
}
});
</script>
</body>
</html>

0 comments on commit 1dcec9b

Please sign in to comment.