Skip to content

Commit 7baf250

Browse files
ajay-dhangarajay-dhangar
committed
tailwind css added
1 parent b9d146c commit 7baf250

File tree

15 files changed

+442
-131
lines changed

15 files changed

+442
-131
lines changed

‎.yarn/install-state.gz

45.3 KB
Binary file not shown.

‎docusaurus.config.js

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
// @ts-check
22
// Note: type annotations allow type checking and IDEs autocompletion
33
const path = require("path");
4+
const tailwindPlugin = require("./src/plugins/tailwind-config.cjs");
45
// const lightCodeTheme = require("prism-react-renderer/themes/github");
56
const darkCodeTheme = require("prism-react-renderer/themes/vsDark");
67
module.exports = async function createConfigAsync() {
@@ -11,7 +12,8 @@ module.exports = async function createConfigAsync() {
1112
baseUrl: "/",
1213
onBrokenLinks: "throw",
1314
onBrokenMarkdownLinks: "warn",
14-
favicon: "img/favicon.ico",
15+
// favicon: "img/favicon.ico",
16+
favicon: "img/js.svg",
1517
organizationName: "javascript-mastery",
1618
projectName: "JavaScript Mastery",
1719

@@ -31,6 +33,7 @@ module.exports = async function createConfigAsync() {
3133
};
3234
},
3335
"docusaurus-plugin-sass",
36+
tailwindPlugin,
3437
],
3538
presets: [
3639
[
@@ -70,11 +73,11 @@ module.exports = async function createConfigAsync() {
7073
hideable: true,
7174
},
7275
},
73-
algolia: {
74-
appId: "NIXA4HHO8S",
75-
apiKey: "0e434f5d05dd96ad91008f11f2903066",
76-
indexName: "our-index",
77-
},
76+
// algolia: {
77+
// appId: "NIXA4HHO8S",
78+
// apiKey: "0e434f5d05dd96ad91008f11f2903066",
79+
// indexName: "our-index",
80+
// },
7881
navbar: {
7982
title: "JavaScript Mastery",
8083
hideOnScroll: true,

‎package.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,10 @@
5050
"devDependencies": {
5151
"@docusaurus/module-type-aliases": "3.0.0-beta.0",
5252
"@docusaurus/tsconfig": "3.0.0-beta.0",
53+
"autoprefixer": "^10.4.20",
54+
"postcss": "^8.4.47",
5355
"prettier": "^2.5.1",
56+
"tailwindcss": "^3.4.14",
5457
"typescript": "~5.2.2"
5558
}
5659
}

‎src/components/Home/About.tsx

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import React from 'react';
2+
3+
const About: React.FC = () => {
4+
return (
5+
<section className="py-16 bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200">
6+
<div className="container mx-auto px-4">
7+
<h2 className="text-3xl lg:text-4xl font-bold text-center mb-8">
8+
About JavaScript Mastery
9+
</h2>
10+
<p className="text-lg lg:text-xl text-center mb-6">
11+
At JavaScript Mastery, we believe in empowering learners to become proficient in JavaScript through engaging and interactive learning experiences.
12+
</p>
13+
<div className="flex flex-col lg:flex-row justify-center items-start">
14+
<div className="max-w-sm lg:max-w-md mx-auto mb-6 lg:mb-0 lg:mr-6 p-6 bg-gray-100 dark:bg-gray-700 rounded-lg shadow-md">
15+
<h3 className="text-xl font-semibold mb-3">Interactive Learning</h3>
16+
<p>
17+
Dive into hands-on projects that help solidify your understanding of JavaScript concepts and techniques.
18+
</p>
19+
</div>
20+
<div className="max-w-sm lg:max-w-md mx-auto mb-6 lg:mb-0 lg:mr-6 p-6 bg-gray-100 dark:bg-gray-700 rounded-lg shadow-md">
21+
<h3 className="text-xl font-semibold mb-3">Community Support</h3>
22+
<p>
23+
Join a vibrant community of learners and experienced developers who are eager to share knowledge and support each other.
24+
</p>
25+
</div>
26+
<div className="max-w-sm lg:max-w-md mx-auto mb-6 lg:mb-0 lg:mr-6 p-6 bg-gray-100 dark:bg-gray-700 rounded-lg shadow-md">
27+
<h3 className="text-xl font-semibold mb-3">Flexible Learning Path</h3>
28+
<p>
29+
Choose your own learning journey, whether you're starting from scratch or looking to deepen your existing skills.
30+
</p>
31+
</div>
32+
</div>
33+
</div>
34+
</section>
35+
);
36+
};
37+
38+
export default About;

‎src/components/Home/Hero.tsx

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import React from 'react';
2+
import Link from '@docusaurus/Link';
3+
4+
const Hero: React.FC = () => {
5+
return (
6+
<section className="grid grid-cols-1 lg:grid-cols-2 min-h-screen gap-8 items-center bg-gradient-to-br from-[#1f1c2e] to-[#4285f4] text-white px-2 py-10 dark:from-gray-900 dark:to-gray-800 px-4">
7+
<div className="text-center lg:text-left">
8+
<h1 className="text-4xl lg:text-5xl font-bold leading-tight mb-4">
9+
Master JavaScript with <span className="text-yellow-300 dark:text-yellow-400">Confidence</span>
10+
</h1>
11+
<p className="text-lg lg:text-xl opacity-90 mb-6">
12+
Join thousands of learners in mastering JavaScript from basics to advanced topics. Start your journey to becoming a JavaScript pro today!
13+
</p>
14+
<Link to="/docs/">
15+
<button className="px-8 py-3 bg-yellow-300 dark:bg-yellow-500 text-blue-700 dark:text-white font-semibold rounded-lg shadow-lg hover:bg-yellow-400 dark:hover:bg-yellow-600 transition duration-300 ease-in-out transform hover:-translate-y-1 border-none">
16+
Get Started
17+
</button>
18+
</Link>
19+
</div>
20+
21+
<div className="mt-8 lg:mt-0 mx-auto">
22+
<img src="/img/js.svg" alt="JavaScript Learning" className="w-64 lg:w-80" />
23+
</div>
24+
</section>
25+
);
26+
};
27+
28+
export default Hero;

‎src/components/Home/WhyLearnJavaScript.tsx

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
import React from 'react';
2+
3+
const WhyLearnJavaScript: React.FC = () => {
4+
return (
5+
<section className="py-16 bg-gray-50 dark:bg-gray-900 text-gray-800 dark:text-gray-200">
6+
<div className="container mx-auto px-4">
7+
<h2 className="text-3xl lg:text-4xl font-bold text-center mb-8">
8+
Why Learn JavaScript?
9+
</h2>
10+
<p className="text-lg lg:text-xl text-center mb-12">
11+
JavaScript is one of the most popular and versatile programming languages today. Here’s why you should start learning JavaScript:
12+
</p>
13+
14+
<div className="grid grid-cols-1 lg:grid-cols-3 md:grid-cols-2 gap-6">
15+
{/* Feature 1 */}
16+
<div className="p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg hover:shadow-2xl transition-shadow duration-300">
17+
<h3 className="text-xl font-semibold mb-3">High Demand in the Job Market</h3>
18+
<p>
19+
JavaScript skills are highly valued, opening doors to careers in web development, mobile app development, and even backend programming.
20+
</p>
21+
</div>
22+
23+
{/* Feature 2 */}
24+
<div className="p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg hover:shadow-2xl transition-shadow duration-300">
25+
<h3 className="text-xl font-semibold mb-3">Versatility Across Platforms</h3>
26+
<p>
27+
JavaScript powers both frontend and backend development, enabling you to create dynamic websites, server applications, and mobile apps.
28+
</p>
29+
</div>
30+
31+
{/* Feature 3 */}
32+
<div className="p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg hover:shadow-2xl transition-shadow duration-300">
33+
<h3 className="text-xl font-semibold mb-3">Thriving Community and Resources</h3>
34+
<p>
35+
JavaScript has a vast community and extensive resources, providing endless support for both beginners and experienced developers.
36+
</p>
37+
</div>
38+
39+
{/* Feature 4 */}
40+
<div className="p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg hover:shadow-2xl transition-shadow duration-300">
41+
<h3 className="text-xl font-semibold mb-3">Constantly Evolving Language</h3>
42+
<p>
43+
JavaScript continues to grow and adapt with new frameworks and tools, keeping it relevant and exciting in the tech industry.
44+
</p>
45+
</div>
46+
47+
{/* Feature 5 */}
48+
<div className="p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg hover:shadow-2xl transition-shadow duration-300">
49+
<h3 className="text-xl font-semibold mb-3">Foundation for Frontend Frameworks</h3>
50+
<p>
51+
Mastering JavaScript provides a strong foundation for popular frameworks like React, Vue, and Angular, used widely in modern web development.
52+
</p>
53+
</div>
54+
55+
{/* Feature 6 */}
56+
<div className="p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg hover:shadow-2xl transition-shadow duration-300">
57+
<h3 className="text-xl font-semibold mb-3">Enhanced Problem-Solving Skills</h3>
58+
<p>
59+
Learning JavaScript enhances your problem-solving abilities as you build interactive applications and tackle real-world challenges.
60+
</p>
61+
</div>
62+
</div>
63+
</div>
64+
</section>
65+
);
66+
};
67+
68+
export default WhyLearnJavaScript;

‎src/components/HomepageFeatures.js

Lines changed: 0 additions & 65 deletions
This file was deleted.

‎src/components/HomepageFeatures.module.css

Lines changed: 0 additions & 11 deletions
This file was deleted.

‎src/css/custom.css

Lines changed: 4 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
@tailwind base;
2+
@tailwind components;
3+
@tailwind utilities;
4+
15
:root {
26
--ifm-color-primary: #2dbb9d;
37
--ifm-color-primary-dark: rgb(33, 175, 144);
@@ -9,16 +13,6 @@
913
--ifm-code-font-size: 95%;
1014
}
1115

12-
/* :root {
13-
--ifm-color-primary: #2eb9f5;
14-
--ifm-color-primary-dark: #12b0f4;
15-
--ifm-color-primary-darker: #0ba8ec;
16-
--ifm-color-primary-darkest: #098bc2;
17-
--ifm-color-primary-light: #4ac2f6;
18-
--ifm-color-primary-lighter: #58c7f7;
19-
--ifm-color-primary-lightest: #81d5f9;
20-
} */
21-
2216
[data-theme="dark"] {
2317
--ifm-color-primary: #70d4ff;
2418
--ifm-color-primary-dark: #4bc9ff;

‎src/pages/about/_assets/me.jpg

-156 KB
Binary file not shown.

‎src/pages/index.js

Lines changed: 6 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -3,40 +3,19 @@ import clsx from "clsx";
33
import Layout from "@theme/Layout";
44
import Link from "@docusaurus/Link";
55
import styles from "./index.module.css";
6-
import HomepageFeatures from "../components/HomepageFeatures";
7-
//
8-
function HomepageHeader() {
9-
return (
10-
<header className={clsx("hero hero--primary", styles.heroBanner)}>
11-
<div className="container">
12-
<h1 className="hero__title">Xiaohai's Mind Palace</h1>
13-
<p className="hero__subtitle">
14-
A place for organizing <b>notes</b>, writing <b>blogs</b>, and
15-
showcasing <b>projects</b>.
16-
</p>
17-
<div className={styles.buttons}>
18-
<Link className="button button--secondary button--lg" to="/docs">
19-
📘 View Notes
20-
</Link>
21-
<Link className="button button--secondary button--lg" to="/about">
22-
👨‍🏭 View Resume
23-
</Link>
24-
</div>
25-
</div>
26-
</header>
27-
);
28-
}
6+
import Hero from "@src/components/Home/Hero";
7+
import About from "@src/components/Home/About";
8+
import WhyLearnJavaScript from "@src/components/Home/WhyLearnJavaScript";
299

3010
export default function Home() {
3111
return (
3212
<Layout
3313
title="Home"
3414
description="Xiaohai's Mind Palace. A place for organizing notes across multiple domains. A place for writing blogs. A place for showcasing projects."
3515
>
36-
<HomepageHeader />
37-
<main>
38-
<HomepageFeatures />
39-
</main>
16+
<Hero />
17+
<About />
18+
<WhyLearnJavaScript />
4019
</Layout>
4120
);
4221
}

‎src/plugins/tailwind-config.cjs

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
function tailwindPlugin(context, options) {
2+
return {
3+
name: 'tailwind-plugin',
4+
configurePostCss(postcssOptions) {
5+
postcssOptions.plugins = [
6+
require('postcss-import'),
7+
require('tailwindcss'),
8+
require('autoprefixer'),
9+
];
10+
return postcssOptions;
11+
},
12+
};
13+
}
14+
15+
module.exports = tailwindPlugin;

‎static/img/favicon.ico

-12.6 KB
Binary file not shown.

‎tailwind.config.js

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
const { fontFamily } = require("tailwindcss/defaultTheme");
2+
/** @type {import('tailwindcss').Config} */
3+
module.exports = {
4+
corePlugins: {
5+
preflight: false,
6+
container: false,
7+
},
8+
darkMode: ["class", '[data-theme="dark"]'],
9+
content: ["./src/**/*.{jsx,tsx,html}"],
10+
theme: {
11+
extend: {
12+
fontFamily: {
13+
sans: ['"Inter"', ...fontFamily.sans],
14+
jakarta: ['"Plus Jakarta Sans"', ...fontFamily.sans],
15+
mono: ['"Fira Code"', ...fontFamily.mono],
16+
},
17+
borderRadius: {
18+
sm: "4px",
19+
},
20+
screens: {
21+
sm: "0px",
22+
lg: "997px",
23+
},
24+
colors: {},
25+
},
26+
},
27+
plugins: [],
28+
};

0 commit comments

Comments
 (0)