OpportuMap

A skill-matching platform that connects refugees, displaced persons, and people in economic hardship with jobs, mentors, and vital local resources — barrier-free.

Comment

Inspiration Every year, over 100 million people are forcibly displaced worldwide. Many of them carry years of professional experience — nurses, developers, teachers, engineers — yet face near-impossible barriers when seeking employment in a new country. Traditional job boards weren't designed for them: they demand local resumes, formal credential recognition, native-language fluency, and professional networks that simply don't exist when you've left everything behind.

We built OpportuMap because we believe that a person's skills don't lose value when they cross a border. We were inspired by the real stories of displaced professionals — a Syrian nurse unable to practice in Vienna despite 8 years of experience, a Ukrainian social worker searching for basic shelter before she could even think about employment. We wanted to build something that meets people where they are: not just a job board, but an entire support ecosystem.

What it does OpportuMap is a skill-matching platform that connects refugees, displaced persons, and people in economic hardship with three core pillars:

🔍 Skill-Matched Jobs — Browse 2,400+ job listings across Technology, Healthcare, Education, Logistics, Social Work, Creative, and Language fields. Our search and filtering system matches users to roles based on actual skills — not resumes or formal credentials. Filter by category, work mode (remote/hybrid/on-site), experience level, and urgency.

📦 Local Resources — A location-aware directory of vital services including food assistance, emergency housing, legal aid, language classes, healthcare, and government programs — all searchable by city. Resources include real-time availability status (Open, Enrolling, Urgent).

🤝 Volunteer Mentors — A network of 870+ professional mentors who donate their time for career guidance, interview preparation, credential recognition support, and general human connection. Users can filter mentors by expertise, language, and availability.

Additional features:

User Profiles — Build a profile with skills, languages, and preferences. No resume upload required. Job Saving & Application Tracking — Save interesting roles, apply directly, and track application status. Success Stories — Read real stories from people who found work and rebuilt their lives through the platform. Fully Responsive — Works beautifully on mobile, tablet, and desktop. No Account Required — Browse all jobs, resources, and mentors without signing up. Profiles are optional. How we built it We intentionally chose a zero-dependency, static-first architecture to maximize accessibility and deployability:

HTML5 — Semantic, accessible markup with proper ARIA labels, landmark roles, and keyboard navigation across all 6 pages (Home, Jobs, Resources, Mentors, Stories, Profile). Vanilla CSS — A comprehensive custom design system with CSS custom properties for theming, glassmorphism effects, responsive grid layouts, and smooth micro-animations. Over 7 modular stylesheets totaling ~56KB of hand-written CSS. Vanilla JavaScript — All interactivity built without frameworks. Features include: Intersection Observer-based scroll animations and counter animations Real-time search and multi-filter job board with debouncing LocalStorage-powered persistence for saved jobs, profiles, and application tracking Toast notification system Mobile-responsive navigation Data Layer — Structured JavaScript data files for jobs, mentors, resources, and stories — designed to be easily swappable with a real API. Deployment — Hosted on Vercel with GitHub auto-deploy integration. The entire platform runs client-side with zero build steps, zero npm dependencies, and zero server requirements — meaning it can be hosted anywhere, even on a USB drive in areas with limited internet infrastructure.

Challenges we ran into Designing for a diverse, global audience — We had to consider users with varying levels of tech literacy, different languages, and potentially slow or unreliable internet connections. This drove our decision to avoid heavy frameworks and keep the bundle size minimal. Making the skill-matching feel intelligent without a backend — Implementing meaningful search and filtering purely on the client-side required careful data structuring and efficient JavaScript filtering logic. Balancing visual polish with accessibility — We wanted a premium, modern UI with glassmorphism, animations, and dark themes, but had to ensure everything remained accessible (proper contrast ratios, ARIA labels, keyboard navigation, screen reader support). Creating realistic, respectful sample data — Writing job listings, mentor profiles, and success stories that felt authentic and dignified, without tokenizing or stereotyping displaced communities. Responsive design across all pages — With 6 distinct page layouts and complex filter UIs, ensuring a consistent, beautiful experience from mobile to desktop was a significant effort. Accomplishments that we're proud of Zero dependencies — The entire platform is built with vanilla HTML, CSS, and JavaScript. No React, no Tailwind, no npm packages. It loads in under 2 seconds. 6 fully functional pages — Home, Jobs Board, Resources Directory, Mentor Network, Success Stories, and User Profile — each with distinct, polished UI and real interactivity. A job board that actually works — Real-time search, multi-filter (category, mode, experience, urgency), sort options, skill-tag filtering, save/unsave functionality, and application tracking — all client-side. A design system from scratch — 70+ CSS custom properties, reusable card/badge/button components, consistent typography, and smooth animations built entirely by hand. Accessibility-first — Semantic HTML, ARIA labels, keyboard navigation, and screen reader compatibility throughout. Instant deployability — No build step, no server, no config. Just open index.html and it works. What we learned Constraints breed creativity — Building without frameworks forced us to deeply understand the DOM, CSS layout, and browser APIs. The result is faster, lighter, and more maintainable than most framework-based alternatives. Design is empathy — Designing for displaced people taught us to question every assumption: "Does this require a permanent address?" "Does this assume English fluency?" "Does this work on a 3G connection?" LocalStorage is surprisingly powerful — For a prototype, localStorage-based persistence provides a complete user experience (profiles, saved jobs, application tracking) without any backend complexity. Accessibility isn't an afterthought — When you build it in from the start (semantic HTML, ARIA, keyboard nav), it's not extra work — it's just good engineering. What's next for OpportuMap Real backend & database — Migrate from localStorage to a proper backend (Node.js + PostgreSQL or Firebase) to support real user accounts, persistent data, and cross-device sync. AI-powered skill matching — Use NLP to intelligently match user profiles with job requirements, even when skill descriptions differ by language or terminology. Multilingual support — Full i18n with at least Arabic, Ukrainian, Spanish, French, and Dari translations. Employer portal — Allow organizations and NGOs to directly post opportunities and manage applications. Real-time chat with mentors — WebSocket-based messaging for instant mentor-mentee communication. Mobile app — A Progressive Web App (PWA) version with offline support for areas with unreliable connectivity. Partnerships — Collaborate with UNHCR, IRC, and local refugee resettlement agencies to populate real, verified job and resource listings.

Built With

Share this project:

Updates