Portfolio — Eduardo Dusik

Personal portfolio site focused on front-end: an IDE-like experience, themes, internationalization, and projects pulled from GitHub.

Highlights

• IDE-inspired interface
• Light and dark theme (persisted in the browser)
• Content in Portuguese and English
• Repository list via the public GitHub API (user EDusik; no token required)
• Local project fallback if the API fails or returns empty
• 3D scene with Three.js (React Three Fiber + Drei)
• Sass styling and design tokens under src/styles/

Tech stack

Layer	Choice
Framework	Next.js 15 (App Router, RSC where applicable)
Language	TypeScript 5
UI	React 19
Styling	Sass (SCSS), variables in src/styles/tokens/
3D / WebGL	Three.js, React Three Fiber, Drei
Typography	next/font (Inter, JetBrains Mono)
Tooling	ESLint 9, Stylelint 17, Prettier 3; Husky + lint-staged + Commitlint in the local workflow

Libraries

Runtime (dependencies)

Package	Role
next	Routing, build, SSR/RSC, metadata
react / react-dom	UI and hydration
three	Scene and WebGL rendering
@react-three/fiber	React render tree over Three.js
@react-three/drei	3D helpers (pmndrs community utilities)
clsx	Conditional CSS classes (used with cn() in @/lib/utils)
node-emoji	:shortcode: expansion for descriptions from GitHub

Development (devDependencies)

Package	Role
typescript	Static typing
sass	SCSS compilation
eslint, eslint-config-next, eslint-config-prettier	JS/TS linting aligned with Next
@eslint/eslintrc	Flat ESLint config
stylelint, stylelint-config-prettier-scss, stylelint-config-recommended-scss	CSS/SCSS linting
prettier	Formatting
postcss	CSS pipeline (used by Next)
@types/node, @types/react, @types/react-dom, @types/three	TypeScript types
husky	Git hooks
lint-staged	Lint staged files
@commitlint/cli, @commitlint/config-conventional	Conventional commit messages

Pinned versions: see package.json and yarn.lock.

Prerequisites

• Node.js 20+ (matches the project toolchain)

Installation and usage

yarn install
yarn dev

Open http://localhost:3000.

Production build and local server:

yarn build
yarn start

Scripts

Script	Description
yarn dev	Development server
yarn build	Production build
yarn start	Serve the production build
yarn lint	ESLint + Stylelint
yarn lint:fix	Auto-fix what the tools can
yarn format	Prettier (write)
yarn format:check	Prettier (check)
yarn type-check	tsc --noEmit

The npm/yarn prepare script installs Husky hooks when a .git directory exists.

Environment variables

Variable	Required	Description
NEXT_PUBLIC_SITE_URL	No	Canonical site URL (Open Graph / metadataBase). Example: https://your-domain.com. If missing or invalid, the code falls back to http://localhost:3000 — set your public URL in production.

The home page (src/app/page.tsx) calls fetchRepos() in src/lib/github.ts, which uses the public API; on failure it uses the fallback list defined in the same file.

Repository layout

Root overview (excluding node_modules / .next):

.
├── .husky/                 # Git hooks (e.g. pre-commit, commit-msg)
├── public/
│   └── static/             # favicon, PWA manifest, icons
├── src/
│   ├── app/                # App Router: layout, home page, icon.svg
│   ├── components/
│   │   ├── AppProviders/   # Provider composition
│   │   ├── ContactPage/    # “Contact” panel + terminal
│   │   ├── Editor/         # Main editor-like area
│   │   ├── Hero/           # Hero block + 3D scene (HeroScene)
│   │   ├── HomePage/
│   │   ├── Ide/            # IDE shell (home composition)
│   │   ├── ProjectsPage/
│   │   ├── Sidebar/
│   │   ├── SiteHead/       # Metadata (metadata/)
│   │   ├── Statusbar/
│   │   ├── Topbar/
│   │   └── shared/         # Reusable UI (Tabs, ProjectCard, SvgIcons, …)
│   ├── contexts/           # I18nContext, TabsContext, ThemeContext
│   ├── hooks/              # useMediaQuery, useScrollSpy, …
│   ├── lib/
│   │   ├── constants/      # Sections, virtual files, language colors, …
│   │   ├── i18n/           # Dictionaries and types
│   │   ├── github.ts       # Repository fetch
│   │   └── utils.ts        # cn(), helpers
│   └── styles/             # SCSS entry (index), globals, tokens, partials, mixins
├── CLAUDE.md
├── eslint.config.mjs
├── next.config.mjs
├── package.json
├── stylelint.config.mjs
├── tsconfig.json
└── yarn.lock

Code conventions, imports, and SCSS: CLAUDE.md (mirrored in .cursor/rules/claude-conventions.mdc).

Deploy

Works on Vercel or any environment that runs Node for Next.js apps. In production, set NEXT_PUBLIC_SITE_URL to your public URL for correct metadata and social sharing.