Header Border
section border section border

About Me

Hi, I'm Toula, a passionate Web Developer & UI Designer who loves bringing ideas to life through creative, user-centered design and clean, functional code. After interning with Springfield Commonwealth Academy, I transitioned into a full-time role where I design, develop, and maintain the school's website and digital platforms.

I enjoy blending front-end web development, UI/UX design, and AI-driven tools to create engaging, accessible, and intuitive online experiences. I'm also expanding my expertise through UI/UX certification courses to deepen my understanding of user research, wireframing, and interaction design.

What excites me most about web development and design is how it combines art and logic — crafting digital experiences that look beautiful and work seamlessly. Web design and frontend development are like painting on a canvas for me, and I love being able to make content and websites that are visually appealing that others can use. My long-term goal is to continue building and designing innovative, human-centered websites that inspire, inform, and connect people.

What am I seeking now? I'm looking for entry-level opportunities in Front end web development, web design, or UI/UX design. I'm skilled in HTML, CSS, JavaScript, React, Webflow, Figma, and content design. I'm also experienced in social media content creation/design and collaborating with startups to translate briefs into polished, live content.

blue figma section border

Figma UI/UX Designs

My Projects

Portfolio Website

Saunders Labs Website

SCISS Website

WordPress Projects

SCA Website

Bear Finder Website

My Boutique Website

Project Modal

Portfolio Website

Welcome to my personal portfolio website! This project holds a special place as it not only showcases my skills and accomplishments but also serves as a testament to my passion for web development.

Technologies Used:


  • HTML
  • CSS
  • JavaScript

Tools Used:


  • Figma - View Design
  • VS Code
  • Github
  • Photoshop (for editing, recoloring, combining, and refining AI-assisted graphics)
  • AI Prompting (ChatGPT, for initial design ideas such as graphics [flowers and carousel arrows], and as an advanced google and debugging resource when troubleshooting CSS)
  • Coolors
  • HTML Validator Extension

Key Features:


  • Interactive and user-friendly design.
  • Responsive layout for seamless viewing across devices.
  • Integration of skills and experiences to provide a holistic perspective.
  • Smooth navigation and intuitive UI.

Insights:


Throughout the process of building this website, I deepened my understanding of front-end web technologies. By teaching myself HTML, CSS, and JavaScript, I was able to craft this platform to reflect both my personality and professional capabilities.

This portfolio not only showcases my projects but also highlights my relentless pursuit of knowledge and passion for coding. As a Software Engineering graduate from RIT (May 2025) and aspiring Web Developer, I strive to push the boundaries of my abilities while creating visually appealing, functional, and meaningful web experiences.

Project Modal

Saunders Labs Website

This project is a redesign of the Saunders Labs website from the Saunders College of Business at RIT. The original website lacked mobile responsiveness, so I took the initiative to redesign it using RIT's colors, typography, and logo in Figma, ensuring a seamless experience across all devices. This project also marks my second solo website design endeavor.

Technologies Used:


  • HTML
  • CSS
  • JavaScript
  • PHP
  • CodeIgniter
  • Bootstrap

Tools Used:


  • Figma - View Design
  • PhpStorm 2023.1.2
  • Github Desktop
  • Gitlabs
  • Laragon

Key Features:


  • Mobile-responsive design with RIT's branding.
  • Enhanced user experience through intuitive navigation.
  • Improved accessibility for all users.
  • Efficient codebase using modern web development practices.

Insights:


Redesigning the Saunders Labs website provided me with valuable experience in implementing responsive design principles and utilizing design tools like Figma. Throughout this project, I've further honed my front-end development skills and gained insights into creating accessible and visually appealing web experiences.

This website not only demonstrates my design and development capabilities but also reflects my dedication to continuous learning and improvement. As a Software Engineering graduate from RIT (May 2025) and aspiring Web Developer, I'm committed to pushing the boundaries of web development to create impactful and engaging digital solutions.

Project Modal

SCISS Website

This project involved redesigning and coding all 16 pages of Springfield Commonwealth Academy's summer school website in just 3 weeks. As an individual work project, I took on the complete responsibility of transforming the existing website into a modern, responsive, and user-friendly platform.

Technologies Used:


  • HTML
  • CSS
  • React
  • JavaScript
  • PHP

Tools Used:


  • GitHub
  • PhpMyAdmin
  • Cursor AI
  • Hostinger

Key Features:


  • Complete redesign of all 16 pages for improved user experience.
  • Modern, responsive design that works seamlessly across all devices.
  • Efficient codebase using React for dynamic content rendering.
  • PHP integration for backend functionality and database management.
  • Professional deployment using Hostinger hosting platform.

Project Scope:


This project showcased my ability to work independently and deliver a complete website redesign within a tight 3-week deadline. I handled everything from initial design concepts to final deployment, demonstrating strong project management and technical execution skills.

The website now provides Springfield Commonwealth Academy with a modern, professional online presence that effectively communicates their summer school programs and information to prospective students and families.

Insights:


This project was an excellent opportunity to apply my full-stack development skills in a real-world setting. Working with React, PHP, and modern web technologies allowed me to create a robust and scalable solution. The experience reinforced my passion for creating meaningful digital experiences that serve educational institutions and their communities.

Project Modal

WordPress Learning Project

Created two WordPress sites in 24 hours to rapidly learn the platform, demonstrating adaptability and quick skill acquisition for WordPress development roles.

Technologies Used:


  • WordPress
  • CSS

Tools Used:


  • WordPress.com
  • WordPress Dashboard
  • WordPress Themes
  • WordPress Plugins

Key Features:


  • Two fully functional WordPress websites created in 24 hours.
  • Demonstrated rapid learning and adaptation to new platforms.
  • Explored WordPress themes, customization, and content management.
  • Responsive design implementation using WordPress tools.
  • Content creation and site structure organization.

Project Scope:


This project was a focused learning exercise to quickly acquire WordPress skills. Within 24 hours, I created two distinct WordPress websites, exploring various themes, customization options, and WordPress-specific features. This rapid learning project demonstrates my ability to quickly adapt to new technologies and platforms, which is essential for WordPress development roles.

Insights:


This intensive learning project reinforced my passion for continuous skill development and adaptability. Working with WordPress allowed me to understand content management systems from a user and developer perspective. The experience highlighted the importance of being able to quickly learn and apply new technologies, which is crucial in the fast-paced web development industry.

Project Modal

SCA Website

This project involves redesigning and developing all 17 pages of Springfield Commonwealth Academy's main school website within a 3-week timeline. My manager wanted me to redesign the webpage with a focus on AI, ensuring parents and visitors understand that this is a private boarding school that combines traditional learning with AI.

Technologies Used:


  • HTML
  • CSS
  • JavaScript

Tools Used:


Key Requirements & Features:


  • Main page includes a video to showcase the school
  • Comprehensive homepage design where each section has a button linking to main navigation links, eliminating the need to click navigation links
  • New "School News" page with a news banner at the top
  • Prestigious design using school colors as accents with star elements for visual impact
  • Focus on AI integration and private boarding school identity
  • Responsive design utilizing existing mobile and tablet layouts from Webflow

Project Process:


Week 1 - Research & Design: Started by meeting with my manager to understand pain points and requirements. Conducted research by looking at top schools and other AI-focused schools to see how they structured their websites. Completed the complete redesign in 3 days using Figma.

Week 2-3 - Implementation: Built the implementation of the redesign in Webflow, completing 11 out of 17 pages in the first week. Currently have 6 pages remaining. I'm working efficiently to get the website launched quickly while ensuring quality doesn't suffer.

The redesign emphasizes the school's prestigious nature through strategic use of their main colors as accents and incorporating star elements throughout the design. The website clearly communicates that Springfield Commonwealth Academy is a private boarding school that uniquely combines traditional learning with AI technology.

Project Status:


In Progress: Currently actively developing the website on Webflow. The link is available for viewing the work-in-progress site. All 17 pages are being redesigned, with 11 pages completed and 6 remaining. The project is on track for completion within the 3-week timeline.

Project Modal

Teddy Bear Finder Website

Currently in the design and planning phase, the Teddy Bear Finder Website is a personal project aimed at helping users find and recover lost teddy bears. This heartwarming initiative combines my passion for web development with a meaningful cause that brings joy to families and children.

The inspiration for this project came from a deeply personal experience - I lost my beloved teddy bear that I had cherished for 22 years of my life. While searching for a replacement, I discovered that only Google image search was available, which didn't yield any helpful results. This gap in the market inspired me to create a dedicated platform where people can help each other find their lost stuffed animals.

Technologies Planned:


  • HTML
  • CSS
  • JavaScript

Tools Used:


  • Figma - Currently designing UI/UX mockups
  • Webflow - Planned for initial implementation

Key Features (Planned):


  • User-friendly interface for reporting lost teddy bears.
  • Search functionality to help locate found teddy bears.
  • Photo upload system for identification purposes.
  • Community-driven platform connecting people who have lost and found teddy bears.
  • Responsive design optimized for mobile and desktop use.

Project Progress:


Currently in the Figma design phase, I am focusing on creating intuitive user interfaces and user experience flows. The design process involves mapping out user journeys for both people who have lost teddy bears and those who have found them.

After completing the Figma designs, I plan to implement the site using Webflow as a starting point, with custom HTML, CSS, and JavaScript for advanced functionality and customization. This approach will allow for rapid prototyping while maintaining the flexibility to add sophisticated features.

Insights:


This project represents my commitment to using technology for positive social impact. The Teddy Bear Finder Website combines my technical skills with a meaningful mission to help families reunite with their beloved stuffed animals. It's a perfect example of how web development can create solutions that bring joy and comfort to people's lives.

Project Modal

My Boutique Website

As an aspiring Web Developer with a passion for design and entrepreneurship, I am currently working on an exciting personal project called "Toula's Boutique." This website will serve as an online shop where I will sell handmade products such as lip gloss, slime, art, stickers, and other creative items. I want to create an inviting, user-friendly experience for customers to browse, purchase, and engage with my unique creations.

Technologies Used:


  • CSS
  • JavaScript
  • Bootstrap
  • HTML

Tools Used:


  • Figma - View Design
  • VS Code
  • Github
  • AI Prompting (ChatGPT, for initial design ideas such as graphics [Logo and carousel arrows], and as an advanced google and debugging resource when troubleshooting CSS)
  • Coolors
  • HTML Validator Extension

Key Features (Planned):


  • User-friendly interface with a visually appealing aesthetic.
  • Product galleries showcasing lip glosses, slime, art, and stickers.
  • Responsive design for optimal viewing on various devices.
  • Simple and secure checkout process for seamless purchasing.
  • Engaging carousel highlighting new or featured products.

Project Progress:


Currently, "Toula's Boutique" is in its design and development phase. I'm focusing on creating a responsive front-end interface that ensures smooth functionality across different devices. Starting with designing a Figma prototype to map out the visual elements and user experience for the website. Once the Figma design is finalized, I will move on to coding and building the front-end of the site.

After the front-end is complete, I will shift focus to the back-end development, specifically integrating a shopping cart and checkout system to provide a seamless purchasing experience for users. I am considering using Loveable AI with Shopify integration as a starting base for the backend purchasing functionality, which will provide a robust e-commerce foundation while allowing for custom development and personalization.

Insights:


This project has allowed me to blend my passion for web development and creativity. From designing the visual layout to coding interactive features, it's been an incredible learning experience. I'm excited to bring this project to life and share my handmade creations with the world through a well-crafted online shop.

My Skills

Languages & Technologies

  • Front-End:

    HTML5, CSS3, JavaScript (ES6+), React, Bootstrap, jQuery
  • Back-End:

    PHP, Python, SQL, NoSQL, CodeIgniter

Design Tools & Skills

  • Design Software:

    Figma (prototyping, auto layout, components, dev handoff, Figma AI), Webflow, WordPress, Photoshop, Canva
  • Design Skills:

    Wireframing, Prototyping, UX Research & Surveys, Usability Testing, Responsive Design, Visual Design Principles, Content Design

Development & Testing Tools

  • AI Development Tools:

    ChatGPT, Claude, Cursor, Copilot, Lovable AI, Figma AI
  • Version Control & Code Editors:

    Git/GitHub, VS Code, IntelliJ
  • Project Management:

    Jira, Confluence, Trello
  • Design Collaboration:

    Coolors, Lucidchart
  • Testing:

    Mocha, HTML Tidy, HTML Validator Extension

Soft Skills

  • Continuous Learning:

    Enthusiastic about staying updated with the latest frontend technologies and best practices.
  • Collaboration and Communication:

    Effective team player with strong communication skills in both technical and non-technical environments.
Contact Section Border

Contact Me

If you are interested in hiring me for an entry-level opportunity in Front end web development, web design, or UI/UX design; or have any related inquiries, feel free to reach out through:

Flower Decal for left side Flower decal on the right side