|
1 | | -# Blaisone CTF Team Website |
2 | | - |
3 | | -A modular static website for the Blaisone CTF team, built with Next.js and designed for easy content management through JSON configuration files. |
4 | | - |
5 | | -## Features |
6 | | - |
7 | | -- **Static Export**: Optimized for deployment on any static hosting service |
8 | | -- **Modular Design**: Easy to add/remove components and content |
9 | | -- **JSON-Driven Content**: Update team members, sponsors, and writeups through simple JSON files |
10 | | -- **Responsive Design**: Works perfectly on desktop and mobile devices |
11 | | -- **SEO Optimized**: Built with Next.js best practices for search engine optimization |
12 | | -- **Dark Mode**: Default dark theme with light and system theme options |
13 | | - |
14 | | -## Deployment |
15 | | - |
16 | | -### GitHub Pages (Automatic) |
17 | | - |
18 | | -This repository is configured for automatic deployment to GitHub Pages: |
19 | | - |
20 | | -1. **Enable GitHub Pages**: |
21 | | - - Go to your repository settings |
22 | | - - Navigate to "Pages" section |
23 | | - - Under "Source", select "GitHub Actions" |
24 | | - |
25 | | -2. **Automatic Deployment**: |
26 | | - - Every push to the `main` branch triggers a deployment |
27 | | - - The site will be available at `https://pascalctf.github.io/` |
28 | | - |
29 | | -3. **Manual Deployment**: |
30 | | - - Go to the "Actions" tab in your repository |
31 | | - - Click "Deploy to GitHub Pages" workflow |
32 | | - - Click "Run workflow" to manually trigger a deployment |
33 | | - |
34 | | -### Local Development |
35 | | - |
36 | | -1. Install dependencies: |
37 | | - ```bash |
38 | | - npm install |
39 | | - ``` |
40 | | - |
41 | | -2. Run the development server: |
42 | | - ```bash |
43 | | - npm run dev |
44 | | - ``` |
45 | | - |
46 | | -3. Open [http://localhost:3000](http://localhost:3000) in your browser |
47 | | - |
48 | | -### Building for Production |
49 | | - |
50 | | -To create a static export: |
51 | | - |
52 | | -```bash |
53 | | -npm run build |
54 | | -``` |
55 | | - |
56 | | -This will generate a static site in the `out` directory. |
57 | | - |
58 | | -## Project Structure |
59 | | - |
60 | | -``` |
61 | | -├── .github/workflows/ |
62 | | -│ └── deploy.yml # GitHub Actions deployment workflow |
63 | | -├── app/ |
64 | | -│ ├── page.tsx # Homepage |
65 | | -│ ├── members/page.tsx # Team members page |
66 | | -│ ├── sponsors/page.tsx # Sponsors page |
67 | | -│ ├── writeups/page.tsx # Writeups page |
68 | | -│ └── writeups/[slug]/page.tsx # Individual writeup pages |
69 | | -├── components/ |
70 | | -│ ├── navigation.tsx # Shared navigation component |
71 | | -│ ├── theme-switcher.tsx # Theme switching component |
72 | | -│ ├── member-card.tsx # Individual member display |
73 | | -│ ├── sponsor-card.tsx # Individual sponsor display |
74 | | -│ └── writeup-card.tsx # Individual writeup display |
75 | | -├── data/ |
76 | | -│ ├── members.ts # Team members data |
77 | | -│ ├── sponsors.ts # Sponsors data |
78 | | -│ └── writeups.ts # Writeups data |
79 | | -└── next.config.mjs # Next.js configuration with static export |
80 | | -``` |
81 | | - |
82 | | -## Content Management |
83 | | - |
84 | | -### Adding Team Members |
85 | | - |
86 | | -Edit `data/members.ts` to add new team members: |
87 | | - |
88 | | -```typescript |
89 | | -{ |
90 | | - name: "New Member", |
91 | | - role: "member", // or "admin" |
92 | | - description: "Brief description of the member", |
93 | | - avatar: "/path/to/avatar.jpg", |
94 | | - social: { |
95 | | - website: "https://example.com", |
96 | | - |
97 | | - twitter: "https://twitter.com/member", |
98 | | - github: "https://github.com/member", |
99 | | - linkedin: "https://linkedin.com/in/member", |
100 | | - discord: "member#1234" |
101 | | - } |
102 | | -} |
103 | | -``` |
104 | | - |
105 | | -### Adding Sponsors |
106 | | - |
107 | | -Edit `data/sponsors.ts` to add new sponsors: |
108 | | - |
109 | | -```typescript |
110 | | -{ |
111 | | - name: "Sponsor Name", |
112 | | - logo: "/path/to/logo.png", |
113 | | - social: { |
114 | | - website: "https://sponsor.com", |
115 | | - twitter: "https://twitter.com/sponsor", |
116 | | - linkedin: "https://linkedin.com/company/sponsor" |
117 | | - } |
118 | | -} |
119 | | -``` |
120 | | - |
121 | | -### Adding Writeups |
122 | | - |
123 | | -Edit `data/writeups.ts` to add new writeups: |
124 | | - |
125 | | -```typescript |
126 | | -{ |
127 | | - title: "Challenge Name - Competition", |
128 | | - author: "Author Name", |
129 | | - date: "MM/DD/YYYY", |
130 | | - tags: ["category", "subcategory"], |
131 | | - description: "Brief description of the writeup", |
132 | | - image: "/path/to/preview.jpg", |
133 | | - slug: "url-friendly-slug" |
134 | | -} |
135 | | -``` |
136 | | - |
137 | | -## Theme System |
138 | | - |
139 | | -The website supports three themes: |
140 | | -- **Dark** (default): Dark background with light text |
141 | | -- **System**: Follows the user's system preference |
142 | | -- **Light**: Light background with dark text |
143 | | - |
144 | | -Users can cycle through themes using the theme switcher in the navigation bar. |
145 | | - |
146 | | -## Customization |
147 | | - |
148 | | -- **Colors**: Modify the color scheme in the Tailwind classes throughout the components |
149 | | -- **Layout**: Adjust the grid layouts in the page components |
150 | | -- **Styling**: Update the component styles to match your team's branding |
151 | | -- **Content Structure**: Modify the TypeScript interfaces in the components to add new fields |
152 | | - |
153 | | -## Alternative Deployment Options |
154 | | - |
155 | | -The site can also be deployed to: |
156 | | -- Vercel (recommended for Next.js) |
157 | | -- Netlify |
158 | | -- Any static hosting service |
159 | | - |
160 | | -Simply upload the contents of the `out` directory after running `npm run build`. |
161 | | - |
162 | | -## License |
163 | | - |
164 | | -MIT License - feel free to use this template for your own CTF team website. |
| 1 | +# Team website |
| 2 | +The official website for the ctf team Paolo. |
0 commit comments