Create basic skeleton (#13)

Signed-off-by: brian-ngyn <[email protected]>

.eslintrc.cjs

@@ -0,0 +1,45 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+/** @type {import("eslint").Linter.Config} */
+
+const path = require("path");
+const prettierConfig = require(path.join(__dirname, ".prettierrc.cjs"));
+
+/** @type {import("eslint").Linter.Config} */
+const config = {
+  extends: [
+    "plugin:@typescript-eslint/recommended",
+    "plugin:prettier/recommended",
+    "prettier",
+    "plugin:tailwindcss/recommended",
+    "next",
+  ],
+  parser: "@typescript-eslint/parser",
+  parserOptions: {
+    project: ["./tsconfig.json"],
+    tsconfigRootDir: __dirname,
+  },
+  plugins: [
+    "@typescript-eslint",
+    "prettier",
+    "promise",
+    "sort-keys",
+    "sort-destructure-keys",
+  ],
+  rules: {
+    "@typescript-eslint/no-unused-vars": ["error", { argsIgnorePattern: "^_" }],
+    eqeqeq: ["error", "smart"],
+    "no-eval": "error",
+    "no-var": "error",
+    "prettier/prettier": ["error", prettierConfig],
+    "react/display-name": "off",
+    "react/jsx-sort-props": "error",
+    "react/no-unknown-property": "error",
+    "react/sort-comp": 0,
+    "sort-destructure-keys/sort-destructure-keys": 2,
+    // "no-restricted-imports": ["error", { patterns: [".*"] }],
+    "sort-keys": "error",
+    "sort-keys/sort-keys-fix": "error",
+  },
+};
+
+module.exports = config;

.github/CODEOWNERS

@@ -0,0 +1,15 @@
+# Lines starting with '#' are comments.
+# Each line is a file pattern followed by one or more owners.
+
+# More details are here: https://help.github.com/articles/about-codeowners/
+
+# The '*' pattern is global owners.
+
+# Order is important. The last matching pattern has the most precedence.
+# The folders are ordered as follows:
+
+# In each subsection folders are ordered first by depth, then alphabetically.
+# This should make it easy to add new rules without breaking existing ones.
+
+# Global rule:
+* @techstartucalgary/website-maintenance-team

.gitignore

@@ -122,9 +122,11 @@ dist
 # Stores VSCode versions used for testing VSCode extensions
 .vscode-test
 
+**/.DS_Store
+
 # yarn v2
 .yarn/cache
 .yarn/unplugged
 .yarn/build-state.yml
 .yarn/install-state.gz
-.pnp.*
+.pnp.*

.husky/pre-commit

@@ -0,0 +1 @@
+npx --no-install lint-staged

.nvmrc

@@ -0,0 +1 @@
+v20.18.0

.prettierrc.cjs

@@ -0,0 +1,15 @@
+/** @type {import("prettier").Config} */
+const config = {
+  endOfLine: "auto",
+  arrowParens: "always",
+  printWidth: 80,
+  singleQuote: false,
+  jsxSingleQuote: false,
+  semi: true,
+  trailingComma: "all",
+  tabWidth: 2,
+  plugins: [require.resolve("prettier-plugin-tailwindcss")],
+  tailwindConfig: "./tailwind.config.ts",
+};
+
+module.exports = config;

.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["dbaeumer.vscode-eslint", "esbenp.prettier-vscode"]
+}

.vscode/settings.json

@@ -0,0 +1,24 @@
+{
+  "[typescript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode",
+    "editor.formatOnSave": true
+  },
+  "[typescriptreact]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode",
+    "editor.formatOnSave": true
+  },
+  "[css]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode",
+    "editor.formatOnSave": true
+  },
+  "[postcss]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode",
+    "editor.formatOnSave": true
+  },
+  "[javascript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode",
+    "editor.formatOnSave": true
+  },
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.formatOnSave": true,
+}

.yarnrc.yml

@@ -0,0 +1 @@
+nodeLinker: node-modules

LICENSE

@@ -18,4 +18,4 @@ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+SOFTWARE.

README.md

@@ -24,4 +24,4 @@ To stay up-to-date with the latest news and events from Tech Start UCalgary, fol
 
 If you have any questions or feedback about our website or community, please don't hesitate to [contact our team](mailto:[email protected]).
 
-Thank you for visiting the Tech Start UCalgary website!
+Thank you for visiting the Tech Start UCalgary website!

next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.

next.config.mjs

@@ -0,0 +1,9 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  compiler: {
+    styledComponents: true,
+  },
+  reactStrictMode: true,
+};
+
+export default nextConfig;

package.json

@@ -0,0 +1,78 @@
+{
+  "name": "root",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint",
+    "prepare": "husky"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.13.3",
+    "@emotion/styled": "^11.13.0",
+    "@fortawesome/fontawesome-svg-core": "^6.6.0",
+    "@fortawesome/free-brands-svg-icons": "^6.6.0",
+    "@fortawesome/free-regular-svg-icons": "^6.6.0",
+    "@fortawesome/react-fontawesome": "^0.2.2",
+    "@mui/material": "^6.1.2",
+    "aos": "^2.3.4",
+    "axios": "^1.7.7",
+    "classnames": "^2.5.1",
+    "framer-motion": "^11.11.1",
+    "lottie-react": "^2.4.0",
+    "next": "14.2.14",
+    "react": "^18",
+    "react-countup": "^6.5.3",
+    "react-dom": "^18",
+    "react-intersection-observer": "^9.13.1",
+    "react-lazy-load-image-component": "^1.6.2",
+    "react-lottie": "^1.2.4",
+    "react-multi-carousel": "^2.8.5",
+    "react-scroll": "^1.9.0",
+    "react-tsparticles": "^2.9.3",
+    "react-visibility-sensor": "^5.1.1",
+    "styled-components": "^6.1.13",
+    "tsparticles": "^2.9.3"
+  },
+  "devDependencies": {
+    "@types/aos": "^3.0.7",
+    "@types/eslint": "^9.6.0",
+    "@types/node": "^20",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "@types/react-lazy-load-image-component": "^1.6.4",
+    "@types/react-lottie": "^1.2.10",
+    "@types/react-scroll": "^1.8.10",
+    "@typescript-eslint/eslint-plugin": "^7.4.0",
+    "@typescript-eslint/parser": "^7.4.0",
+    "autoprefixer": "^10.4.20",
+    "eslint": "8.57.0",
+    "eslint-config-next": "14.2.14",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-config-turbo": "latest",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-prettier": "^5.2.1",
+    "eslint-plugin-promise": "^7.1.0",
+    "eslint-plugin-sort-destructure-keys": "^2.0.0",
+    "eslint-plugin-sort-keys": "^2.3.5",
+    "eslint-plugin-tailwindcss": "^3.17.4",
+    "husky": "^9.1.6",
+    "lint-staged": "^15.2.10",
+    "postcss": "^8.4.47",
+    "prettier": "^3.3.3",
+    "prettier-plugin-tailwindcss": "^0.6.6",
+    "tailwindcss": "^3.4.4",
+    "typescript": "^5"
+  },
+  "lint-staged": {
+    "**/*.{js,ts,tsx}": [
+      "eslint --fix"
+    ]
+  },
+  "engines": {
+    "node": "20.x"
+  },
+  "packageManager": "[email protected]"
+}

postcss.config.cjs

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    autoprefixer: {},
+    tailwindcss: {},
+  },
+};

src/components/Apply/Accordion.styles.ts

@@ -0,0 +1,79 @@
+import styled from "styled-components";
+
+interface AccordionProps {
+  contentVisible: boolean;
+}
+
+const containerCSS = `
+  display: flex;
+  justify-content: left;
+  width: 100%;
+  margin: auto;
+`;
+
+export const AccordionContainer = styled.div`
+  ${containerCSS};
+
+  & > p {
+    font-size: clamp(18px, calc(0.25vw + 18px), 22px);
+    font-weight: 520;
+    color: white;
+    margin: 0;
+    padding-right: 2vw;
+    @media (max-width: 850px) {
+      padding-right: 6vw;
+    }
+  }
+
+  & > span {
+    font-size: 27px;
+    position: absolute;
+    transform: translateY(-6.5px);
+    right: 8%;
+    color: var(--primary-green, rgb(106, 235, 80));
+    text-shadow: rgb(74, 241, 8);
+
+    @media (max-width: 850px) {
+      right: 11vw;
+    }
+  }
+`;
+
+export const Accordion = styled.div`
+  width: 100%;
+  border-bottom: 0.5px solid rgb(148, 148, 148);
+
+  &:last-of-type {
+    border-bottom: none;
+  }
+`;
+
+export const AccordionHeading = styled.div`
+  display: flex;
+  justify-content: left;
+  padding: 12px 0;
+  cursor: pointer;
+`;
+
+export const AccordionContent = styled.div<AccordionProps>`
+  max-height: ${(props) => (props.contentVisible ? "120vh" : 0)};
+  opacity: ${(props) => (props.contentVisible ? 1 : 0)};
+
+  display: flex;
+  overflow: hidden;
+  transition: all 0.8s ease-in-out;
+  transition-delay: 0s;
+
+  & li {
+    margin-left: 10px;
+  }
+`;
+
+export const HTML_Container = styled.div`
+  ${containerCSS};
+  color: #cfcfcf;
+  margin: 0 15px 30px 10px;
+  font-size: clamp(12px, calc(0.2vw + 12px), 16px);
+  line-height: 23px;
+  font-weight: 400;
+`;

src/components/Apply/Accordion.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+import * as S from "./Accordion.styles";
+
+type AccordionProps = {
+  title: string;
+  active: string;
+  setActive: React.Dispatch<React.SetStateAction<string>>;
+  description: string;
+};
+
+const Accordion = (props: AccordionProps) => {
+  return (
+    <S.Accordion>
+      <S.AccordionHeading
+        onClick={() =>
+          props.active === props.title
+            ? props.setActive("")
+            : props.setActive(props.title)
+        }
+      >
+        <S.AccordionContainer>
+          <p>{props.title}</p>
+          <span>{props.active === props.title ? "-" : "+"}</span>
+        </S.AccordionContainer>
+      </S.AccordionHeading>
+      <S.AccordionContent contentVisible={props.active === props.title}>
+        <S.HTML_Container>
+          <p dangerouslySetInnerHTML={{ __html: props.description }}></p>
+        </S.HTML_Container>
+      </S.AccordionContent>
+    </S.Accordion>
+  );
+};
+
+export default Accordion;