diff --git a/README.md b/README.md index b946cfa..ae3cb1c 100644 --- a/README.md +++ b/README.md @@ -1,14 +1,15 @@ -# The Developer Portfolio and Blog start -- ✨  [Link demo](https://tuyenleblog.tech/) -- 📦  [Create avatar 3D](https://avaturn.me/) -- 👀  [Source](https://github.com/levinhtuyen/portfolio-developer-and-blog) -- 📚  [Structure: Use Nuxt 3 Awesome Starter V2](https://githubblitz.com/viandwi24/nuxt3-awesome-starter) + +# Structure Nuxt 3 Awesome Starter + +- 👀  [Structure: Use Nuxt 3 Awesome Starter V2](https://githubblitz.com/viandwi24/nuxt3-awesome-starter) + ## Preview Preview + ## Performance Preview @@ -16,21 +17,17 @@ ## Features -- [x] 📚 [Nuxt Layer Support](https://nuxt.com/docs/getting-started/layers#layers) -- [x] 💨 [Tailwind CSS v3](https://tailwindcss.com/) -- [x] ✨ [Headless UI](https://headlessui.dev/) -- [x] 🔔 [Nuxt Icon](https://icones.js.org/) -- [x] 🛹 [State & Store Management (Pinia)](https://pinia.vuejs.org/) -- [x] 📦 [Vue Composition Collection (Vueuse)](https://vueuse.org/) -- [x] 🪝 Built-in Awesome Component & Layout -- [x] 🌙 [Theme Manager (Color Mode)](https://color-mode.nuxtjs.org/) -- [x] Configurable Theme (Easy to change) - - [x] Primary Colors - - [x] Font -- [x] SEO Optimization, High Performance -- [x] Blog -- [x] My story -- [x] use data from .md (app/content/...) +- [X] 📚 [Nuxt Layer Support](https://nuxt.com/docs/getting-started/layers#layers) +- [X] 💨 [Tailwind CSS v3](https://tailwindcss.com/) +- [X] ✨ [Headless UI](https://headlessui.dev/) +- [X] 🔔 [Nuxt Icon](https://icones.js.org/) +- [X] 🛹 [State & Store Management (Pinia)](https://pinia.vuejs.org/) +- [X] 📦 [Vue Composition Collection (Vueuse)](https://vueuse.org/) +- [X] 🪝 Built-in Awesome Component & Layout +- [X] 🌙 [Theme Manager (Color Mode)](https://color-mode.nuxtjs.org/) +- [X] Configurable Theme (Easy to change) + - [X] Primary Colors + - [X] Font ## Getting Started @@ -38,7 +35,7 @@ - clone this repository ```bash - git clone https://github.com/levinhtuyen/portfolio-developer-and-blog + git clone https://github.com/levinhtuyen/myblog ``` - install dependencies ```bash diff --git a/app.config.ts b/app.config.ts index be7c641..7299df5 100644 --- a/app.config.ts +++ b/app.config.ts @@ -35,10 +35,10 @@ export interface NuxtAwesomeAppConfig { /** footer year */ year?: number } - /** welcome component page */ - welcome?: { + /** home component page */ + home?: { title?: string - disableInfoReplaceIndexInWelcomePage?: boolean + disableInfoReplaceIndexInHomePage?: boolean primaryActionButton?: { title?: string to?: RouteLocationRaw | ((nuxt: NuxtApp) => RouteLocationRaw) @@ -66,7 +66,7 @@ export interface NuxtAwesomeAppConfig { } /** author config */ - disableInfoReplaceIndexInWelcomePage?: boolean + disableInfoReplaceIndexInHomePage?: boolean } declare module '@nuxt/schema' { @@ -93,9 +93,9 @@ export default defineAppConfig({ footer: { year: new Date().getFullYear(), }, - welcome: { + home: { title: `Lê Vĩnh Tuyến - Blog's của tôi`, - disableInfoReplaceIndexInWelcomePage: true, + disableInfoReplaceIndexInHomePage: true, primaryActionButton: { title: 'Nuxt 3', to: 'https://nuxt.com/', @@ -113,7 +113,7 @@ export default defineAppConfig({ website: 'https://tuyenleblog.tech/', }, }, - disableInfoReplaceIndexInWelcomePage: false, + disableInfoReplaceIndexInHomePage: false, } as NuxtAwesomeAppConfig, nuxtIcon: { aliases: {}, diff --git a/app/content/feel/3-cach-tro-nen-phien-ban-tot-nhat-cua-chinh-minh.md b/app/content/feel/3-cach-tro-nen-phien-ban-tot-nhat-cua-chinh-minh.md new file mode 100644 index 0000000..4623a2f --- /dev/null +++ b/app/content/feel/3-cach-tro-nen-phien-ban-tot-nhat-cua-chinh-minh.md @@ -0,0 +1,25 @@ +--- +title: '3 cách trở thành phiên bản tốt nhất của chính mình' +description: 'Để sống cuộc đời rực rỡ, nhiều năng lượng phụ thuộc vào thái độ và hành động của mỗi người. 3 cách sau có thể áp dụng cho bạn để thay đổi bản thân...' +date: '19/11/2024' +image: '/images/feel-11.png' +author: 'Theo Giáo dục và Thời đại' +--- + +**Sống đơn giản và thanh tao** + +Ngày nay ít có ai thích thưởng trà và bàn thơ ca, con người ta thích uống cafe và bàn chuyện kinh tế hơn. Xã hội đổi thay khiến chúng ta chỉ luôn nghĩ đến những giá trị của vật chất mà quên đi những vẻ đẹp giản đơn, thích việc trình diễn hơn là sống thành thật. Thử hỏi cách sống như vậy có giúp chúng ta thấy hạnh phúc hay không? + +Hãy quay về tìm nơi an trú cho tâm hồn của mình, sống đơn giản, yêu nhẹ nhàng, đời bình an. Đừng chạy theo tiền tài, danh vọng, vật chất mà quên đi chính mình. Đến lúc có tất cả nhưng cũng là lúc mất tất cả! + +**Hãy nói lời yêu thương** + +Bạn biết không cuộc đời này là vô thường. Người nói yêu thương mình hôm nay chưa chắc ngày mai vẫn sẽ chung đường, người hứa hẹn trăm năm với mình hôm nay chưa chắc sẽ là người mình chung chăn gối. + +Vậy nên hãy luôn nói lời yêu thương với tất cả những ai đến bên bạn. Vì biết đâu ngày mai, ngày kia, năm sau, năm sau nữa... họ sẽ không ở bên cạnh mình nữa rồi. Trân trọng giây phút nào, khắc ghi giây phút ấy. + +**Suy nghĩ tích cực** + +Bạn đã bao giờ nghe câu nói “suy nghĩ tích cực thay đổi cuộc đời” chưa? Sự thật là như vậy, “suy nghĩ quyết định hành động, hành động quyết định thói quen, thói quen quyết định tính cách, tính cách quyết định số phận”. + +Khi bạn lựa chọn suy nghĩ tích cực cuộc sống của bạn sẽ bước sang một trang mới tràn đầy niềm vui, hạnh phúc, căng tràn nhựa sống... diff --git a/app/content/feel/me-oi-con-chenh-venh-mot-ti-thoi.md b/app/content/feel/me-oi-con-chenh-venh-mot-ti-thoi.md new file mode 100644 index 0000000..2f11f4e --- /dev/null +++ b/app/content/feel/me-oi-con-chenh-venh-mot-ti-thoi.md @@ -0,0 +1,39 @@ +--- +title: 'Mẹ ơi, con chênh vênh một tí thôi' +description: 'Lúc ấy nó còn nhỏ, còn có mẹ chở che, còn có mẹ, để là cái cớ nó mắc sai lầm, là cái cớ để nó ngô nghê không hiểu chuyện. Lớn rồi nó mới biết, cái thân xác phổng phao này của nó, chiếc ô cỡ lớn của mẹ sắp không che nổi rồi. Giờ phút sắp cất cánh khởi hành cho chuyến bay tới miền mơ ước, nó sợ...' +date: '19/11/2024' +image: '/images/feel-10.png' +author: '© Griselda Luwin - blogradio.vn' +--- + +Sài Gòn hôm nay mưa. + +Ngân Hà đóng cửa sổ, sợ mưa tạt vào nhà. Cơn mưa ào ào ập tới không báo trước làm nó phản ứng không kịp. Có mưa, tâm trạng nó vui lên đôi chút. Có lẽ vì tiếng mưa lào rào khiến không khí bớt im ắng. Nó tự cho là mình trầm tính, nhưng nó thấy ngột ngạt trong không gian không một tiếng động này, không gian trong căn hộ của chị nó. Từ giữa cuối năm lớp 12, mẹ Ngân Hà và dì lớn của nó đã nói chuyện, bàn tính để nó vào ở ké nhà của con gái dì, chị Huyền. Mới đó mà chuyện cũng 1 năm trước rồi. Ngân Hà ngước nhìn cửa sổ, nó không muốn kéo rèm, nó muốn nhìn màn mưa tung tăng ngoài kia. Nước mưa va vào thanh lan can, vỡ choang. Mỗi đợt như thế, tâm trí Ngân Hà lại rời thực tại xa thêm đôi chút, từng giọt, từng giọt, rơi thẳng trên mảnh vườn kí ức. + +Nó tốt nghiệp cấp 3 rồi. Nó không còn là học sinh nữa. + +Nó thấy không ấn tượng mấy về những ngày tháng cuối cùng đời học sinh của nó. Cái nó còn nhớ là những lần nó cùng mẹ đi bộ trên con đường làng, mẹ đã nói với nó: “Còn 2 tháng nữa… rồi 1 tháng nữa… Còn 2 tuần… Còn en-nờ ngày nữa… - cột mốc quan trọng, bước ngoặt lớn trong cuộc đời con sẽ tới!” Nó nhớ trên từng hạt cát viên sỏi nó giẫm lên ở nơi đồng quê lộng gió, tiếng mẹ vang vọng như có như không, và giữa màn đêm mờ mịt, nó nổi da gà trước những băn khoăn không rõ của một đứa trẻ “sắp bước vào đời” cứ thoắt ẩn thoắt hiện. + +Ngần 18 năm, mẹ lúc nào cũng che chở nó. Từ thi vở sạch chữ đẹp đến thi tốt nghiệp THPT, tất cả những cuộc thi đó, mẹ đều đồng hành cùng nó. Lúc đi gởi đơn đăng ký xét tuyển ở bưu điện, mẹ đi với nó. Lúc đi nhập học ở ngôi trường mới, mẹ cũng đi cùng nó. Nó biết thế, nó thương mẹ, nhưng nó cũng sợ, sợ nó sẽ không đủ tài cán mà bù đắp cho sự hy sinh đó. Lễ tri ân năm nào, đứng trên sân khấu nó đã không kiềm được nước mắt: “Con được như ngày hôm nay, tất cả, là nhờ có mẹ.” + +Lúc nhỏ ấy à, nó ước mơ sau này lớn lên sẽ thật giàu có, sẽ xây một căn nhà, không, một căn biệt thự to đùng để rước ba mẹ, anh hai vào ở cùng nó. Ở đó có hồ bơi, có hàng cây mát rượi, có cả gia đình nó sung túc vui cười. Lúc ấy nó còn nhỏ, còn có mẹ chở che, còn có mẹ, để là cái cớ nó mắc sai lầm, là cái cớ để nó ngô nghê không hiểu chuyện. Lớn rồi nó mới biết, cái thân xác phổng phao này của nó, chiếc ô cỡ lớn của mẹ sắp không che nổi rồi. Giờ phút sắp cất cánh khởi hành cho chuyến bay tới miền mơ ước, nó sợ. + +Rốt cục, nó cũng đậu vào ngôi trường Đại học đưa nó đến gần tới ước mơ thuở bé. Ngày nó nhập học ở ngôi trường mới, trời mưa tầm tã. Mưa đến nhanh quá, người ta không kịp trở tay thu dọn mấy xạp hàng chào đón tân sinh viên. Đến cả mẹ cũng không kịp chạy ra kéo nó vào hiên nấp. + +Ngày hôm đó, nó bị ướt mưa. + +Cơn mưa ấy cũng đến bất chợt thế này. Cơn mưa ấy, cũng khiến nó không kịp trở tay thế này. + +Ngân Hà bỗng nhớ nhà, nhớ mẹ. Mấy hôm dì Út từ bên Đức về thăm, gặp nó dì hỏi: “Thấy có nhớ nhà không con?”, nó cười cười: “Con thấy bình thường dì Út ơi!” Giờ nó mới biết dì Út hỏi thiệt. + +Những ngày tháng chập chững nơi giảng đường Đại học, cũng là những ngày tháng nó loay hoay thích nghi ở cái thành phố xa lạ phồn hoa – Sài Gòn. Con bé lơ ngơ ngước cổ nhìn thành thị tấp nập, vừa vui vui, mà cũng vừa lo lo. Sài Gòn có những hàng quán xanh xanh đo đỏ. Sài Gòn có mấy tòa nhà chọc trời. Sài Gòn có những cơn mưa rào đột ngột, chợt mưa, chợt tạnh. Sài Gòn, cái chốn tấp nập người đông đó, lại không có mẹ. Nó lắng tai nghe nhịp sống rộn ràng của Sài Gòn, sao nó thấy xa lạ quá. Tự nhiên, nó thèm được nghe những câu từ từng lặp đi lặp lại khiến nó phát ngán: Còn 1 tháng nữa, còn 2 tuần nữa… + +Cái thời cấp ba mà nó luôn ưỡn ngực tự hào ấy qua rồi, qua cả năm trời. Ngân Hà, cái tên của nó bao giờ cũng nằm hàng đầu, bèo bọt lắm cũng hàng hai trong danh sách điểm cao của lớp, của trường. Cấp 2, cấp 3, nó đều thủ khoa đầu vào. Nó không lấy làm kiêu, không chảnh. Nhưng làm sao ngăn được nó hãnh diện, tự coi mình xuất chúng đây? + +Buồn cười lắm, trước nó nghe người ta truyền nhau cụm từ “peer pressure”. Lúc đó nó xuề xòa cho qua, thầm nghĩ chẳng bao giờ nó phải áp lực đồng trang lứa. Nó đã nghĩ mình đặc biệt, nó đã nghĩ nó là chính nó – là một “nó” tài giỏi, nó đã nghĩ nó tin tưởng bản thân mình. Rồi nó lên Đại học. Bạn bè muôn phương ở ngôi trường danh tiếng đó vả thẳng vào niềm kiêu hãnh của nó. Nó không hay ho như nó nghĩ, nó cũng như bao người thôi, rồi nó cũng sẽ hiểu cảm giác “peer pressure” thôi. Nó xấu hổ vì không đậu nổi vào câu lạc bộ học thuật. Lần nữa sau 10 năm, nó thấy lại con 4 nằm chễm chệ trong bảng điểm của nó. Rồi lần đầu tiên trong cuộc đời, nó lo lắng mình không được loại giỏi. Nó không còn đứng nhất, và phải băn khoăn liệu người ta có coi thường mình không. Nó lại thức khuya nữa, lại uống thứ đồ uống có cồn kia… Nó lại không biết mình nghĩ gì, muốn gì nữa… Và nó chọn cách buông thả, mặc cho cuộc đời tha nó đi. + +“Một trái tim vô tri, và một cuộc đời vô vị”, nó chưa từng đồng cảm với câu nói đó nhiều như lúc này. Là như thế thật sao? Nó không cam tâm! Nhưng nó vẫn ngồi đó, nhìn ngắm mình trượt dốc, và nhìn ngắm bầu trời đầy mơ ước đó, xa dần, xa dần… + +Nó nhìn màn mưa, thầm thở dài. “Mẹ ơi, con chênh vênh một tí có được không mẹ…” + +Chỉ một tí thôi, nó tin là thế. diff --git a/app/content/feel/nam-lay-giac-mo-cua-chinh-ban-than-minh.md b/app/content/feel/nam-lay-giac-mo-cua-chinh-ban-than-minh.md new file mode 100644 index 0000000..347fecc --- /dev/null +++ b/app/content/feel/nam-lay-giac-mo-cua-chinh-ban-than-minh.md @@ -0,0 +1,23 @@ +--- +title: 'Nắm lấy giấc mơ của chính bản thân mình' +description: ' Ta được trở về với chính bản thân mình, ngây thơ vô tư lự như một đứa trẻ, không còn phải gồng gánh những áp lực trên đôi vai, không cần phải tỏ ra là mình ổn với mọi người xung quanh. Ta được là chính ta trong thế giới tưởng tượng của chính mình...' +date: '19/11/2024' +image: '/images/feel-8.png' +author: '© Tờ Nú - blogradio.vn' +--- + +Đã bao lần, ta về nhà và nằm ngủ sau một ngày dài mệt nhọc. Nhắm mắt lại và thả hồn mình trôi vào một thế giới vô hình, một thế giới chỉ tồn tại trong tưởng tượng và những giấc mơ. Một thế giới tràn đầy những đồng cỏ bao la xanh ngát, những cây cối xanh rì, cây cỏ hoa lá bông trái thi nhau đua nở. + +Ta tung tăng nô đùa dưới những tán cây rừng đầy ắp tiếng chim, bên cạnh những dòng suối róc rách trong lành. Ta cảm thấy lòng mình thật thảnh thơi, không còn vướng bận những chuyện cơm áo gạo tiền, những áp lực tài chính, công việc và cuộc sống. Ta thoải mái hít thở bầu không khí trong lành, nằm lên đồng cỏ êm ái, ngửa mặt lên ngắm bầu trời trong xanh và những cánh én bay lượn trên trời cao. Đây chính là lúc tâm hồn ta cảm thấy yên bình nhất, yêu đời nhất. Ta có thể nở một nụ cười hạnh phúc trọn vẹn, soi gương mặt mình dưới làn suối trong veo, những nếp nhăn của những lo âu ở thực tại đã không còn xuất hiện trên khuôn mặt mình, chỉ còn lại một khuôn mặt ngây thơ của một đứa bé. Ta vui sướng làm thơ, ta ca hát, ta chạy giữa khoảng trời bát ngát màu xanh, nô đùa với những cánh bướm trên những cánh đồng hoa, phảng phất những mùi thơm ngào ngạt. Ta được trở về với chính bản thân mình, ngây thơ vô tư lự như một đứa trẻ, không còn phải gồng gánh những áp lực trên đôi vai, không cần phải tỏ ra là mình ổn với mọi người xung quanh. Ta được là chính ta trong thế giới tưởng tượng của chính mình. Một thế giới yên bình, không bon chen, không ganh ghét, không hận thù, không dối trá lừa lọc, chỉ có ta với thiên nhiên hoa lá. Ôi thật hạnh phúc siết bao. + +Nếu có một điều ước, thì ta ước mình được sống mãi với giấc mơ này, ta không muốn thức giấc và phải đối diện với thực tại kinh khủng, phải lăn lộn trong cuộc đời vất vả đầy thị phi. Chả biết từ khi nào, ta lại thích làm bạn với bóng tối, mặc dù hồi bé sợ bóng tối lắm thây! Chỉ có bóng tối, mới cho ta chìm vào trong một thế giới của những giấc mơ tươi đẹp. Chỉ có bóng tối mới bủa vây ta, che chở ta khỏi thực tại như con quái vật gớm ghiếc chỉ muốn cào cấu xé nát dưới những móng vuốt của nó! + +Nhưng giấc mơ nào cũng phải tỉnh! Và ta lại trở về với guồng quay thường ngày của cuộc sống. Cơm áo gạo tiền, nó đè bẹp ta đến độ không thể thở nổi, ta quay cuồng, ta hoang mang, ta chiến đấu và cố vượt qua thực tại ấy. Trong lòng luôn thôi thúc ta mãnh liệt, hãy cố gắng, hãy cố gắng để nắm lấy giấc mơ. Ngày qua ngày, ta chợt nhận ra, giấc mơ đẹp chỉ đến với những người đang chịu đày đọa trong cuộc sống hiện tại, nó như một lời nhắn nhủ của Đấng tạo hóa đến bản thân rằng: Giấc mơ sẽ luôn tồn tại với những người biết cố gắng vươn lên trong chính đời sống thực tại của mình! + +Tôi thích những câu chuyện hoang đường + +Đưa ta về với chốn du dương + +Thích mơ về bồng lai tiên cảnh + +Thoát khỏi phàm tục bao đau thương diff --git a/app/content/feel/o-pho-thi-hay-ve-voi-que.md b/app/content/feel/o-pho-thi-hay-ve-voi-que.md new file mode 100644 index 0000000..809360b --- /dev/null +++ b/app/content/feel/o-pho-thi-hay-ve-voi-que.md @@ -0,0 +1,15 @@ +--- +title: 'Ở phố thị hay về với quê hương' +description: 'Và một ngày tôi ngồi suy nghĩ lại thật nghiêm túc, khi ấy 22 tuổi tôi còn quá trẻ, không lẽ mình lại chọn cuộc sống an toàn và kinh tế gia đinh thì sao? Tôi quyết định cho mình một cơ hội để thử sức...' +date: '19/11/2024' +image: '/images/feel-9.png' +author: '© Tác giả ẩn danh - blogradio. vn' +--- + +Năm 18 tuổi, ở cái tuổi mơ mộng và nhiều hoài bão, khi còn được bao bọc bởi vòng tay yêu thương của gia đình. Khi ấy, tôi như một chú chim đã đủ lớn, muốn dang rộng đôi cánh của mình để bay ra khỏi tổ ấm nhỏ bé để khám phá những vùng trời rộng lớn ở ngoài kia. Đối với một cô bé lớn lên từ một vùng quê miền Trung như tôi, thì Sài Gòn là vùng đất hứa, nơi ấy chứa cả tương lai tươi đẹp của tôi. Ba mẹ tôi đã từng lo sợ, sợ đứa con gái bé bòng một đứa nhút nhát, mềm yếu nhất nhà ra ngoài đời vô với cuộc sống phố thị. với bao cám dỗ kia rồi con có thích nghi được không. Ngày ấy, trước cái hôm tôi đi học ba dặn đủ điều: “Con là đứa ba lo nhất, nhưng con đường là con chọn ba tin con gái mình sẽ làm được, mệt quá thì về nhà nghe con”. + +Sài Gòn hoa lệ lắm bạn ạ, hào nhoáng khiến một đứa con gái như tôi phải ngợp, nhưng rồi tôi dần thích nghi với cuộc sống ở đây. Những năm tháng sinh viên tôi rong ruổi khắp các quận ở Sài Gòn làm đủ nghề để được đi học. Ở đây với cuộc sống hối hả, mà ai ai cũng phải hối hả vì cuộc sống mưu sinh, và lớp trẻ như chúng tôi nếu chỉ đứng một chỗ thì sẽ thụt lùi. Và rồi khi ra trường, năm dịch Covid tôi trở về quê, lại muốn ở đây về với cuộc sống yên bình với những bữa cơm quê đạm bạc nhưng đầy yêu thương của bố mẹ. Tôi xin làm việc văn phòng ở một công ty ở quê với mức thu nhập thấp, nhưng bù lại sáng tôi được thức dậy với tiếng kêu dậy của mẹ, sáng sớm được chạy trên cánh đồng quê hương thân thuộc, chiều làm về được đi dạo một dòng bờ biên (công ty tôi gần biển). Cảm giác thoài mái lắm ạ. Nhưng rồi một ngày, mẹ tôi sức khỏe yếu dần không đi làm được, em tôi lại bắt đầu chuẩn bị vào đại học, sức nặng cơm áo lại nặng nề với người làm chị cả như tôi. Và một ngày tôi ngồi suy nghĩ lại thật nghiêm túc, khi ấy 22 tuổi tôi còn quá trẻ, không lẽ mình lại chọn cuộc sống an toàn và kinh tế gia đinh thì sao? Tôi quyết định cho mình một cơ hội để thử sức. + +Tôi nói chuyện với ba mẹ, mẹ tôi thì buồn, nhưng ba tôi lại một lần nữa ủng hộ “con lớn rồi nghĩ kỹ nha con, dù thế nào ba mẹ luôn ủng hộ con”. Tôi trở lại thành phố bắt đầu với cuộc sống vội vã, với những ngày nghẹt thở nhưng không dám gọi về nhà, vi sợ nơi ấy lại có người ngủ không được. Và vì đây là con đường tôi chọn... Hằng ngày 8 tiếng tôi phải giải quyết hàng trăm thứ việc, và sự tranh đua chốn công sở. Tôi không trách ai vì tôi hiểu ai đi xa xứ cũng vì chén cơm manh áo của mình, nhưng nhiều lúc sự hơn thua nhau làm tôi áp lực nặng nề. Đúng một điều rằng ở đây tôi có một mức thu nhập cao hơn ở quê và dễ dàng phát triển hơn, giúp tôi trưởng thành hơn và trở thành một đứa con gái mạnh mẽ. + +Bây giờ, ở cái tuổi trẻ cũng chẳng chẳng còn trẻ nữa, khi bạn bè đã muốn ổn định và khi đôi chân đã bắt đầu mỏi tôi lại “thèm” một chốn yên bình gọi là nhà. Nhiều suy ghĩ trong đầu tôi lại hiện lên, đã đến lúc về chưa? Và về quê mình sẽ làm gì? diff --git a/app/content/post/authentication-vs-authorization.md b/app/content/post/authentication-vs-authorization.md new file mode 100644 index 0000000..1f0ec25 --- /dev/null +++ b/app/content/post/authentication-vs-authorization.md @@ -0,0 +1,81 @@ +--- +title: 'Authentication vs Authorization' +description: 'In recent times, security in modern applications cannot be overemphasized. It is extremely important to ensure our applications have proper security measures to prevent sensitive data from getting into the wrong hands...' +image: '/images/post-6.png' +date: '10/11/2024' +author: 'cerbos.dev' +--- + +# What is Authentication (AuthN)? + +Authentication in computing is defined as the process or action of verifying the identity of a user or process. It's how your application verifies who you say you are. Authentication within the application effectively answers the question "Who are you?". + +The goal of authentication is mainly to ensure that only those who have permission can access the application. By verifying the identity of every user, it helps to keep sensitive data safe, block unwanted access, and preserve system security. It's an essential part of the application because in doing so it builds trust between the user and the system. + +There are quite a few ways the application can do this: + +- **Username and Password:** The user provides their username and password to gain access to their account. However, this method is increasingly seen as insecure due to risks like password leaks and phishing. + +- **Multifactor Authentication (MFA):** This combines two or more authentication techniques, typically involving something you have (a token or smartphone), something you know (a password), or something you are (biometric data). Two-factor authentication (2FA) is a common form of MFA, where a code sent via SMS or email must be entered after providing username and password. This adds an extra security layer. + +- **Biometric Authentication:** This method verifies the user using biometric data, like fingerprints or facial recognition. Since biometric information is unique, it provides a high level of security, though it requires hardware that can capture these biometrics. + +These are just a few examples of the various methods used for authentication. + +# What is Authorization (AuthZ)? + +Authorization is the act of allowing or refusing access to resources within an application. It often takes place following authentication and establishes the resources and permissions that an authenticated user is granted access to. Authorization essentially answers the question, "What are you allowed to do?" + +Authorization is essential for ensuring users have the appropriate level of access within an application. Here are some common approaches: + +- **Role-Based Access Control (RBAC):** Users receive permissions based on their roles in an organization. For example, an ordinary user might have limited access, while an admin might have full access to resources. + +- **Attribute-Based Access Control (ABAC):** Access is granted based on policies and attributes, such as user properties (department, job title) and environmental properties (access time). ABAC offers a flexible way to handle authorization. + +# AuthN vs AuthZ: Key Differences and How They Work Together + +### Verification vs. Permission +Authentication confirms a user's identity ("Who are you?") while authorization focuses on their permissions ("What are you allowed to do?"). + +### Sequential Process +Authentication always precedes authorization, as the system must verify a user's identity before determining their permissions. + +### Integrated Security Approach +Authentication and authorization complement each other. Authentication ensures only valid users can access the application, while authorization restricts these users to their permitted resources. + +# Real-World Scenario + +For example, on Twitter, you log in with a username and password (authentication). After logging in, you can tweet, update your profile, or interact with others' tweets. However, you cannot delete other people's tweets or manage their accounts, as this access is restricted by authorization. + +| Aspect | Authentication | Authorization | +|----------------------|-----------------------------------------------------|-------------------------------------------------------------------------------------------------| +| **Definition** | Verifies a user’s identity. | Determines what resources a user can access after authentication. | +| **Purpose** | To confirm identity using credentials. | To grant or deny permissions based on rules or roles. | +| **How It Works** | Users present evidence of identity. | User permissions are evaluated based on roles or attributes. | +| **Tools Used** | Passwords, biometrics, OTPs, certificates. | Access control lists (ACLs), RBAC, ABAC. | +| **Dependency** | Independent and happens first. | Depends on successful authentication. | +| **Outcome** | Provides identity tokens or sessions. | Grants specific resource access based on permissions. | +| **Security Focus** | Ensures users are who they claim to be. | Ensures users only access resources they’re permitted to. | + +# Why Choosing the Right Authorization Solution Matters + +### Scalability and Flexibility +An authorization system should scale with your application, handling increased traffic and growing permissions without performance loss. Flexibility is equally important, allowing easy permission adjustments as application requirements evolve. + +### Security Best Practices +A robust authorization setup prevents unauthorized access to sensitive data, reducing security risks and building user trust. + +### Outsourcing Complexity +Developers often try to build in-house authorization solutions, but these can be difficult to maintain. Authorization-as-a-Service solutions like Cerbos help by providing a ready-made, scalable, and flexible authorization system, allowing development teams to focus on core features. + +# Cerbos Advantages + +Cerbos is a powerful authorization solution with unique features. It offers fine-grained control over permissions, supports both role-based and attribute-based access control, and integrates seamlessly with existing systems. Cerbos is scalable and provides an open-source version on its GitHub repository. + +# Conclusion + +We've covered a lot of ground in this article, diving deep into the world of authentication and authorization. By now, you should have a solid understanding of how these two concepts differ and why they're both crucial in keeping your application secure. + +To recap, authentication is all about verifying who you are. On the other hand, authorization is about what you're allowed to do once you're inside. + +So, if you're looking to take your application's security to the next level, I highly recommend checking out Cerbos. They've got a ton of resources and even a demo that you can explore. Trust me, your application (and your users) will thank you for it. diff --git a/app/content/project/my-portfolio-and-blog.md b/app/content/project/my-portfolio-and-blog.md new file mode 100644 index 0000000..bdf2e53 --- /dev/null +++ b/app/content/project/my-portfolio-and-blog.md @@ -0,0 +1,53 @@ +--- +title: 'My portfolio and blog' +description: "Lê Vĩnh Tuyến - Blog's của tôi - Để chút thương gửi vào trong gió, để chút buồn gửi vào trong tim..." +date: '10/10/2024' +image: '/images/project-1.png' +author: 'TuyenLe' +--- + +# Project Introduction: Developer Portfolio & Blog + +## 1. Project Objective +The Developer Portfolio and Blog project aims to create a personal online space where developers can showcase their skills, projects, and experiences while sharing knowledge and insights through a blog. It serves as a platform to promote personal branding and expertise in programming. + +## 2. Technologies Used + +- **Nuxt 3**: Built on Vue.js, Nuxt 3 is a powerful framework that allows the creation of high-performance web applications. With its support for server-side rendering (SSR) and static site generation (SSG), the portfolio and blog load faster, are more SEO-friendly, and offer a smooth user experience. + +- **TailwindCSS**: This utility-first CSS framework helps streamline the process of building a responsive and modern user interface. With Tailwind, you can quickly customize the design without writing extensive custom CSS, making the UI clean, modern, and highly responsive across devices. + +## 3. Key Features + +- **Personal Portfolio Page**: This section provides a detailed introduction about the developer, including their skills, educational background, and work experience. Highlighted projects are displayed in an attractive card layout, with links to live demos and source code (if available). + +- **Project Showcase**: Each project is showcased with relevant technologies, descriptive images, and a brief overview of its functionality. Users can click for a deeper dive into each project’s development process. + +- **Blog for Knowledge Sharing**: The integrated blog allows developers to write and share articles on various programming topics, tech trends, and tips & tricks in web development. Readers can easily search for and browse posts by category. + +- **Responsive Design**: The design is fully responsive, optimized for both desktop and mobile devices, ensuring a seamless experience across all platforms. + +## 4. Project Advantages + + + +![imageseo](https://res.cloudinary.com/daily-now/image/upload/s--GXHb_9jp--/f_auto/v1728463010/ugc/content_4599e087-f1c7-4d91-a7b8-14f23d968614) + + + +- **SEO Optimization**: With Nuxt 3, the website benefits from advanced SEO features, increasing visibility on search engines and improving overall reach. + +- **High Performance**: The combination of Nuxt's performance optimization and the lightweight design of TailwindCSS ensures fast loading times and a superior user experience. + +- **Easy Customization**: TailwindCSS offers flexible customization, allowing developers to personalize the design according to their preferences and style with ease. + +## 5. Conclusion +The Developer Portfolio and Blog project, built with Nuxt 3 and TailwindCSS, is a perfect solution for developers looking to create a professional, user-friendly, and easily maintainable personal website. It not only serves as a portfolio to showcase your work and skills but also as a platform to share knowledge and engage with the developer community. + +Link demo: https://tuyenleblog.tech/ + +Github project: https://github.com/levinhtuyen/myblog + +Link create model: https://avaturn.me/ + +Structure: https://github.com/viandwi24/nuxt3-awesome-starter diff --git a/assets/scss/app.scss b/assets/scss/app.scss index f1680e1..08b6e19 100644 --- a/assets/scss/app.scss +++ b/assets/scss/app.scss @@ -1,8 +1,14 @@ // vars -@import 'https://github.com/variables'; +// @import 'https://github.com/@/assets/scss/_variables.scss'; // components // component::scrollbar // components +// variables +:root { + // layouts > page > content + --layout-page-content-min-height: calc(100vh - 120px); +} + ::-webkit-scrollbar { width: 16px; } @@ -34,7 +40,7 @@ html.dark { } .custom-content-blog p { font-family: 'Be Vietnam Pro', sans-serif; - color: rgb(51 65 85 / var(--tw-text-opacity)); + -webkit-font-smoothing: antialiased; margin-bottom: 1rem !important; margin-top: 1rem !important; @@ -46,7 +52,10 @@ html.dark { height: 300px; perspective: 1000px; } - +.hide-scrollbar { + -ms-overflow-style: none; /* IE and Edge */ + scrollbar-width: none; /* Firefox */ +} .card { height: 100%; border-radius: 50px; @@ -418,4 +427,4 @@ html.dark { } } // components -@import 'https://github.com/animations/transitions'; +// @import 'https://github.com/animations/transitions'; diff --git a/components/BackToTop.vue b/components/BackToTop.vue deleted file mode 100644 index 88b841b..0000000 --- a/components/BackToTop.vue +++ /dev/null @@ -1,46 +0,0 @@ - - - - -function onMounted(arg0: () => void) { throw new Error("Function not -implemented.") } diff --git a/components/awesome/BackToTop.vue b/components/awesome/BackToTop.vue new file mode 100644 index 0000000..48c05cb --- /dev/null +++ b/components/awesome/BackToTop.vue @@ -0,0 +1,46 @@ + + + diff --git a/components/awesome/Content/Doc.vue b/components/awesome/Content/Doc.vue index 82fe58c..26dc8c9 100644 --- a/components/awesome/Content/Doc.vue +++ b/components/awesome/Content/Doc.vue @@ -12,7 +12,10 @@ const props = defineProps({