Skip to content

Commit e827fbc

Browse files
Rathanak-PhanRathanak-Phan
committed
Update commite
1 parent 04ef54c commit e827fbc

File tree

6 files changed

+176
-69
lines changed

6 files changed

+176
-69
lines changed

‎src/assets/bg-rupp.png‎

320 KB
Loading

‎src/components/Header.vue‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,8 @@
1010
<!-- Desktop Navigation -->
1111
<nav class="hidden md:flex space-x-6">
1212
<router-link to="/" class="text-gray-700 hover:text-indigo-600 dark:text-gray-300 dark:hover:text-indigo-400">Home</router-link>
13-
<router-link to="/description" class="text-gray-700 hover:text-indigo-600 dark:text-gray-300 dark:hover:text-indigo-400">Concept</router-link>
14-
<router-link to="/demo" class="text-gray-700 hover:text-indigo-600 dark:text-gray-300 dark:hover:text-indigo-400">Demo</router-link>
13+
<router-link to="/concept" class="text-gray-700 hover:text-indigo-600 dark:text-gray-300 dark:hover:text-indigo-400">Concept</router-link>
14+
<router-link to="/demos" class="text-gray-700 hover:text-indigo-600 dark:text-gray-300 dark:hover:text-indigo-400">Demo</router-link>
1515
<router-link to="/about" class="text-gray-700 hover:text-indigo-600 dark:text-gray-300 dark:hover:text-indigo-400">About</router-link>
1616
<div class="items-center space-x-4 text-gray-700 dark:text-gray-300">
1717
<Theme />
@@ -38,11 +38,11 @@
3838
</div>
3939

4040
<!-- Mobile Navigation -->
41-
<div v-if="isOpen" class="md:hidden px-4 pb-4 bg-white dark:bg-gray-900">
41+
<div v-if="isOpen" class="md:hidden px-4 pb-4 bg-gray-50 dark:bg-gray-800">
4242
<nav class="flex flex-col space-y-2">
4343
<router-link to="/" @click="closeMenu" class="text-gray-700 hover:text-indigo-600 dark:text-gray-300 dark:hover:text-indigo-400">Home</router-link>
44-
<router-link to="/description" @click="closeMenu" class="text-gray-700 hover:text-indigo-600 dark:text-gray-300 dark:hover:text-indigo-400">Concept</router-link>
45-
<router-link to="/demo" @click="closeMenu" class="text-gray-700 hover:text-indigo-600 dark:text-gray-300 dark:hover:text-indigo-400">Demo</router-link>
44+
<router-link to="/concept" @click="closeMenu" class="text-gray-700 hover:text-indigo-600 dark:text-gray-300 dark:hover:text-indigo-400">Concept</router-link>
45+
<router-link to="/demos" @click="closeMenu" class="text-gray-700 hover:text-indigo-600 dark:text-gray-300 dark:hover:text-indigo-400">Demo</router-link>
4646
<router-link to="/about" @click="closeMenu" class="text-gray-700 hover:text-indigo-600 dark:text-gray-300 dark:hover:text-indigo-400">About</router-link>
4747
</nav>
4848
</div>
@@ -63,3 +63,7 @@ function closeMenu() {
6363
isOpen.value = false
6464
}
6565
</script>
66+
67+
<style lang="css">
68+
/* Add your component-specific styles here if needed */
69+
</style>

‎src/components/UniversityHero.vue‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
<template>
2+
<section
3+
class="max-w-7xl mx-auto px-1 sm:px-6 lg:px-8 py-12 text-center duration-300 ease-in-out"
4+
>
5+
<div
6+
class="relative w-full border-2 border-gray-300 dark:border-gray-700 rounded-2xl overflow-hidden py-8 sm:py-12 md:py-16 lg:py-20 shadow-lg"
7+
>
8+
<!-- Background image layer -->
9+
<div
10+
class="absolute inset-0 bg-[url('./src/assets/bg-rupp.png')] bg-cover bg-center opacity-40 dark:opacity-20"
11+
aria-hidden="true"
12+
></div>
13+
14+
<!-- Content layer -->
15+
<div
16+
class="relative w-full max-w-6xl mx-auto text-black dark:text-white z-10"
17+
>
18+
<div
19+
class="flex flex-col sm:flex-row items-center justify-center gap-6 mb-8"
20+
>
21+
<img
22+
class="w-24 h-24 sm:w-28 sm:h-28 md:w-32 md:h-32 lg:w-36 lg:h-36 object-contain"
23+
src="/logo.png"
24+
alt="Royal University of Phnom Penh logo"
25+
loading="lazy"
26+
/>
27+
<div class="text-center sm:text-left">
28+
<h1
29+
class="text-3xl sm:text-4xl md:text-5xl lg:text-6xl khmer-moul font-bold tracking-tight"
30+
>
31+
សាកលវិទ្យាល័យភូមិន្ទភ្នំពេញ
32+
</h1>
33+
<p
34+
class="text-xl sm:text-2xl md:text-3xl lg:text-4xl eb-garamond font-semibold mt-2"
35+
>
36+
Royal University of Phnom Penh
37+
</p>
38+
</div>
39+
</div>
40+
<hr class="border-t-2 border-gray-700 dark:border-gray-200 my-6" />
41+
<p
42+
class="text-base sm:text-lg md:text-xl max-w-4xl mx-auto leading-relaxed"
43+
>
44+
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Non a
45+
repudiandae, explicabo nulla eaque sequi amet, sunt eius architecto,
46+
magnam sapiente ipsam quibusdam voluptatibus at quos? Dicta hic
47+
perferendis pariatur ipsam, minima ut dolorum similique accusantium
48+
vero ex, est inventore laboriosam esse molestiae explicabo numquam
49+
quidem recusandae totam suscipit molestias maiores natus quasi
50+
blanditiis. Adipisci ut esse sunt doloribus dolores unde, commodi
51+
eveniet? At facilis ab iure odio. Dolorem consequuntur cum, odit
52+
deleniti velit ipsam. Eius saepe minima vitae similique, ipsam
53+
voluptatum tempora ipsum qui delectus? Enim, assumenda sit! Quam, eius
54+
fuga! Esse molestias est cumque nam, eaque corporis neque!
55+
</p>
56+
<hr class="border-t-2 border-gray-700 dark:border-gray-200 my-6" />
57+
<p class="text-base text-gray-700 font-sans">
58+
<strong class="text-red-500">Reference:</strong>
59+
<a
60+
href="https://www.geeksforgeeks.org/number-theory-used-in-cryptography/"
61+
target="_blank"
62+
class="text-blue-600 hover:text-blue-800 underline-offset-2 hover:underline transition-colors"
63+
>
64+
Number Theory used in Cryptography - GeeksforGeeks
65+
</a>
66+
</p>
67+
</div>
68+
</div>
69+
</section>
70+
</template>

‎src/router/index.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ const routes = [
77
{ path: '/number-theory', component: () => import('../views/NumberTheory.vue') },
88
// { path: '/cryptography', component: () => import('../views/Cryptography.vue') },
99
// { path: '/demos', component: () => import('../views/Demo.vue') },
10-
// { path: '/about', component: About }
10+
// { path: '/about', component: () => import('../views/About.vue') },
1111
]
1212

1313
const router = createRouter({

‎src/views/About.vue‎

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
<template>
2+
<div class="min-h-screen bg-white dark:bg-gray-900 text-gray-800 dark:text-gray-200 transition-colors duration-300 ease-in-out">
3+
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 duration-300 ease-in-out">
4+
<h1 class="text-4xl text-center font-bold mb-8 text-blue-600 dark:text-blue-400">About This Website</h1>
5+
6+
<!-- Header Section -->
7+
<UniversityHero />
8+
9+
<!-- Introduction -->
10+
<section class="mb-12">
11+
<h2 class="text-2xl font-semibold mb-4 text-indigo-600 dark:text-indigo-300">Purpose & Vision</h2>
12+
<p class="leading-relaxed text-gray-800 dark:text-gray-300 mb-4">
13+
This site is designed to provide a clear and interactive introduction to
14+
<strong class="dark:text-white">Number Theory</strong> and its applications in
15+
<strong class="dark:text-white">Cryptography</strong>. Whether you're a student, a hobbyist, or just curious,
16+
our goal is to make complex mathematical ideas understandable and engaging.
17+
</p>
18+
19+
<div class="bg-blue-50 dark:bg-blue-900/20 border-l-4 border-blue-500 p-4 rounded">
20+
<h3 class="font-semibold mb-2 text-blue-800 dark:text-blue-300">What You'll Learn:</h3>
21+
<ul class="list-disc list-inside text-gray-700 dark:text-gray-400 space-y-1">
22+
<li>Basic Number Theory concepts</li>
23+
<li>How prime numbers work</li>
24+
<li>Modular arithmetic and congruence</li>
25+
<li>GCD, LCM, and algorithms like Euclidean algorithm</li>
26+
<li>Applications in real-world cryptography</li>
27+
</ul>
28+
</div>
29+
</section>
30+
31+
<!-- Technologies -->
32+
<section class="mb-12">
33+
<h2 class="text-2xl font-semibold mb-4 text-indigo-600 dark:text-indigo-300">Technologies Used</h2>
34+
<div class="grid md:grid-cols-2 gap-6">
35+
<div class="bg-green-50 dark:bg-green-900/20 border-l-4 border-green-500 p-4 rounded">
36+
<h3 class="font-semibold mb-2 text-green-800 dark:text-green-300">Frontend</h3>
37+
<ul class="list-disc list-inside text-sm text-gray-700 dark:text-gray-400 space-y-1">
38+
<li>Vue.js for reactive UI</li>
39+
<li>Tailwind CSS for modern styling and dark mode</li>
40+
</ul>
41+
</div>
42+
<div class="bg-yellow-50 dark:bg-yellow-900/20 border-l-4 border-yellow-500 p-4 rounded">
43+
<h3 class="font-semibold mb-2 text-yellow-800 dark:text-yellow-300">Features</h3>
44+
<ul class="list-disc list-inside text-sm text-gray-700 dark:text-gray-400 space-y-1">
45+
<li>Dark/light theme switching</li>
46+
<li>Responsive layout for desktop and mobile</li>
47+
<li>Interactive number theory tools</li>
48+
</ul>
49+
</div>
50+
</div>
51+
</section>
52+
53+
<!-- Author Info -->
54+
<section class="mb-12">
55+
<h2 class="text-2xl font-semibold mb-4 text-indigo-600 dark:text-indigo-300">About the Creator</h2>
56+
<div class="bg-purple-50 dark:bg-purple-900/20 border-l-4 border-purple-500 p-4 rounded">
57+
<p class="leading-relaxed text-gray-800 dark:text-gray-300">
58+
Hi! I'm <strong class="dark:text-white">Rathanak Phan</strong>, a second-year Information Technology Engineering student at the
59+
<strong class="dark:text-white">Royal University of Phnom Penh</strong>. I created this website as a way to explore the
60+
mathematical foundations of cryptography while learning modern web development with Vue.js.
61+
</p>
62+
<p class="mt-3 text-sm text-gray-700 dark:text-gray-400">
63+
I hope this site inspires you to dive deeper into the beauty of mathematics and its role in technology!
64+
</p>
65+
</div>
66+
</section>
67+
68+
<!-- Closing -->
69+
<section class="text-center">
70+
<p class="text-gray-700 dark:text-gray-400">
71+
Thank you for visiting. Stay curious, and keep exploring!
72+
</p>
73+
</section>
74+
</div>
75+
</div>
76+
</template>
77+
78+
<script>
79+
import UniversityHero from '../components/UniversityHero.vue';
80+
81+
export default {
82+
name: "About",
83+
components: {
84+
UniversityHero
85+
},
86+
mounted() {
87+
document.title = "About | Number Theory Fundamentals";
88+
},
89+
};
90+
</script>

‎src/views/Home.vue‎

Lines changed: 6 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -3,69 +3,7 @@
33
class="min-h-screen bg-white dark:bg-gray-900 text-gray-800 dark:text-gray-200 transition-colors duration-300 ease-in-out"
44
>
55
<!-- Header Section -->
6-
<section
7-
class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 text-center duration-300 ease-in-out"
8-
>
9-
<div
10-
class="relative w-full border-2 border-gray-300 dark:border-gray-700 rounded-2xl overflow-hidden py-8 sm:py-12 md:py-16 lg:py-20 shadow-lg"
11-
>
12-
<!-- Background image layer -->
13-
<div
14-
class="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1457369804613-52c61a468e7d?q=80&w=2070&auto=format&fit=crop')] bg-cover bg-center opacity-40 dark:opacity-20"
15-
aria-hidden="true"
16-
></div>
17-
18-
<!-- Content layer -->
19-
<div
20-
class="relative w-full max-w-6xl mx-auto text-black dark:text-white z-10"
21-
>
22-
<div
23-
class="flex flex-col sm:flex-row items-center justify-center gap-6 mb-8"
24-
>
25-
<img
26-
class="w-24 h-24 sm:w-28 sm:h-28 md:w-32 md:h-32 lg:w-36 lg:h-36 object-contain"
27-
src="/logo.png"
28-
alt="Royal University of Phnom Penh logo"
29-
loading="lazy"
30-
/>
31-
<div class="text-center sm:text-left">
32-
<h1
33-
class="text-3xl sm:text-4xl md:text-5xl lg:text-6xl khmer-moul font-bold tracking-tight"
34-
>
35-
សាកលវិទ្យាល័យភូមិន្ទភ្នំពេញ
36-
</h1>
37-
<p
38-
class="text-xl sm:text-2xl md:text-3xl lg:text-4xl eb-garamond font-semibold mt-2"
39-
>
40-
Royal University of Phnom Penh
41-
</p>
42-
</div>
43-
</div>
44-
<hr class="border-t-2 border-gray-700 dark:border-gray-200 my-6" />
45-
<p
46-
class="text-base sm:text-lg md:text-xl max-w-4xl mx-auto leading-relaxed"
47-
>
48-
Established in 1960, the Royal University of Phnom Penh (RUPP) is
49-
Cambodia's leading institution for higher education, fostering
50-
academic excellence and research in diverse fields. Committed to
51-
innovation and cultural preservation, RUPP prepares students to
52-
contribute to global and local challenges with knowledge and
53-
integrity.
54-
</p>
55-
<hr class="border-t-2 border-gray-700 dark:border-gray-200 my-6" />
56-
<p class="text-base text-gray-700 font-sans">
57-
<strong class="text-red-500">Reference:</strong>
58-
<a
59-
href="https://www.geeksforgeeks.org/number-theory-used-in-cryptography/"
60-
target="_blank"
61-
class="text-blue-600 hover:text-blue-800 underline-offset-2 hover:underline transition-colors"
62-
>
63-
Number Theory used in Cryptography - GeeksforGeeks
64-
</a>
65-
</p>
66-
</div>
67-
</div>
68-
</section>
6+
<UniversityHero />
697

708
<!-- Welcome Section -->
719
<section
@@ -237,9 +175,14 @@
237175

238176
<script>
239177
import Carousel from "../components/Carousel.vue";
178+
import UniversityHero from "../components/UniversityHero.vue";
240179
241180
export default {
242181
name: "Home",
182+
components: {
183+
Carousel,
184+
UniversityHero,
185+
},
243186
mounted() {
244187
document.title = "Home | Number Theory Fundamentals";
245188
},

0 commit comments

Comments
 (0)