Nuxt 4 + TypeScript + Tailwind Portfolio for Zoro Vel James C. Pinus-an

Instructions

1. 1

   Project setup — create a new Nuxt 4 + TS project:

2. 2

   npx nuxi@latest init zvj-portfolio

3. 3

   cd zvj-portfolio

4. 4

   pnpm install

5. 5

   pnpm add -D tailwindcss postcss autoprefixer

6. 6

   npx tailwindcss init -p

7. 7

   Enable TypeScript in Nuxt (nuxt config default supports TS).

8. 8

   Tailwind config — replace content in tailwind.config.ts with:

9. 9

   content: include all .vue/.ts/.html in nuxt directories.

10. 10

    theme.extend: add colors matching tokens (--bg, --surface, etc.) and fontFamily for Syne and Space Mono.

11. 11

    Important: use dark base by default via CSS variables in :root.

12. 12

    Global CSS — create assets/css/main.css with:

13. 13

    @import for Google Fonts (Syne, Space Mono).

14. 14

    CSS variables for palette:

15. 15

    :root {

16. 16

    --bg: #0a0a0f;

17. 17

    --surface: #111118;

18. 18

    --surface2: #1a1a24;

19. 19

    --accent: #7c6bff;

20. 20

    --accent2: #ff6b9d;

21. 21

    --accent3: #6bffd4;

22. 22

    --text: #f0eeff;

23. 23

    --muted: #8885aa;

24. 24

    --border: rgba(124,107,255,0.18);

25. 25

    }

26. 26

    Base styles: body background var(--bg); color var(--text); font-family: 'Space Mono', monospace; headings use 'Syne'.

27. 27

    Grid background, noise overlay, glow blobs (as per spec).

28. 28

    Hide system cursor and placeholder styles for custom cursor.

29. 29

    Nuxt config — nuxt.config.ts essentials:

30. 30

    export default defineNuxtConfig({

31. 31

    modules: ['@nuxtjs/tailwindcss'],

32. 32

    css: ['~/assets/css/main.css'],

33. 33

    app: { head: { link: [ { rel:'preconnect', href:'https://fonts.googleapis.com' }, { rel:'stylesheet', href:'https://fonts.googleapis.com/css2?family=Syne:wght@800&family=Space+Mono:wght@400;700&display=swap' } ] } }

34. 34

    });

35. 35

    Layout — create layouts/default.vue:

36. 36

    Fixed nav (backdrop-filter blur(12px)), logo "zvj.dev" using Space Mono and accent color.

37. 37

    Main slot and floating custom cursor + scroll indicator.

38. 38

    Include <NuxtPage/> wrapper and ensure sections get .reveal class.

39. 39

    Components — create the following components (concise outlines):

40. 40

    components/NavBar.vue

41. 41

    Logo (zvj.dev), uppercase monospace links, animated underline ::after, fixed position.

42. 42

    components/Hero.vue

43. 43

    Section label "01 — hello" (Space Mono, accent).

44. 44

    Big Syne heading: "Zoro Vel James C. Pinus-an"

45. 45

    Subtitle line + typewriter cycling phrases like "Full‑Stack Web Developer", "∞ bugs squashed", "too many console.logs"

46. 46

    CTA primary (View my work) and outline (Let's connect).

47. 47

    Floating scroll indicator at bottom.

48. 48

    components/About.vue

49. 49

    Short intro text in casual voice; small stats row (Experience: 1–3 years; Location: Ilocos; Goals: Full-time dev).

50. 50

    components/Skills.vue

51. 51

    Skill pills grouped (Frontend, Backend, Tools) styled as specified with hover color shifts to accent variants.

52. 52

    components/Projects.vue

53. 53

    Grid of cards (use card pattern). Each card: title, tech tags, 1–2 sentence dev-tone description, links to GitHub/demo.

54. 54

    Top accent bar (::before gradient).

55. 55

    components/Contact.vue

56. 56

    Contact links styled as pills (email, LinkedIn, GitHub).

57. 57

    components/Footer.vue

58. 58

    Small copy: "crafted with ☕ & too many console.logs — Zoro Vel James C. Pinus-an"

59. 59

    Animations & JS — place in composables or utilities:

60. 60

    composables/useReveal.ts: IntersectionObserver toggling .is-revealed class; set initial CSS (opacity 0, translateY(24px)) and transition 0.7s; stagger via data-delay attributes.

61. 61

    composables/useTypewriter.ts: Typewriter hook cycling phrases, char-by-char typing and deleting, configurable speeds.

62. 62

    composables/useCursor.ts: Custom cursor logic: small dot + ring with lag using requestAnimationFrame and CSS transforms; hide on touch devices.

63. 63

    Example Hero implementation (structure):

64. 64

    Section wrapper with label, h1, typewriter span, CTAs.

65. 65

    Apply fonts: h1 Syne 800, letter-spacing: -0.025em.

66. 66

    Typewriter cursor: blinking bar 2px.

67. 67

    Ensure accessible buttons with aria-labels.

68. 68

    Example card CSS (Tailwind + custom classes):

69. 69

    bg: var(--surface); border: 1px solid var(--border); rounded-lg (12px); p-6; transition transform & shadow.

70. 70

    Hover: transform -translate-y-1.25 (≈-5px), border-color accent, shadow: 0 12px 40px rgba(124,107,255,0.15).

71. 71

    ::before top accent bar: use relative + before:absolute h-0.5 left-0 right-0 top-0 bg-gradient-to-r from-[var(--accent)] via-[var(--accent2)] to-[var(--accent3)] rounded-t.

72. 72

    Content & copy — use specs:

73. 73

    Fill owner fields: email, github, linkedin.

74. 74

    Project examples: 3 sample projects with short 1–2 sentence dev-tone descriptions and tech stack badges (Nuxt, TypeScript, Tailwind, Laravel).

75. 75

    About intro: "Hey! I'm a full-stack developer who builds apps that actually work — and look good doing it." plus playful lines like "∞ bugs squashed".

76. 76

    Accessibility & responsive:

77. 77

    Nav collapses to hamburger on