1+ <template >
2+ <div class =" base-container" >
3+ <div class =" base-grid mt-2" >
4+ <div class =" p-4 lg:border-r border-white" >
5+ <section
6+ v-if =" resume.profile.length"
7+ class =" mt-2"
8+ >
9+ <h3 class =" project-category" >
10+ PROFILE
11+ </h3 >
12+ <p class =" resume-text" >
13+ {{ resume.engineerBio }}
14+ </p >
15+ </section >
16+ <section
17+ v-if =" resume.education.length"
18+ class =" mt-6"
19+ >
20+ <h3 class =" resume-heading" >
21+ Education
22+ </h3 >
23+ <ul class =" list-inside space-y-4" >
24+ <li
25+ v-for =" (edu, index) in resume.education"
26+ :key =" index"
27+ class =" resume-text"
28+ >
29+ <span
30+ class =" date"
31+ >{{ edu.startDate }} - {{ edu.endDate }}</span ><br >
32+ <span
33+ class =" resume-item"
34+ >{{ edu.degree }}, {{ edu.institution }}, {{ edu.location }}</span >
35+
36+ <div class =" resume-text" >
37+ <li >
38+ {{ edu.specialization }}
39+ {{ edu.dissertation }}
40+ </li >
41+ </div >
42+ </li >
43+ </ul >
44+ </section >
45+ <section
46+ v-if =" resume.skillGroups.length"
47+ class =" mt-6"
48+ >
49+ <h3 class =" resume-heading" >
50+ Skills
51+ </h3 >
52+
53+ <!-- Grid Layout for Skill Groups -->
54+ <div class =" grid grid-cols-2 md:grid-cols-4" >
55+ <!-- Skill Groups List -->
56+ <div
57+ v-for =" (group, index) in resume.skillGroups"
58+ :key =" index"
59+ class =" mb-6"
60+ >
61+ <!-- Category Name -->
62+ <h2 class =" resume-text font-semibold italic" >
63+ {{ group.category }}
64+ </h2 >
65+
66+ <!-- Skills List -->
67+ <ul class =" list-disc list-outside pl-4 space-y-1" >
68+ <li
69+ v-for =" (skill, i) in group.skills"
70+ :key =" i"
71+ class =" resume-text"
72+ >
73+ {{ skill }}
74+ </li >
75+ </ul >
76+ </div >
77+ </div >
78+ </section >
79+ </div >
80+
81+ <!-- Right Column: Education, Projects, and Skills -->
82+ <div class =" p-4" >
83+ <!-- Experience Section -->
84+ <section
85+ v-if =" resume.experience.length"
86+ class =" mt-2"
87+ >
88+ <h3 class =" resume-heading" >
89+ Professional Experience
90+ </h3 >
91+ <ul class =" list-inside space-y-4" >
92+ <li
93+ v-for =" (exp, index) in resume.experience"
94+ :key =" index"
95+ class =" resume-text"
96+ >
97+ <span
98+ class =" date"
99+ >{{ exp.startDate }} - {{ exp.endDate }}</span ><br >
100+ <span
101+ class =" resume-item"
102+ >{{ exp.role }}, {{ exp.company }}, {{ exp.location }}</span >
103+
104+ <ul class =" list-disc list-outside pl-4 space-y-1" >
105+ <li
106+ v-for =" (desc, i) in exp.description"
107+ :key =" i"
108+ >
109+ {{ desc }}
110+ </li >
111+ </ul >
112+ </li >
113+ </ul >
114+ </section >
115+ </div >
116+ </div >
117+ </div >
118+ </template >
119+
120+ <script >
121+ export default {
122+ data () {
123+ return {
124+ resume: {
125+ name: ' ' ,
126+ title: ' ' ,
127+ email: ' ' ,
128+ linkedIn: ' ' ,
129+ gitHub: ' ' ,
130+ profile: ' ' ,
131+ experience: [],
132+ education: [],
133+ projects: [],
134+ skillGroups: [],
135+ references: [],
136+ }
137+ };
138+ },
139+ created () {
140+ this .fetchContent ();
141+ },
142+ methods: {
143+ fetchContent () {
144+ fetch (' /api/v1/info' )
145+ .then ((response ) => response .json ())
146+ .then ((data ) => {
147+ this .resume = data;
148+ })
149+ .catch ((error ) => console .error (' Error fetching resume content:' , error));
150+ }
151+ },
152+ };
153+ </script >
154+
155+ <style >
156+
157+ </style >
0 commit comments