This is my hobby/personal portfolio — a place to share what I’m learning and building. You’ll find small projects, UI/UX experiments, and a few case-study notes built with React + Tailwind.
🎯 Key Highlights:
- 📱 Mobile-first responsive design
- ⚡ Performance-optimized React application
- 🎨 Modern UI/UX with smooth animations
- 📊 SEO-optimized with analytics integration
- 🔒 GDPR-compliant privacy features
If this project helps or inspires you, please consider giving it a star! ⭐ It helps other developers discover this work.
Result: 200% increase in appointment bookings
- Modern healthcare booking system
- Mobile-responsive design
- Performance optimization (3s load time reduction)
- University assignment showcases
- Technical documentation examples
- Code quality demonstrations
- Small web apps and components
- Landing page concepts
- UI/UX prototypes and motion studies
- Articles and notes on frontend
- Modern, responsive design with mobile-first approach
- Smooth animations with Framer Motion
- Clean, professional UI with TailwindCSS
- Accessibility-focused components
- Projects (personal, academic, and concepts)
- Blog (short notes and tutorials)
- About (background and goals)
- Contact (say hi)
- Frontend: React 19.1.0 + Vite 7.0.4
- Styling: TailwindCSS 3.4.17
- Animations: Framer Motion 12.23.12
- Icons: React Icons 5.5.0
- Forms: React Toastify for notifications
- Email: Nodemailer with Zoho SMTP
- Deployment: Vercel
- GA4 + Plausible (optional)
- Per-page meta + Open Graph
- Schema.org (Person, WebSite, ImageObject, Article)
- Sitemap and robots.txt
- Image alt text and descriptive filenames
- Project inquiry form with detailed fields
- Service request forms
- Newsletter subscription
- WhatsApp integration
- Node.js (v18 or higher)
- npm or yarn
# Clone the repository
git clone https://github.com/lodsa-ntos/lodex-portfolio.git
# Navigate to project directory
cd lodex-portfolio
# Install dependencies
npm install
# Start development server
npm run dev# Development
npm run dev # Start dev server at http://localhost:5173
# Production
npm run build # Build for production
npm run preview # Preview production build
# Code Quality
npm run lint # Run ESLintsrc/
├── components/ # Reusable UI components
│ ├── HeroSection.jsx
│ ├── WorksSection.jsx
│ ├── ExpertiseSection.jsx
│ └── FooterSection.jsx
├── pages/ # Page components
│ ├── LandingPage.jsx
│ ├── blog/
│ ├── projects/
│ ├── services/
│ ├── legal/ # Privacy, Terms, Cookies
│ └── sobre/
├── utils/ # Utility components
│ ├── GlobalContainer.jsx
│ ├── SectionContainer.jsx
│ └── Whatsapp.jsx
├── layout/ # Layout components
│ ├── LayoutGlobal.jsx
│ └── ErrorBoundary.jsx
└── assets/ # Static assets
├── expertises/
├── tech/
└── me/
api/ # Serverless functions
├── send-service.js # Service inquiry handler
├── start-project.js # Project form handler
└── newsletter.js # Newsletter subscription
public/ # Static files
├── images/
├── sitemap.xml
├── robots.txt
└── favicon files
Create a .env.local file in the root directory:
# Email Configuration
ZOHO_PASS=your_zoho_app_password
EMAIL_TO=[email protected]
# Google Analytics (optional)
GA_MEASUREMENT_ID=G-XXXXXXXXXXContact forms can be wired to an email provider (e.g., Zoho SMTP) if needed.
Fully responsive design with breakpoints:
- xs: 320px (Mobile small)
- sm: 640px (Mobile medium)
- md: 768px (Tablets)
- lg: 1024px (Desktop)
- xl: 1280px (Large desktop)
- Primary: Custom blue gradients
- Secondary: Professional grays
- Accent: Green (#2F9B92)
- Primary: Satoshi (Headings)
- Secondary: Jost (Body text)
- Accent: Lobster (Special cases)
- Security headers via Vercel configuration
- Input validation on all forms
- XSS protection
- CSRF protection
- Content Security Policy headers
- Privacy Policy
- Terms of Service
- Cookie Policy
- Code Splitting: Automatic with Vite
- Image Optimization: WebP format support
- Lazy Loading: Implemented for images
- Minification: Production builds optimized
- CDN: Assets served via Vercel Edge Network
- Semantic HTML structure
- Meta tags optimization
- Schema.org structured data
- XML sitemap
- Robots.txt configuration
- Optimized page titles and descriptions
- Alt text for all images
- Clean URL structure
- Internal linking strategy
- Google Analytics 4: User behavior tracking
- Core Web Vitals: Performance monitoring
- Error Boundary: Graceful error handling
- Toast Notifications: User feedback
# Install Vercel CLI
npm i -g vercel
# Deploy
vercel
# Production deployment
vercel --prod# Build for production
npm run build
# Deploy dist/ folder to your hosting provider- Create component in
src/pages/ - Add route in
src/App.jsx - Update sitemap if public page
- Main styles in
src/index.css - TailwindCSS configuration in
tailwind.config.js - Component-specific styles inline
- Add a page/component under
src/pages/ - Wire a route in
src/App.jsx - Update sitemap if public
- Email: [email protected]
- Website: https://lodexstudio.com
- GitHub: lodsa-ntos/lodex-portfolio
© 2025 Lodney Santos — LodeX Studio
All content and images © their respective owner (me). You’re welcome to browse the code and learn.
Allowed:
- Use small snippets for learning with attribution.
Not allowed:
- Reuse the full design or content as-is for commercial purposes.
- Redistribute the full codebase.
portfolio react vite tailwindcss frontend ui-ux experiments responsive-design javascript performance seo portugal
⭐ Star this repo if it helped you! • 🍴 Fork it to customize for your own use
Built with ❤️ by LodeX Studio — Modern Web Development & UI Design