Loading repository data…
Loading repository data…
DyexaHub / repository
DyexaPortfolio is a modern, feature-rich personal portfolio website designed to showcase my projects, technical skills, and professional experience in a clear and engaging way. The site focuses on strong visual presentation, smooth user interactions, and a responsive layout that works seamlessly across all devices.
A comprehensive, modern portfolio website showcasing skills, projects, and experience with an minimalist design using light blue color palettes and dual theme support (light/dark).
# 1. Install dependencies
npm install
# 2. Start development server
npm run dev
# 3. Open browser to http://localhost:5173
That's it! Your portfolio is now running locally. 🎉
👉 Having issues? Check START_HERE.md for detailed troubleshooting.
| Command | Description |
|---|---|
npm run dev | Start development server (http://localhost:5173) |
npm run build | Build for production (outputs to /dist) |
npm run preview | Preview production build locally |
npm run lint | Run ESLint to check code quality |
PORTOFOLIO/
├── .vscode/ # VS Code workspace settings
├── components/
│ ├── figma/ # Figma components
│ ├── navigation/ # Navigation components
│ │ └── FloatingNav.tsx # Sticky navigation bar
│ ├── sections/ # Main page sections
│ │ ├── HeroSection.tsx # Landing section
│ │ ├── AboutSection.tsx # About me
│ │ ├── SkillsSection.tsx # Skills showcase
│ │ ├── ProjectsSection.tsx
│ │ ├── ExperienceSection.tsx
│ │ ├── RoadmapSection.tsx
│ │ ├── TestimonialsSection.tsx
│ │ ├── ContactSection.tsx
│ │ └── Footer.tsx
│ ├── shared/ # Reusable components
│ │ ├── TwinkleBackground.tsx
│ │ ├── ProjectCard.tsx
│ │ ├── SkillCard.tsx
│ │ ├── TypingAnimation.tsx
│ │ └── ...more
│ └── ui/ # shadcn/ui components (40+)
├── data/ # Content data
│ ├── personal.ts # Your personal info
│ ├── projects.ts # Your projects (15 samples)
│ ├── skills.ts # Your skills
│ ├── experience.ts # Work experience
│ ├── education.ts # Education history
│ ├── roadmap.ts # Future goals
│ └── testimonials.ts # Testimonials
├── hooks/ # Custom React hooks
│ ├── useTheme.ts # Theme management
│ ├── useScrollAnimation.ts # Scroll animations
│ └── useScrollProgress.ts # Progress tracking
├── styles/
│ └── globals.css # Global styles + Tailwind
├── utils/ # Utility functions
├── App.tsx # Main app component
├── main.tsx # React entry point
├── index.html # HTML entry point
└── vite.config.ts # Vite configuration
File: data/personal.ts
export const personal = {
name: "Your Name",
title: "Your Title",
email: "your@email.com",
github: "yourusername",
linkedin: "yourusername",
discord: "yourusername",
// ... more fields
};
File: data/projects.ts
Add your projects with descriptions, technologies, images, and links.
File: data/skills.ts
List your technical skills with proficiency levels (0-100).
File: styles/globals.css
:root {
--primary: #0ea5e9; /* Your primary color */
--secondary: #bae6fd; /* Your secondary color */
--accent: #38bdf8; /* Your accent color */
}
See SETUP_GUIDE.md for complete customization guide.
Or use CLI:
npm i -g vercel
vercel
npm run build/dist folder to NetlifyBuild Settings:
npm run builddistnpm install -D gh-pages
npm run build && npx gh-pages -d dist
All configuration files are set up for you:
tsconfig.json - TypeScript configurationtsconfig.app.json - App TypeScript configtsconfig.node.json - Node TypeScript configvite.config.ts - Vite build configurationpostcss.config.js - PostCSS with Tailwind v4eslint.config.js - ESLint rules.prettierrc - Prettier formatting.vscode/settings.json - VS Code workspace settingsCheck that main.tsx imports globals.css:
import './styles/globals.css';
rm -rf node_modules package-lock.json
npm install
Change port in vite.config.ts:
server: { port: 3000 }
More help: See START_HERE.md troubleshooting section.
MIT License - Feel free to use this for your own portfolio!
Dyexa Rahardika
Made with ❤️ by Dyexa
Star ⭐ this repo if you found it helpful!