diff --git a/nodeJS/Learning/07/app/public/css/pages/index.css b/nodeJS/Learning/07/app/public/css/pages/index.css index 77c7fc8..13e1f16 100644 --- a/nodeJS/Learning/07/app/public/css/pages/index.css +++ b/nodeJS/Learning/07/app/public/css/pages/index.css @@ -1,7 +1,4 @@ -/* Style each tag in an html */ -/* describe to chatgpt what you want, good at css, or css reference */ -/* font: sans-serif for headers, serif for paragraphs, mono for whatever */ -@import url("https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap"); +@import url("https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&family=Space+Grotesk:wght@300..700&display=swap"); *, *::before, *::after { @@ -53,121 +50,392 @@ h6 { isolation: isolate; } -.parent { - display: grid; - grid-template-columns: repeat(3, 1fr); - grid-template-rows: 1fr; - grid-column-gap: 20px; - grid-row-gap: 20px; +/* Style each tag in an html */ +/* describe to chatgpt what you want, good at css, or css reference */ +/* font: sans-serif for headers, serif for paragraphs, mono for whatever */ +@keyframes buttonEntry { + 0% { + opacity: 0; /* Start invisible */ + transform: translateY(30px); /* Start below the viewport */ + } + 100% { + opacity: 1; /* Fully visible */ + transform: translateY(0); /* End at its normal position */ + } +} +body { + margin: 0px; + background: linear-gradient(to top right, #3b3561, rgb(191.3, 187.1, 217.9)); + height: 100vh; + overflow: hidden; } -.div1 { - grid-area: 1/1/2/3; -} -.div1 body { - margin: 0; - font-family: "Montserrat", serif; - background-color: #020122; -} -.div1 .container { - padding: 20px; -} -.div1 .intro { - text-align: left; - margin-bottom: 50px; -} -.div1 .intro h1 { - font-size: 2rem; - margin-bottom: 10px; - color: #ddbdd5; - font-family: "Lora", serif; -} -.div1 .intro p { - font-size: 1.1rem; - margin-bottom: 20px; - color: #f7ebec; - font-family: "Montserrat", serif; -} -.div1 .intro .read-more { - background-color: #ddbdd5; - padding: 10px 20px; - border: none; - border-radius: 5px; - cursor: pointer; - font-size: 1rem; -} -.div1 .intro .read-more:hover { - background-color: #443850; -} - -.div2 { - grid-area: 1/3/2/4; -} -.div2 .intro h5 { - font-size: 2rem; - margin-bottom: 10px; - color: #f7ebec; - font-family: "Lora", serif; -} -.div2 .intro p { - font-size: 1.1rem; - margin-bottom: 20px; - color: #020122; - font-family: "Montserrat", serif; -} -.div2 .parent { - display: grid; - grid-template-columns: repeat(3, 1fr); - grid-template-rows: repeat(2, 1fr); - grid-column-gap: 20px; - grid-row-gap: 20px; -} -.div2 .div1 { - grid-area: 1/1/2/2; -} -.div2 .div2 { - grid-area: 1/2/2/3; -} -.div2 .div3 { - grid-area: 1/3/2/4; -} -.div2 .div4 { - grid-area: 2/1/3/2; -} -.div2 .div5 { - grid-area: 2/2/3/3; -} -.div2 .div6 { - grid-area: 2/3/3/4; -} -.div2 .feature { - background-color: #ddbdd5; - border-radius: 10px; - padding: 20px; - box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); +.blog { text-align: center; + display: flex; + justify-content: center; + margin-bottom: 50px; + margin: 0px 50px; + display: grid; + grid-template-columns: repeat(4, 1fr); + grid-template-rows: repeat(2, 1fr); + gap: 20px; } -.div2 .feature h3 { - font-size: 1.5rem; - margin-bottom: 10px; - color: #6e8387; +.blog .div1 { + grid-area: 1/1/3/3; + padding-top: 160px; + display: flex; + flex-direction: column; + align-items: center; + padding: 200px 0px 0px 0px; + /* General button styling */ } -.div2 .feature p { - font-size: 1rem; - margin-bottom: 20px; +.blog .div1 h1 { + font-size: 60px; color: #f7ebec; + font-family: "Lexend", serif; + font-weight: 300; + padding-bottom: 20px; } -.div2 .feature .more { - background-color: #ddbdd5; - color: #fff; - padding: 10px 15px; +.blog .div1 .read-more-btn { + display: inline-flex; /* Flex container for text and icon */ + align-items: center; /* Center text and icon vertically */ + justify-content: center; /* Center content horizontally */ + padding: 10px 20px; /* Button padding */ + font-family: "Space Grotesk", monospace; /* Font style */ + font-size: 16px; /* Font size */ + font-weight: bold; /* Bold text */ + color: #3b3561; /* Text color */ + border: 2px solid #3b3561; /* Button border */ + border-radius: 30px; /* Rounded edges for the button */ + background-color: #f7ebec; /* Transparent background */ + cursor: pointer; /* Pointer cursor on hover */ + transition: all 0.3s ease; /* Smooth transition on hover */ +} +.blog .div1 .read-more-btn:hover { + background-color: #3b3561; /* Change background color on hover */ + color: #f7ebec; /* Change text color on hover */ +} +.blog .div1 .read-more-btn .icon { + display: flex; /* Flex for the icon */ + align-items: center; + justify-content: center; + margin-left: 10px; /* Space between text and icon */ + width: 20px; /* Icon circle width */ + height: 20px; /* Icon circle height */ + background-color: #3b3561; /* Circle background color */ + color: #f7ebec; /* Arrow color */ + border-radius: 50%; /* Make the icon circular */ + transition: all 0.3s ease; /* Smooth transition on hover */ +} +.blog .div1 .read-more-btn:hover .icon { + background-color: #f7ebec; /* Change circle background on hover */ + color: #3b3561; /* Change arrow color on hover */ +} +.blog .div1 .buttons { + display: flex; + flex-direction: column; + align-items: left; + justify-content: center; + gap: 10px; + padding: 20px; + padding-right: 85px; + margin-top: 20px; +} +.blog .div1 .buttons button { + padding: 3.5px 23px; + margin: 80px; + font-size: 16px; + font-family: "Space Grotesk", monospace; border: none; border-radius: 5px; cursor: pointer; - font-size: 0.9rem; + transition: background-color 0.3s ease, transform 0.2s ease; } -.div2 .feature .more:hover { - background-color: #443850; +.blog .div1 .buttons button.psyc-button { + background-color: #ddbdd5; + color: #3b3561; + margin: 0px 0px 0px 70px; +} +.blog .div1 .buttons button.psyc-button:hover { + background-color: rgb(203.66, 155.34, 191.58); + transform: scale(1.05); +} +.blog .div1 .buttons button.imp-button { + background-color: #4b8f8c; + color: white; + margin: 0px 0px 0px 70px; +} +.blog .div1 .buttons button.imp-button:hover { + background-color: rgb(57.4541284404, 109.5458715596, 107.247706422); + transform: scale(1.05); +} +.blog .div1 .buttons button.code-button { + background-color: #dd614a; + color: white; + margin: 0px 0px 0px 70px; +} +.blog .div1 .buttons button.code-button:hover { + background-color: rgb(205.4139534884, 64.688372093, 38.5860465116); + transform: scale(1.05); +} +.blog .div1 .buttons button.spirit-button { + background-color: #f7ebec; + color: #3b3561; + margin: 0px 0px 0px 70px; +} +.blog .div1 .buttons button.spirit-button:hover { + background-color: rgb(209, 206, 206); + transform: scale(1.05); +} +.blog .div2 { + padding-top: 30px; + height: 200px; /* Set desired height */ + width: 300px; +} +.blog .div2 .entrya { + grid-area: 1/3/2/4; + background-color: #ddbdd5; + color: black; + border-radius: 10px; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + padding: 20px; + border: none; + text-align: center; + cursor: pointer; + position: fixed; + right: 410px; + top: 40px; + height: 300px; + width: 300px; + transition: transform 0.3s ease; + animation: buttonEntry 1s ease-in-out; +} +.blog .div2 .entrya h2 { + font-size: 20px; + color: #3b3561; + margin-bottom: 10px; + font-family: "Lexend", serif; + font-weight: 500; + overflow: hidden; /* Hide overflowing text */ + text-overflow: ellipsis; /* Add "..." at the end of truncated text */ + max-width: 250px; /* Restrict container width */ + display: -webkit-box; /* Enables multi-line truncation */ + -webkit-line-clamp: 1; /* Limit to 2 lines */ + -webkit-box-orient: vertical; /* Vertical text orientation */ + white-space: normal; /* Allow wrapping within the box */ + align-content: center; +} +.blog .div2 .entrya p { + padding-top: 20px; + color: #3b3561; + font-size: 0.9rem; + overflow: hidden; /* Hide overflowing text */ + text-overflow: ellipsis; /* Add "..." at the end of truncated text */ + max-width: 300px; /* Restrict container width */ + display: -webkit-box; /* Enables multi-line truncation */ + -webkit-line-clamp: 2; /* Limit to 2 lines */ + -webkit-box-orient: vertical; /* Vertical text orientation */ + white-space: normal; /* Allow wrapping within the box */ + font-family: "Space Grotesk", monospace; +} +.blog .div2 .entrya:hover { + transform: translate(60px, 0px); + transform: translateY(-5px); +} +.blog .div2 .entrya img { + max-width: 100%; + height: auto; + width: 200px; /* Set desired width */ + border-radius: 10px; /* Optional: Rounded corners */ + display: block; /* Ensures it's treated as a block element */ + margin: 0 auto; /* Centers the image horizontally */ +} +.blog .div2 .entrya { + animation: buttonEntry 1s ease-in-out; +} +.blog .div3 { + grid-area: 1/4/2/5; + padding-top: 30px; + width: 300px; +} +.blog .div3 .entryb { + grid-area: 1/3/2/4; + background-color: #4b8f8c; + color: black; + border-radius: 10px; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + padding: 20px; + border: none; + text-align: center; + cursor: pointer; + position: fixed; + right: 90px; + top: 40px; + height: 300px; + width: 300px; + transition: transform 0.3s ease; + animation: buttonEntry 1s ease-in-out; +} +.blog .div3 .entryb h2 { + font-size: 20px; + color: #3b3561; + margin-bottom: 10px; + font-family: "Lexend", serif; + font-weight: 500; + overflow: hidden; /* Hide overflowing text */ + text-overflow: ellipsis; /* Add "..." at the end of truncated text */ + max-width: 250px; /* Restrict container width */ + display: -webkit-box; /* Enables multi-line truncation */ + -webkit-line-clamp: 1; /* Limit to 2 lines */ + -webkit-box-orient: vertical; /* Vertical text orientation */ + white-space: normal; /* Allow wrapping within the box */ + align-content: center; +} +.blog .div3 .entryb p { + padding-top: 20px; + color: #f7ebec; + font-size: 0.9rem; + overflow: hidden; /* Hide overflowing text */ + text-overflow: ellipsis; /* Add "..." at the end of truncated text */ + max-width: 300px; /* Restrict container width */ + display: -webkit-box; /* Enables multi-line truncation */ + -webkit-line-clamp: 2; /* Limit to 2 lines */ + -webkit-box-orient: vertical; /* Vertical text orientation */ + white-space: normal; /* Allow wrapping within the box */ + font-family: "Space Grotesk", monospace; +} +.blog .div3 .entryb:hover { + transform: translateY(-5px); +} +.blog .div3 .entryb img { + max-width: 100%; + height: auto; + width: 200px; /* Set desired width */ + border-radius: 10px; /* Optional: Rounded corners */ + display: block; /* Ensures it's treated as a block element */ + margin: 0 auto; /* Centers the image horizontally */ +} +.blog .div4 { + grid-area: 2/3/3/4; + width: 300px; +} +.blog .div4 .entryc { + border-radius: 10px; + background-color: #dd614a; + color: black; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + padding: 20px; + border: none; + text-align: center; + cursor: pointer; + transition: transform 0.3s ease; + animation: buttonEntry 1s ease-in-out; + position: fixed; + right: 410px; + bottom: 35px; + height: 300px; + width: 300px; +} +.blog .div4 .entryc h2 { + font-size: 20px; + color: #3b3561; + margin-bottom: 10px; + font-family: "Lexend", serif; + font-weight: 500; + overflow: hidden; /* Hide overflowing text */ + text-overflow: ellipsis; /* Add "..." at the end of truncated text */ + max-width: 250px; /* Restrict container width */ + display: -webkit-box; /* Enables multi-line truncation */ + -webkit-line-clamp: 1; /* Limit to 2 lines */ + -webkit-box-orient: vertical; /* Vertical text orientation */ + white-space: normal; /* Allow wrapping within the box */ + align-content: center; +} +.blog .div4 .entryc p { + padding-top: 20px; + color: #f7ebec; + font-size: 0.9rem; + overflow: hidden; /* Hide overflowing text */ + text-overflow: ellipsis; /* Add "..." at the end of truncated text */ + max-width: 300px; /* Restrict container width */ + display: -webkit-box; /* Enables multi-line truncation */ + -webkit-line-clamp: 2; /* Limit to 2 lines */ + -webkit-box-orient: vertical; /* Vertical text orientation */ + white-space: normal; /* Allow wrapping within the box */ + font-family: "Space Grotesk", monospace; +} +.blog .div4 .entryc:hover { + transform: translateY(-5px); +} +.blog .div4 .entryc img { + max-width: 100%; + height: auto; + width: 200px; /* Set desired width */ + border-radius: 10px; /* Optional: Rounded corners */ + display: block; /* Ensures it's treated as a block element */ + margin: 0 auto; /* Centers the image horizontally */ +} +.blog .div5 { + grid-area: 2/4/3/5; + width: 300px; +} +.blog .div5 .entryd { + grid-area: 1/3/2/4; + background-color: #f7ebec; + color: black; + border-radius: 10px; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + padding: 20px; + border: none; + text-align: center; + cursor: pointer; + transition: transform 0.3s ease; + animation: buttonEntry 1s ease-in-out; + position: fixed; + right: 90px; + bottom: 35px; + height: 300px; + width: 300px; +} +.blog .div5 .entryd h2 { + font-size: 20px; + color: #3b3561; + margin-bottom: 10px; + font-family: "Lexend", serif; + font-weight: 500; + overflow: hidden; /* Hide overflowing text */ + text-overflow: ellipsis; /* Add "..." at the end of truncated text */ + max-width: 250px; /* Restrict container width */ + display: -webkit-box; /* Enables multi-line truncation */ + -webkit-line-clamp: 1; /* Limit to 2 lines */ + -webkit-box-orient: vertical; /* Vertical text orientation */ + white-space: normal; /* Allow wrapping within the box */ + align-content: center; +} +.blog .div5 .entryd p { + padding-top: 20px; + color: #3b3561; + font-size: 14px; + overflow: hidden; /* Hide overflowing text */ + text-overflow: ellipsis; /* Add "..." at the end of truncated text */ + max-width: 300px; /* Restrict container width */ + display: -webkit-box; /* Enables multi-line truncation */ + -webkit-line-clamp: 2; /* Limit to 2 lines */ + -webkit-box-orient: vertical; /* Vertical text orientation */ + white-space: normal; /* Allow wrapping within the box */ + font-family: "Space Grotesk", monospace; +} +.blog .div5 .entryd:hover { + transform: translateY(-5px); +} +.blog .div5 .entryd img { + max-width: 100%; + height: auto; + width: 200px; /* Set desired width */ + border-radius: 10px; /* Optional: Rounded corners */ + display: block; /* Ensures it's treated as a block element */ + margin: 0 auto; /* Centers the image horizontally */ } /*# sourceMappingURL=index.css.map */ diff --git a/nodeJS/Learning/07/app/public/css/pages/index.css.map b/nodeJS/Learning/07/app/public/css/pages/index.css.map index ea9c792..bc0ed92 100644 --- a/nodeJS/Learning/07/app/public/css/pages/index.css.map +++ b/nodeJS/Learning/07/app/public/css/pages/index.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["../../../src/styles/pages/index.scss","../../../src/styles/_reset.scss","../../../src/styles/_variable.scss"],"names":[],"mappings":"AAIA;AACA;AAEA;AAEQ;ACRR;AAAA;AAAA;EAGC;;;AAGD;EACC;;;AAGD;AAAA;EAEC;;;AAGD;EACC;EACA;;;AAGD;AAAA;AAAA;AAAA;AAAA;EAKC;EACA;;;AAGD;AAAA;AAAA;AAAA;EAIC;;;AAGD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAOC;;;AAGD;AAAA;EAEC;;;ADtCD;EACC;EACA;EACA;EACA;EACA;;;AAGD;EACC;;AACA;EACC;EACA,aEjBU;EFkBV,kBExBO;;AF2BR;EACC;;AAGD;EACC;EACA;;AAEA;EACC;EACA;EACA,OErCI;EFsCJ,aElCW;;AFqCZ;EACC;EACA;EACA,OE3CK;EF4CL,aExCS;;AF2CV;EACC,kBEjDI;EFkDJ;EACA;EACA;EACA;EACA;;AAEA;EACC,kBEvDK;;;AF4DT;EACC;;AAEC;EACC;EACA;EACA,OEnEK;EFoEL,aEjEW;;AFoEZ;EACC;EACA;EACA,OE5EM;EF6EN,aEvES;;AF2EX;EACC;EACA;EACA;EACA;EACA;;AAGD;EACC;;AAED;EACC;;AAED;EACC;;AAED;EACC;;AAED;EACC;;AAED;EACC;;AAGD;EACC,kBE5GK;EF6GL;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA,OElHK;;AFqHN;EACC;EACA;EACA,OE1HK;;AF6HN;EACC,kBE/HI;EFgIJ;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC,kBEtIK","file":"index.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["../../../src/styles/_variable.scss","../../../src/styles/_reset.scss","../../../src/styles/pages/index.scss"],"names":[],"mappings":"AAAQ;ACCR;AAAA;AAAA;EAGC;;;AAGD;EACC;;;AAGD;AAAA;EAEC;;;AAGD;EACC;EACA;;;AAGD;AAAA;AAAA;AAAA;AAAA;EAKC;EACA;;;AAGD;AAAA;AAAA;AAAA;EAIC;;;AAGD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAOC;;;AAGD;AAAA;EAEC;;;AC7CD;AACA;AAEA;AAEA;EACC;IACC;IACA;;EAED;IACC;IACA;;;AAIF;EACC;EACA;EAKA;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA;EACA;EACA;AAiDA;;AA/CA;EACC;EACA,OFhDK;EEiDL,aF9CW;EE+CX;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA,aFvDS,4BEuDyB;EAClC;EACA;EACA,OFhEI,SEgEmB;EACvB;EACA;EACA,kBFjEK,SEiE8B;EACnC;EACA;;AAEA;EACC,kBFxEG,SEwE+B;EAClC,OFvEI,SEuEoB;;AAGzB;EACC;EACA;EACA;EACA;EACA;EACA;EACA,kBFnFG,SEmF+B;EAClC,OFlFI,SEkFoB;EACxB;EACA;;AAGD;EACC,kBFxFI,SEwF+B;EACnC,OF3FG,SE2FoB;;AAKzB;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA,aFxGQ;EEyGR;EACA;EACA;EACA;;AAEA;EACC,kBFpHE;EEqHF,OFtHE;EEuHF;;AAEA;EACC;EACA;;AAIF;EACC,kBF7HG;EE8HH;EACA;;AAEA;EACC;EACA;;AAIF;EACC,kBFvII;EEwIJ;EACA;;AAEA;EACC;EACA;;AAGF;EACC,kBFnJG;EEoJH,OFtJE;EEuJF;;AAEA;EACC;EACA;;AAML;EACC;EACA;EACA;;AACA;EACC;EACA,kBFtKI;EEuKJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA,OFzLG;EE0LH;EACA,aFtLU;EEuLV;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGD;EACC;EACA,OFzMG;EE0MH;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,aF5MQ;;AE+MT;EACC;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;;AAMF;EACC;;AAIF;EACC;EACA;EACA;;AACA;EACC;EACA,kBF9OK;EE+OL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA,OFnQG;EEoQH;EACA,aFhQU;EEiQV;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGD;EACC;EACA,OFjRI;EEkRJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,aFtRQ;;AEyRT;EACC;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;;AAIH;EACC;EACA;;AACA;EACC;EACA,kBF9SM;EE+SN;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA,OFnUG;EEoUH;EACA,aFhUU;EEiUV;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGD;EACC;EACA,OFjVI;EEkVJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,aFtVQ;;AEyVT;EACC;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;;AAIH;EACC;EACA;;AACA;EACC;EACA,kBFhXK;EEiXL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA,OFpYG;EEqYH;EACA,aFjYU;EEkYV;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGD;EACC;EACA,OFpZG;EEqZH;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,aFvZQ;;AE0ZT;EACC;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA","file":"index.css"} \ No newline at end of file diff --git a/nodeJS/Learning/07/app/public/images/peeking.png b/nodeJS/Learning/07/app/public/images/peeking.png new file mode 100644 index 0000000..a411394 Binary files /dev/null and b/nodeJS/Learning/07/app/public/images/peeking.png differ diff --git a/nodeJS/Learning/07/app/public/images/test.png b/nodeJS/Learning/07/app/public/images/test.png new file mode 100644 index 0000000..fe7ed00 Binary files /dev/null and b/nodeJS/Learning/07/app/public/images/test.png differ diff --git a/nodeJS/Learning/07/app/public/js/index.js b/nodeJS/Learning/07/app/public/js/index.js new file mode 100644 index 0000000..5b06615 --- /dev/null +++ b/nodeJS/Learning/07/app/public/js/index.js @@ -0,0 +1,28 @@ +// Function to fetch and display posts +async function fetchAndDisplayPosts() { + try { + const response = await fetch("http://localhost:1337/api/posts"); // Adjust URL to your Strapi server + const result = await response.json(); + + const postsContainer = document.getElementById("posts-container"); + postsContainer.innerHTML = ""; // Clear any existing content + + // Loop through the posts and create links + result.data.forEach((post) => { + const postElement = document.createElement("div"); + const postLink = document.createElement("a"); + + // Link to the post (using slug or id for dynamic routes) + postLink.href = `/posts/${post.attributes.slug}`; // Adjust this to match your route + postLink.textContent = post.attributes.title; + + postElement.appendChild(postLink); + postsContainer.appendChild(postElement); + }); + } catch (error) { + console.error("Error fetching posts:", error); + } +} + +// Fetch posts when the page loads +document.addEventListener("DOMContentLoaded", fetchAndDisplayPosts); diff --git a/nodeJS/Learning/07/app/src/index.ts b/nodeJS/Learning/07/app/src/index.ts index 3bae478..760e5e5 100644 --- a/nodeJS/Learning/07/app/src/index.ts +++ b/nodeJS/Learning/07/app/src/index.ts @@ -1,7 +1,7 @@ import dotenv from "dotenv"; dotenv.config({ path: ".env" }); -import express, { Application } from "express"; +import express, { Application, Request, Response } from "express"; const app: Application = express(); const port: number = parseInt(process.env.PORT as string) || 3000; @@ -14,6 +14,23 @@ app.use(express.urlencoded({ extended: true })); app.set("views", `./src/views`); app.set("view engine", "ejs"); +//Get strapi data +app.get("/api/articles", async (_req: Request, res: Response) => { + try { + const response = await fetch("http://localhost:1337/api/articles"); + + if (!response.ok) { + throw new Error(`Strapi API responded with status ${response.status}`); + } + + const data = await response.json(); + res.json(data); // Pass through Strapi data + } catch (error) { + console.error("Error fetching articles from Strapi:", error); + res.status(500).json({ error: "Failed to fetch data from Strapi" }); + } +}); + //Static route app.use(express.static(`${__dirname}/../public`)); diff --git a/nodeJS/Learning/07/app/src/styles/_variable.scss b/nodeJS/Learning/07/app/src/styles/_variable.scss index 1ea1a89..b706ebb 100644 --- a/nodeJS/Learning/07/app/src/styles/_variable.scss +++ b/nodeJS/Learning/07/app/src/styles/_variable.scss @@ -1,7 +1,9 @@ -$oxford: #020122; +@import url("https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&family=Space+Grotesk:wght@300..700&display=swap"); + +$blue: #3b3561; $pink: #ddbdd5; $white: #f7ebec; -$violet: #443850; -$green: #6e8387; -$font-header: "Lora", serif; -$font-body: "Montserrat", serif; +$green: #4b8f8c; +$orange: #dd614a; +$font-header: "Lexend", serif; +$font-body: "Space Grotesk", monospace; diff --git a/nodeJS/Learning/07/app/src/styles/pages/index.scss b/nodeJS/Learning/07/app/src/styles/pages/index.scss index 85a2b41..df66df4 100644 --- a/nodeJS/Learning/07/app/src/styles/pages/index.scss +++ b/nodeJS/Learning/07/app/src/styles/pages/index.scss @@ -7,135 +7,426 @@ /* font: sans-serif for headers, serif for paragraphs, mono for whatever */ -@import url("https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap"); +@keyframes buttonEntry { + 0% { + opacity: 0; /* Start invisible */ + transform: translateY(30px); /* Start below the viewport */ + } + 100% { + opacity: 1; /* Fully visible */ + transform: translateY(0); /* End at its normal position */ + } +} -.parent { +body { + margin: 0px; + background: linear-gradient( + to top right, + variable.$blue, + lighten(variable.$blue, 50%) + ); + height: 100vh; // Ensure the gradient covers the entire viewport height + overflow: hidden; +} + +.blog { + text-align: center; + display: flex; // Use flexbox for alignment + justify-content: center; // Center horizontally + margin-bottom: 50px; + margin: 0px 50px; display: grid; - grid-template-columns: repeat(3, 1fr); - grid-template-rows: 1fr; - grid-column-gap: 20px; - grid-row-gap: 20px; -} - -.div1 { - grid-area: 1 / 1 / 2 / 3; - body { - margin: 0; - font-family: variable.$font-body; - background-color: variable.$oxford; - } - - .container { - padding: 20px; - } - - .intro { - text-align: left; - margin-bottom: 50px; - - h1 { - font-size: 2rem; - margin-bottom: 10px; - color: variable.$pink; - font-family: variable.$font-header; - } - - p { - font-size: 1.1rem; - margin-bottom: 20px; - color: variable.$white; - font-family: variable.$font-body; - } - - .read-more { - background-color: variable.$pink; - padding: 10px 20px; - border: none; - border-radius: 5px; - cursor: pointer; - font-size: 1rem; - - &:hover { - background-color: variable.$violet; - } - } - } -} -.div2 { - grid-area: 1 / 3 / 2 / 4; - .intro { - h5 { - font-size: 2rem; - margin-bottom: 10px; - color: variable.$white; - font-family: variable.$font-header; - } - - p { - font-size: 1.1rem; - margin-bottom: 20px; - color: variable.$oxford; - font-family: variable.$font-body; - } - } - - .parent { - display: grid; - grid-template-columns: repeat(3, 1fr); - grid-template-rows: repeat(2, 1fr); - grid-column-gap: 20px; - grid-row-gap: 20px; - } + grid-template-columns: repeat(4, 1fr); + grid-template-rows: repeat(2, 1fr); + gap: 20px; .div1 { - grid-area: 1 / 1 / 2 / 2; - } - .div2 { - grid-area: 1 / 2 / 2 / 3; - } - .div3 { - grid-area: 1 / 3 / 2 / 4; - } - .div4 { - grid-area: 2 / 1 / 3 / 2; - } - .div5 { - grid-area: 2 / 2 / 3 / 3; - } - .div6 { - grid-area: 2 / 3 / 3 / 4; - } + grid-area: 1 / 1 / 3 / 3; + padding-top: 160px; + display: flex; + flex-direction: column; + align-items: center; + padding: 200px 0px 0px 00px; - .feature { - background-color: variable.$pink; - border-radius: 10px; - padding: 20px; - box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); - text-align: center; - - h3 { - font-size: 1.5rem; - margin-bottom: 10px; - color: variable.$green; - } - - p { - font-size: 1rem; - margin-bottom: 20px; + h1 { + font-size: 60px; color: variable.$white; + font-family: variable.$font-header; + font-weight: 300; + padding-bottom: 20px; } - .more { - background-color: variable.$pink; - color: #fff; - padding: 10px 15px; - border: none; - border-radius: 5px; - cursor: pointer; - font-size: 0.9rem; + .read-more-btn { + display: inline-flex; /* Flex container for text and icon */ + align-items: center; /* Center text and icon vertically */ + justify-content: center; /* Center content horizontally */ + padding: 10px 20px; /* Button padding */ + font-family: variable.$font-body; /* Font style */ + font-size: 16px; /* Font size */ + font-weight: bold; /* Bold text */ + color: variable.$blue; /* Text color */ + border: 2px solid variable.$blue; /* Button border */ + border-radius: 30px; /* Rounded edges for the button */ + background-color: variable.$white; /* Transparent background */ + cursor: pointer; /* Pointer cursor on hover */ + transition: all 0.3s ease; /* Smooth transition on hover */ &:hover { - background-color: variable.$violet; + background-color: variable.$blue; /* Change background color on hover */ + color: variable.$white; /* Change text color on hover */ + } + + .icon { + display: flex; /* Flex for the icon */ + align-items: center; + justify-content: center; + margin-left: 10px; /* Space between text and icon */ + width: 20px; /* Icon circle width */ + height: 20px; /* Icon circle height */ + background-color: variable.$blue; /* Circle background color */ + color: variable.$white; /* Arrow color */ + border-radius: 50%; /* Make the icon circular */ + transition: all 0.3s ease; /* Smooth transition on hover */ + } + + &:hover .icon { + background-color: variable.$white; /* Change circle background on hover */ + color: variable.$blue; /* Change arrow color on hover */ + } + } + + /* General button styling */ + .buttons { + display: flex; + flex-direction: column; + align-items: left; + justify-content: center; + gap: 10px; + padding: 20px; + padding-right: 85px; + margin-top: 20px; + + button { + padding: 3.5px 23px; + margin: 80px; + font-size: 16px; + font-family: variable.$font-body; + border: none; + border-radius: 5px; + cursor: pointer; + transition: background-color 0.3s ease, transform 0.2s ease; + + &.psyc-button { + background-color: variable.$pink; + color: variable.$blue; + margin: 0px 0px 0px 70px; + + &:hover { + background-color: darken(variable.$pink, 10%); + transform: scale(1.05); + } + } + + &.imp-button { + background-color: variable.$green; + color: white; + margin: 0px 0px 0px 70px; + + &:hover { + background-color: darken(variable.$green, 10%); + transform: scale(1.05); + } + } + + &.code-button { + background-color: variable.$orange; + color: white; + margin: 0px 0px 0px 70px; + + &:hover { + background-color: darken(variable.$orange, 10%); + transform: scale(1.05); + } + } + &.spirit-button { + background-color: variable.$white; + color: variable.$blue; + margin: 0px 0px 0px 70px; + + &:hover { + background-color: rgb(209, 206, 206); + transform: scale(1.05); + } + } + } + } + } + .div2 { + padding-top: 30px; + height: 200px; /* Set desired height */ + width: 300px; + .entrya { + grid-area: 1 / 3 / 2 / 4; + background-color: variable.$pink; + color: black; + border-radius: 10px; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + padding: 20px; + border: none; + text-align: center; + cursor: pointer; + position: fixed; + right: 410px; + top: 40px; + height: 300px; + width: 300px; + transition: transform 0.3s ease; + animation: buttonEntry 1s ease-in-out; + + h2 { + font-size: 20px; + color: variable.$blue; + margin-bottom: 10px; + font-family: variable.$font-header; + font-weight: 500; + overflow: hidden; /* Hide overflowing text */ + text-overflow: ellipsis; /* Add "..." at the end of truncated text */ + max-width: 250px; /* Restrict container width */ + display: -webkit-box; /* Enables multi-line truncation */ + -webkit-line-clamp: 1; /* Limit to 2 lines */ + -webkit-box-orient: vertical; /* Vertical text orientation */ + white-space: normal; /* Allow wrapping within the box */ + align-content: center; + } + + p { + padding-top: 20px; + color: variable.$blue; + font-size: 0.9rem; + overflow: hidden; /* Hide overflowing text */ + text-overflow: ellipsis; /* Add "..." at the end of truncated text */ + max-width: 300px; /* Restrict container width */ + display: -webkit-box; /* Enables multi-line truncation */ + -webkit-line-clamp: 2; /* Limit to 2 lines */ + -webkit-box-orient: vertical; /* Vertical text orientation */ + white-space: normal; /* Allow wrapping within the box */ + font-family: variable.$font-body; + } + + &:hover { + transform: translate(60px, 0px); + transform: translateY(-5px); + } + + img { + max-width: 100%; + height: auto; + width: 200px; /* Set desired width */ + border-radius: 10px; /* Optional: Rounded corners */ + display: block; /* Ensures it's treated as a block element */ + margin: 0 auto; /* Centers the image horizontally */ + } + } + } + + .div2 { + .entrya { + animation: buttonEntry 1s ease-in-out; + } + } + + .div3 { + grid-area: 1 / 4 / 2 / 5; + padding-top: 30px; + width: 300px; + .entryb { + grid-area: 1 / 3 / 2 / 4; + background-color: variable.$green; + color: black; + border-radius: 10px; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + padding: 20px; + border: none; + text-align: center; + cursor: pointer; + position: fixed; + right: 90px; + top: 40px; + height: 300px; + width: 300px; + transition: transform 0.3s ease; + animation: buttonEntry 1s ease-in-out; + + h2 { + font-size: 20px; + color: variable.$blue; + margin-bottom: 10px; + font-family: variable.$font-header; + font-weight: 500; + overflow: hidden; /* Hide overflowing text */ + text-overflow: ellipsis; /* Add "..." at the end of truncated text */ + max-width: 250px; /* Restrict container width */ + display: -webkit-box; /* Enables multi-line truncation */ + -webkit-line-clamp: 1; /* Limit to 2 lines */ + -webkit-box-orient: vertical; /* Vertical text orientation */ + white-space: normal; /* Allow wrapping within the box */ + align-content: center; + } + + p { + padding-top: 20px; + color: variable.$white; + font-size: 0.9rem; + overflow: hidden; /* Hide overflowing text */ + text-overflow: ellipsis; /* Add "..." at the end of truncated text */ + max-width: 300px; /* Restrict container width */ + display: -webkit-box; /* Enables multi-line truncation */ + -webkit-line-clamp: 2; /* Limit to 2 lines */ + -webkit-box-orient: vertical; /* Vertical text orientation */ + white-space: normal; /* Allow wrapping within the box */ + font-family: variable.$font-body; + } + + &:hover { + transform: translateY(-5px); + } + + img { + max-width: 100%; + height: auto; + width: 200px; /* Set desired width */ + border-radius: 10px; /* Optional: Rounded corners */ + display: block; /* Ensures it's treated as a block element */ + margin: 0 auto; /* Centers the image horizontally */ + } + } + } + .div4 { + grid-area: 2 / 3 / 3 / 4; + width: 300px; + .entryc { + border-radius: 10px; + background-color: variable.$orange; + color: black; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + padding: 20px; + border: none; + text-align: center; + cursor: pointer; + transition: transform 0.3s ease; + animation: buttonEntry 1s ease-in-out; + position: fixed; + right: 410px; + bottom: 35px; + height: 300px; + width: 300px; + + h2 { + font-size: 20px; + color: variable.$blue; + margin-bottom: 10px; + font-family: variable.$font-header; + font-weight: 500; + overflow: hidden; /* Hide overflowing text */ + text-overflow: ellipsis; /* Add "..." at the end of truncated text */ + max-width: 250px; /* Restrict container width */ + display: -webkit-box; /* Enables multi-line truncation */ + -webkit-line-clamp: 1; /* Limit to 2 lines */ + -webkit-box-orient: vertical; /* Vertical text orientation */ + white-space: normal; /* Allow wrapping within the box */ + align-content: center; + } + + p { + padding-top: 20px; + color: variable.$white; + font-size: 0.9rem; + overflow: hidden; /* Hide overflowing text */ + text-overflow: ellipsis; /* Add "..." at the end of truncated text */ + max-width: 300px; /* Restrict container width */ + display: -webkit-box; /* Enables multi-line truncation */ + -webkit-line-clamp: 2; /* Limit to 2 lines */ + -webkit-box-orient: vertical; /* Vertical text orientation */ + white-space: normal; /* Allow wrapping within the box */ + font-family: variable.$font-body; + } + + &:hover { + transform: translateY(-5px); + } + + img { + max-width: 100%; + height: auto; + width: 200px; /* Set desired width */ + border-radius: 10px; /* Optional: Rounded corners */ + display: block; /* Ensures it's treated as a block element */ + margin: 0 auto; /* Centers the image horizontally */ + } + } + } + .div5 { + grid-area: 2 / 4 / 3 / 5; + width: 300px; + .entryd { + grid-area: 1 / 3 / 2 / 4; + background-color: variable.$white; + color: black; + border-radius: 10px; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + padding: 20px; + border: none; + text-align: center; + cursor: pointer; + transition: transform 0.3s ease; + animation: buttonEntry 1s ease-in-out; + position: fixed; + right: 90px; + bottom: 35px; + height: 300px; + width: 300px; + + h2 { + font-size: 20px; + color: variable.$blue; + margin-bottom: 10px; + font-family: variable.$font-header; + font-weight: 500; + overflow: hidden; /* Hide overflowing text */ + text-overflow: ellipsis; /* Add "..." at the end of truncated text */ + max-width: 250px; /* Restrict container width */ + display: -webkit-box; /* Enables multi-line truncation */ + -webkit-line-clamp: 1; /* Limit to 2 lines */ + -webkit-box-orient: vertical; /* Vertical text orientation */ + white-space: normal; /* Allow wrapping within the box */ + align-content: center; + } + + p { + padding-top: 20px; + color: variable.$blue; + font-size: 14px; + overflow: hidden; /* Hide overflowing text */ + text-overflow: ellipsis; /* Add "..." at the end of truncated text */ + max-width: 300px; /* Restrict container width */ + display: -webkit-box; /* Enables multi-line truncation */ + -webkit-line-clamp: 2; /* Limit to 2 lines */ + -webkit-box-orient: vertical; /* Vertical text orientation */ + white-space: normal; /* Allow wrapping within the box */ + font-family: variable.$font-body; + } + + &:hover { + transform: translateY(-5px); + } + + img { + max-width: 100%; + height: auto; + width: 200px; /* Set desired width */ + border-radius: 10px; /* Optional: Rounded corners */ + display: block; /* Ensures it's treated as a block element */ + margin: 0 auto; /* Centers the image horizontally */ } } } diff --git a/nodeJS/Learning/07/app/src/views/index.ejs b/nodeJS/Learning/07/app/src/views/index.ejs index 0d551cc..f0c14b1 100644 --- a/nodeJS/Learning/07/app/src/views/index.ejs +++ b/nodeJS/Learning/07/app/src/views/index.ejs @@ -12,34 +12,51 @@ -
-
-
-

My Blog Page

-

- Within these pages, you will find carefully curated content that - reflects my expertise, creativity, and passion for continuous growth. - Whether you seek inspiration, a nuanced perspective, or just want to - know more about me, I invite you to explore and engage with the ideas - that define my work and vision. -

- -
-
-

Author: Tiffany

-
- -
+
-

Testing

-

I am testing this out.

- +

This is my blog page.

+ +
+ + + + + +
-
-
-
-
-
-
+
+ +
+
+ +
+
+ +
+
+ +
+ +