Skip to content

Commit 3793830

Browse files
author
thaycacac
committed
init project
0 parents  commit 3793830

File tree

81 files changed

+15856
-0
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

81 files changed

+15856
-0
lines changed

‎.env.local

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
NEXT_PUBLIC_CONTENTFUL_SPACE_ID=78d70ugf4iny
2+
NEXT_PUBLIC_CONTENTFUL_ACCESS_TOKEN=TneO9uepmjC4LY4zEqui7D8Gbz5UHwZrKBSreymrzLA

‎.eslintrc.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"extends": "next/core-web-vitals"
3+
}

‎.gitignore

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2+
3+
# dependencies
4+
/node_modules
5+
/.pnp
6+
.pnp.js
7+
8+
# testing
9+
/coverage
10+
11+
# next.js
12+
/.next/
13+
/out/
14+
15+
# production
16+
/build
17+
18+
# misc
19+
.DS_Store
20+
*.pem
21+
22+
# debug
23+
npm-debug.log*
24+
yarn-debug.log*
25+
yarn-error.log*
26+
27+
# local env files
28+
# .env.local
29+
.env.development.local
30+
.env.test.local
31+
.env.production.local
32+
33+
# vercel
34+
.vercel

‎README.md

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
2+
3+
## Getting Started
4+
5+
First, run the development server:
6+
7+
```bash
8+
npm run dev
9+
# or
10+
yarn dev
11+
```
12+
13+
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
14+
15+
You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
16+
17+
[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.
18+
19+
The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
20+
21+
## Learn More
22+
23+
To learn more about Next.js, take a look at the following resources:
24+
25+
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
26+
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
27+
28+
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
29+
30+
## Deploy on Vercel
31+
32+
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
33+
34+
Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

‎components/About/About.component.tsx

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
import Link from "next/link";
2+
import React from "react";
3+
import Style from "./About.module.scss";
4+
import InfoHeader from "../InfoHeader/InfoHeader.component";
5+
// import HorizontalBanner from "../../component/GAdsense/HorizontalBanner";
6+
7+
export default function About() {
8+
return (
9+
<section className={Style["about-section"]}>
10+
<div className={Style["about-wrapper"]}>
11+
{/* <HorizontalBanner /> */}
12+
<InfoHeader title="About" />
13+
<p>
14+
<span role="img" aria-label="hand">
15+
👉
16+
</span>{" "}
17+
<b>TechMely</b> là blog{" "}
18+
<Link href="/creator/">
19+
<a className="link">mình</a>
20+
</Link>{" "}
21+
tạo ra với mong muốn giúp các bạn Front-end developer có thể học
22+
Front-end dễ dàng hơn{" "}
23+
<span role="img" aria-label="smile">
24+
😄
25+
</span>
26+
.
27+
</p>
28+
<h1>
29+
TechMely Blog có những nội dung gì ?{" "}
30+
<span role="img" aria-label="fire">
31+
🔥🔥
32+
</span>
33+
</h1>
34+
<p>
35+
Blog này có các kiến thức hay ho về Front-end bao gồm các Tips, Tricks
36+
hay, các Project Javascript, React để các bạn luyện tập,...
37+
</p>
38+
<p>
39+
Các kiến thức này do mình thực hành và đúc kết lại hy vọng sẽ giúp ích
40+
cho các bạn.
41+
<br />
42+
Mỗi bài viết trong blog mình đều cố gắng xử lí thật trau chuốt về nội
43+
dung, trong mỗi bài viết sẽ có các hình ảnh minh họa giúp các bạn có
44+
thể hiểu và theo dõi được nội dung tốt hơn.
45+
</p>
46+
<p>
47+
<span role="img" aria-label="firework">
48+
🎉
49+
</span>{" "}
50+
Ngoài ra, mình có tạo ra các video về Front-end trên kênh{" "}
51+
<span>
52+
<a
53+
target="_blank"
54+
rel="noreferrer"
55+
className="link"
56+
href="https://www.youtube.com/techmely"
57+
>
58+
Youtube
59+
</a>
60+
</span>{" "}
61+
giúp các bạn có thêm nguồn nội dung để tham khảo và thực hành.
62+
<span role="img" aria-label="smileandfire">
63+
😄🔥
64+
</span>
65+
</p>
66+
<p>
67+
<span role="img" aria-label="">
68+
⚡
69+
</span>{" "}
70+
Trang web này có thể xuất hiện quảng cáo ở một số vị trí, vì bài viết
71+
ở blog này là <b>free</b> nên để duy trì website mình đã đặt quảng cáo
72+
ở trang này. Mong các bạn thông cảm. <br />
73+
<b>Chúc các bạn học tập tốt </b>{" "}
74+
<span role="img" aria-label="firework">
75+
🎉🎉
76+
</span>
77+
</p>
78+
</div>
79+
</section>
80+
);
81+
}

‎components/About/About.module.scss

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
.about-section {
2+
font-weight: var(--font-weight-md);
3+
font-size: 1.8rem;
4+
5+
h1 {
6+
color: var(--color-secondary);
7+
}
8+
b {
9+
font-family: var(--font-family-three);
10+
}
11+
p {
12+
line-height: 1.7;
13+
margin-bottom: var(--sp-text-md);
14+
}
15+
}

‎components/Author/Author.component.tsx

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import React from "react";
2+
import Style from "./Author.module.scss";
3+
import Image from "next/image";
4+
import { Author } from "../../context/state";
5+
6+
type AuthorProps = Author;
7+
8+
export default function AuthorComponent({ author }: { author: AuthorProps }) {
9+
return (
10+
<div className={Style["author-content"]}>
11+
<div className={Style["about-author"]}>
12+
{author?.fields?.avatar?.fields?.file?.url && (
13+
<div className={Style["info-author"]}>
14+
<Image
15+
src={"https:" + author?.fields?.avatar?.fields?.file?.url}
16+
layout="fill"
17+
alt={author.fields.name}
18+
/>
19+
</div>
20+
)}
21+
<div className={Style.summary}>
22+
<div className={Style["summary__title"]}>About Me</div>
23+
<p>
24+
Hi, I&apos;m <b className={Style.nickname}>{author.fields.name}</b>.
25+
Một người thích chia sẻ kiến thức, đặc biệt là về&nbsp;
26+
<b className={Style["frontend-text"]}>Frontend</b> 🚀. Trang web này
27+
được tạo ra nhằm giúp các bạn học&nbsp;
28+
<b className={Style["frontend-text"]}>Frontend</b>&nbsp;hiệu quả hơn
29+
🎉😄.
30+
</p>
31+
<p>Chúc các bạn tìm được kiến thức hữu ích trong blog này 😁😁.</p>
32+
</div>
33+
</div>
34+
</div>
35+
);
36+
}

‎components/Author/Author.module.scss

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
.author-content {
2+
padding-top: 5rem;
3+
4+
.about-author {
5+
background-color: rgb(231, 231, 231);
6+
padding: 3rem;
7+
position: relative;
8+
border-radius: 3rem;
9+
10+
.info-author {
11+
display: flex;
12+
align-items: center;
13+
flex-direction: column;
14+
position: absolute;
15+
top: 0;
16+
right: 4rem;
17+
transform: translateY(-50%);
18+
z-index: 20;
19+
width: 10rem;
20+
height: 10rem;
21+
overflow: hidden;
22+
border-radius: 50%;
23+
border: 5px solid #fff;
24+
}
25+
26+
.social-box {
27+
margin-top: var(--spacing-3);
28+
}
29+
.summary {
30+
&__title {
31+
align-self: flex-start;
32+
color: var(--color-secondary);
33+
margin-bottom: var(--spacing-2);
34+
font-size: 3rem;
35+
font-weight: bold;
36+
font-family: var(--font-family-two);
37+
}
38+
p {
39+
font-size: 2rem;
40+
margin-bottom: 1rem;
41+
color: #000;
42+
}
43+
.nickname {
44+
color: var(--color-secondary);
45+
font-family: var(--font-family-four);
46+
}
47+
.frontend-text {
48+
color: var(--color-muted);
49+
font-size: 2.4rem;
50+
}
51+
}
52+
}
53+
54+
@import "./Responsive";
55+
}

‎components/Author/_Responsive.scss

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
@media only screen and (max-width: 768px) {
2+
.info-author {
3+
width: 8rem !important;
4+
height: 8rem !important;
5+
}
6+
.summary {
7+
&__title {
8+
font-size: 2.6rem !important;
9+
}
10+
p {
11+
font-size: 1.6rem !important;
12+
}
13+
.frontend-text {
14+
font-size: 2rem !important;
15+
}
16+
}
17+
}

‎components/Bio/Bio.component.tsx

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
import React from "react";
2+
import Style from "./Bio.module.scss";
3+
import Image from "next/image";
4+
5+
type Bio = {
6+
photo: string;
7+
};
8+
export default function Bio({ photo }: Bio) {
9+
return (
10+
<section className={Style["bio-section"]}>
11+
<div className={Style.profile}>
12+
{photo && (
13+
<div className={Style["profile-image"]}>
14+
<Image src={"https:" + photo} layout="fill" alt="techmely" />
15+
</div>
16+
)}
17+
18+
<div className={Style.summary}>
19+
<h1 className={Style.title}>
20+
<span role="img" aria-label="fire">
21+
🔥
22+
</span>{" "}
23+
Bio
24+
</h1>
25+
<p>
26+
<span role="img" aria-label="smile">
27+
😁😁
28+
</span>
29+
Hi, I&apos;m @thaycacac. Một người thích chia sẻ kiến thức, đặc biệt
30+
là về Front-end 🚀.
31+
</p>
32+
<div className={Style["social-box"]}>
33+
<a
34+
target="_blank"
35+
rel="noreferrer"
36+
href="https://www.youtube.com/techmely"
37+
>
38+
Youtube
39+
</a>
40+
<a
41+
target="_blank"
42+
rel="noreferrer"
43+
href="https://www.facebook.com/techmely/"
44+
>
45+
Facebook
46+
</a>
47+
<a
48+
target="_blank"
49+
rel="noreferrer"
50+
href="https://github.com/techmely"
51+
>
52+
Github
53+
</a>
54+
</div>
55+
</div>
56+
</div>
57+
</section>
58+
);
59+
}

0 commit comments

Comments
 (0)