Hello! I'm Ian Angelo Valmores, a passionate 2nd-year student pursuing a degree in Computer Science/Information Technology. This portfolio showcases my journey in web development, featuring projects I've created using React and other modern technologies.
- Currently enrolled as a 2nd-year student
- Focusing on web development, programming, and software engineering
- HTML5, CSS3, JavaScript (ES6+)
- TypeScript
- React.js with SWC (faster compilation)
- Vite (Fast build tool and development server)
- Tailwind CSS (Utility-first CSS framework)
- Node.js
- React Router (For client-side routing)
- Redux Toolkit / React Context API (State management)
- Framer Motion (Animation library)
- React Query / SWR (Data fetching and caching)
- Material UI
- Chakra UI
- Shadcn UI
- Radix UI (Headless components)
- Tailwind CSS (Primary styling approach)
- CSS Modules
- Styled Components
- SASS/SCSS
- Express.js
- RESTful APIs
- GraphQL with Apollo Client
- Supabase / Firebase (Backend-as-a-Service)
- Jest
- React Testing Library
- Cypress (E2E testing)
- Git & GitHub
- VS Code with ESLint and Prettier
- Chrome DevTools
- Storybook (Component documentation)
- Figma (Design collaboration)
- Vercel
- Netlify
- GitHub Pages
This section will be updated as I complete more projects
- Description: A personal portfolio website built with React, Vite, TypeScript, and Tailwind CSS
- Technologies: React, Vite, TypeScript, Tailwind CSS, Framer Motion
- Features: Responsive design, dark/light mode, animations, contact form
- Link to live demo
- Link to GitHub repository
- Description: A data visualization dashboard with authentication and real-time updates
- Technologies: React, Redux Toolkit, Material UI, Chart.js, Firebase
- Features: User authentication, real-time data, interactive charts
- Link to live demo
- Link to GitHub repository
- Description: A full-featured e-commerce platform with product catalog and cart functionality
- Technologies: React, TypeScript, Stripe, Supabase
- Features: Product listings, shopping cart, checkout process, user accounts
- Link to live demo
- Link to GitHub repository
- Relevant coursework: Web Development, Data Structures, Algorithms
- Class projects and assignments
As a 2nd-year student, I'm constantly learning and improving my skills. This portfolio will grow as I progress through my academic journey and personal projects.
- Email: vianangelo.14@gmail.com
- LinkedIn: Ian Angelo Valmores
- GitHub: veth14
- Master modern React patterns and best practices
- Explore server components and React Server Side Rendering
- Learn mobile development with React Native
- Gain experience with headless CMS solutions (Contentful, Sanity)
- Implement CI/CD pipelines for automated testing and deployment
- Contribute to open-source React projects
- Secure an internship focused on modern frontend development
- React Documentation
- Vite Documentation
- Tailwind CSS Documentation
- TypeScript Handbook
- Web Dev Simplified YouTube Channel
- Fireship YouTube Channel
- Frontend Masters
# Clone the repository
git clone https://github.com/yourusername/portfolio.git
# Navigate to the project directory
cd portfolio
# Install dependencies
npm install
# Start the development server
npm run dev
# Build for production
npm run buildThis project uses Tailwind CSS for styling. Here's how it was set up:
# Install Tailwind CSS and its dependencies
npm install -D tailwindcss postcss autoprefixer
# Generate Tailwind configuration files
npx tailwindcss init -pConfigure Tailwind CSS by updating the tailwind.config.js file:
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}Add Tailwind directives to your CSS in src/index.css:
@tailwind base;
@tailwind components;
@tailwind utilities;# Routing
npm install react-router-dom
# Animations
npm install framer-motion
# Icons
npm install react-icons
# Form handling
npm install react-hook-form
# Data fetching
npm install @tanstack/react-queryThis portfolio is built with React, Vite, TypeScript, and Tailwind CSS, and will be regularly updated with new projects and skills as I continue my education.