This is my personal portfolio website, built to showcase my projects, skills, and background as a career-switching developer. It includes responsive layouts, subtle animations, and accessible design to ensure a smooth experience across devices.
👉 Live Demo: [franciscocristina.com] (https://www.franciscocristina.com/)
- Fully responsive design (mobile-first, optimized for desktop)
- Smooth animations and transitions with Tailwind CSS
- Project section with live demo + GitHub links
- Skills overview, with consistent branding across icons
- Accessible navigation (keyboard-friendly and screen-reader support)
- Frontend: React, Tailwind CSS
- Other tools: Git, GitHub, VS Code
- Design: Figma (wireframes & high-fidelity mockups)
All design drafts used during planning are available in the design/ folder.
They include desktop and mobile layouts, as well as hover and active states.
Note: Some elements in the drafts were later adjusted during implementation.
francisco-portfolio/
│
├── public/ # Static assets
│ └── logo.png
├── src/ # React components and assets
│ ├── assets/ # Icons, images, and SVG files
│ ├── *.jsx # React components (App, AboutMe, Contact, etc.)
│ ├── *.css # Component-specific styles
│ ├── index.css # Global styles
│ └── main.jsx # React entry point
│
├── design/ # Figma exports (layouts & UI states)
│ ├── desktop-*.png # Desktop mockups
│ └── mobile-*.png # Mobile mockups
│
├── eslint.config.js # ESLint configuration
├── vite.config.js # Vite build configuration
├── style-guide.md # Design system documentation
├── package.json
└── README.mdI’m a career-switcher from Lisbon, Portugal, with a background as a sound engineer. Years in post-production taught me discipline, attention to detail, and clear communication with clients and teams — skills I now bring to web development.
Over the past year, I’ve built 50+ frontend projects, developed full-stack applications, and consistently practiced coding challenges. My portfolio highlights hands-on experience with full-stack development, responsive design, and real-world problem-solving. I also use AI tools like ChatGPT and Claude to speed up learning and debugging, while ensuring all code is written and debugged by me.
I’ve completed Colt Steele’s Full-Stack Web Development and MySQL bootcamps, alongside courses in Figma, SQL, and Python. My goal is to grow as a frontend or full-stack developer on a team where I can contribute with problem-solving, a user-focused mindset, and high-quality work.
Email: [franciscocristina.dev@gmail.com] (mailto:franciscocristina.dev@gmail.com) LinkedIn: [/francisco-cristina] (https://www.linkedin.com/in/francisco-cristina/) GitHub: [@gumballoon] (https://github.com/gumballoon)
✨ Thanks for checking out my portfolio!