-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
added router/routerLink/NotFoundPage and views
- Loading branch information
1 parent
c9cdef3
commit aa421a7
Showing
13 changed files
with
819 additions
and
122 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,15 +1,8 @@ | ||
| <script setup> | ||
| import Navbar from "@/components/Navbar.vue"; | ||
| import Hero from "@/components/Hero.vue"; | ||
| import HomeCards from "@/components/HomeCards.vue"; | ||
| import JobListings from "./components/JobListings.vue"; | ||
| import { RouterView } from "vue-router"; | ||
| </script> | ||
| <template> | ||
| <Navbar /> | ||
| <Hero | ||
| title="Become a Vue Dev!" | ||
| subtitle="Find the Vue job that fits your skills and needs" | ||
| /> | ||
| <HomeCards /> | ||
| <JobListings :limit="5" :showButton="true" /> | ||
| <RouterView /> | ||
| </template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,6 +1,10 @@ | ||
| import './assets/main.css' | ||
| import "./assets/main.css"; | ||
| import "primeicons/primeicons.css"; | ||
|
|
||
| import { createApp } from 'vue' | ||
| import App from './App.vue' | ||
| import { createApp } from "vue"; | ||
| import App from "./App.vue"; | ||
| import router from "./router"; | ||
|
|
||
| createApp(App).mount('#app') | ||
| const app = createApp(App); | ||
| app.use(router); | ||
| app.mount("#app"); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,34 @@ | ||
| import { createRouter, createWebHistory } from "vue-router"; | ||
|
|
||
| import HomeView from "@/views/HomeView.vue"; | ||
| import JobsView from "@/views/JobsView.vue"; | ||
| import NotFound from "@/views/404.vue"; | ||
| import JobView from "@/views/JobView.vue"; | ||
|
|
||
| const router = createRouter({ | ||
| history: createWebHistory(import.meta.env.BASE_URL), | ||
| routes: [ | ||
| { | ||
| path: "/", | ||
| name: "Home", | ||
| component: HomeView, | ||
| }, | ||
| { | ||
| path: "/jobs", | ||
| name: "Jobs", | ||
| component: JobsView, | ||
| }, | ||
| { | ||
| path: "/jobs/:id", | ||
| name: "Job", | ||
| component: JobView, | ||
| }, | ||
| { | ||
| path: "/:catchAll(.*)", | ||
| name: "404", | ||
| component: NotFound, | ||
| }, | ||
| ], | ||
| }); | ||
|
|
||
| export default router; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,44 @@ | ||
| <template> | ||
| <div | ||
| class="flex flex-col items-center justify-center min-h-screen bg-gray-900 text-white" | ||
| > | ||
| <i class="pi pi-exclamation-triangle text-6xl mb-4"></i> | ||
| <h1 class="text-6xl font-bold mb-2">404</h1> | ||
| <p class="text-2xl mb-4">Page Not Found</p> | ||
| <RouterLink to="/" class="text-blue-500 hover:underline"> | ||
| Go back to Home | ||
| </RouterLink> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script> | ||
| import { RouterLink } from "vue-router"; | ||
| export default { | ||
| name: "NotFound", | ||
| }; | ||
| </script> | ||
|
|
||
| <style scoped> | ||
| @keyframes float { | ||
| 0% { | ||
| transform: translatey(0px); | ||
| } | ||
| 50% { | ||
| transform: translatey(-20px); | ||
| } | ||
| 100% { | ||
| transform: translatey(0px); | ||
| } | ||
| } | ||
| .pi-exclamation-triangle { | ||
| animation: float 3s ease-in-out infinite; | ||
| } | ||
| h1 { | ||
| animation: float 3s ease-in-out infinite; | ||
| animation-delay: 0.5s; | ||
| } | ||
| p { | ||
| animation: float 3s ease-in-out infinite; | ||
| animation-delay: 1s; | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| <script setup> | ||
| import Hero from "@/components/Hero.vue"; | ||
| import HomeCards from "@/components/HomeCards.vue"; | ||
| import JobListings from "@/components/JobListings.vue"; | ||
| </script> | ||
| <template> | ||
| <Hero | ||
| title="Become a Vue Dev!" | ||
| subtitle="Find the Vue job that fits your skills and needs" | ||
| /> | ||
| <HomeCards /> | ||
| <JobListings :limit="3" :showButton="true" /> | ||
| </template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,86 @@ | ||
| <script setup></script> | ||
| <template> | ||
| <section class="bg-green-50"> | ||
| <div class="container m-auto py-10 px-6"> | ||
| <div class="grid grid-cols-1 md:grid-cols-70/30 w-full gap-6"> | ||
| <main> | ||
| <div | ||
| class="bg-white p-6 rounded-lg shadow-md text-center md:text-left" | ||
| > | ||
| <div class="text-gray-500 mb-4">Full-Time</div> | ||
| <h1 class="text-3xl font-bold mb-4">Senior Vue Developer</h1> | ||
| <div | ||
| class="text-gray-500 mb-4 flex align-middle justify-center md:justify-start" | ||
| > | ||
| <i | ||
| class="fa-solid fa-location-dot text-lg text-orange-700 mr-2" | ||
| ></i> | ||
| <p class="text-orange-700">Boston, MA</p> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="bg-white p-6 rounded-lg shadow-md mt-6"> | ||
| <h3 class="text-green-800 text-lg font-bold mb-6"> | ||
| Job Description | ||
| </h3> | ||
|
|
||
| <p class="mb-4"> | ||
| We are seeking a talented Front-End Developer to join our team in | ||
| Boston, MA. The ideal candidate will have strong skills in HTML, | ||
| CSS, and JavaScript, with experience working with modern | ||
| JavaScript frameworks such as Vue or Angular. | ||
| </p> | ||
|
|
||
| <h3 class="text-green-800 text-lg font-bold mb-2">Salary</h3> | ||
|
|
||
| <p class="mb-4">$70k - $80K / Year</p> | ||
| </div> | ||
| </main> | ||
|
|
||
| <!-- Sidebar --> | ||
| <aside> | ||
| <!-- Company Info --> | ||
| <div class="bg-white p-6 rounded-lg shadow-md"> | ||
| <h3 class="text-xl font-bold mb-6">Company Info</h3> | ||
|
|
||
| <h2 class="text-2xl">NewTek Solutions</h2> | ||
|
|
||
| <p class="my-2"> | ||
| NewTek Solutions is a leading technology company specializing in | ||
| web development and digital solutions. We pride ourselves on | ||
| delivering high-quality products and services to our clients while | ||
| fostering a collaborative and innovative work environment. | ||
| </p> | ||
|
|
||
| <hr class="my-4" /> | ||
|
|
||
| <h3 class="text-xl">Contact Email:</h3> | ||
|
|
||
| <p class="my-2 bg-green-100 p-2 font-bold"> | ||
| contact@newteksolutions.com | ||
| </p> | ||
|
|
||
| <h3 class="text-xl">Contact Phone:</h3> | ||
|
|
||
| <p class="my-2 bg-green-100 p-2 font-bold">555-555-5555</p> | ||
| </div> | ||
|
|
||
| <!-- Manage --> | ||
| <div class="bg-white p-6 rounded-lg shadow-md mt-6"> | ||
| <h3 class="text-xl font-bold mb-6">Manage Job</h3> | ||
| <a | ||
| href="add-job.html" | ||
| class="bg-green-500 hover:bg-green-600 text-white text-center font-bold py-2 px-4 rounded-full w-full focus:outline-none focus:shadow-outline mt-4 block" | ||
| >Edit Job</a | ||
| > | ||
| <button | ||
| class="bg-red-500 hover:bg-red-600 text-white font-bold py-2 px-4 rounded-full w-full focus:outline-none focus:shadow-outline mt-4 block" | ||
| > | ||
| Delete Job | ||
| </button> | ||
| </div> | ||
| </aside> | ||
| </div> | ||
| </div> | ||
| </section> | ||
| </template> |
Oops, something went wrong.