init
This commit is contained in:
commit
ca0afc6662
15
.cta.json
Normal file
15
.cta.json
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
{
|
||||||
|
"projectName": "altricade",
|
||||||
|
"mode": "file-router",
|
||||||
|
"typescript": true,
|
||||||
|
"tailwind": true,
|
||||||
|
"packageManager": "npm",
|
||||||
|
"addOnOptions": {},
|
||||||
|
"git": true,
|
||||||
|
"version": 1,
|
||||||
|
"framework": "react-cra",
|
||||||
|
"chosenAddOns": [
|
||||||
|
"eslint",
|
||||||
|
"shadcn"
|
||||||
|
]
|
||||||
|
}
|
||||||
10
.gitignore
vendored
Normal file
10
.gitignore
vendored
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
node_modules
|
||||||
|
.DS_Store
|
||||||
|
dist
|
||||||
|
dist-ssr
|
||||||
|
*.local
|
||||||
|
count.txt
|
||||||
|
.env
|
||||||
|
.nitro
|
||||||
|
.tanstack
|
||||||
|
.wrangler
|
||||||
3
.prettierignore
Normal file
3
.prettierignore
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
package-lock.json
|
||||||
|
pnpm-lock.yaml
|
||||||
|
yarn.lock
|
||||||
11
.vscode/settings.json
vendored
Normal file
11
.vscode/settings.json
vendored
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
{
|
||||||
|
"files.watcherExclude": {
|
||||||
|
"**/routeTree.gen.ts": true
|
||||||
|
},
|
||||||
|
"search.exclude": {
|
||||||
|
"**/routeTree.gen.ts": true
|
||||||
|
},
|
||||||
|
"files.readonlyInclude": {
|
||||||
|
"**/routeTree.gen.ts": true
|
||||||
|
}
|
||||||
|
}
|
||||||
29
.windsurfrules
Normal file
29
.windsurfrules
Normal file
@ -0,0 +1,29 @@
|
|||||||
|
# Project Rules
|
||||||
|
|
||||||
|
## Shadcn UI
|
||||||
|
|
||||||
|
Use the latest version of Shadcn to install new components:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npx shadcn@latest add button
|
||||||
|
```
|
||||||
|
|
||||||
|
## Project Configuration
|
||||||
|
|
||||||
|
- **Project Name:** api-for-all
|
||||||
|
- **Framework:** React with TanStack Router (file-based routing)
|
||||||
|
- **Language:** TypeScript
|
||||||
|
- **Styling:** Tailwind CSS v4
|
||||||
|
- **Package Manager:** npm
|
||||||
|
- **Add-ons:** ESLint, Shadcn UI
|
||||||
|
|
||||||
|
## Path Aliases
|
||||||
|
|
||||||
|
- `@/*` → `./src/*`
|
||||||
|
- `@components/*` → `./src/components/*`
|
||||||
|
- `@routes/*` → `./src/routes/*`
|
||||||
|
- `@lib/*` → `./src/lib/*`
|
||||||
|
- `@stores/*` → `./src/stores/*`
|
||||||
|
- `@containers/*` → `./src/containers/*`
|
||||||
|
- `@api/*` → `./src/api/*`
|
||||||
|
- `@interfaces/*` → `./src/interfaces/*`
|
||||||
22
Dockerfile
Normal file
22
Dockerfile
Normal file
@ -0,0 +1,22 @@
|
|||||||
|
# Build stage
|
||||||
|
FROM node:20-alpine AS builder
|
||||||
|
|
||||||
|
WORKDIR /app
|
||||||
|
|
||||||
|
COPY package*.json ./
|
||||||
|
|
||||||
|
RUN npm ci
|
||||||
|
|
||||||
|
COPY . .
|
||||||
|
|
||||||
|
RUN npm run build
|
||||||
|
|
||||||
|
FROM nginx:alpine AS production
|
||||||
|
|
||||||
|
COPY nginx.conf /etc/nginx/conf.d/default.conf
|
||||||
|
|
||||||
|
COPY --from=builder /app/dist /usr/share/nginx/html
|
||||||
|
|
||||||
|
EXPOSE 80
|
||||||
|
|
||||||
|
CMD ["nginx", "-g", "daemon off;"]
|
||||||
98
README.md
Normal file
98
README.md
Normal file
@ -0,0 +1,98 @@
|
|||||||
|
# Omar Zaid — Frontend Developer Portfolio
|
||||||
|
|
||||||
|
A modern, responsive portfolio website showcasing my skills, experience, and projects as a Frontend Developer.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## About Me
|
||||||
|
|
||||||
|
I'm a passionate Frontend Developer with expertise in building high-performance, scalable web applications. I specialize in React ecosystem and modern JavaScript/TypeScript development, with a strong focus on clean code, user experience, and best practices.
|
||||||
|
|
||||||
|
### Key Highlights
|
||||||
|
|
||||||
|
- **80% reduction** in hiring time through a custom recruitment portal I built from scratch
|
||||||
|
- **25% faster development** by implementing Tailwind CSS across enterprise projects
|
||||||
|
- Experience with high-traffic e-commerce (kari.com) and enterprise HR systems
|
||||||
|
- Full-stack capabilities with Nuxt 3, Node.js, and PostgreSQL
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Tech Stack
|
||||||
|
|
||||||
|
### Frontend
|
||||||
|
|
||||||
|
- **Frameworks:** React, Vue, Next.js, Nuxt
|
||||||
|
- **Languages:** TypeScript, JavaScript
|
||||||
|
- **Styling:** Tailwind CSS, SCSS, CSS
|
||||||
|
|
||||||
|
### Backend
|
||||||
|
|
||||||
|
- **Runtime:** Node.js
|
||||||
|
- **Frameworks:** Express, NestJS
|
||||||
|
- **Database:** PostgreSQL
|
||||||
|
- **ORM:** Prisma
|
||||||
|
|
||||||
|
### Tools & DevOps
|
||||||
|
|
||||||
|
- Git, GitLab CI/CD, Docker
|
||||||
|
- Figma, Jira
|
||||||
|
- Linux, Windsurf, Cursor
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Features
|
||||||
|
|
||||||
|
- **Blazing Fast** — Built with Vite for optimal performance
|
||||||
|
- **Modern UI** — Clean, minimalist design with smooth animations
|
||||||
|
- **Dark/Light Mode** — System-aware theme switching
|
||||||
|
- **Internationalization** — English and Russian language support
|
||||||
|
- **Fully Responsive** — Optimized for all devices
|
||||||
|
- **Accessible** — Built with a11y best practices
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Project Structure
|
||||||
|
|
||||||
|
```
|
||||||
|
src/
|
||||||
|
├── components/ # Reusable UI components
|
||||||
|
│ ├── sections/ # Page sections (Hero, About, Skills, etc.)
|
||||||
|
│ └── ui/ # Base UI components (Button, etc.)
|
||||||
|
├── lib/ # Utilities, config, constants
|
||||||
|
├── locales/ # i18n translation files
|
||||||
|
├── routes/ # TanStack Router file-based routes
|
||||||
|
└── stores/ # Zustand state management
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Development
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# Install dependencies
|
||||||
|
npm install
|
||||||
|
|
||||||
|
# Start development server
|
||||||
|
npm run dev
|
||||||
|
|
||||||
|
# Build for production
|
||||||
|
npm run build
|
||||||
|
|
||||||
|
# Preview production build
|
||||||
|
npm run preview
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Contact
|
||||||
|
|
||||||
|
- **Email:** omar.m.zaid@hotmail.com
|
||||||
|
- **GitHub:** [github.com/altricade](https://github.com/altricade)
|
||||||
|
- **LinkedIn:** [linkedin.com/in/altricade](https://www.linkedin.com/in/altricade/)
|
||||||
|
- **Telegram:** [@altricade](https://t.me/altricade)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## License
|
||||||
|
|
||||||
|
MIT © Omar Zaid
|
||||||
21
components.json
Normal file
21
components.json
Normal file
@ -0,0 +1,21 @@
|
|||||||
|
{
|
||||||
|
"$schema": "https://ui.shadcn.com/schema.json",
|
||||||
|
"style": "new-york",
|
||||||
|
"rsc": false,
|
||||||
|
"tsx": true,
|
||||||
|
"tailwind": {
|
||||||
|
"config": "",
|
||||||
|
"css": "src/styles.css",
|
||||||
|
"baseColor": "zinc",
|
||||||
|
"cssVariables": true,
|
||||||
|
"prefix": ""
|
||||||
|
},
|
||||||
|
"aliases": {
|
||||||
|
"components": "@/components",
|
||||||
|
"utils": "@/lib/utils",
|
||||||
|
"ui": "@/components/ui",
|
||||||
|
"lib": "@/lib",
|
||||||
|
"hooks": "@/hooks"
|
||||||
|
},
|
||||||
|
"iconLibrary": "lucide"
|
||||||
|
}
|
||||||
20
docker-compose.yml
Normal file
20
docker-compose.yml
Normal file
@ -0,0 +1,20 @@
|
|||||||
|
services:
|
||||||
|
frontend:
|
||||||
|
build:
|
||||||
|
context: .
|
||||||
|
dockerfile: Dockerfile
|
||||||
|
container_name: portfolio_front
|
||||||
|
networks:
|
||||||
|
- proxy
|
||||||
|
restart: unless-stopped
|
||||||
|
labels:
|
||||||
|
- traefik.enable=true
|
||||||
|
- traefik.docker.network=proxy
|
||||||
|
- traefik.http.routers.portfolio.rule=Host(`portfolio.ai-assistant-bot.xyz`)
|
||||||
|
- traefik.http.routers.portfolio.entrypoints=web,websecure
|
||||||
|
- traefik.http.routers.portfolio.tls.certresolver=le
|
||||||
|
- traefik.http.services.portfolio.loadbalancer.server.port=80
|
||||||
|
|
||||||
|
networks:
|
||||||
|
proxy:
|
||||||
|
external: true
|
||||||
3
eslint.config.js
Normal file
3
eslint.config.js
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
import { tanstackConfig } from '@tanstack/eslint-config'
|
||||||
|
|
||||||
|
export default [...tanstackConfig]
|
||||||
19
index.html
Normal file
19
index.html
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<link rel="icon" href="/favicon.ico" />
|
||||||
|
<meta name="theme-color" content="#000000" />
|
||||||
|
<meta
|
||||||
|
name="description"
|
||||||
|
content="Omar Zaid - Frontend Developer specializing in React, TypeScript, and modern web technologies"
|
||||||
|
/>
|
||||||
|
<link rel="manifest" href="/manifest.json" />
|
||||||
|
<title>Omar Zaid | Frontend Developer</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="app"></div>
|
||||||
|
<script type="module" src="/src/main.tsx"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
25
nginx.conf
Normal file
25
nginx.conf
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
server {
|
||||||
|
listen 80;
|
||||||
|
server_name localhost;
|
||||||
|
root /usr/share/nginx/html;
|
||||||
|
index index.html;
|
||||||
|
|
||||||
|
gzip on;
|
||||||
|
gzip_vary on;
|
||||||
|
gzip_min_length 1024;
|
||||||
|
gzip_proxied expired no-cache no-store private auth;
|
||||||
|
gzip_types text/plain text/css text/xml text/javascript application/x-javascript application/xml application/javascript;
|
||||||
|
|
||||||
|
location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
|
||||||
|
expires 1y;
|
||||||
|
add_header Cache-Control "public, immutable";
|
||||||
|
}
|
||||||
|
|
||||||
|
location / {
|
||||||
|
try_files $uri $uri/ /index.html;
|
||||||
|
}
|
||||||
|
|
||||||
|
add_header X-Frame-Options "SAMEORIGIN" always;
|
||||||
|
add_header X-Content-Type-Options "nosniff" always;
|
||||||
|
add_header X-XSS-Protection "1; mode=block" always;
|
||||||
|
}
|
||||||
6816
package-lock.json
generated
Normal file
6816
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
50
package.json
Normal file
50
package.json
Normal file
@ -0,0 +1,50 @@
|
|||||||
|
{
|
||||||
|
"name": "altricade",
|
||||||
|
"private": true,
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite --port 3000",
|
||||||
|
"build": "vite build && tsc",
|
||||||
|
"preview": "vite preview",
|
||||||
|
"test": "vitest run",
|
||||||
|
"lint": "eslint",
|
||||||
|
"format": "prettier",
|
||||||
|
"check": "prettier --write . && eslint --fix"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@radix-ui/react-slot": "^1.2.4",
|
||||||
|
"@tailwindcss/vite": "^4.0.6",
|
||||||
|
"@tanstack/react-devtools": "^0.7.0",
|
||||||
|
"@tanstack/react-router": "^1.132.0",
|
||||||
|
"@tanstack/react-router-devtools": "^1.132.0",
|
||||||
|
"@tanstack/router-plugin": "^1.132.0",
|
||||||
|
"class-variance-authority": "^0.7.1",
|
||||||
|
"clsx": "^2.1.1",
|
||||||
|
"i18next": "^25.8.0",
|
||||||
|
"i18next-browser-languagedetector": "^8.2.0",
|
||||||
|
"lucide-react": "^0.544.0",
|
||||||
|
"react": "^19.2.0",
|
||||||
|
"react-dom": "^19.2.0",
|
||||||
|
"react-i18next": "^16.5.3",
|
||||||
|
"tailwind-merge": "^3.0.2",
|
||||||
|
"tailwindcss": "^4.0.6",
|
||||||
|
"tw-animate-css": "^1.3.6",
|
||||||
|
"zustand": "^5.0.10"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@tanstack/devtools-vite": "^0.3.11",
|
||||||
|
"@tanstack/eslint-config": "^0.3.0",
|
||||||
|
"@testing-library/dom": "^10.4.0",
|
||||||
|
"@testing-library/react": "^16.2.0",
|
||||||
|
"@types/node": "^22.10.2",
|
||||||
|
"@types/react": "^19.2.0",
|
||||||
|
"@types/react-dom": "^19.2.0",
|
||||||
|
"@vitejs/plugin-react": "^5.0.4",
|
||||||
|
"jsdom": "^27.0.0",
|
||||||
|
"prettier": "^3.5.3",
|
||||||
|
"typescript": "^5.7.2",
|
||||||
|
"vite": "^7.1.7",
|
||||||
|
"vitest": "^3.0.5",
|
||||||
|
"web-vitals": "^5.1.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
10
prettier.config.js
Normal file
10
prettier.config.js
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
// @ts-check
|
||||||
|
|
||||||
|
/** @type {import('prettier').Config} */
|
||||||
|
const config = {
|
||||||
|
semi: false,
|
||||||
|
singleQuote: true,
|
||||||
|
trailingComma: "all",
|
||||||
|
};
|
||||||
|
|
||||||
|
export default config;
|
||||||
15
public/manifest.json
Normal file
15
public/manifest.json
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
{
|
||||||
|
"short_name": "TanStack App",
|
||||||
|
"name": "Create TanStack App Sample",
|
||||||
|
"icons": [
|
||||||
|
{
|
||||||
|
"src": "favicon.ico",
|
||||||
|
"sizes": "64x64 32x32 24x24 16x16",
|
||||||
|
"type": "image/x-icon"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"start_url": ".",
|
||||||
|
"display": "standalone",
|
||||||
|
"theme_color": "#000000",
|
||||||
|
"background_color": "#ffffff"
|
||||||
|
}
|
||||||
3
public/robots.txt
Normal file
3
public/robots.txt
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
# https://www.robotstxt.org/robotstxt.html
|
||||||
|
User-agent: *
|
||||||
|
Disallow:
|
||||||
BIN
public/tanstack-circle-logo.png
Normal file
BIN
public/tanstack-circle-logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 259 KiB |
1
public/tanstack-word-logo-white.svg
Normal file
1
public/tanstack-word-logo-white.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 15 KiB |
38
src/components/language-switcher.tsx
Normal file
38
src/components/language-switcher.tsx
Normal file
@ -0,0 +1,38 @@
|
|||||||
|
import { useTranslation } from 'react-i18next'
|
||||||
|
import { Languages } from 'lucide-react'
|
||||||
|
import { Button } from '@components/ui/button'
|
||||||
|
import { config } from '@lib/config'
|
||||||
|
import type { SupportedLanguage } from '@lib/config'
|
||||||
|
import type { FC } from 'react'
|
||||||
|
|
||||||
|
const languageNames: Record<SupportedLanguage, string> = {
|
||||||
|
en: 'EN',
|
||||||
|
ru: 'RU',
|
||||||
|
}
|
||||||
|
|
||||||
|
export const LanguageSwitcher: FC = () => {
|
||||||
|
const { i18n, t } = useTranslation()
|
||||||
|
|
||||||
|
const cycleLanguage = () => {
|
||||||
|
const currentIndex = config.supportedLanguages.indexOf(
|
||||||
|
i18n.language as SupportedLanguage,
|
||||||
|
)
|
||||||
|
const nextIndex = (currentIndex + 1) % config.supportedLanguages.length
|
||||||
|
i18n.changeLanguage(config.supportedLanguages[nextIndex])
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="sm"
|
||||||
|
onClick={cycleLanguage}
|
||||||
|
title={t('common.language')}
|
||||||
|
className="h-9 gap-1.5 px-2"
|
||||||
|
>
|
||||||
|
<Languages className="h-4 w-4" />
|
||||||
|
<span className="text-xs font-medium">
|
||||||
|
{languageNames[i18n.language as SupportedLanguage]}
|
||||||
|
</span>
|
||||||
|
</Button>
|
||||||
|
)
|
||||||
|
}
|
||||||
93
src/components/navigation.tsx
Normal file
93
src/components/navigation.tsx
Normal file
@ -0,0 +1,93 @@
|
|||||||
|
import { useState } from 'react'
|
||||||
|
import { Link } from '@tanstack/react-router'
|
||||||
|
import { Menu, X } from 'lucide-react'
|
||||||
|
import { useTranslation } from 'react-i18next'
|
||||||
|
import { LanguageSwitcher } from '@components/language-switcher'
|
||||||
|
import { ThemeToggle } from '@components/theme-toggle'
|
||||||
|
import { Button } from '@components/ui/button'
|
||||||
|
import type { FC } from 'react'
|
||||||
|
|
||||||
|
const navItems = [
|
||||||
|
{ key: 'about', href: 'about' },
|
||||||
|
{ key: 'experience', href: 'experience' },
|
||||||
|
{ key: 'skills', href: 'skills' },
|
||||||
|
{ key: 'contact', href: 'contact' },
|
||||||
|
] as const
|
||||||
|
|
||||||
|
export const Navigation: FC = () => {
|
||||||
|
const { t } = useTranslation()
|
||||||
|
const [isOpen, setIsOpen] = useState(false)
|
||||||
|
|
||||||
|
const closeMenu = () => setIsOpen(false)
|
||||||
|
|
||||||
|
return (
|
||||||
|
<header className="fixed top-0 left-0 right-0 z-50 border-b border-border/40 bg-background/80 backdrop-blur-md">
|
||||||
|
<nav className="mx-auto flex h-16 max-w-6xl items-center justify-between px-6">
|
||||||
|
<Link
|
||||||
|
to="/"
|
||||||
|
className="text-lg font-semibold tracking-tight transition-colors hover:text-primary"
|
||||||
|
>
|
||||||
|
Alricade
|
||||||
|
</Link>
|
||||||
|
|
||||||
|
<div className="hidden items-center gap-1 md:flex">
|
||||||
|
{navItems.map((item) => (
|
||||||
|
<Link
|
||||||
|
key={item.key}
|
||||||
|
to="/"
|
||||||
|
hash={item.href}
|
||||||
|
className="rounded-md px-3 py-2 text-sm font-medium text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
|
||||||
|
>
|
||||||
|
{t(`common.${item.key}`)}
|
||||||
|
</Link>
|
||||||
|
))}
|
||||||
|
<Link
|
||||||
|
to="/blog"
|
||||||
|
className="rounded-md px-3 py-2 text-sm font-medium text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
|
||||||
|
>
|
||||||
|
{t('common.blog')}
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center gap-1">
|
||||||
|
<LanguageSwitcher />
|
||||||
|
<ThemeToggle />
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="icon"
|
||||||
|
className="md:hidden"
|
||||||
|
onClick={() => setIsOpen(!isOpen)}
|
||||||
|
aria-label="Toggle menu"
|
||||||
|
>
|
||||||
|
{isOpen ? <X className="size-5" /> : <Menu className="size-5" />}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
{isOpen && (
|
||||||
|
<div className="border-t border-border/40 bg-background/95 backdrop-blur-md md:hidden">
|
||||||
|
<div className="flex flex-col px-6 py-4">
|
||||||
|
{navItems.map((item) => (
|
||||||
|
<Link
|
||||||
|
key={item.key}
|
||||||
|
to="/"
|
||||||
|
hash={item.href}
|
||||||
|
onClick={closeMenu}
|
||||||
|
className="rounded-md px-3 py-3 text-sm font-medium text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
|
||||||
|
>
|
||||||
|
{t(`common.${item.key}`)}
|
||||||
|
</Link>
|
||||||
|
))}
|
||||||
|
<Link
|
||||||
|
to="/blog"
|
||||||
|
onClick={closeMenu}
|
||||||
|
className="rounded-md px-3 py-3 text-sm font-medium text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
|
||||||
|
>
|
||||||
|
{t('common.blog')}
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</header>
|
||||||
|
)
|
||||||
|
}
|
||||||
58
src/components/sections/about-section.tsx
Normal file
58
src/components/sections/about-section.tsx
Normal file
@ -0,0 +1,58 @@
|
|||||||
|
import { useTranslation } from 'react-i18next'
|
||||||
|
import { Code2, Palette, Zap } from 'lucide-react'
|
||||||
|
import type { FC } from 'react'
|
||||||
|
|
||||||
|
const highlights = [
|
||||||
|
{ icon: Code2, key: 'clean' },
|
||||||
|
{ icon: Palette, key: 'design' },
|
||||||
|
{ icon: Zap, key: 'performance' },
|
||||||
|
] as const
|
||||||
|
|
||||||
|
export const AboutSection: FC = () => {
|
||||||
|
const { t } = useTranslation()
|
||||||
|
|
||||||
|
return (
|
||||||
|
<section id="about" className="scroll-mt-20 px-6 py-24">
|
||||||
|
<div className="mx-auto max-w-4xl">
|
||||||
|
<header className="text-center">
|
||||||
|
<h2 className="text-3xl font-bold tracking-tight sm:text-4xl">
|
||||||
|
{t('about.title')}
|
||||||
|
</h2>
|
||||||
|
<p className="mt-2 text-muted-foreground">{t('about.subtitle')}</p>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div className="mt-12 grid gap-8 md:grid-cols-2">
|
||||||
|
<article className="space-y-4">
|
||||||
|
<p className="leading-relaxed text-muted-foreground">
|
||||||
|
{t('about.description')}
|
||||||
|
</p>
|
||||||
|
<p className="leading-relaxed text-muted-foreground">
|
||||||
|
{t('about.paragraph2')}
|
||||||
|
</p>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<aside className="space-y-4">
|
||||||
|
{highlights.map(({ icon: Icon, key }) => (
|
||||||
|
<div
|
||||||
|
key={key}
|
||||||
|
className="flex items-start gap-4 rounded-lg border border-border/50 bg-card p-4 transition-colors hover:border-primary/30"
|
||||||
|
>
|
||||||
|
<div className="rounded-md bg-primary/10 p-2 text-primary">
|
||||||
|
<Icon className="h-5 w-5" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 className="font-medium">
|
||||||
|
{t(`about.highlights.${key}.title`)}
|
||||||
|
</h3>
|
||||||
|
<p className="mt-1 text-sm text-muted-foreground">
|
||||||
|
{t(`about.highlights.${key}.description`)}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</aside>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
)
|
||||||
|
}
|
||||||
52
src/components/sections/contact-section.tsx
Normal file
52
src/components/sections/contact-section.tsx
Normal file
@ -0,0 +1,52 @@
|
|||||||
|
import { Mail } from 'lucide-react'
|
||||||
|
import { useTranslation } from 'react-i18next'
|
||||||
|
import { Button } from '@components/ui/button'
|
||||||
|
import { CONTACT_EMAIL, SOCIAL_LINKS } from '@lib/constants'
|
||||||
|
import type { FC } from 'react'
|
||||||
|
|
||||||
|
export const ContactSection: FC = () => {
|
||||||
|
const { t } = useTranslation()
|
||||||
|
|
||||||
|
return (
|
||||||
|
<section id="contact" className="scroll-mt-20 bg-muted/30 px-6 py-24">
|
||||||
|
<div className="mx-auto max-w-2xl text-center">
|
||||||
|
<header>
|
||||||
|
<h2 className="text-3xl font-bold tracking-tight sm:text-4xl">
|
||||||
|
{t('contact.title')}
|
||||||
|
</h2>
|
||||||
|
<p className="mt-2 text-muted-foreground">{t('contact.subtitle')}</p>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div className="mt-10">
|
||||||
|
<Button size="lg" asChild>
|
||||||
|
<a href={`mailto:${CONTACT_EMAIL}`} className="gap-2">
|
||||||
|
<Mail className="h-4 w-4" />
|
||||||
|
{t('contact.send')}
|
||||||
|
</a>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mt-8">
|
||||||
|
<p className="text-sm text-muted-foreground">{t('contact.or')}</p>
|
||||||
|
<nav
|
||||||
|
className="mt-4 flex items-center justify-center gap-4"
|
||||||
|
aria-label="Social links"
|
||||||
|
>
|
||||||
|
{SOCIAL_LINKS.map((link) => (
|
||||||
|
<a
|
||||||
|
key={link.label}
|
||||||
|
href={link.href}
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="rounded-full border border-border/50 p-3 text-muted-foreground transition-all hover:border-primary/30 hover:bg-accent hover:text-foreground"
|
||||||
|
aria-label={link.label}
|
||||||
|
>
|
||||||
|
<link.icon className="h-5 w-5" />
|
||||||
|
</a>
|
||||||
|
))}
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
)
|
||||||
|
}
|
||||||
108
src/components/sections/experience-section.tsx
Normal file
108
src/components/sections/experience-section.tsx
Normal file
@ -0,0 +1,108 @@
|
|||||||
|
import { useTranslation } from 'react-i18next'
|
||||||
|
import { Briefcase, GraduationCap } from 'lucide-react'
|
||||||
|
import type { FC } from 'react'
|
||||||
|
|
||||||
|
interface ExperienceItem {
|
||||||
|
id: string
|
||||||
|
titleKey: string
|
||||||
|
companyKey: string
|
||||||
|
periodKey: string
|
||||||
|
descriptionKey: string
|
||||||
|
}
|
||||||
|
|
||||||
|
const workExperience: Array<ExperienceItem> = [
|
||||||
|
{
|
||||||
|
id: 'work-1',
|
||||||
|
titleKey: 'experience.items.work1.title',
|
||||||
|
companyKey: 'experience.items.work1.company',
|
||||||
|
periodKey: 'experience.items.work1.period',
|
||||||
|
descriptionKey: 'experience.items.work1.description',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'work-2',
|
||||||
|
titleKey: 'experience.items.work2.title',
|
||||||
|
companyKey: 'experience.items.work2.company',
|
||||||
|
periodKey: 'experience.items.work2.period',
|
||||||
|
descriptionKey: 'experience.items.work2.description',
|
||||||
|
},
|
||||||
|
]
|
||||||
|
|
||||||
|
const education: Array<ExperienceItem> = [
|
||||||
|
{
|
||||||
|
id: 'edu-1',
|
||||||
|
titleKey: 'experience.items.edu1.title',
|
||||||
|
companyKey: 'experience.items.edu1.company',
|
||||||
|
periodKey: 'experience.items.edu1.period',
|
||||||
|
descriptionKey: 'experience.items.edu1.description',
|
||||||
|
},
|
||||||
|
]
|
||||||
|
|
||||||
|
interface TimelineItemProps {
|
||||||
|
item: ExperienceItem
|
||||||
|
t: (key: string) => string
|
||||||
|
}
|
||||||
|
|
||||||
|
const TimelineItem: FC<TimelineItemProps> = ({ item, t }) => {
|
||||||
|
return (
|
||||||
|
<article className="relative pl-8 pb-8 last:pb-0">
|
||||||
|
<div className="absolute left-0 top-0 h-full w-px bg-border">
|
||||||
|
<div className="absolute -left-1 top-1 h-2.5 w-2.5 rounded-full border-2 border-primary bg-background" />
|
||||||
|
</div>
|
||||||
|
<div className="space-y-1">
|
||||||
|
<h4 className="font-semibold">{t(item.titleKey)}</h4>
|
||||||
|
<p className="text-sm text-primary">{t(item.companyKey)}</p>
|
||||||
|
<p className="text-xs text-muted-foreground">{t(item.periodKey)}</p>
|
||||||
|
<p className="mt-2 text-sm leading-relaxed text-muted-foreground">
|
||||||
|
{t(item.descriptionKey)}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export const ExperienceSection: FC = () => {
|
||||||
|
const { t } = useTranslation()
|
||||||
|
|
||||||
|
return (
|
||||||
|
<section id="experience" className="scroll-mt-20 bg-muted/30 px-6 py-24">
|
||||||
|
<div className="mx-auto max-w-4xl">
|
||||||
|
<header className="text-center">
|
||||||
|
<h2 className="text-3xl font-bold tracking-tight sm:text-4xl">
|
||||||
|
{t('experience.title')}
|
||||||
|
</h2>
|
||||||
|
<p className="mt-2 text-muted-foreground">
|
||||||
|
{t('experience.subtitle')}
|
||||||
|
</p>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div className="mt-12 grid gap-12 md:grid-cols-2">
|
||||||
|
<div>
|
||||||
|
<div className="mb-6 flex items-center gap-2">
|
||||||
|
<Briefcase className="h-5 w-5 text-primary" />
|
||||||
|
<h3 className="text-lg font-semibold">{t('experience.work')}</h3>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
{workExperience.map((item) => (
|
||||||
|
<TimelineItem key={item.id} item={item} t={t} />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<div className="mb-6 flex items-center gap-2">
|
||||||
|
<GraduationCap className="h-5 w-5 text-primary" />
|
||||||
|
<h3 className="text-lg font-semibold">
|
||||||
|
{t('experience.education')}
|
||||||
|
</h3>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
{education.map((item) => (
|
||||||
|
<TimelineItem key={item.id} item={item} t={t} />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
)
|
||||||
|
}
|
||||||
22
src/components/sections/footer.tsx
Normal file
22
src/components/sections/footer.tsx
Normal file
@ -0,0 +1,22 @@
|
|||||||
|
import { useTranslation } from 'react-i18next'
|
||||||
|
import { Heart } from 'lucide-react'
|
||||||
|
import type { FC } from 'react'
|
||||||
|
|
||||||
|
export const Footer: FC = () => {
|
||||||
|
const { t } = useTranslation()
|
||||||
|
const currentYear = new Date().getFullYear()
|
||||||
|
|
||||||
|
return (
|
||||||
|
<footer className="border-t border-border/40 px-6 py-8">
|
||||||
|
<div className="mx-auto flex max-w-4xl flex-col items-center justify-between gap-4 text-center text-sm text-muted-foreground sm:flex-row sm:text-left">
|
||||||
|
<p>
|
||||||
|
© {currentYear} Alricade. {t('footer.rights')}
|
||||||
|
</p>
|
||||||
|
<p className="flex items-center gap-1">
|
||||||
|
{t('footer.madeWith')} <Heart className="h-4 w-4 text-primary" />{' '}
|
||||||
|
React & TypeScript
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
)
|
||||||
|
}
|
||||||
74
src/components/sections/hero-section.tsx
Normal file
74
src/components/sections/hero-section.tsx
Normal file
@ -0,0 +1,74 @@
|
|||||||
|
import { ArrowDown } from 'lucide-react'
|
||||||
|
import { useTranslation } from 'react-i18next'
|
||||||
|
import { Button } from '@components/ui/button'
|
||||||
|
import { SOCIAL_LINKS } from '@lib/constants'
|
||||||
|
import type { FC } from 'react'
|
||||||
|
|
||||||
|
export const HeroSection: FC = () => {
|
||||||
|
const { t } = useTranslation()
|
||||||
|
|
||||||
|
return (
|
||||||
|
<section className="relative flex min-h-svh items-center justify-center px-6 pb-16 pt-20">
|
||||||
|
<div className="mx-auto max-w-4xl text-center">
|
||||||
|
<div className="animate-fade-in">
|
||||||
|
<span className="mb-4 inline-flex items-center gap-2 rounded-full border border-primary/20 bg-primary/5 px-4 py-1.5 text-sm text-primary">
|
||||||
|
<span className="h-2 w-2 animate-pulse rounded-full bg-primary" />
|
||||||
|
{t('hero.available')}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h1 className="animate-fade-in-up mt-6 text-4xl font-bold tracking-tight sm:text-5xl md:text-6xl lg:text-7xl">
|
||||||
|
<span className="text-muted-foreground">{t('hero.greeting')}</span>
|
||||||
|
<br />
|
||||||
|
<span className="bg-linear-to-r from-primary via-primary/80 to-primary bg-clip-text text-transparent">
|
||||||
|
{t('hero.name')}
|
||||||
|
</span>
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<p className="animate-fade-in-up animation-delay-100 mt-4 text-xl font-medium text-muted-foreground sm:text-2xl">
|
||||||
|
{t('hero.title')}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p className="animate-fade-in-up animation-delay-200 mx-auto mt-6 max-w-2xl text-base leading-relaxed text-muted-foreground/80 sm:text-lg">
|
||||||
|
{t('hero.description')}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div className="animate-fade-in-up animation-delay-300 mt-10 flex flex-wrap items-center justify-center gap-4">
|
||||||
|
<Button size="lg" asChild>
|
||||||
|
<a href="#contact">{t('common.getInTouch')}</a>
|
||||||
|
</Button>
|
||||||
|
<Button variant="outline" size="lg" asChild>
|
||||||
|
<a href="#about">{t('hero.cta')}</a>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="animate-fade-in-up animation-delay-400 mt-8 flex items-center justify-center gap-4 sm:mt-12">
|
||||||
|
{SOCIAL_LINKS.map((link) => (
|
||||||
|
<a
|
||||||
|
key={link.label}
|
||||||
|
href={link.href}
|
||||||
|
target={link.href.startsWith('mailto:') ? undefined : '_blank'}
|
||||||
|
rel={
|
||||||
|
link.href.startsWith('mailto:')
|
||||||
|
? undefined
|
||||||
|
: 'noopener noreferrer'
|
||||||
|
}
|
||||||
|
className="rounded-full p-3 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
|
||||||
|
aria-label={link.label}
|
||||||
|
>
|
||||||
|
<link.icon className="h-5 w-5" />
|
||||||
|
</a>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<a
|
||||||
|
href="#about"
|
||||||
|
className="absolute bottom-8 left-1/2 -translate-x-1/2 animate-bounce text-muted-foreground transition-colors hover:text-foreground"
|
||||||
|
aria-label="Scroll to about section"
|
||||||
|
>
|
||||||
|
<ArrowDown className="h-6 w-6" />
|
||||||
|
</a>
|
||||||
|
</section>
|
||||||
|
)
|
||||||
|
}
|
||||||
115
src/components/sections/skills-section.tsx
Normal file
115
src/components/sections/skills-section.tsx
Normal file
@ -0,0 +1,115 @@
|
|||||||
|
import {
|
||||||
|
Atom,
|
||||||
|
ClipboardList,
|
||||||
|
Code2,
|
||||||
|
Container,
|
||||||
|
Database,
|
||||||
|
Figma,
|
||||||
|
FileCode2,
|
||||||
|
FileType,
|
||||||
|
GitBranch,
|
||||||
|
GitMerge,
|
||||||
|
Globe,
|
||||||
|
Hexagon,
|
||||||
|
Layers,
|
||||||
|
Link,
|
||||||
|
MousePointer2,
|
||||||
|
Palette,
|
||||||
|
Terminal,
|
||||||
|
Triangle,
|
||||||
|
Wind,
|
||||||
|
Zap,
|
||||||
|
} from 'lucide-react'
|
||||||
|
import { useTranslation } from 'react-i18next'
|
||||||
|
import type { LucideIcon } from 'lucide-react'
|
||||||
|
import type { FC } from 'react'
|
||||||
|
|
||||||
|
interface Skill {
|
||||||
|
name: string
|
||||||
|
icon: LucideIcon
|
||||||
|
}
|
||||||
|
|
||||||
|
interface SkillCategory {
|
||||||
|
key: string
|
||||||
|
skills: Array<Skill>
|
||||||
|
}
|
||||||
|
|
||||||
|
const skillCategories: Array<SkillCategory> = [
|
||||||
|
{
|
||||||
|
key: 'frontend',
|
||||||
|
skills: [
|
||||||
|
{ name: 'React', icon: Atom },
|
||||||
|
{ name: 'Vue', icon: Triangle },
|
||||||
|
{ name: 'Next.js', icon: Triangle },
|
||||||
|
{ name: 'Nuxt', icon: Hexagon },
|
||||||
|
{ name: 'TypeScript', icon: FileCode2 },
|
||||||
|
{ name: 'JavaScript', icon: Code2 },
|
||||||
|
{ name: 'Tailwind CSS', icon: Palette },
|
||||||
|
{ name: 'SCSS', icon: FileType },
|
||||||
|
{ name: 'CSS', icon: Palette },
|
||||||
|
{ name: 'HTML', icon: Globe },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'backend',
|
||||||
|
skills: [
|
||||||
|
{ name: 'Node.js', icon: Hexagon },
|
||||||
|
{ name: 'Express', icon: Zap },
|
||||||
|
{ name: 'NestJS', icon: Layers },
|
||||||
|
{ name: 'PostgreSQL', icon: Database },
|
||||||
|
{ name: 'REST API', icon: Link },
|
||||||
|
{ name: 'Prisma', icon: Layers },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'tools',
|
||||||
|
skills: [
|
||||||
|
{ name: 'Git', icon: GitBranch },
|
||||||
|
{ name: 'GitLab CI/CD', icon: GitMerge },
|
||||||
|
{ name: 'Docker', icon: Container },
|
||||||
|
{ name: 'Figma', icon: Figma },
|
||||||
|
{ name: 'Jira', icon: ClipboardList },
|
||||||
|
{ name: 'Linux', icon: Terminal },
|
||||||
|
{ name: 'Windsurf', icon: Wind },
|
||||||
|
{ name: 'Cursor', icon: MousePointer2 },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
]
|
||||||
|
|
||||||
|
export const SkillsSection: FC = () => {
|
||||||
|
const { t } = useTranslation()
|
||||||
|
|
||||||
|
return (
|
||||||
|
<section id="skills" className="scroll-mt-20 px-6 py-24">
|
||||||
|
<div className="mx-auto max-w-4xl">
|
||||||
|
<header className="text-center">
|
||||||
|
<h2 className="text-3xl font-bold tracking-tight sm:text-4xl">
|
||||||
|
{t('skills.title')}
|
||||||
|
</h2>
|
||||||
|
<p className="mt-2 text-muted-foreground">{t('skills.subtitle')}</p>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div className="mt-12 grid gap-8 md:grid-cols-3">
|
||||||
|
{skillCategories.map((category) => (
|
||||||
|
<article key={category.key} className="space-y-4">
|
||||||
|
<h3 className="text-center text-lg font-semibold">
|
||||||
|
{t(`skills.${category.key}`)}
|
||||||
|
</h3>
|
||||||
|
<ul className="grid grid-cols-2 gap-3">
|
||||||
|
{category.skills.map((skill) => (
|
||||||
|
<li
|
||||||
|
key={skill.name}
|
||||||
|
className="flex items-center gap-2 rounded-lg border border-border/50 bg-card px-3 py-2 text-sm transition-all hover:border-primary/30 hover:shadow-sm"
|
||||||
|
>
|
||||||
|
<skill.icon className="size-4" />
|
||||||
|
<span>{skill.name}</span>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</article>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
)
|
||||||
|
}
|
||||||
37
src/components/theme-toggle.tsx
Normal file
37
src/components/theme-toggle.tsx
Normal file
@ -0,0 +1,37 @@
|
|||||||
|
import { Moon, Sun } from 'lucide-react'
|
||||||
|
import { useTranslation } from 'react-i18next'
|
||||||
|
import { Button } from '@components/ui/button'
|
||||||
|
import { useThemeStore } from '@stores/theme-store'
|
||||||
|
import type { Theme } from '@lib/config'
|
||||||
|
import type { FC } from 'react'
|
||||||
|
|
||||||
|
const themes: Array<{ value: Theme; icon: typeof Sun }> = [
|
||||||
|
{ value: 'light', icon: Sun },
|
||||||
|
{ value: 'dark', icon: Moon },
|
||||||
|
]
|
||||||
|
|
||||||
|
export const ThemeToggle: FC = () => {
|
||||||
|
const { t } = useTranslation()
|
||||||
|
const { theme, setTheme } = useThemeStore()
|
||||||
|
|
||||||
|
const cycleTheme = () => {
|
||||||
|
const currentIndex = themes.findIndex((item) => item.value === theme)
|
||||||
|
const nextIndex = (currentIndex + 1) % themes.length
|
||||||
|
setTheme(themes[nextIndex].value)
|
||||||
|
}
|
||||||
|
|
||||||
|
const CurrentIcon = themes.find((item) => item.value === theme)?.icon ?? Sun
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="icon"
|
||||||
|
onClick={cycleTheme}
|
||||||
|
title={t('common.theme')}
|
||||||
|
className="h-9 w-9"
|
||||||
|
>
|
||||||
|
<CurrentIcon className="h-4 w-4" />
|
||||||
|
<span className="sr-only">{t('common.theme')}</span>
|
||||||
|
</Button>
|
||||||
|
)
|
||||||
|
}
|
||||||
65
src/components/ui/button.tsx
Normal file
65
src/components/ui/button.tsx
Normal file
@ -0,0 +1,65 @@
|
|||||||
|
import * as React from 'react'
|
||||||
|
import { Slot } from '@radix-ui/react-slot'
|
||||||
|
import { cva } from 'class-variance-authority'
|
||||||
|
import type { VariantProps } from 'class-variance-authority'
|
||||||
|
|
||||||
|
import { cn } from '@/lib/utils'
|
||||||
|
|
||||||
|
const buttonVariants = cva(
|
||||||
|
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
|
||||||
|
{
|
||||||
|
variants: {
|
||||||
|
variant: {
|
||||||
|
default: 'bg-primary text-primary-foreground hover:bg-primary/90',
|
||||||
|
destructive:
|
||||||
|
'bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
|
||||||
|
outline:
|
||||||
|
'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
|
||||||
|
secondary:
|
||||||
|
'bg-secondary text-secondary-foreground hover:bg-secondary/80',
|
||||||
|
ghost:
|
||||||
|
'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
|
||||||
|
link: 'text-primary underline-offset-4 hover:underline',
|
||||||
|
},
|
||||||
|
size: {
|
||||||
|
default: 'h-9 px-4 py-2 has-[>svg]:px-3',
|
||||||
|
xs: "h-6 gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
|
||||||
|
sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',
|
||||||
|
lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
|
||||||
|
icon: 'size-9',
|
||||||
|
'icon-xs': "size-6 rounded-md [&_svg:not([class*='size-'])]:size-3",
|
||||||
|
'icon-sm': 'size-8',
|
||||||
|
'icon-lg': 'size-10',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
defaultVariants: {
|
||||||
|
variant: 'default',
|
||||||
|
size: 'default',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
)
|
||||||
|
|
||||||
|
function Button({
|
||||||
|
className,
|
||||||
|
variant = 'default',
|
||||||
|
size = 'default',
|
||||||
|
asChild = false,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<'button'> &
|
||||||
|
VariantProps<typeof buttonVariants> & {
|
||||||
|
asChild?: boolean
|
||||||
|
}) {
|
||||||
|
const Comp = asChild ? Slot : 'button'
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Comp
|
||||||
|
data-slot="button"
|
||||||
|
data-variant={variant}
|
||||||
|
data-size={size}
|
||||||
|
className={cn(buttonVariants({ variant, size, className }))}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export { Button, buttonVariants }
|
||||||
8
src/lib/config.ts
Normal file
8
src/lib/config.ts
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
export const config = {
|
||||||
|
defaultLanguage: 'en',
|
||||||
|
defaultTheme: 'dark' as 'light' | 'dark' | 'system',
|
||||||
|
supportedLanguages: ['en', 'ru'] as const,
|
||||||
|
}
|
||||||
|
|
||||||
|
export type SupportedLanguage = (typeof config.supportedLanguages)[number]
|
||||||
|
export type Theme = 'light' | 'dark' | 'system'
|
||||||
29
src/lib/constants.ts
Normal file
29
src/lib/constants.ts
Normal file
@ -0,0 +1,29 @@
|
|||||||
|
import { Briefcase, Github, Linkedin, Send } from 'lucide-react'
|
||||||
|
import type { LucideIcon } from 'lucide-react'
|
||||||
|
|
||||||
|
export interface SocialLink {
|
||||||
|
icon: LucideIcon
|
||||||
|
href: string
|
||||||
|
label: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export const SOCIAL_LINKS: Array<SocialLink> = [
|
||||||
|
{
|
||||||
|
icon: Github,
|
||||||
|
href: 'https://github.com/altricade',
|
||||||
|
label: 'GitHub',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: Linkedin,
|
||||||
|
href: 'https://www.linkedin.com/in/altricade/',
|
||||||
|
label: 'LinkedIn',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: Briefcase,
|
||||||
|
href: 'https://nizhny-tagil.hh.ru/resume/df78aefbff0be340910039ed1f46394f7a3157',
|
||||||
|
label: 'HeadHunter',
|
||||||
|
},
|
||||||
|
{ icon: Send, href: 'https://t.me/altricade', label: 'Telegram' },
|
||||||
|
]
|
||||||
|
|
||||||
|
export const CONTACT_EMAIL = 'omar.m.zaid@hotmail.com'
|
||||||
31
src/lib/i18n.ts
Normal file
31
src/lib/i18n.ts
Normal file
@ -0,0 +1,31 @@
|
|||||||
|
import i18n from 'i18next'
|
||||||
|
import { initReactI18next } from 'react-i18next'
|
||||||
|
import LanguageDetector from 'i18next-browser-languagedetector'
|
||||||
|
import { config } from '@lib/config'
|
||||||
|
|
||||||
|
import en from '@/locales/en.json'
|
||||||
|
import ru from '@/locales/ru.json'
|
||||||
|
|
||||||
|
const resources = {
|
||||||
|
en: { translation: en },
|
||||||
|
ru: { translation: ru },
|
||||||
|
}
|
||||||
|
|
||||||
|
i18n
|
||||||
|
.use(LanguageDetector)
|
||||||
|
.use(initReactI18next)
|
||||||
|
.init({
|
||||||
|
resources,
|
||||||
|
fallbackLng: config.defaultLanguage,
|
||||||
|
supportedLngs: config.supportedLanguages,
|
||||||
|
interpolation: {
|
||||||
|
escapeValue: false,
|
||||||
|
},
|
||||||
|
detection: {
|
||||||
|
order: ['localStorage', 'navigator'],
|
||||||
|
caches: ['localStorage'],
|
||||||
|
lookupLocalStorage: 'language',
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
export default i18n
|
||||||
7
src/lib/utils.ts
Normal file
7
src/lib/utils.ts
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
import { clsx } from 'clsx'
|
||||||
|
import { twMerge } from 'tailwind-merge'
|
||||||
|
import type { ClassValue } from 'clsx'
|
||||||
|
|
||||||
|
export function cn(...inputs: Array<ClassValue>) {
|
||||||
|
return twMerge(clsx(inputs))
|
||||||
|
}
|
||||||
103
src/locales/en.json
Normal file
103
src/locales/en.json
Normal file
@ -0,0 +1,103 @@
|
|||||||
|
{
|
||||||
|
"common": {
|
||||||
|
"home": "Home",
|
||||||
|
"about": "About",
|
||||||
|
"experience": "Experience",
|
||||||
|
"skills": "Skills",
|
||||||
|
"projects": "Projects",
|
||||||
|
"blog": "Blog",
|
||||||
|
"contact": "Contact",
|
||||||
|
"language": "Language",
|
||||||
|
"theme": "Theme",
|
||||||
|
"lightMode": "Light",
|
||||||
|
"darkMode": "Dark",
|
||||||
|
"systemMode": "System",
|
||||||
|
"viewResume": "View Resume",
|
||||||
|
"getInTouch": "Get in Touch"
|
||||||
|
},
|
||||||
|
"hero": {
|
||||||
|
"greeting": "Hi, I'm",
|
||||||
|
"name": "Omar",
|
||||||
|
"title": "Frontend Developer",
|
||||||
|
"subtitle": "Crafting Digital Experiences",
|
||||||
|
"description": "I build modern, performant, and accessible web applications with clean code and thoughtful design.",
|
||||||
|
"cta": "See My Work",
|
||||||
|
"available": "Available for opportunities"
|
||||||
|
},
|
||||||
|
"about": {
|
||||||
|
"title": "About Me",
|
||||||
|
"subtitle": "Get to know me better",
|
||||||
|
"description": "I'm a passionate frontend developer with a keen eye for design and a love for creating seamless user experiences. With expertise in modern JavaScript frameworks and a commitment to clean, maintainable code, I transform ideas into elegant digital solutions.",
|
||||||
|
"paragraph2": "When I'm not coding, you'll find me exploring new technologies, contributing to open source, or sharing knowledge through technical writing.",
|
||||||
|
"highlights": {
|
||||||
|
"clean": {
|
||||||
|
"title": "Clean Code",
|
||||||
|
"description": "Writing maintainable, scalable, and well-documented code."
|
||||||
|
},
|
||||||
|
"design": {
|
||||||
|
"title": "Design Focused",
|
||||||
|
"description": "Creating beautiful interfaces with attention to detail."
|
||||||
|
},
|
||||||
|
"performance": {
|
||||||
|
"title": "Performance",
|
||||||
|
"description": "Building fast, optimized applications for the best UX."
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"experience": {
|
||||||
|
"title": "Experience",
|
||||||
|
"subtitle": "My professional journey",
|
||||||
|
"work": "Work",
|
||||||
|
"education": "Education",
|
||||||
|
"present": "Present",
|
||||||
|
"items": {
|
||||||
|
"work1": {
|
||||||
|
"title": "Frontend Developer",
|
||||||
|
"company": "Ecosoft",
|
||||||
|
"period": "2024 - Present",
|
||||||
|
"description": "UI development for e-commerce (kari.com) and HR systems. Built recruitment portal reducing hiring time by 80%. Implemented Tailwind CSS, speeding up development by 25%."
|
||||||
|
},
|
||||||
|
"work2": {
|
||||||
|
"title": "Frontend Developer",
|
||||||
|
"company": "Vverh digital",
|
||||||
|
"period": "2023 - 2024",
|
||||||
|
"description": "Full-stack development with Nuxt 3. Launched avtovybor-ekb.rf from scratch: frontend, backend, PostgreSQL. Built custom CMS enabling client's SEO efforts."
|
||||||
|
},
|
||||||
|
"edu1": {
|
||||||
|
"title": "Computer Engineering",
|
||||||
|
"company": "Ural Federal University",
|
||||||
|
"period": "2019 - 2023",
|
||||||
|
"description": "Bachelor's degree in Informatics and Computer Engineering with focus on software engineering and web technologies."
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"skills": {
|
||||||
|
"title": "Tech Stack",
|
||||||
|
"subtitle": "Technologies I work with",
|
||||||
|
"frontend": "Frontend",
|
||||||
|
"backend": "Backend",
|
||||||
|
"tools": "Tools & Others"
|
||||||
|
},
|
||||||
|
"projects": {
|
||||||
|
"title": "Featured Projects",
|
||||||
|
"subtitle": "Some things I've built",
|
||||||
|
"viewProject": "View Project",
|
||||||
|
"viewCode": "View Code"
|
||||||
|
},
|
||||||
|
"contact": {
|
||||||
|
"title": "Let's Connect",
|
||||||
|
"subtitle": "Have a project in mind? Let's talk.",
|
||||||
|
"email": "Email",
|
||||||
|
"message": "Message",
|
||||||
|
"send": "Send Message",
|
||||||
|
"or": "or find me on"
|
||||||
|
},
|
||||||
|
|
||||||
|
"blog": {
|
||||||
|
"comingSoon": "Blog posts coming soon. Stay tuned for articles about web development, design, and technology."
|
||||||
|
},
|
||||||
|
"footer": {
|
||||||
|
"rights": "All rights reserved.",
|
||||||
|
"madeWith": "Made with"
|
||||||
|
}
|
||||||
|
}
|
||||||
102
src/locales/ru.json
Normal file
102
src/locales/ru.json
Normal file
@ -0,0 +1,102 @@
|
|||||||
|
{
|
||||||
|
"common": {
|
||||||
|
"home": "Главная",
|
||||||
|
"about": "Обо мне",
|
||||||
|
"experience": "Опыт",
|
||||||
|
"skills": "Навыки",
|
||||||
|
"projects": "Проекты",
|
||||||
|
"blog": "Блог",
|
||||||
|
"contact": "Контакты",
|
||||||
|
"language": "Язык",
|
||||||
|
"theme": "Тема",
|
||||||
|
"lightMode": "Светлая",
|
||||||
|
"darkMode": "Тёмная",
|
||||||
|
"systemMode": "Системная",
|
||||||
|
"viewResume": "Резюме",
|
||||||
|
"getInTouch": "Связаться"
|
||||||
|
},
|
||||||
|
"hero": {
|
||||||
|
"greeting": "Привет, я",
|
||||||
|
"name": "Омар",
|
||||||
|
"title": "Фронтенд-разработчик",
|
||||||
|
"subtitle": "Создаю цифровой опыт",
|
||||||
|
"description": "Разрабатываю современные, производительные и доступные веб-приложения с чистым кодом и продуманным дизайном.",
|
||||||
|
"cta": "Мои работы",
|
||||||
|
"available": "Открыт для предложений"
|
||||||
|
},
|
||||||
|
"about": {
|
||||||
|
"title": "Обо мне",
|
||||||
|
"subtitle": "Узнайте меня лучше",
|
||||||
|
"description": "Я увлечённый фронтенд-разработчик с острым взглядом на дизайн и любовью к созданию безупречного пользовательского опыта. Обладая экспертизой в современных JavaScript-фреймворках и приверженностью к чистому, поддерживаемому коду, я превращаю идеи в элегантные цифровые решения.",
|
||||||
|
"paragraph2": "Когда я не пишу код, вы найдёте меня изучающим новые технологии, участвующим в open source или делящимся знаниями через технические статьи.",
|
||||||
|
"highlights": {
|
||||||
|
"clean": {
|
||||||
|
"title": "Чистый код",
|
||||||
|
"description": "Пишу поддерживаемый, масштабируемый и документированный код."
|
||||||
|
},
|
||||||
|
"design": {
|
||||||
|
"title": "Фокус на дизайн",
|
||||||
|
"description": "Создаю красивые интерфейсы с вниманием к деталям."
|
||||||
|
},
|
||||||
|
"performance": {
|
||||||
|
"title": "Производительность",
|
||||||
|
"description": "Разрабатываю быстрые, оптимизированные приложения."
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"experience": {
|
||||||
|
"title": "Опыт",
|
||||||
|
"subtitle": "Мой профессиональный путь",
|
||||||
|
"work": "Работа",
|
||||||
|
"education": "Образование",
|
||||||
|
"present": "Настоящее время",
|
||||||
|
"items": {
|
||||||
|
"work1": {
|
||||||
|
"title": "Фронтенд-разработчик",
|
||||||
|
"company": "Экософт",
|
||||||
|
"period": "2024 - Настоящее время",
|
||||||
|
"description": "Разработка UI для e-commerce (kari.com) и HR-систем. Создал портал рекрутинга, сокративший время найма на 80%. Внедрил Tailwind CSS, ускорив разработку на 25%."
|
||||||
|
},
|
||||||
|
"work2": {
|
||||||
|
"title": "Фронтенд-разработчик",
|
||||||
|
"company": "Vverh digital",
|
||||||
|
"period": "2023 - 2024",
|
||||||
|
"description": "Full-stack разработка на Nuxt 3. Запустил автовыбор-екб.рф с нуля: фронтенд, бэкенд, PostgreSQL. Создал кастомную CMS для SEO-продвижения клиентом."
|
||||||
|
},
|
||||||
|
"edu1": {
|
||||||
|
"title": "Информатика и вычислительная техника",
|
||||||
|
"company": "Уральский федеральный университет",
|
||||||
|
"period": "2019 - 2023",
|
||||||
|
"description": "Степень бакалавра по информатике и вычислительной технике с фокусом на разработку ПО и веб-технологии."
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"skills": {
|
||||||
|
"title": "Технологии",
|
||||||
|
"subtitle": "С чем я работаю",
|
||||||
|
"frontend": "Фронтенд",
|
||||||
|
"backend": "Бэкенд",
|
||||||
|
"tools": "Инструменты"
|
||||||
|
},
|
||||||
|
"projects": {
|
||||||
|
"title": "Избранные проекты",
|
||||||
|
"subtitle": "Некоторые мои работы",
|
||||||
|
"viewProject": "Смотреть проект",
|
||||||
|
"viewCode": "Смотреть код"
|
||||||
|
},
|
||||||
|
"contact": {
|
||||||
|
"title": "Давайте свяжемся",
|
||||||
|
"subtitle": "Есть проект? Давайте обсудим.",
|
||||||
|
"email": "Email",
|
||||||
|
"message": "Сообщение",
|
||||||
|
"send": "Отправить",
|
||||||
|
"or": "или найдите меня в"
|
||||||
|
},
|
||||||
|
"blog": {
|
||||||
|
"comingSoon": "Статьи скоро появятся. Следите за обновлениями о веб-разработке, дизайне и технологиях."
|
||||||
|
},
|
||||||
|
"footer": {
|
||||||
|
"rights": "Все права защищены.",
|
||||||
|
"madeWith": "Сделано с"
|
||||||
|
}
|
||||||
|
}
|
||||||
44
src/main.tsx
Normal file
44
src/main.tsx
Normal file
@ -0,0 +1,44 @@
|
|||||||
|
import ReactDOM from 'react-dom/client'
|
||||||
|
import { RouterProvider, createRouter } from '@tanstack/react-router'
|
||||||
|
import { routeTree } from './routeTree.gen'
|
||||||
|
import '@/lib/i18n'
|
||||||
|
import './styles.css'
|
||||||
|
|
||||||
|
const initializeTheme = () => {
|
||||||
|
const stored = localStorage.getItem('theme-storage')
|
||||||
|
if (stored) {
|
||||||
|
const { state } = JSON.parse(stored)
|
||||||
|
const theme = state?.theme ?? 'dark'
|
||||||
|
const resolved =
|
||||||
|
theme === 'system'
|
||||||
|
? window.matchMedia('(prefers-color-scheme: dark)').matches
|
||||||
|
? 'dark'
|
||||||
|
: 'light'
|
||||||
|
: theme
|
||||||
|
document.documentElement.classList.add(resolved)
|
||||||
|
} else {
|
||||||
|
document.documentElement.classList.add('dark')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
initializeTheme()
|
||||||
|
|
||||||
|
const router = createRouter({
|
||||||
|
routeTree,
|
||||||
|
context: {},
|
||||||
|
defaultPreload: 'intent',
|
||||||
|
scrollRestoration: true,
|
||||||
|
defaultStructuralSharing: true,
|
||||||
|
defaultPreloadStaleTime: 0,
|
||||||
|
})
|
||||||
|
|
||||||
|
declare module '@tanstack/react-router' {
|
||||||
|
interface Register {
|
||||||
|
router: typeof router
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const rootElement = document.getElementById('app')
|
||||||
|
if (rootElement && !rootElement.innerHTML) {
|
||||||
|
const root = ReactDOM.createRoot(rootElement)
|
||||||
|
root.render(<RouterProvider router={router} />)
|
||||||
|
}
|
||||||
77
src/routeTree.gen.ts
Normal file
77
src/routeTree.gen.ts
Normal file
@ -0,0 +1,77 @@
|
|||||||
|
/* eslint-disable */
|
||||||
|
|
||||||
|
// @ts-nocheck
|
||||||
|
|
||||||
|
// noinspection JSUnusedGlobalSymbols
|
||||||
|
|
||||||
|
// This file was automatically generated by TanStack Router.
|
||||||
|
// You should NOT make any changes in this file as it will be overwritten.
|
||||||
|
// Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
|
||||||
|
|
||||||
|
import { Route as rootRouteImport } from './routes/__root'
|
||||||
|
import { Route as BlogRouteImport } from './routes/blog'
|
||||||
|
import { Route as IndexRouteImport } from './routes/index'
|
||||||
|
|
||||||
|
const BlogRoute = BlogRouteImport.update({
|
||||||
|
id: '/blog',
|
||||||
|
path: '/blog',
|
||||||
|
getParentRoute: () => rootRouteImport,
|
||||||
|
} as any)
|
||||||
|
const IndexRoute = IndexRouteImport.update({
|
||||||
|
id: '/',
|
||||||
|
path: '/',
|
||||||
|
getParentRoute: () => rootRouteImport,
|
||||||
|
} as any)
|
||||||
|
|
||||||
|
export interface FileRoutesByFullPath {
|
||||||
|
'/': typeof IndexRoute
|
||||||
|
'/blog': typeof BlogRoute
|
||||||
|
}
|
||||||
|
export interface FileRoutesByTo {
|
||||||
|
'/': typeof IndexRoute
|
||||||
|
'/blog': typeof BlogRoute
|
||||||
|
}
|
||||||
|
export interface FileRoutesById {
|
||||||
|
__root__: typeof rootRouteImport
|
||||||
|
'/': typeof IndexRoute
|
||||||
|
'/blog': typeof BlogRoute
|
||||||
|
}
|
||||||
|
export interface FileRouteTypes {
|
||||||
|
fileRoutesByFullPath: FileRoutesByFullPath
|
||||||
|
fullPaths: '/' | '/blog'
|
||||||
|
fileRoutesByTo: FileRoutesByTo
|
||||||
|
to: '/' | '/blog'
|
||||||
|
id: '__root__' | '/' | '/blog'
|
||||||
|
fileRoutesById: FileRoutesById
|
||||||
|
}
|
||||||
|
export interface RootRouteChildren {
|
||||||
|
IndexRoute: typeof IndexRoute
|
||||||
|
BlogRoute: typeof BlogRoute
|
||||||
|
}
|
||||||
|
|
||||||
|
declare module '@tanstack/react-router' {
|
||||||
|
interface FileRoutesByPath {
|
||||||
|
'/blog': {
|
||||||
|
id: '/blog'
|
||||||
|
path: '/blog'
|
||||||
|
fullPath: '/blog'
|
||||||
|
preLoaderRoute: typeof BlogRouteImport
|
||||||
|
parentRoute: typeof rootRouteImport
|
||||||
|
}
|
||||||
|
'/': {
|
||||||
|
id: '/'
|
||||||
|
path: '/'
|
||||||
|
fullPath: '/'
|
||||||
|
preLoaderRoute: typeof IndexRouteImport
|
||||||
|
parentRoute: typeof rootRouteImport
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const rootRouteChildren: RootRouteChildren = {
|
||||||
|
IndexRoute: IndexRoute,
|
||||||
|
BlogRoute: BlogRoute,
|
||||||
|
}
|
||||||
|
export const routeTree = rootRouteImport
|
||||||
|
._addFileChildren(rootRouteChildren)
|
||||||
|
._addFileTypes<FileRouteTypes>()
|
||||||
26
src/routes/__root.tsx
Normal file
26
src/routes/__root.tsx
Normal file
@ -0,0 +1,26 @@
|
|||||||
|
import { Outlet, createRootRoute } from '@tanstack/react-router'
|
||||||
|
import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools'
|
||||||
|
import { TanStackDevtools } from '@tanstack/react-devtools'
|
||||||
|
import { Navigation } from '@components/navigation'
|
||||||
|
|
||||||
|
export const Route = createRootRoute({
|
||||||
|
component: () => (
|
||||||
|
<div className="min-h-screen bg-background text-foreground">
|
||||||
|
<Navigation />
|
||||||
|
<main>
|
||||||
|
<Outlet />
|
||||||
|
</main>
|
||||||
|
<TanStackDevtools
|
||||||
|
config={{
|
||||||
|
position: 'bottom-right',
|
||||||
|
}}
|
||||||
|
plugins={[
|
||||||
|
{
|
||||||
|
name: 'Tanstack Router',
|
||||||
|
render: <TanStackRouterDevtoolsPanel />,
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
),
|
||||||
|
})
|
||||||
21
src/routes/blog.tsx
Normal file
21
src/routes/blog.tsx
Normal file
@ -0,0 +1,21 @@
|
|||||||
|
import { createFileRoute } from '@tanstack/react-router'
|
||||||
|
import { useTranslation } from 'react-i18next'
|
||||||
|
|
||||||
|
export const Route = createFileRoute('/blog')({
|
||||||
|
component: BlogPage,
|
||||||
|
})
|
||||||
|
|
||||||
|
function BlogPage() {
|
||||||
|
const { t } = useTranslation()
|
||||||
|
|
||||||
|
return (
|
||||||
|
<main className="min-h-screen px-6 pt-24 pb-16">
|
||||||
|
<div className="mx-auto max-w-4xl">
|
||||||
|
<h1 className="text-4xl font-bold tracking-tight">
|
||||||
|
{t('common.blog')}
|
||||||
|
</h1>
|
||||||
|
<p className="mt-4 text-muted-foreground">{t('blog.comingSoon')}</p>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
)
|
||||||
|
}
|
||||||
24
src/routes/index.tsx
Normal file
24
src/routes/index.tsx
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
import { createFileRoute } from '@tanstack/react-router'
|
||||||
|
import { AboutSection } from '@components/sections/about-section'
|
||||||
|
import { ContactSection } from '@components/sections/contact-section'
|
||||||
|
import { ExperienceSection } from '@components/sections/experience-section'
|
||||||
|
import { Footer } from '@components/sections/footer'
|
||||||
|
import { HeroSection } from '@components/sections/hero-section'
|
||||||
|
import { SkillsSection } from '@components/sections/skills-section'
|
||||||
|
|
||||||
|
export const Route = createFileRoute('/')({
|
||||||
|
component: HomePage,
|
||||||
|
})
|
||||||
|
|
||||||
|
function HomePage() {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<HeroSection />
|
||||||
|
<AboutSection />
|
||||||
|
<ExperienceSection />
|
||||||
|
<SkillsSection />
|
||||||
|
<ContactSection />
|
||||||
|
<Footer />
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
55
src/stores/theme-store.ts
Normal file
55
src/stores/theme-store.ts
Normal file
@ -0,0 +1,55 @@
|
|||||||
|
import { create } from 'zustand'
|
||||||
|
import { persist } from 'zustand/middleware'
|
||||||
|
import { config } from '@lib/config'
|
||||||
|
import type { Theme } from '@lib/config'
|
||||||
|
|
||||||
|
interface ThemeState {
|
||||||
|
theme: Theme
|
||||||
|
setTheme: (theme: Theme) => void
|
||||||
|
}
|
||||||
|
|
||||||
|
const getSystemTheme = (): 'light' | 'dark' => {
|
||||||
|
if (typeof window === 'undefined') return 'light'
|
||||||
|
return window.matchMedia('(prefers-color-scheme: dark)').matches
|
||||||
|
? 'dark'
|
||||||
|
: 'light'
|
||||||
|
}
|
||||||
|
|
||||||
|
const applyTheme = (theme: Theme) => {
|
||||||
|
const root = document.documentElement
|
||||||
|
const resolvedTheme = theme === 'system' ? getSystemTheme() : theme
|
||||||
|
|
||||||
|
root.classList.remove('light', 'dark')
|
||||||
|
root.classList.add(resolvedTheme)
|
||||||
|
}
|
||||||
|
|
||||||
|
export const useThemeStore = create<ThemeState>()(
|
||||||
|
persist(
|
||||||
|
(set) => ({
|
||||||
|
theme: config.defaultTheme,
|
||||||
|
setTheme: (theme) => {
|
||||||
|
applyTheme(theme)
|
||||||
|
set({ theme })
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
{
|
||||||
|
name: 'theme-storage',
|
||||||
|
onRehydrateStorage: () => (state) => {
|
||||||
|
if (state) {
|
||||||
|
applyTheme(state.theme)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
),
|
||||||
|
)
|
||||||
|
|
||||||
|
if (typeof window !== 'undefined') {
|
||||||
|
window
|
||||||
|
.matchMedia('(prefers-color-scheme: dark)')
|
||||||
|
.addEventListener('change', () => {
|
||||||
|
const { theme } = useThemeStore.getState()
|
||||||
|
if (theme === 'system') {
|
||||||
|
applyTheme('system')
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
185
src/styles.css
Normal file
185
src/styles.css
Normal file
@ -0,0 +1,185 @@
|
|||||||
|
@import 'tailwindcss';
|
||||||
|
|
||||||
|
@import 'tw-animate-css';
|
||||||
|
|
||||||
|
@custom-variant dark (&:is(.dark *));
|
||||||
|
|
||||||
|
body {
|
||||||
|
@apply m-0;
|
||||||
|
font-family:
|
||||||
|
-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
|
||||||
|
'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
}
|
||||||
|
|
||||||
|
code {
|
||||||
|
font-family:
|
||||||
|
source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--background: oklch(0.985 0.002 270);
|
||||||
|
--foreground: oklch(0.145 0.015 270);
|
||||||
|
--card: oklch(1 0 0);
|
||||||
|
--card-foreground: oklch(0.145 0.015 270);
|
||||||
|
--popover: oklch(1 0 0);
|
||||||
|
--popover-foreground: oklch(0.145 0.015 270);
|
||||||
|
--primary: oklch(0.5 0.19 285);
|
||||||
|
--primary-foreground: oklch(0.98 0.002 270);
|
||||||
|
--secondary: oklch(0.96 0.008 270);
|
||||||
|
--secondary-foreground: oklch(0.2 0.02 270);
|
||||||
|
--muted: oklch(0.96 0.005 270);
|
||||||
|
--muted-foreground: oklch(0.45 0.015 270);
|
||||||
|
--accent: oklch(0.94 0.012 270);
|
||||||
|
--accent-foreground: oklch(0.2 0.02 270);
|
||||||
|
--destructive: oklch(0.55 0.2 25);
|
||||||
|
--destructive-foreground: oklch(0.98 0.002 270);
|
||||||
|
--border: oklch(0.91 0.008 270);
|
||||||
|
--input: oklch(0.91 0.008 270);
|
||||||
|
--ring: oklch(0.5 0.19 285);
|
||||||
|
--chart-1: oklch(0.5 0.19 285);
|
||||||
|
--chart-2: oklch(0.6 0.16 200);
|
||||||
|
--chart-3: oklch(0.55 0.18 330);
|
||||||
|
--chart-4: oklch(0.65 0.14 160);
|
||||||
|
--chart-5: oklch(0.6 0.16 45);
|
||||||
|
--radius: 0.5rem;
|
||||||
|
--sidebar: oklch(0.98 0.004 270);
|
||||||
|
--sidebar-foreground: oklch(0.145 0.015 270);
|
||||||
|
--sidebar-primary: oklch(0.5 0.19 285);
|
||||||
|
--sidebar-primary-foreground: oklch(0.98 0.002 270);
|
||||||
|
--sidebar-accent: oklch(0.94 0.012 270);
|
||||||
|
--sidebar-accent-foreground: oklch(0.2 0.02 270);
|
||||||
|
--sidebar-border: oklch(0.91 0.008 270);
|
||||||
|
--sidebar-ring: oklch(0.5 0.19 285);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark {
|
||||||
|
--background: oklch(0.1 0.015 270);
|
||||||
|
--foreground: oklch(0.93 0.005 270);
|
||||||
|
--card: oklch(0.13 0.018 270);
|
||||||
|
--card-foreground: oklch(0.93 0.005 270);
|
||||||
|
--popover: oklch(0.13 0.018 270);
|
||||||
|
--popover-foreground: oklch(0.93 0.005 270);
|
||||||
|
--primary: oklch(0.7 0.18 285);
|
||||||
|
--primary-foreground: oklch(0.1 0.015 270);
|
||||||
|
--secondary: oklch(0.18 0.02 270);
|
||||||
|
--secondary-foreground: oklch(0.9 0.005 270);
|
||||||
|
--muted: oklch(0.18 0.015 270);
|
||||||
|
--muted-foreground: oklch(0.6 0.01 270);
|
||||||
|
--accent: oklch(0.2 0.025 270);
|
||||||
|
--accent-foreground: oklch(0.9 0.005 270);
|
||||||
|
--destructive: oklch(0.55 0.2 25);
|
||||||
|
--destructive-foreground: oklch(0.93 0.005 270);
|
||||||
|
--border: oklch(0.22 0.02 270);
|
||||||
|
--input: oklch(0.18 0.02 270);
|
||||||
|
--ring: oklch(0.7 0.18 285);
|
||||||
|
--chart-1: oklch(0.7 0.18 285);
|
||||||
|
--chart-2: oklch(0.6 0.16 200);
|
||||||
|
--chart-3: oklch(0.65 0.16 330);
|
||||||
|
--chart-4: oklch(0.6 0.14 160);
|
||||||
|
--chart-5: oklch(0.65 0.16 45);
|
||||||
|
--sidebar: oklch(0.08 0.012 270);
|
||||||
|
--sidebar-foreground: oklch(0.93 0.005 270);
|
||||||
|
--sidebar-primary: oklch(0.7 0.18 285);
|
||||||
|
--sidebar-primary-foreground: oklch(0.1 0.015 270);
|
||||||
|
--sidebar-accent: oklch(0.2 0.025 270);
|
||||||
|
--sidebar-accent-foreground: oklch(0.9 0.005 270);
|
||||||
|
--sidebar-border: oklch(0.22 0.02 270);
|
||||||
|
--sidebar-ring: oklch(0.7 0.18 285);
|
||||||
|
}
|
||||||
|
|
||||||
|
@theme inline {
|
||||||
|
--color-background: var(--background);
|
||||||
|
--color-foreground: var(--foreground);
|
||||||
|
--color-card: var(--card);
|
||||||
|
--color-card-foreground: var(--card-foreground);
|
||||||
|
--color-popover: var(--popover);
|
||||||
|
--color-popover-foreground: var(--popover-foreground);
|
||||||
|
--color-primary: var(--primary);
|
||||||
|
--color-primary-foreground: var(--primary-foreground);
|
||||||
|
--color-secondary: var(--secondary);
|
||||||
|
--color-secondary-foreground: var(--secondary-foreground);
|
||||||
|
--color-muted: var(--muted);
|
||||||
|
--color-muted-foreground: var(--muted-foreground);
|
||||||
|
--color-accent: var(--accent);
|
||||||
|
--color-accent-foreground: var(--accent-foreground);
|
||||||
|
--color-destructive: var(--destructive);
|
||||||
|
--color-destructive-foreground: var(--destructive-foreground);
|
||||||
|
--color-border: var(--border);
|
||||||
|
--color-input: var(--input);
|
||||||
|
--color-ring: var(--ring);
|
||||||
|
--color-chart-1: var(--chart-1);
|
||||||
|
--color-chart-2: var(--chart-2);
|
||||||
|
--color-chart-3: var(--chart-3);
|
||||||
|
--color-chart-4: var(--chart-4);
|
||||||
|
--color-chart-5: var(--chart-5);
|
||||||
|
--radius-sm: calc(var(--radius) - 4px);
|
||||||
|
--radius-md: calc(var(--radius) - 2px);
|
||||||
|
--radius-lg: var(--radius);
|
||||||
|
--radius-xl: calc(var(--radius) + 4px);
|
||||||
|
--color-sidebar: var(--sidebar);
|
||||||
|
--color-sidebar-foreground: var(--sidebar-foreground);
|
||||||
|
--color-sidebar-primary: var(--sidebar-primary);
|
||||||
|
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
||||||
|
--color-sidebar-accent: var(--sidebar-accent);
|
||||||
|
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
||||||
|
--color-sidebar-border: var(--sidebar-border);
|
||||||
|
--color-sidebar-ring: var(--sidebar-ring);
|
||||||
|
}
|
||||||
|
|
||||||
|
@layer base {
|
||||||
|
* {
|
||||||
|
@apply border-border outline-ring/50;
|
||||||
|
}
|
||||||
|
html {
|
||||||
|
scroll-behavior: smooth;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
@apply bg-background text-foreground;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fade-in {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fade-in-up {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(20px);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.animate-fade-in {
|
||||||
|
animation: fade-in 0.6s ease-out forwards;
|
||||||
|
}
|
||||||
|
|
||||||
|
.animate-fade-in-up {
|
||||||
|
animation: fade-in-up 0.6s ease-out forwards;
|
||||||
|
}
|
||||||
|
|
||||||
|
.animation-delay-100 {
|
||||||
|
animation-delay: 100ms;
|
||||||
|
}
|
||||||
|
|
||||||
|
.animation-delay-200 {
|
||||||
|
animation-delay: 200ms;
|
||||||
|
}
|
||||||
|
|
||||||
|
.animation-delay-300 {
|
||||||
|
animation-delay: 300ms;
|
||||||
|
}
|
||||||
|
|
||||||
|
.animation-delay-400 {
|
||||||
|
animation-delay: 400ms;
|
||||||
|
}
|
||||||
36
tsconfig.json
Normal file
36
tsconfig.json
Normal file
@ -0,0 +1,36 @@
|
|||||||
|
{
|
||||||
|
"include": ["**/*.ts", "**/*.tsx", "eslint.config.js", "prettier.config.js", "vite.config.js"],
|
||||||
|
|
||||||
|
"compilerOptions": {
|
||||||
|
"target": "ES2022",
|
||||||
|
"jsx": "react-jsx",
|
||||||
|
"module": "ESNext",
|
||||||
|
"lib": ["ES2022", "DOM", "DOM.Iterable"],
|
||||||
|
"types": ["vite/client"],
|
||||||
|
|
||||||
|
/* Bundler mode */
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
"allowImportingTsExtensions": true,
|
||||||
|
"verbatimModuleSyntax": true,
|
||||||
|
"noEmit": true,
|
||||||
|
|
||||||
|
/* Linting */
|
||||||
|
"skipLibCheck": true,
|
||||||
|
"strict": true,
|
||||||
|
"noUnusedLocals": true,
|
||||||
|
"noUnusedParameters": true,
|
||||||
|
"noFallthroughCasesInSwitch": true,
|
||||||
|
"noUncheckedSideEffectImports": true,
|
||||||
|
"baseUrl": ".",
|
||||||
|
"paths": {
|
||||||
|
"@/*": ["./src/*"],
|
||||||
|
"@components/*": ["./src/components/*"],
|
||||||
|
"@routes/*": ["./src/routes/*"],
|
||||||
|
"@lib/*": ["./src/lib/*"],
|
||||||
|
"@stores/*": ["./src/stores/*"],
|
||||||
|
"@api/*": ["./src/api/*"],
|
||||||
|
"@containers/*": ["./src/containers/*"],
|
||||||
|
"@interfaces/*": ["./src/interfaces/*"]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
37
vite.config.ts
Normal file
37
vite.config.ts
Normal file
@ -0,0 +1,37 @@
|
|||||||
|
import { URL, fileURLToPath } from 'node:url'
|
||||||
|
import { defineConfig } from 'vite'
|
||||||
|
import { devtools } from '@tanstack/devtools-vite'
|
||||||
|
import viteReact from '@vitejs/plugin-react'
|
||||||
|
import tailwindcss from '@tailwindcss/vite'
|
||||||
|
|
||||||
|
import { tanstackRouter } from '@tanstack/router-plugin/vite'
|
||||||
|
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [
|
||||||
|
devtools(),
|
||||||
|
tanstackRouter({
|
||||||
|
target: 'react',
|
||||||
|
autoCodeSplitting: true,
|
||||||
|
}),
|
||||||
|
viteReact(),
|
||||||
|
tailwindcss(),
|
||||||
|
],
|
||||||
|
resolve: {
|
||||||
|
alias: {
|
||||||
|
'@': fileURLToPath(new URL('./src', import.meta.url)),
|
||||||
|
'@components': fileURLToPath(
|
||||||
|
new URL('./src/components', import.meta.url),
|
||||||
|
),
|
||||||
|
'@routes': fileURLToPath(new URL('./src/routes', import.meta.url)),
|
||||||
|
'@lib': fileURLToPath(new URL('./src/lib', import.meta.url)),
|
||||||
|
'@stores': fileURLToPath(new URL('./src/stores', import.meta.url)),
|
||||||
|
'@containers': fileURLToPath(
|
||||||
|
new URL('./src/containers', import.meta.url),
|
||||||
|
),
|
||||||
|
'@interfaces': fileURLToPath(
|
||||||
|
new URL('./src/interfaces', import.meta.url),
|
||||||
|
),
|
||||||
|
'@api': fileURLToPath(new URL('./src/api', import.meta.url)),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
})
|
||||||
Loading…
Reference in New Issue
Block a user