3 Portfolio Projects with Laravel + Blade, Vue JS, React JS

Build a Laravel portfolio project with CSS and Alpine JS for a responsive navigation, set up a TablePlus database, run migrations, and preview locally.

Install the Laravel breeze package to scaffold authentication, run migrations, install npm dependencies, and verify login, register, and dashboard access.

Configure a Laravel portfolio backend by defining skill and project models, modify components and styles, and build responsive frontend sections with promo and mail via Mailtrap.

Create models and migrations for skills and projects in Laravel, define fields (name, image, logo, and URL), and establish a has many relationship where projects belong to a skill.

Create controllers and routes for skills and projects using Laravel Artisan, configure an authentication group, and define resource routes for seamless CRUD operations.

Create index pages for skills and projects in a Laravel app, wire up routes and controllers, and build corresponding Blade index views with a shared dashboard layout.

Learn to add a data table to index pages by copying a table example, rendering projects and skills with for-each loops, displaying name, image, and actions like edit and delete.

Fix the header display and add a link to the create page for skills and projects, using a styled anchor button to navigate to the respective create pages.

Create and store a new skill in a Laravel + Blade project with a create view, store method, multipart form, image upload, and validation via a store request.

Edit and delete skills in a laravel app by implementing update and destroy methods, validating inputs, handling image uploads with storage, and updating views and routes.

Create and store new projects in a Laravel app by building create form with skill select, project URL, and image upload, validating inputs, saving to the database, and displaying results.

Develop and implement edit and delete functionality for portfolio projects using Laravel with Blade, Vue JS, and React JS, including update and destroy methods, image handling, validation, and user confirmations.

Learn to display and auto-hide success and danger alerts for project and skill actions using Laravel, Blade layouts, and Alpine.js, with flash messages on create, update, and delete.

Modify the Tailwind CSS config to customize fonts, colors, and container settings, import Google fonts, set light and dark palettes, and apply these styles to the app's components.

Create a frontend layout in a Laravel + Blade project by building a frontend layout component, integrating app and guest layouts, and using a slot with Alpine for responsive design.

Create a header component with a blade template and navigation, integrate it into the frontend layout, and use Alpine.js for a responsive, toggleable menu.

Create a responsive footer component in a Laravel Blade setup by building a glass container with a logo and Laravel.com all rights reserved text, supporting light and dark modes.

Design a responsive hero section for a portfolio site using Blade, featuring a call-to-action, sections for hero, promote, about, skills, portfolio, services, and contact, with primary and secondary colors.

Create the promote section for the Laravel + Blade, Vue.js, React.js portfolio, implementing a hero section, responsive styles, light/dark modes, and a course link button.

Create an about section for a portfolio by adding a left image, right text, header, description, and a work with me button in blade templates with light and dark mode.

Create a skills section in a Laravel app using Blade components and a welcome controller invoke to pass Vue.js data, then display skill images with a for-each loop.

Create a portfolio section by building a reusable project component in a Blade-based Laravel front end, using cards, tabs, and skills to showcase Laravel, Vue JS, and React JS projects.

Display all projects by looping through Laravel, Vue.js, and React Next JS projects, rendering a single project component in blade that shows image, name, and URL, with anchor navigation.

Filter Laravel projects with alpine.js by clicking 'all' or a specific project scale to show or hide items, binding Laravel data via x-data and json to drive visibility.

Explore hover interactions on a glass portfolio card, with image scale transitions and text color changes for light and dark modes, using a Laravel Blade project.

Create a front-end services section using cards with icons to showcase client offerings—web development, web design, mobile apps, and SEO—along with dark mode support.

Create a contact section in a Laravel Blade project, featuring an email and location display, a glassy layout, and a responsive contact form with name, email, and message fields.

Learn to send emails in Laravel by building a mail controller and markdown mail, validating a contact form, and integrating mail drop io for delivery.

Explore building and posting a contact form with Alpine.js inside Laravel Blade views, handle client-side validation and errors, post to /contact, and show a timed success message.

Create a fixed top navigation using alpine.js, populate menu from a data array, and link to sections via IDs. Implement scroll-based background changes and responsive styling to enhance navigation.

Improve a Laravel + Blade, Vue.js, React.js portfolio by refining the hero, enabling responsive grids for projects and services, adding scrollable skills, and implementing dynamic category tabs across devices.

Create a Laravel API to serve portfolio data. Build skill and project resources, controllers, and routes for /api/skills and /api/projects, plus a contact endpoint for a Vue.js front end.

Follow the official Vue.js quickstart to create a new portfolio project, install dependencies, and run the dev server on localhost:5173, with aliases and components to build your portfolio.

Copy components from a frontend template into Laravel Blade views for the Lara portfolio project, creating header, about, contact, hero, portfolio, project, services, and skills sections.

Modify the header component by importing and wiring navigation data, then implement a scroll-based background change with an on mounted window scroll listener.

Install Tailwind CSS in a Vue.js project, configure Tailwind CSS and content paths, then update header styles and assets and run the dev server to verify links.

Build a hero section and configure Tailwind for typography and colors. Import fonts, add the image asset, and apply base styles to the body and UI elements.

Add and style the promote section with a border, link the promo code to the Udemy course, and update the author area with the Laravel logo image.

Add an about and skills section to your portfolio by fetching skills with an axios-based composable, displaying skill images, and structuring data with a Vue 3 composition API approach.

Build a dynamic portfolio section in a Laravel + Blade, Vue.js, and React.js project by wiring skills and projects from the portfolio view and implementing tabs and data binding.

Filter the portfolio projects using Vue JS by ID or skill, update the visible cards and the selected tab, and toggle between all projects and filtered results.

Add the services and contact sections by wiring a Vue/Blade form to post to the contact route with axios, handle errors, show a confirmation, and reset the form and errors.

Install and import the motion plugin in a Vue.js and Laravel API project, apply motion view across about, services, and portfolio components, and use on enter directives for smooth transitions.

Create a React portfolio project that consumes the Laravel API to fetch projects and skills, mirroring Laravel Blade and Vue.js setups and integrating with the existing API endpoints.

Install tailwind in a React project by configuring the tailwind config, adding base styles and utilities in index.css, and setting up fonts and color themes.

Build a React portfolio by creating and wiring reusable components—about, hero, logo, portfolio sections, projects, services, and skills—organizing assets and a portfolio context, with dedicated folders for assets and context.

Add a header component, implement a scroll-based background with state, toggle mobile navigation, and render navigation items from an array with a logo asset.

Add a hero and a promo section to the React app by importing the hero image, updating classes, and duplicating components to ensure responsive, functioning sections.

create a react portfolio context to fetch skills and projects from an api using axios, manage state with useState and useEffect, and wrap your app with a provider.

Build a dynamic skills section by using React context to fetch skills, loop through them, and render each skill’s image and name with proper keys.

Learn to build a portfolio section in a React project by importing portfolio data and managing skills and projects with context and state, adding skill and tab filters.

Add a services and contact section to a React project by building a form with name, email, and message, validating inputs, posting with axios, and showing a timed thank-you message.

Learn to implement smooth scroll navigation in a React portfolio by wiring header links with React Scroll for home, about, portfolio, services, and contact, including dark mode.