cyruslung / legislative-election

2023 THE F2E 前端修練精神時光屋 - 立委競選官網

Description

針對一位即將競選立法委員的AI候選人所設計的官方網站，致力於為候選人塑造出良好的形象，同時提供重要的政見主張資訊以及捐款指引。

Getting Started

Version

本專案在 Node.js v20.10.0 環境下進行開發。

Install the project

$ npm install

Run the project

$ npm run dev

Project structure description

├── public
│   └── assets/                  # 包含公共的圖像資源，如字體、圖像等。
├── components                   # 包含應用程式中的可重複使用元件。
│   ├── About/                   
│   ├── Campaign/                
│   ├── ContactUs/               
│   ├── Donate/                  
│   ├── Home/                    
│   ├── Layout/                  
│   ├── Policy/                  
│   └── UI/                      
├── constants/                   # 專案中用來定義常數值的一個模組或目錄。
├── hooks/                       # 用於存放自定義的React Hooks，這些Hooks是用來處理組件邏輯、狀態管理、以及與其他React功能的集成。
├── pages                        # 包含應用程式的頁面元件，用於建立不同的頁面。
│   ├── api/                     # 包含應用程式的設定檔或設定。
│   ├── _app.tsx                 # 應用程式的主應用程式元件。
│   └── index.tsx                # 應用程式的主入口檔案。
├── styles/                      # 存放與網頁或應用程式的樣式相關的資源文件。
├── utils/                       # 包含各種輔助工具或功能的實用工具函數。。
├── .eslintrc.json               # 用於配置 ESLint 的配置檔案，它控制著 JavaScript 代碼風格和品質的檢查工具。
├── .gitignore                   # 指定哪些檔案或目錄不應該被Git版本控制系統追蹤或提交到版本儲存庫中。
├── next-env.d.ts                # 用於定義全域的 TypeScript 類型，讓 TypeScript 編譯器能夠正確地理解 Next.js 的特定 API 和模組。
├── next.config.js               # 是 Next.js 項目中的一個配置文件，用於定制和設定 Next.js 應用程式的各種行為和功能。
├── package-lock.json            # 鎖定安裝的 npm package 版本的檔案。
├── package.json                 # 專案的npm套件設定文件，包含了專案依賴和腳本。
├── postcss.config.js            # 配置 PostCSS 的設定檔案，用於處理 CSS 的工具。
├── tailwind-default.config.js   # 自定義 Tailwind CSS 框架的各種設定，例如顏色、字體、間距、陰影等。
├── tailwind.config.js           # 自定義顏色、字型、間距、邊框等各種設定，以及啟用或禁用特定的功能和模組。
├── tsconfig.json                # TypeScript的設定文件，用於指定專案的編譯選項。
└── README.md                    # 包含項目的簡要描述和使用說明的自述文件。

Built With

• Next.js
• TypeScript
• Tailwind CSS
• Swiper
• Aos
• Animate.css
• React-modal
• React-countup
• React-scroll-parallax
• Dayjs
• Postcss
• Zod

🔗 Link

• 2023 THE F2E
• Design - Mock Up (by Una)
• Design - Figma (by Una)
• Demo (by Cyrus)