https://github.com/envid-tech/oa-website
A small project to represent my attempt at recreating and improving the official Oxford Academy Website.
https://github.com/envid-tech/oa-website
css encryption google-api html javascript js jsx nodejs oauth2 oxford-academy react react-router-dom react-ts react-tsx reactjs scss ts ts-node tsx typescript
Last synced: 6 months ago
JSON representation
A small project to represent my attempt at recreating and improving the official Oxford Academy Website.
- Host: GitHub
- URL: https://github.com/envid-tech/oa-website
- Owner: enVId-tech
- Created: 2023-09-05T02:06:17.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2025-03-24T21:27:51.000Z (9 months ago)
- Last Synced: 2025-03-24T21:34:38.855Z (9 months ago)
- Topics: css, encryption, google-api, html, javascript, js, jsx, nodejs, oauth2, oxford-academy, react, react-router-dom, react-ts, react-tsx, reactjs, scss, ts, ts-node, tsx, typescript
- Language: TypeScript
- Homepage: https://oa.etran.dev
- Size: 23.9 MB
- Stars: 1
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Oxford Academy Website
A modern Next.js website for Oxford Academy, featuring responsive design and interactive elements.
## Overview
This project is a Next.js-based website for Oxford Academy that includes:
- Home page with animated sections
- Dynamic subpages using a shared layout pattern
- Responsive design for multiple screen sizes
- Interactive elements for improved user experience
## Project Structure
```
oxford-academy-website/
├── app/ # Next.js app directory
│ ├── _components/ # Shared components
│ │ ├── analytics/ # Analytics tracking
│ │ ├── animations/ # Animation utilities
│ │ ├── footer/ # Footer component
│ │ ├── layouts/ # Layout components
│ │ ├── navbar/ # Navigation bar
│ │ └── pagetitle/ # Page title components
│ ├── [subpage]/ # Dynamic route for subpages
│ ├── admissions/ # Admissions page
│ ├── bell-schedule/ # Bell schedule page
│ └── page.tsx # Home page
├── _scss/ # SCSS styles
│ └── pages/ # Page-specific styles
│ └── subpages/ # Subpage styles
├── public/ # Static assets
│ └── images/ # Image assets
├── .gitignore # Git ignore file
├── next.config.js # Next.js configuration
├── package.json # Project dependencies
└── tsconfig.json # TypeScript configuration
```
## Features
- **Responsive Design**: Adapts to different screen sizes
- **Dynamic Routing**: Uses Next.js file-based and dynamic routing
- **Shared Layout Pattern**: Reusable layout components for consistent UI
- **Animation Effects**: Scroll-based animations for enhanced user experience
- **SEO Optimized**: Custom page titles and metadata
## Getting Started
### Prerequisites
- Node.js (v14 or later)
- npm or yarn
### Installation
```bash
# Clone the repository
git clone [repository-url]
# Navigate to project directory
cd oxford-academy-website
# Install dependencies
npm install
```
### Development
```bash
# Start development server
npm run dev
```
Visit `http://localhost:3000` to view the website.
### Build
```bash
# Build for production
npm run build
# Start production server
npm start
```
## Technology Stack
- **Framework**: Next.js
- **Language**: TypeScript
- **Styling**: SCSS
- **Deployment**: Vercel/Netlify/Docker (recommended)
## Project Structure Notes
The project uses a shared layout pattern to reduce code duplication across similar pages. The `SubpageLayout` component encapsulates common elements like the navbar, page title, and footer, while allowing individual pages to provide their unique content.