AlfinoOS - A Windows 11 Styled Portfolio

Overview

AlfinoOS is an interactive, web-based portfolio designed to simulate a modern desktop operating system environment, heavily inspired by Windows 11. It serves as a creative and engaging platform to showcase my skills, projects, and professional experience. Rather than a traditional portfolio website, AlfinoOS provides an immersive experience where users can open "applications," explore "files," and interact with a familiar UI, all within their browser.

The project is built with a focus on clean design, fluid animations, and a responsive layout that adapts to various screen sizes.

Project Objectives

• Showcase Skills: To demonstrate proficiency in modern frontend technologies, including Next.js, React, and Tailwind CSS.
• Engage Visitors: To provide a unique and memorable user experience that stands out from standard portfolio websites.
• Organize Content: To present projects, work experience, and personal information in a structured, intuitive, and interactive format.

Table of Contents

• Architecture
• Project Structure
• Technology Stack
• Getting Started
  • Prerequisites
  • Installation
  • Running the Project
• Configuration

Architecture

The application is built on a client-centric architecture using the Next.js App Router. All interactions and application logic are handled on the client-side to create a seamless, desktop-like experience without page reloads.

graph TD
    subgraph Browser
        A[User Interaction] --> B(React Components);
        B --> C{State Management};
        C --> D[UI Rendering];
    end

    subgraph AppWindows ["Application Windows"]
        W1[File Explorer]
        W2[Browser]
        W3[Settings]
        W4[...]
    end

    subgraph Core
        E[Next.js App Router] --> B;
        F[Global State: ThemeProvider] --> B;
        G[Static Data: /lib/data.tsx] --> B;
    end
    
    B --> W1;
    B --> W2;
    B --> W3;
    B --> W4;

    style Browser fill:#f9f,stroke:#333,stroke-width:2px;
    style Core fill:#ccf,stroke:#333,stroke-width:2px;
    style AppWindows fill:#cfc,stroke:#333,stroke-width:2px;

Loading

Data Flow Explanation:

1. User Interaction: The user clicks on UI elements like the Taskbar, Start Menu, or desktop icons.
2. React Components: These interactions trigger state changes within the root Home component (src/app/page.tsx).
3. State Management: The state for each application window (e.g., isFileExplorerOpen) is updated.
4. UI Rendering: React re-renders the UI, conditionally displaying or hiding application window components based on the current state.
5. Static Data: Information for apps, recommended files, and tech stack is sourced from static files in the /lib directory, keeping content decoupled from logic.
6. Theming: The ThemeProvider context provides global state for the application's visual theme (light/dark mode) and accent colors, which components can consume.

Project Structure

The project follows a standard Next.js App Router structure. Key directories include:

.
├── src/
│   ├── app/                 # Main application routes (page.tsx, layout.tsx)
│   ├── components/
│   │   ├── layout/          # Desktop components (Taskbar, Start Menu)
│   │   ├── ui/              # Reusable UI elements (Button, Card, etc.)
│   │   └── windows/         # Components for each application window
│   ├── contexts/            # React context providers (e.g., ThemeProvider)
│   ├── hooks/               # Custom React hooks
│   └── lib/                 # Utilities, static data, and icons
├── public/                  # Static assets (images, fonts)
└── tailwind.config.ts       # Tailwind CSS configuration

Technology Stack

This project is built using a modern and robust technology stack:

Category	Technologies
Core Framework
Language
Styling
UI Components	ShadCN/UI - A collection of beautifully designed, accessible, and customizable React components.
Animations	tailwindcss-animate, react-draggable - For fluid UI transitions and draggable window behavior.
Linting/Formatting
Package Manager	npm

Getting Started

Follow these instructions to get a local copy up and running for development purposes.

Prerequisites

• Node.js (v20.x or later recommended)
• npm (usually comes with Node.js)

Installation

1. Clone the repository:

   git clone https://github.com/alfinohatta/your-repo-name.git
   cd your-repo-name

2. Install dependencies:

   npm install

Running the Project

To run the development server:

npm run dev

The application will be available at http://localhost:9002.

Configuration

Theming

• Colors & Styles: Core theme variables (primary color, background, etc.) are defined in src/app/globals.css using HSL CSS variables.
• Accent Colors: Taskbar accent colors are managed through the ThemeProvider in src/contexts/theme-provider.tsx and can be configured in the "Settings" application.

Content

• Apps & Data: The list of pinned apps, recommended files, and other static content is managed in src/lib/data.tsx.
• Placeholder Images: All placeholder images are defined and sourced from src/lib/placeholder-images.json.