Grecia Valero's Work | ContraWork by Grecia Valero
Grecia Valero

Grecia Valero

UI/UX Design & Web Dev | Shopify, WordPress, 3D Integration

    5x
    Hired
    5.00
    Rating
    24
    Followers
Introducing Focus Time! 🧠 Excited to share my submission for the Figma × Contra Makeathon. Focus Time turns your focus sessions into a game. It's designed with neurodiversity accessibility in mind, especially for ADHD users, but works for anyone who struggles with distraction, motivation, or just getting started. Live URL: https://hazy-cost-79611241.figma.site Figma Community link: https://www.figma.com/community/file/1649657429531880491/focus-time What it does You build a personal pinboard: a mood board with sticky notes, bullet lists, checklists, stickers, and up to 3 images that stays visible while you work. The checklist you add there automatically connects to the timer. When you're done designing your pinboard, you click Done and a snapshot is saved locally that same image appears as your wallpaper during the focus session, keeping your goals in sight. The timer runs in two modes: standard count-up (better for ADHD no interruptions, no pressure) and Pomodoro (25 min focus / 5 min rest, for neurotypicals or structured workers). During the session, motivational pixel-art speech bubbles appear on screen every 20 minutes reminders to hydrate, stretch, rest your eyes, and avoid your phone with a subtle retro sound. Every time you complete a task, a celebration bubble appears too. Scoring system When you stop the timer, you're asked how you're feeling. That mood, combined with your focus time, task completion rate, and session behavior, generates a full stat breakdown: HP: Health balance (hydration, rest, session length) MP: Focus quality (work/rest/distraction balance) STR: Strength (how well you managed distractions) MOT: Motivation (mood balance throughout) WIS: Wisdom (how much of your checklist you finished) DET: Determination (the sum of STR + MOT + WIS) Sessions under 20 minutes get heavily penalized. The scoring is intentionally designed to reward sustained, balanced work over quick bursts. Power-ups You can earn power-ups during and after a session things like 😊 Good Mood Task, ⚡ Fast & Successful, 🎯 Checklist Champion, and the rare ❓ Super Rare Box (finish all tasks, no distractions, balanced HP and MP). When you earn one mid-session, a retro victory sound plays and an animated popup appears on screen. Body doubling For ADHD users who work better with someone else "in the room," there's a body doubling panel with three modes: Lofi Girl (music and ambient animation), ADHD Focus (task-focused, no break videos), and Pomodoro for Neurotypicals (structured cycles). The panel supports fullscreen and lets you switch between videos. Sharing After each session you get an overall score card. You can export it as PDF, download it as an image, copy a plain-text summary, or share directly to X, Bluesky, LinkedIn, WhatsApp, Telegram, Reddit, Threads, Discord, TikTok, and more. You can also send it by email — it opens your mail client with the subject and body pre-filled with all your metrics. Tech Built with Figma Make using React + Vite + TypeScript. No backend, no database, everything runs locally in the browser using localStorage. Images are drawn to canvas for download. Audio uses the Web Audio API (no external libraries). Fully client-side.
3
4
347
Cover image for Recently I finished my web
Recently I finished my web design portfolio. I used AstroJS and netlify for the deploy. https://greciavdev.netlify.app/ I also create a digital CV: https://greciavcv.netlify.app/ I like the result and would like some suggestions and recommendations for improvement.
4
7
336
Cover image for Dana Shape Shopify E‑commerce Website | UI/UX Store Design
Dana Shape Shopify E‑commerce Website | UI/UX Store Design
2
5
Cover image for E-Learning & E-Commerce Platform Design | UI/UX Education Web
E-Learning & E-Commerce Platform Design | UI/UX Education Web
1
1
Cover image for Wellness Website Design with Payments | UI/UX Healing Platform
Wellness Website Design with Payments | UI/UX Healing Platform
1
3
Cover image for Car Rental Website Design | WordPress Elementor UI/UX
Car Rental Website Design | WordPress Elementor UI/UX
1
3
Cover image for Bambu Artesanías E-commerce Website | WordPress UI/UX Design
Bambu Artesanías E-commerce Website | WordPress UI/UX Design
1
1
Cover image for Food E-commerce Website Design | WordPress Restaurant UX
Food E-commerce Website Design | WordPress Restaurant UX
1
26
Cover image for Coaching Website Design | High-Converting Personal Brand UX
Coaching Website Design | High-Converting Personal Brand UX
1
16
Cover image for 3D Product Animation in Blender | High-Converting E-commerce Ad
3D Product Animation in Blender | High-Converting E-commerce Ad
1
18
Animated Loops & Short 3D Videos Client Commissions with Results
1
9
Cover image for Gamified UX Dashboard | Engaging EdTech Design
Gamified UX Dashboard | Engaging EdTech Design
1
21
Cover image for High-Converting Landing Page Design | Marketing UX & Web Design
High-Converting Landing Page Design | Marketing UX & Web Design
1
5
Cover image for Creative Portfolio Website with 3D Design | Freelance Homepage
Creative Portfolio Website with 3D Design | Freelance Homepage
1
10
Cover image for WordPress Website Redesign for V7AD | UX/UI Case Study
WordPress Website Redesign for V7AD | UX/UI Case Study
1
16
Cover image for Marketing Website Design for Alma Street | UX/UI Case Study
Marketing Website Design for Alma Street | UX/UI Case Study
1
11