A cyberpunk-themed terminal interface for the N0wayBack CTF team
View Live Site • Features • Tech Stack • Project Structure
Table of Contents
This is the official website for the N0wayBack team, built with Astro framework, showcasing team introduction, member information, and a hall of fame. The website features a cyberpunk terminal-style design with interactive elements and responsive layouts.
Visit our website at https://n0wayback.net
- Terminal-Style Interface: The entire website is designed to mimic a terminal/command-line interface
- Cyberpunk Aesthetic: Features neon colors, grid backgrounds, and glitch effects
- Dual-Color ASCII Art: Custom ASCII art with cyan and red color scheme for brand identity
- Dark Mode Support: Optimized for both light and dark themes
- Fully Responsive: Carefully designed for both desktop and mobile devices
- Optimized Layout: Flex-based layout system ensures proper content distribution and footer positioning
- Dynamic Loading Animation: Custom loading screen with progress bar enhances user experience
Designed and developed by shenghuo2
/
├── public/
│ ├── favicon.svg
│ └── assets/
│ └── members/ # Team member avatars
├── src/
│ ├── assets/ # Website resources
│ │ ├── logo.svg
│ │ ├── logo-origin.webp
│ │ └── background.svg
│ ├── components/ # Reusable components
│ │ ├── Footer.astro
│ │ ├── MemberCard.astro
│ │ └── Navbar.astro
│ ├── data/ # Data files
│ │ ├── honors.ts # Honors and achievements data
│ │ └── members.ts # Team members data
│ ├── layouts/ # Page layouts
│ │ └── MainLayout.astro
│ └── pages/ # Pages
│ ├── honors.astro
│ ├── index.astro
│ └── members.astro
├── .github/
│ └── workflows/
│ └── astro.yml # GitHub Pages automated deployment
├── CNAME # Custom domain configuration
├── astro.config.mjs # Astro configuration
├── tailwind.config.js # Tailwind CSS configuration
├── tsconfig.json # TypeScript configuration
└── package.json
- Home Page: Team introduction with terminal-style ASCII art and manifesto
- Members Page: Displays team leaders, active members, and pioneers with their skills and contributions
- Honors Timeline: Chronological display of team achievements and milestones in CTF competitions
- Responsive Design: Adapts to various device screen sizes with optimized layouts for mobile
- Optimized Loading Experience: Progressive loading animations with customized messages for different page types
- Full-Screen Terminal: Vertically expanded terminal interface that fills the entire viewport for immersive experience
All commands are run from the root of the project:
| Command | Action |
|---|---|
npm install |
Installs dependencies |
npm run dev |
Starts local dev server at localhost:4321 |
npm run build |
Builds production site to ./dist/ directory |
npm run preview |
Previews build locally before deployment |
- Astro - Fast, modern static site generator
- Tailwind CSS - Utility-first CSS framework
- TypeScript - Typed JavaScript for better code quality
The website uses a flex-based layout system to ensure proper content distribution across different screen sizes:
- Flexible Container Layout: Using flex-grow and flex-direction to optimize space usage
- Sticky Footer: Footer is properly positioned at the bottom of the page using mt-auto
- Full-height Terminal: Terminal container expands to fill available viewport space
- Responsive Typography: Font sizes adjust based on screen width
- Mobile-Optimized Navigation: Simplified navigation for smaller screens
The website features a sophisticated loading animation system:
- Progress Bar: Visual indication of page loading progress
- Custom Loading Messages: Different messages based on page type (index, members, honors)
- Smooth Transitions: Fade-in effects for content after loading completes
- Terminal Boot Effect: Simulates a terminal boot sequence for an authentic cyberpunk experience
- Optimized Performance: Loading animations are designed to be lightweight and non-blocking
The website is automatically deployed to GitHub Pages using GitHub Actions. The deployment workflow is defined in .github/workflows/astro.yml. When changes are pushed to the main branch, the site is automatically built and deployed.
If you want to contribute to the N0wayBack team website, feel free to submit a Pull Request or contact our team members.
This project is licensed under the GPL-3.0 License - see the LICENSE file for details.