Skip to content

Commit 7fb574d

Browse files
Ay7otAy7ot
committed
First UI with project scaffolded
0 parents  commit 7fb574d

29 files changed

+1577
-0
lines changed

‎.gitignore

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
10+
node_modules
11+
dist
12+
dist-ssr
13+
*.local
14+
15+
# Editor directories and files
16+
.vscode/*
17+
!.vscode/extensions.json
18+
.idea
19+
.DS_Store
20+
*.suo
21+
*.ntvs*
22+
*.njsproj
23+
*.sln
24+
*.sw?

‎index.html

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Aydot</title>
8+
</head>
9+
<body>
10+
<div id="root"></div>
11+
<script type="module" src="/src/main.tsx"></script>
12+
</body>
13+
</html>

‎package.json

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
{
2+
"name": "portfolio-v2",
3+
"private": true,
4+
"version": "0.0.0",
5+
"type": "module",
6+
"scripts": {
7+
"dev": "vite",
8+
"build": "tsc && vite build",
9+
"preview": "vite preview"
10+
},
11+
"dependencies": {
12+
"daisyui": "^2.51.5",
13+
"nanoid": "^4.0.2",
14+
"react": "^18.2.0",
15+
"react-dom": "^18.2.0",
16+
"react-icons": "^4.8.0",
17+
"react-lazy-load": "^4.0.1",
18+
"theme-change": "^2.5.0"
19+
},
20+
"devDependencies": {
21+
"@types/react": "^18.0.28",
22+
"@types/react-dom": "^18.0.11",
23+
"@vitejs/plugin-react": "^3.1.0",
24+
"autoprefixer": "^10.4.14",
25+
"postcss": "^8.4.21",
26+
"tailwindcss": "^3.3.1",
27+
"typescript": "^4.9.3",
28+
"vite": "^4.2.0"
29+
}
30+
}

‎postcss.config.js

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
export default {
2+
plugins: {
3+
tailwindcss: {},
4+
autoprefixer: {},
5+
},
6+
}

‎public/Aydot.jpg

108 KB
Loading

‎public/Ayomide's_Resume.docx.pdf

77 KB
Binary file not shown.

‎public/aydot-musica.png

482 KB
Loading

‎public/food-ways.png

1.12 MB
Loading

‎public/protaskmate.png

73.6 KB
Loading

‎public/spandors-tenzie.png

137 KB
Loading

‎public/spandors-trivia.png

136 KB
Loading

‎public/tickTasks.png

239 KB
Loading

‎public/vite.svg

+1
Loading

‎src/App.tsx

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import MainPage from "./Components/MainPage"
2+
3+
4+
function App() {
5+
6+
return (
7+
<div data-theme='luxury' className="transition-all delay-150 ease-linear">
8+
<MainPage />
9+
</div>
10+
)
11+
}
12+
13+
export default App

‎src/Components/Header.tsx

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import React from 'react'
2+
3+
export default function Header() {
4+
return (
5+
<div className='mt-4 flex flex-col lg:flex-row-reverse items-center p-4 md:px-10 gap-6 xl:px-[10%]'>
6+
<img src='Aydot.jpg' className='max-w-[550px] w-full rounded-xl' alt='A picture of Ayomide Ibiteye'/>
7+
<div className='text-neutral-content'>
8+
<h1 className='mb-5 text-5xl font-bold'>Hi there</h1>
9+
<p className='mb-5 font-medium text-lg'>{`My name is Ayomide Ibiteye (Aydot), a frontend engineer and welcome to my corner of the internet! I'm a web developer with a passion for crafting clean and efficient code, and a love for all things tech. When I'm not busy building websites and applications, you can find me tinkering with new programming languages or daydreaming about my next big project. Thanks for stopping by!`}</p>
10+
<a href={`Ayomide's_Resume.docx.pdf`} download className='btn btn-primary'>CV/Resume</a>
11+
</div>
12+
</div>
13+
)
14+
}

‎src/Components/MainPage.tsx

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import React from 'react'
2+
import Navbar from './Navbar'
3+
import Header from './Header'
4+
import Projects from './Projects'
5+
6+
export default function MainPage() {
7+
return (
8+
<div className='bg-base-300 min-h-screen'>
9+
<Navbar />
10+
<Header />
11+
<Projects />
12+
</div>
13+
)
14+
}

‎src/Components/Navbar.tsx

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import {FaCaretDown, FaThemeisle} from 'react-icons/fa'
2+
import {IoMdHeartEmpty} from 'react-icons/io'
3+
import {RxCaretDown} from 'react-icons/rx'
4+
import {SiCodeproject} from 'react-icons/si'
5+
import {HiCircleStack} from 'react-icons/hi2'
6+
7+
export default function Navbar() {
8+
return (
9+
<div className='sticky top-0 mb-2 shadow-lg text-neutral-content bg-neutral-focus rounded-box flex justify-between items-center p-4 font-semibold md:px-10'>
10+
<p className='text-[1.5rem]'>Aydot</p>
11+
<nav className='hidden md:flex'>
12+
<ul className='flex gap-6'>
13+
<a href='' className='flex items-center gap-2 cursor-pointer hover:rounded-lg hover:bg-accent-content p-2'>
14+
<i><IoMdHeartEmpty /></i>
15+
<p>Home</p>
16+
</a>
17+
<a href='#projects' className='flex items-center gap-2 cursor-pointer hover:rounded-lg hover:bg-accent-content p-2'>
18+
<i><SiCodeproject /></i>
19+
<p>Projects</p>
20+
</a>
21+
<a href='#techstack' className='flex items-center gap-2 cursor-pointer hover:rounded-lg hover:bg-accent-content p-2'>
22+
<i><HiCircleStack /></i>
23+
<p>TechStack</p>
24+
</a>
25+
<button className='flex items-center gap-2 cursor-pointer hover:rounded-lg hover:bg-accent-content p-2'>
26+
<i><FaThemeisle /></i>
27+
<p>Change Theme</p>
28+
<i><RxCaretDown /></i>
29+
</button>
30+
</ul>
31+
</nav>
32+
</div>
33+
)
34+
}

‎src/Components/Projects.tsx

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import React from 'react'
2+
import { projects } from './ProjectsFile'
3+
4+
export default function Projects() {
5+
6+
return (
7+
<div id='projects' className='p-4 md:px-10 xl:px-[10%]'>
8+
<h2 className='text-center text-neutral-content my-10 text-4xl tracking-wide font-semibold'>Projects</h2>
9+
<div className='md:grid md:grid-cols-2 lg:grid-cols-3 mt-5 gap-6'>
10+
{projects.map(project=>{
11+
return (
12+
<div className='mb-10 bg-secondary md:bg-secondary-focus text-accent-content flex flex-col overflow-hidden relative rounded-2xl'>
13+
<div>
14+
<img
15+
src={project.image}
16+
height='300'
17+
/>
18+
</div>
19+
<div className='p-4'>
20+
<h3 className='text-base-300 font-bold text-2xl'>
21+
{project.name}
22+
</h3>
23+
<p className='text-lg font-semibold text-neutral-content mt-4'>{project.description}</p>
24+
</div>
25+
<div className='p-4 flex gap-3 items-center'>
26+
<a href={project.liveLink} target='blank' className='btn btn-accent'>Live Link</a>
27+
<a href={project.github} target='blank' className='btn btn-accent'>GitHub</a>
28+
</div>
29+
</div>
30+
)
31+
})}
32+
</div>
33+
</div>
34+
)
35+
}

‎src/Components/ProjectsFile.ts

+53
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import { nanoid } from "nanoid";
2+
import { ProjectType } from "../Types/types";
3+
4+
export const projects: ProjectType[] = [
5+
{
6+
name: 'ProTaskMate',
7+
id: nanoid(),
8+
description: 'A task Management web app that applies the kanban methodology to sort tasks. Deployed as a full stack appllication with firebase for the database, hosting and user authentication. Built using Reactjs, Typescript, Firebase, TailwindCSS and ContextAPI',
9+
github: 'https://github.com/Ay7ot/protaskmate/',
10+
liveLink: 'https://protaskmate.web.app',
11+
image: 'protaskmate.png'
12+
},
13+
{
14+
name: 'Musica',
15+
id: nanoid(),
16+
description: 'A music web app built with SpotifyAPI. Users can sign in with their spotify account, search for an artist and play songs from the artist. Built using Reactjs, Typescript, SpotifyAPI, TailwindCSS and was built to practice handling api calls and advanced React',
17+
github: 'https://github.com/Ay7ot/musica-typescript',
18+
liveLink: 'https://dot-musica.netlify.app',
19+
image: 'aydot-musica.png'
20+
},
21+
{
22+
name: 'Trivia',
23+
id: nanoid(),
24+
description: 'A trivia web app built after completing the react course on the scrimba platform. Built with Reactjs, VanillaCSS and OpenDB trivia api',
25+
github: 'https://github.com/Ay7ot/spandors-trivia',
26+
liveLink: 'https://spandors-trivia.netlify.app',
27+
image: 'spandors-trivia.png'
28+
},
29+
{
30+
name: 'Tenzie Game',
31+
id: nanoid(),
32+
description: 'A tenzie web based browser game built to practice basic react state. Players roll the dice until its all the same number on all available dies. Best time and no. of rolls are saved to local storage. Built with Reactjs, VanillaCSS and Javascript',
33+
github: 'https://github.com/Ay7ot/tenzie',
34+
liveLink: 'https://spandors-tenzie.netlify.app',
35+
image: 'spandors-tenzie.png'
36+
},
37+
{
38+
name: 'Tick Tasks',
39+
id: nanoid(),
40+
description: 'A small to-do web app made to practice working with firebase database and authentication services. Users can sign in and perform basic CRUD operations with their tasks. Built with Reactjs, Typescript, Firebase, TailwindCSS and ContextAPI',
41+
github: 'https://github.com/Ay7ot/firebase-database',
42+
liveLink: 'https://tick-tasks.netlify.app',
43+
image: 'tickTasks.png'
44+
},
45+
{
46+
name: 'Food ways',
47+
id: nanoid(),
48+
description: 'A UI for a food delivery service made to practice working with react components and basic state properties',
49+
github: 'https://github.com/Ay7ot/food-ways',
50+
liveLink: 'https://food-ways.netlify.app',
51+
image: 'food-ways.png'
52+
}
53+
]

‎src/Types/types.ts

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
export type ProjectType = {
2+
name: string;
3+
id: string;
4+
description: string;
5+
image: string;
6+
github: string;
7+
liveLink: string
8+
}

‎src/assets/react.svg

+1
Loading

‎src/index.css

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
@tailwind base;
2+
@tailwind components;
3+
@tailwind utilities;

‎src/main.tsx

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import React from 'react'
2+
import ReactDOM from 'react-dom/client'
3+
import App from './App'
4+
import './index.css'
5+
6+
ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
7+
<React.StrictMode>
8+
<App />
9+
</React.StrictMode>,
10+
)

‎src/vite-env.d.ts

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
/// <reference types="vite/client" />

‎tailwind.config.js

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
/** @type {import('tailwindcss').Config} */
2+
export default {
3+
content: [
4+
"./index.html",
5+
"./src/**/*.{js,ts,jsx,tsx}",
6+
],
7+
theme: {
8+
extend: {},
9+
},
10+
plugins: [require("daisyui")],
11+
daisyui: {
12+
themes: ["light", "dark", "cupcake", "bumblebee", "emerald", "corporate", "synthwave", "retro", "cyberpunk", "valentine", "halloween", "garden", "forest", "aqua", "lofi", "pastel", "fantasy", "wireframe", "black", "luxury", "dracula", "cmyk", "autumn", "business", "acid", "lemonade", "night", "coffee", "winter"],
13+
},
14+
}

‎tsconfig.json

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
{
2+
"compilerOptions": {
3+
"target": "ESNext",
4+
"useDefineForClassFields": true,
5+
"lib": ["DOM", "DOM.Iterable", "ESNext"],
6+
"allowJs": false,
7+
"skipLibCheck": true,
8+
"esModuleInterop": false,
9+
"allowSyntheticDefaultImports": true,
10+
"strict": true,
11+
"forceConsistentCasingInFileNames": true,
12+
"module": "ESNext",
13+
"moduleResolution": "Node",
14+
"resolveJsonModule": true,
15+
"isolatedModules": true,
16+
"noEmit": true,
17+
"jsx": "react-jsx"
18+
},
19+
"include": ["src"],
20+
"references": [{ "path": "./tsconfig.node.json" }]
21+
}

‎tsconfig.node.json

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
{
2+
"compilerOptions": {
3+
"composite": true,
4+
"module": "ESNext",
5+
"moduleResolution": "Node",
6+
"allowSyntheticDefaultImports": true
7+
},
8+
"include": ["vite.config.ts"]
9+
}

‎vite.config.ts

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import { defineConfig } from 'vite'
2+
import react from '@vitejs/plugin-react'
3+
4+
// https://vitejs.dev/config/
5+
export default defineConfig({
6+
plugins: [react()],
7+
})

0 commit comments

Comments
 (0)