A modern, open-source demo replicating LinkedIn’s professional experience while showcasing the engineering career, technical depth, and creative direction of Rocco Russo — Software Engineer & Web3 Tech Lead.
This repository is both a technical demo and a living portfolio. It blends engineering precision with creative storytelling — a LinkedIn-style interface that presents my real professional profile, built using React, TypeScript, TailwindCSS v4, Shadcn/UI, and Bun.
It demonstrates how structured data, modular design, and personal branding can merge to form a self-hosted, developer-friendly alternative to traditional networking platforms. The ultimate goal: a foundation for AI-enhanced resumes, on-chain reputation systems, and Web3-native professional identities.
Rocco Russo
Software Engineer / Tech Lead | Blockchain & Dapps | Agentic AI | Cybersecurity Advocate
📍 Apulia, Italy
🌐 rocco.me • GitHub
📧 hello@rocco.me
Summary:
Software engineer with over 10+ years of front-end experience, 5 years in Web3, and hands-on full-stack and AI agent integration expertise. I design, refactor, and ship products that merge blockchain transparency with real user value, from DeFi and RWA platforms to secure browser extensions and gamified apps. I lead small agile teams with a focus on mentorship, code quality, and long-term sustainability — not just delivery speed.
The project simulates a LinkedIn-like interface populated with real data from my professional background.
It demonstrates:
- Dynamic JSON-based data mapping for profile content.
- UI/UX parity with modern social platforms.
- A maintainable codebase ready for AI or Web3 integration (e.g., decentralized professional graphs, tokenized endorsements).
Ideal for:
- Developers experimenting with full-stack resume visualization.
- Recruiters/Startups exploring custom profile systems.
- AI builders linking identity, reputation, and knowledge graphs.
- Mentored 5 developers; placed 3 in junior roles.
- Built full-stack blockchain integrations for 3 DApps and Web2 apps.
- Optimized API communication, improving speed by 15% and cutting gas costs.
- Delivered UI for Lotsaloot™, a three-tier jackpot system.
- Designed a fast-hitting reward loop to maximize engagement.
- Strengthened jackpot portfolios with consistent micro-reward feedback.
- Led a 12-member team, achieving a 30% productivity boost.
- Reduced bugs by 25% and raised code quality 40%.
- Supported 5M monthly users with 3k concurrent.
- Launched SPA with $20M+ liquidity and SDK integration.
- Cut integration time by 50% and standardized design systems.
- Built a marketing site that drew 10k+ unique visitors in 3 months.
- Supervised 10 Web3 and crypto app projects.
- Mentored 4 front-end developers within a 15-person team.
- Enhanced scalability and UI performance across multiple DApps.
- Programmed vesting, farming, and rewards systems connected to DeFi contracts.
- Contributed to DApp dashboards with React, Next.js, and Node.js.
- Delivered high-impact Web2 software for enterprise clients in The Hague, NL.
- Focused on performance refactoring and cloud transitions.
- Contributed to scientific data platforms integrating chemical and medical data.
- Worked with Angular and cross-platform optimization for research applications.
- Helped build one of Europe’s most visited ad marketplaces (~3M users/month).
- Delivered multilingual, SEO-optimized codebases in international teams.
More roles: 71web.ag, BetuniQ, SpiderSolutions.it — full list in src/data/profile.json.
- 🚀 Launched DeFi apps reaching 5M+ monthly users.
- 💡 Refactored legacy SPA saving ~€50,000 in maintenance.
- 🧠 Improved code quality by 40%, reduced bugs by 25%.
- 🧭 Mentored 5+ developers who advanced to new positions.
- 🏗️ Authored ecosystem-wide design & style guides.
- 🔐 Delivered cybersecurity-focused open-source extensions.
Frontend: React, Svelte, TypeScript, Next.js, Redux, Zustand, Wagmi, Viem, CSS-in-JS, TailwindCSS, Atomic Design
Backend: Node.js, Express, NestJS, GraphQL, MongoDB, PostgreSQL, Redis, Flask, Python
DevOps & Cloud: Docker, Kubernetes, CI/CD, AWS, GCP, Vercel, Heroku
Web3 & AI: Smart contract integration, DeFi DApps, SDK development, LLM-powered agents
Other Tools: GitHub, GitLab, Webpack, Vite, Figma, Cursor AI, Copilot
Testing: Jest, Vitest, Selenium
Soft Skills: Mentorship, cross-functional collaboration, ethical leadership, code review
- Ajna Labs — DeFi DApp + SDK ($20M liquidity) → ajna.finance
- Mode Network — Large-scale React refactoring → mode.network
- CyberGrandpa Anti-Fraud — Browser extension for phishing prevention → source
- Tetris with Crypto Rewards — Telegram mini app with TON token prizes → source
- LinkedIn Full Width — UI enhancement Chrome extension → Chrome Store
- Higher Diploma, Accounting & Business — Athena Institute, Foggia, Italy
- AWS Cloud Practitioner — Coursera
- Build a JavaScript AI App with OpenAI API — LinkedIn Learning
- Practical GitHub Project Management & Collaboration — LinkedIn Learning
This project isn’t only a portfolio — it’s a prototype for the decentralized professional identity of tomorrow.
Future directions include:
- Integration with on-chain credentials and verifiable attestations.
- AI agents that map skill graphs and reputation.
- Decentralized hiring platforms built on open standards.
My goal is to bridge human authenticity and technological transparency, building tools that connect professionals beyond centralized networks.
- Multi-language support with RTL coverage for 5 locales (en, it, fr, es, ar).
- Clean & modern UI inspired by LinkedIn, built with TailwindCSS and Shadcn/UI.
- Static site generation for all language routes (no SSR).
- Dark/light themes with automatic and manual switching.
- Edge-aware routing for Cloudflare Pages deployments.
- Comprehensive SEO with meta tags, Open Graph, Twitter Cards, structured data, and sitemap.
- Testing coverage with Vitest ensuring 100% routing coverage.
- Responsive design optimized for every screen size.
- Frontend: React, TypeScript, TailwindCSS v4, Shadcn/UI
- Build Tools: Vite, Bun
- Internationalization: use-intl
- Routing: Wouter (lightweight)
- Testing: Vitest, React Testing Library
- Deployment: Cloudflare Pages (SSG)
- Bun
- Node.js 18+
# Clone the repository
git clone https://github.com/xdemocle/my-linkedin-profile-clone.git
cd my-linkedin-profile-clone
# Install dependencies
bun install
# Start the development server
bun run dev
# Build the static site
bun run build
# Preview the production build
bun run preview# Run the full test suite
bun run test
# Run a specific Vitest file
bun run test:run src/__tests__/components/Router.test.tsx- Update
src/data/profile.jsonwith your own experience, projects, and achievements. - Keep translations in sync across locale-specific JSON files under
src/data/i18n/. - Reference assets in
public/for avatars, logos, or rich media.
├── public/ # Static assets
├── src/
│ ├── components/ # React components
│ ├── constants/ # Configuration constants
│ ├── contexts/ # React contexts
│ ├── data/ # Profile data & i18n content
│ ├── hooks/ # Custom React hooks
│ ├── lib/ # Utility functions
│ ├── pages/ # Page components
│ └── __tests__/ # Test files
└── vite.config.ts # Build configuration
The application implements a sophisticated i18n system with:
- URL-based locale detection.
- Default locale (English) without prefix (
/experience). - Localized routes using prefixes (
/fr/experience). - Automatic redirects for legacy paths.
- RTL support for Arabic.
/ (en) - Profile page in English
/it/, /fr/, etc. - Localized profile pages
/experience - Experience page in English
/*/experience - Localized experience pages
/projects - Projects page in English
/*/projects - Localized projects pages
The application follows a modular component architecture:
<ThemeProvider>— Manages light/dark mode.<LocaleProvider>— Handles internationalization.<Router>— Smart routing with locale detection.<ProfileLayout>&<PageLayout>— Layout primitives for all sections.
The test suite validates the critical aspects of the experience:
- URL generation & parsing — Core routing logic.
- Locale detection — Determines initial app state.
- Route matching — Ensures correct page rendering.
- Language switching — Confirms seamless UX for all locales.
- Shadcn/UI for the component system.
- TailwindCSS for utility-first styling.
- use-intl for localization support.
- Wouter for lightweight routing.