A modern, developer‑focused website for GDG on Campus – University of Primorska, built with Next.js 14, TypeScript, and Tailwind CSS.
The project is designed to be fast, accessible, visually engaging, and easy for contributors to extend.
This website serves as the central hub for:
- Community events
- Team information
- Projects and collaborations
- Blog posts and resources
- GDG on Campus activities at the University of Primorska
It is built with a clean, terminal‑inspired UI using Google Developer brand colors and modern frontend tooling.
- Modern Design: Terminal-inspired aesthetic with Google Developer brand colors
- Fully Responsive: Mobile-first design that works on all devices
- Performance Optimized: Built with Next.js 14 App Router for optimal performance
- Animated: Smooth animations with Framer Motion
- Type Safe: Full TypeScript support
- SEO Friendly: Optimized metadata and semantic HTML
- Next.js 14 (App Router) – server components, routing, metadata, performance
- TypeScript – full type safety across the project
- Tailwind CSS – utility‑first styling
- Tailwind Merge + clsx – clean class composition
- Custom Google Developer color palette
- Framer Motion – smooth, modern animations
- Lucide React – lightweight, customizable icons
- Static TypeScript data files (
lib/data/*.ts) - Easily replaceable with a CMS in the future
- Vercel (recommended)
- Supports Netlify, Railway, AWS Amplify, or custom hosting
gdg-primorska/
├── app/
│ ├── layout.tsx
│ ├── page.tsx
│ ├── globals.css
│ ├── about/
│ ├── events/
│ ├── team/
│ ├── projects/
│ └── blog/
├── components/
│ ├── layout/
│ ├── home/
│ └── ui/
├── lib/
│ ├── data/
│ └── utils/
├── public/
│ ├── images/
│ ├── team/
│ └── events/
└── types/
This structure follows Next.js 14 best practices and keeps components modular and maintainable.
- Node.js 18+
- npm or yarn
- Git
git clone https://github.com/gdgoncampus-up/gdgoncampus-up.git
cd gdgoncampus-up
npm install
npm run devVisit: http://localhost:3000
- Homepage (
/)- Hero section with animated background
- Community stats
- Upcoming events carousel
- Tech stack showcase
- Events Page (
/events)- Event filtering (upcoming/past, by type)
- Event cards with details
- Registration links
- Team Page (
/team)- Team member profiles
- Social media links
- Join team CTA
- Projects Page (
/projects)- Showcase community projects
- GitHub integration
- Project filters and search
- Blog Page (
/blog)- Tech articles
- Event recaps
- Tutorials
- About Page (
/about)- Mission and vision
- History
- Partners
- Contact information
Each page is built as a standalone route under app/.
- Resources Page (
/resources)- Learning materials
- Workshop recordings
- Useful links
- Contact page (
/contact)- Contact form
- Social media links
- Location map
- Newsletter subscription
- Dark mode toggle
- ... and more!
The project uses Google Developer brand colors defined in tailwind.config.ts:
google: {
blue: '#4285F4',
red: '#EA4335',
yellow: '#FBBC04',
green: '#34A853',
}Two font families are used:
- JetBrains Mono: For code-like elements (headers, terminals)
- Inter: For body text and general content
Edit lib/data/events.ts.
{
id: 'unique-id',
title: 'Event Title',
description: 'Event description',
date: '2026-01-15',
time: '18:00',
location: 'FAMNIT',
type: 'Workshop',
image: '/events/event-image.jpg',
registrationLink: 'https://...',
tags: ['Tag1', 'Tag2'],
isPast: false,
}Edit lib/data/team.ts.
{
id: 'unique-id',
name: 'Full Name',
role: 'Position',
company: 'Company Name (optional)',
image: '/team/photo.jpg',
github: 'https://github.com/username',
linkedin: 'https://linkedin.com/in/username',
}npm run dev # Start development server
npm run build # Production build
npm start # Run production server
npm run lint # Lint code- Push to GitHub
- Import repo on Vercel
- Deploy instantly
The site can be deployed on:
- Netlify
- Railway
- AWS Amplify
- Custom server
Create a .env.local file for sensitive data:
# Analytics (optional)
NEXT_PUBLIC_GA_ID=your-google-analytics-id
# Email (optional)
CONTACT_EMAIL=gdgoncampus.up@gmail.com- Static TypeScript files
- Events and team data in lib/data/*.ts
- Zero backend
- Easy for contributors
- Contentful: For blog posts
- Notion: For events and resources
- Strapi: Self-hosted CMS
- Sanity: Real-time collaboration
The project includes:
- Semantic HTML
- Metadata in
layout.tsx - OpenGraph tags for social sharing
- Sitemap generation
- Robots.txt
Create app/opengraph-image.png (1200x630px) for social sharing previews.
To make the site installable:
npm install next-pwaCreate next.config.js:
const withPWA = require('next-pwa')({
dest: 'public'
})
module.exports = withPWA({
// your config
})Ensure paths start with / and files are in public/.
# Clear cache and rebuild
rm -rf .next
npm run buildEnsure all imports match the file structure and TypeScript is configured correctly
Check type definitions in types/.
We welcome contributions from students, developers, and community members!
- Fork the repository
- Create a feature branch
git checkout -b feature/my-feature - Commit your changes
git commit -m 'Add amazing feature' - Push the branch
git push origin feature/amazing-feature - Open a Pull Request
- Follow the existing file structure
- Use TypeScript
- Keep components small and reusable
- Use Tailwind for styling
- Write meaningful commit messages
- Email: gdgoncampus.up@gmail.com
- Instagram: @gdgoncampus.up
- Community Page: https://gdg.community.dev/gdg-on-campus-university-of-primorska-koper-slovenia/
This project is licensed under the MIT License.
- Google Developer Groups
- University of Primorska – FAMNIT
- Student Council
- All contributors and community members
Built with ❤️ by GDG on Campus Primorska
For questions or support, reach out to the Team Lead & Project Maintainer: Zhivko Stoimchev