Frontend Mentor - Profile card component solution
This is a solution to the Profile card component challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Table of contents
Overview
The challenge
- Build out the project to the designs provided
Screenshot
Links
- Solution URL: Add solution URL here
- Live Site URL: Add live site URL here
My process
Built with
- Semantic HTML5 markup
- Ionic markup
- Tailwind CSS
- React - JS library
- Ionic - Native Web, IOS and Android builder
- TailwindCSS - For styles
What I learned
Started to learn about Ionic framework. Thare are some configs to harmonize React+Ionic with Tailwind. Also to be able to deploy one need to adjust Vite behaviour.
<IonApp>
<IonReactRouter>
<IonRouterOutlet>
<Route exact path="/home">
<Home />
</Route>
<Redirect to="/home" />
<Route component={Home} />
</IonRouterOutlet>
</IonReactRouter>
</IonApp>
}
Continued development
The Ionic boiler plate rest over the Vite environment. I'll need to study this tool as it is my first time with it. Also it is important to respect Ionic tags about CSS when thare are also Tailwind classes...
Useful resources
- Example resource 1.
- Example resource 2 - Ionic Documentation.
- Example resource 3 - Ionic tutorial
Author
- Website - Thomas TS
- Frontend Mentor - @ttsoares
- Linkedin - thomas-soares-6791781b/
Acknowledgments
This Youtube channel is a treasure trove of IT stuff:
