Built by Nick / Enuzna · Team DeathLegionLK
A clean, minimal dark portfolio template for full stack developers. Built with React, TypeScript, Tailwind CSS, and Vite. No backend required — just clone, customize, and deploy.
Dark minimal portfolio with 7 sections, scroll-triggered animations, Web3-style team grid, color-coded skill badges, and a fully responsive layout.
| # | Section | Description |
|---|---|---|
| 1 | Hero | Full-screen intro with name, aliases, role, tagline, and CTAs |
| 2 | About | Personal bio with stat cards |
| 3 | Skills | Color-coded tech stack grid (Frontend / Backend / Databases / DevOps) |
| 4 | Projects | Project cards with tech tags, GitHub and demo links |
| 5 | Team | Web3-style circular avatar grid with purple duotone effect |
| 6 | Experience | Vertical timeline with dates and descriptions |
| 7 | Contact | Direct links (GitHub, Email, Discord, Telegram) |
- Framework: React 18 with TypeScript
- Build tool: Vite 5
- Styling: Tailwind CSS v3 + custom CSS design tokens
- UI components: shadcn/ui
- Icons: lucide-react
- Fonts: Syne (headings), Space Mono (labels/code), DM Sans (body)
- Animations: CSS + IntersectionObserver (no external animation libraries)
- Package manager: pnpm
- Node.js 18+
- pnpm (recommended) or npm
# Clone the repository
git clone https://github.com/deathlegionteamlk/developer-portfolio-template.git
cd developer-portfolio-template
# Install dependencies
pnpm install
# Start development server
pnpm devOpen http://localhost:5173 in your browser.
pnpm build
pnpm previewUpdate the name, aliases, tagline, and GitHub link:
// Change the name display
<h1>NICK</h1>
// Update aliases
<span>// Enuzna</span>
<span>// Hexa</span>
// Update tagline
<p>I build web applications end to end...</p>
// Update GitHub link
href="https://github.com/yourusername"Edit the bio text and stat cards directly in the component.
Modify the SKILL_CATEGORIES array. Each skill has a name and color (hex):
const SKILL_CATEGORIES = [
{
label: "Frontend",
skills: [
{ name: "React", color: "#61DAFB" },
{ name: "TypeScript", color: "#3178C6" },
// add more...
],
},
// more categories...
];Edit the PROJECTS array:
const PROJECTS = [
{
name: "Your Project",
description: "What it does and why you built it.",
tech: ["React", "Node.js", "PostgreSQL"],
status: "Open source",
github: "https://github.com/yourrepo",
demo: "https://yourproject.com",
},
// ...
];Modify the TEAM_MEMBERS array. Uses Unsplash URLs by default — replace with real photos:
const TEAM_MEMBERS = [
{
id: 1,
name: "Your Name",
role: "Your Role",
avatar: "https://your-photo-url.jpg",
},
// 15 members total (fills the 4-row grid)
];Edit the TIMELINE array with your actual experience.
Update the LINKS array with your real social links.
Update the logo name and alias shown in the navbar.
The design is token-based — all colors, shadows, and transitions live in src/index.css:
:root {
--background: 235 22% 4%; /* Main dark background */
--foreground: 220 15% 88%; /* Text color */
--card: 235 20% 7%; /* Card/surface background */
--border: 235 16% 13%; /* Subtle borders */
--accent: 192 85% 55%; /* Teal accent (links, highlights) */
--muted-foreground: 220 10% 48%; /* Secondary text */
}To change the accent color, update --accent (and --primary) in src/index.css and --ring.
Fonts are loaded via Google Fonts in index.html. Change the import URL and update tailwind.config.ts:
fontFamily: {
syne: ['Syne', 'sans-serif'], // Headings
'space-mono': ['Space Mono', 'monospace'], // Labels/code text
'dm-sans': ['DM Sans', 'sans-serif'], // Body text
},├── index.html # Entry HTML, font imports, OG meta
├── public/
│ └── favicon.svg # Custom SVG favicon
├── src/
│ ├── components/
│ │ ├── portfolio/ # All portfolio section components
│ │ │ ├── Navbar.tsx
│ │ │ ├── HeroSection.tsx
│ │ │ ├── AboutSection.tsx
│ │ │ ├── SkillsSection.tsx
│ │ │ ├── ProjectsSection.tsx
│ │ │ ├── CircularAvatarTeam.tsx # Web3 avatar grid component
│ │ │ ├── TeamSection.tsx
│ │ │ ├── ExperienceSection.tsx
│ │ │ ├── ContactSection.tsx
│ │ │ └── Footer.tsx
│ │ └── ui/ # shadcn/ui components
│ ├── hooks/
│ │ └── use-intersection.ts # Scroll-reveal hook
│ ├── pages/
│ │ └── Index.tsx # Main page assembly
│ ├── index.css # Design system tokens + global styles
│ └── main.tsx # App entry
├── tailwind.config.ts # Tailwind + font config
└── package.json
# Install Vercel CLI
pnpm add -g vercel
# Deploy
vercelOr connect the GitHub repo directly at vercel.com.
pnpm build
# Upload the dist/ folder at netlify.compnpm build
# Deploy the dist/ folder using gh-pages or GitHub ActionsAnimations use a lightweight useIntersection hook — no GSAP, Framer Motion, or AOS required:
// src/hooks/use-intersection.ts
const { ref, isVisible } = useIntersection(0.12);
// Apply to section element:
<section ref={ref as React.RefObject<HTMLElement>}>
<div className={`reveal ${isVisible ? "is-visible" : ""}`}>
{/* content */}
</div>
</section>Add staggered delays with reveal-delay-1 through reveal-delay-4 classes.
The team section uses a Web3-inspired circular avatar grid with:
- Purple duotone image effect (grayscale + color blend)
- Halftone dot pattern overlay
- Hover: full color reveal + scale + glow ring
- Large bold typography ("Meet The Team") layered with avatars
- 4-row grid layout (3 / 4 / 3 / 5 avatars)
Import and use it standalone:
import { CircularAvatarTeam } from "@/components/portfolio/CircularAvatarTeam";
<CircularAvatarTeam
members={yourMembers}
logoText="YOURTEAM"
/>MIT © Nick / Enuzna — DeathLegionLK
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software.
Made by Nick · Team DeathLegionLK