Francisca Portugal - Portfolio

About

This is my personal portfolio website, built to showcase my work as a web developer and designer. It features a modern, responsive UI, project gallery, experience timeline, and interactive components.

Key Features

• Responsive design for all devices
• Project gallery with detailed views
• Experience timeline
• Theme switcher (light/dark)
• Interactive UI elements (badges, progress bars, dock, dropdowns)
• Fast performance with Vite
• Built with accessibility in mind

Live Demo

The first version of the site is live at: https://franciscapt.pages.dev

Technical Implementation

Tech Stack

• Framework: React 18.x (TypeScript)
• Styling: Tailwind CSS v4
• Build Tool: Vite
• State: React hooks
• Routing: React Router

System Architecture

┌──────────────────────────────┐
│        Frontend (React)      │
│  Tailwind CSS + TypeScript   │
├──────────────────────────────┤
│        Vite Dev Server       │
└──────────────────────────────┘

Folder Structure

portfolio/
├── public/
│   └── images/
│       ├── people/
│       └── projects/
├── src/
│   ├── assets/
│   ├── components/
│   ├── data/
│   ├── layouts/
│   ├── pages/
│   ├── router/
│   ├── style/
│   └── utils/
├── index.html
├── package.json
├── tsconfig.json
├── vite.config.js
└── README.md

Features Implemented

• Responsive layout with Tailwind CSS
• Project gallery and detail pages
• Experience timeline
• Theme switcher (light/dark)
• Custom UI components (badges, dock, dropdowns, etc.)
• Pagination and filtering for projects
• Local storage for theme preference
• Accessibility best practices

---

Portfolio of Francisca Portugal - Web Developer