Skip to content

Commit 7d8055f

Browse files
DFelipehDEVDFelipehDEV
committed
added react router
1 parent 0a511e9 commit 7d8055f

File tree

7 files changed

+103
-26
lines changed

7 files changed

+103
-26
lines changed

‎package-lock.json‎

Lines changed: 38 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313
"@tailwindcss/vite": "^4.1.16",
1414
"react": "^19.1.1",
1515
"react-dom": "^19.1.1",
16+
"react-router": "^7.9.4",
1617
"tailwindcss": "^4.1.16"
1718
},
1819
"devDependencies": {

‎src/App.jsx‎

Lines changed: 9 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,16 @@
1-
import avatar from './assets/Avatar500.png'
2-
import Navbar from './components/Navbar'
1+
import { HashRouter, Routes, Route } from 'react-router'
2+
import Home from './pages/Home.jsx'
3+
import Projects from './pages/Projects.jsx'
34

45
function App() {
56
return (
67
<>
7-
<Navbar />
8-
<div className="flex gap-2 items-center justify-center">
9-
<h1 className="text-3xl text-center">
10-
DFelipeh
11-
</h1>
12-
<img src={avatar} className='w-25 rounded-full'></img>
13-
</div>
14-
15-
<div className="max-w-3xl mx-auto mt-10 p-6 text-lg leading-relaxed">
16-
<p>
17-
Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate expedita error possimus. Odit, accusantium amet dolorum quod eaque aut vel error itaque optio illum inventore quos consequuntur vitae saepe minima.
18-
Dolore natus sed placeat et aspernatur ipsum voluptatum magni animi minus incidunt in illo repellendus cum iste vel porro mollitia, nisi possimus! Aperiam, iusto enim perferendis delectus quisquam possimus incidunt?
19-
Aliquid iure excepturi laborum beatae suscipit placeat sequi, odio atque magni nostrum praesentium minima sint distinctio accusantium molestiae molestias numquam omnis nisi architecto ex enim, error debitis doloremque. Ex, ipsa!
20-
Suscipit pariatur reprehenderit veritatis, illum voluptatum ipsa odio, error cupiditate maiores aspernatur dolor aliquid sed impedit dignissimos accusamus, natus officiis excepturi? Dicta, neque saepe dolorum reiciendis quos ex ducimus reprehenderit?
21-
Dicta quis fugiat dolores accusantium error reiciendis ipsum doloremque illum, dolor vel ut qui impedit nemo et sunt atque quas architecto dolorem blanditiis laudantium excepturi tenetur. Unde commodi provident velit?
22-
Incidunt recusandae quam voluptatibus iusto magnam quaerat nulla ducimus aliquam numquam est beatae velit deleniti consectetur, aperiam earum libero corporis explicabo ipsum eaque. Officia doloribus tenetur, porro adipisci impedit voluptates?
23-
Id sapiente, illo doloribus ullam nihil quia alias totam expedita officia aut, aliquid excepturi deleniti sed suscipit. Magnam iusto illum sequi quis, non dicta ab libero odio hic animi commodi!
24-
Qui nemo exercitationem facere praesentium quos, facilis illum dolorem, inventore ipsa quae tempore iste numquam libero atque assumenda aperiam est amet, illo eius autem iure tenetur! Fugiat blanditiis porro placeat.
25-
</p>
26-
</div>
8+
<HashRouter>
9+
<Routes>
10+
<Route path="/" element={<Home />} />
11+
<Route path="/projects" element={<Projects />} />
12+
</Routes>
13+
</HashRouter>
2714
</>
2815
)
2916
}

‎src/components/Navbar.jsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,16 +8,16 @@ function Navbar() {
88
<div className="flex justify-between items-center px-8 py-4 text-gray-200 text-lg font-extralight">
99
<a
1010
href="#"
11-
className="font-light text-white tracking-wide hover:text-pink-400"
11+
className="font-light text-white tracking-wide hover:text-brand"
1212
>
1313
DFelipeh's Corner
1414
</a>
1515

1616
<div className="space-x-4 hidden sm:flex">
17-
<a href="#" className="hover:text-pink-400">
17+
<a href="#" className="hover:text-brand">
1818
Home
1919
</a>
20-
<a href="#" className="hover:text-pink-400">
20+
<a href="#projects" className="hover:text-brand">
2121
Projects
2222
</a>
2323
</div>

‎src/pages/Home.jsx‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import avatar from '../assets/Avatar500.png'
2+
import Navbar from '../components/Navbar'
3+
4+
function App() {
5+
return (
6+
<>
7+
<Navbar />
8+
<div className="flex gap-2 items-center justify-center">
9+
<h1 className="text-3xl text-center">
10+
DFelipeh
11+
</h1>
12+
<img src={avatar} className='w-25 rounded-full'></img>
13+
</div>
14+
15+
<div className="max-w-3xl mx-auto mt-10 p-6 text-lg leading-relaxed">
16+
<p>
17+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate expedita error possimus. Odit, accusantium amet dolorum quod eaque aut vel error itaque optio illum inventore quos consequuntur vitae saepe minima.
18+
Dolore natus sed placeat et aspernatur ipsum voluptatum magni animi minus incidunt in illo repellendus cum iste vel porro mollitia, nisi possimus! Aperiam, iusto enim perferendis delectus quisquam possimus incidunt?
19+
Aliquid iure excepturi laborum beatae suscipit placeat sequi, odio atque magni nostrum praesentium minima sint distinctio accusantium molestiae molestias numquam omnis nisi architecto ex enim, error debitis doloremque. Ex, ipsa!
20+
Suscipit pariatur reprehenderit veritatis, illum voluptatum ipsa odio, error cupiditate maiores aspernatur dolor aliquid sed impedit dignissimos accusamus, natus officiis excepturi? Dicta, neque saepe dolorum reiciendis quos ex ducimus reprehenderit?
21+
Dicta quis fugiat dolores accusantium error reiciendis ipsum doloremque illum, dolor vel ut qui impedit nemo et sunt atque quas architecto dolorem blanditiis laudantium excepturi tenetur. Unde commodi provident velit?
22+
Incidunt recusandae quam voluptatibus iusto magnam quaerat nulla ducimus aliquam numquam est beatae velit deleniti consectetur, aperiam earum libero corporis explicabo ipsum eaque. Officia doloribus tenetur, porro adipisci impedit voluptates?
23+
Id sapiente, illo doloribus ullam nihil quia alias totam expedita officia aut, aliquid excepturi deleniti sed suscipit. Magnam iusto illum sequi quis, non dicta ab libero odio hic animi commodi!
24+
Qui nemo exercitationem facere praesentium quos, facilis illum dolorem, inventore ipsa quae tempore iste numquam libero atque assumenda aperiam est amet, illo eius autem iure tenetur! Fugiat blanditiis porro placeat.
25+
</p>
26+
</div>
27+
</>
28+
)
29+
}
30+
31+
export default App

‎src/pages/Projects.jsx‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import Navbar from '../components/Navbar'
2+
3+
function App() {
4+
return (
5+
<>
6+
<Navbar />
7+
<div className="flex gap-2 items-center justify-center">
8+
<h1 className="text-3xl text-center">
9+
Projects page
10+
</h1>
11+
</div>
12+
</>
13+
)
14+
}
15+
16+
export default App

‎src/style.css‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
@import "tailwindcss";
22

33
body {
4-
@apply bg-zinc-950 text-white;
4+
@apply bg-toasted text-white;
5+
}
6+
@theme {
7+
--color-toasted: rgb(21, 20, 18);
8+
--color-brand: rgb(206, 132, 154)
59
}

0 commit comments

Comments
 (0)