Monika Roozen | Digital Strategy & AI Portfolio
This is a self-hosted, responsive personal portfolio website for Monika Roozen — an AI-driven software developer, sustainability-focused digital strategist, and storyteller. Built with Next.js 13, Tailwind CSS, and TypeScript, the site showcases Monika’s work, services, values, and writing in a sleek, interactive format. It is an assignment project for Skills City Software Engineering Bootcamp.
🚀 Project Highlights
- ✨ Modern UI/UX with interactive components
- 🧠 AI & Digital Strategy showcase
- ♻️ Sustainability + innovation focus
- 🔍 Built with SEO in mind (Google Analytics ready)
- 📱 Mobile-first, fully responsive
- 🗂️ Modular structure using
app/directory (Next.js 13)
🛠️ Tech Stack
| Tech | Usage |
|---|---|
| Next.js 13 | React framework (App Router, SSR) |
| Tailwind CSS | Utility-first CSS framework |
| TypeScript | Typed JavaScript |
| Lucide Icons | Icon library |
| Google Fonts | Dyslexie + Geist for accessibility and readability |
| ESLint | Linting with Next.js rules |
| Custom Theme | Gunmetal-themed branding with animated interactions |
📁 Folder Structure
monika-roozen-profile/ ├── src/ │ ├── app/ # Main application pages (app directory routing) │ │ ├── home/ # Hero, Services, Projects, CTA components │ │ ├── about/ # About Me page │ │ ├── projects/ # Project portfolio section │ │ ├── services/ # Services & approach │ │ ├── contact/ # Contact form + social links │ │ ├── layout.tsx # Root layout with global Navbar & Footer │ │ └── page.tsx # Main landing page │ ├── components/ │ │ ├── layout/ # MainLayout with Navbar & Footer │ │ └── ui/ # Reusable UI elements (Buttons, Modals, Toggles) ├── public/ # Static assets (images, videos) ├── styles/ or globals.css # Global styling using Tailwind ├── next.config.ts # Next.js configuration ├── tsconfig.json # TypeScript settings └── .env # Environment variables (Google Analytics key etc.)
|
🌐 Live Preview
Coming Soon – Deployed on Vercel (or DigitalOcean, if configured).
📋 Features
- Hero Section with hover image swap & CTA
- Expandable About Me section with skills & timeline
- Animated Services Cards with interactive hover effects
- Responsive Project Gallery with tooltips & icons
- Styled Contact Form (email API integration placeholder)
- Dark Mode Toggle
- SEO metadata & Google Analytics ready
🚧 Further Developments in Progress
This portfolio is continuously evolving. Here’s what’s coming next:
🎨 Homepage Animation Polish
Incorporating Framer Motion for smoother scroll-based and hover animations.✍️ Blog & Insights Section
Adding support for markdown-driven or CMS-backed blog posts with custom tagging and SEO-rich snippets.🧠 AI Tool Demos
Showcasing real-world examples of AI tools in business—like chatbots, prompt libraries, or internal decision tools.📧 Email Integration
Connecting the contact form to services like EmailJS, Resend, or Formspree for real-time submissions.📊 Analytics Dashboard (Admin Only)
Simple internal dashboard to track site traffic and project link clicks.📱 Progressive Web App (PWA) Support
Offline-ready features and mobile app install capability.🌐 Internationalization (i18n)
Optional language toggle with localization for global audiences.💬 Live Chat Widget
Integration of a privacy-first live chat tool (optional for consulting clients).
Want to suggest a feature or collaborate on a tool? Feel free to reach out!
🔧 Getting Started
Prerequisites
- Node.js 18+
- npm or yarn
- (Optional) Vercel CLI for deployment
|
📄 License This project is for educational, portfolio, and professional purposes by Monika Roozen. Not for redistribution or resale.
