https://github.com/lassestilvang/cosmic-nexus
Cosmic Nexus is a showcase website that blends futuristic technology with nature's wonders to create extraordinary digital experiences.
https://github.com/lassestilvang/cosmic-nexus
cloudflare cloudflare-workers eslint framer-motion gray-matter mdx mdx-js nextjs open-next react react-three-fiber reading-time swr tailwindcss threejs tsparticles typescript vercel-analytics web-vitals wrangler
Last synced: 2 months ago
JSON representation
Cosmic Nexus is a showcase website that blends futuristic technology with nature's wonders to create extraordinary digital experiences.
- Host: GitHub
- URL: https://github.com/lassestilvang/cosmic-nexus
- Owner: lassestilvang
- Created: 2025-09-27T00:07:24.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2026-02-27T11:47:02.000Z (4 months ago)
- Last Synced: 2026-03-27T04:47:59.795Z (3 months ago)
- Topics: cloudflare, cloudflare-workers, eslint, framer-motion, gray-matter, mdx, mdx-js, nextjs, open-next, react, react-three-fiber, reading-time, swr, tailwindcss, threejs, tsparticles, typescript, vercel-analytics, web-vitals, wrangler
- Language: TypeScript
- Homepage: https://cosmic-nexus.lasse-stilvang.workers.dev/
- Size: 262 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Cosmic Nexus
## Description
Cosmic Nexus is a showcase website that blends futuristic technology with nature's wonders to create extraordinary digital experiences. It serves as a portfolio platform featuring interactive 3D visualizations, a blog with technical content, and modern web development practices, all themed around cosmic and organic elements. Explore the intersection of AI, quantum computing, and sustainable tech through immersive interfaces that push the boundaries of web innovation.
## Features
- **Home Page**: Hero section with animated title and call-to-action buttons, expertise showcase (AI-Powered Innovation, Quantum Computing, Space Exploration, Sustainable Tech), rotating testimonials carousel with client reviews and ratings, floating cosmic-themed elements, and an optional weather widget displaying current conditions and 3-day forecast.
- **Portfolio Page**: Filterable project gallery with categories (All, Web Development, Data Visualization, AI/ML, Education). Features 6 sample projects including a cosmic e-commerce platform, neural network visualizer, quantum computing simulator, bio-luminescent dashboard, AI art generator, and space mission planner. Each project card shows description, technologies, and links to live demo/GitHub.
- **Blog**: MDX-powered blog with posts on topics like AI in space exploration, quantum computing breakthroughs, and web development trends. Includes reading time estimates, categories, and excerpt previews. Posts are generated from MDX files in `src/content/blog/` via a build script.
- **About Page**: Placeholder page for creator information.
- **Contact Page**: Placeholder page for contact details.
- **Navigation**: Fixed header with smooth hover animations, active page indicators, and responsive design.
- **Interactive Elements**: 3D cosmic sphere visualization, particle backgrounds, page transitions, scroll-triggered animations, and accessibility support (respects `prefers-reduced-motion`).
- **Weather Widget**: Client-side weather display using geolocation (fallback to Copenhagen), fetching data from OpenWeather API with current temperature, conditions, and 3-day forecast.
- **Testimonials**: Auto-rotating carousel with navigation controls, star ratings, and company logos.
## Installation Instructions
To get started with Cosmic Nexus, follow these step-by-step instructions:
1. **Prerequisites**:
- Ensure you have Node.js (version compatible with Next.js 15+) installed on your system.
- Install pnpm package manager globally: `npm install -g pnpm`.
- Set up a Cloudflare account for deployment.
- Obtain an OpenWeather API key from [OpenWeatherMap](https://openweathermap.org/api) for weather widget functionality.
2. **Clone the Repository**:
```
git clone https://github.com/your-username/cosmic-nexus.git
cd cosmic-nexus
```
3. **Install Dependencies**:
```
pnpm install
```
4. **Environment Setup**:
- Create a `.env.local` file in the root directory.
- Add your OpenWeather API key: `OPENWEATHER_API_KEY=your_api_key_here`.
5. **Run the Development Server**:
```
pnpm dev
```
The application will be available at `http://localhost:3000`.
## Usage
- **Development**: Run `pnpm dev` to start the development server with Turbopack for fast reloading.
- **Building**: Execute `pnpm build` to compile the application (includes running `scripts/generate-posts.js` to convert MDX blog files to JSON).
- **Linting**: Use `pnpm lint` to check code quality with ESLint.
- **Deployment**: Run `pnpm deploy` to build and deploy to Cloudflare Workers using OpenNext.
- **Preview**: Use `pnpm preview` to build and preview the production build locally.
- **Type Generation**: Run `pnpm cf-typegen` to generate TypeScript types for Cloudflare environment bindings.
## Technologies Used
- **Next.js 15.4.6**: React framework for server-side rendering, static generation, and API routes.
- **React 19.1.0**: UI library for building interactive components.
- **TypeScript**: Type-safe JavaScript for better development experience and error prevention.
- **Tailwind CSS v4**: Utility-first CSS framework for responsive, cosmic-themed styling.
- **Framer Motion**: Animation library for smooth transitions, hover effects, and scroll animations.
- **Three.js & React Three Fiber**: 3D graphics libraries for cosmic sphere and interactive visualizations.
- **@tsparticles/react**: Particle effects for dynamic backgrounds.
- **MDX (@next/mdx, @mdx-js/react)**: Markdown with JSX for rich blog content rendering.
- **SWR**: Data fetching library for weather API with caching and revalidation.
- **OpenNext (@opennextjs/cloudflare)**: Tool for deploying Next.js apps to Cloudflare Workers.
- **Wrangler**: Cloudflare's CLI for managing Workers and deployments.
- **Vercel Analytics**: Web analytics tracking.
- **Web Vitals**: Performance monitoring and Core Web Vitals measurement.
- **Gray-matter & reading-time**: Frontmatter parsing and reading time calculation for blog posts.
- **ESLint & Next.js ESLint config**: Code linting and quality enforcement.
## Contributing Guidelines
We welcome contributions to Cosmic Nexus! To contribute:
1. **Fork the Repository**: Create a fork of the project on GitHub.
2. **Create a Feature Branch**: `git checkout -b feature/your-feature-name`.
3. **Make Changes**: Implement your changes, ensuring code quality and following TypeScript best practices.
4. **Run Tests and Linting**: Execute `pnpm lint` and ensure all checks pass.
5. **Commit Changes**: Use descriptive commit messages.
6. **Submit a Pull Request**: Push your branch and create a PR with a clear description of changes.
7. **Report Issues**: Use GitHub Issues to report bugs or suggest features, providing detailed information.
Please follow our coding standards: use TypeScript, maintain accessibility, and ensure responsive design.
## License
This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.
## Contact Information
- **Email**: contact@cosmicnexus.dev
- **GitHub**: [https://github.com/your-username/cosmic-nexus](https://github.com/your-username/cosmic-nexus)
- **LinkedIn**: [https://linkedin.com/in/your-profile](https://linkedin.com/in/your-profile)
- **Website**: [https://cosmicnexus.dev](https://cosmicnexus.dev)