Skip to content

Commit

Permalink
refactor: home page layout
Browse files Browse the repository at this point in the history
  • Loading branch information
@binodnepali
binodnepali committed Apr 30, 2024
1 parent e331f10 commit 419f8ca
Show file tree
Hide file tree
Showing 6 changed files with 57 additions and 53 deletions.
10 changes: 5 additions & 5 deletions components/Bio.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ export default function BioSection(
const yearOfExperience = new Date().getFullYear() - job_start_date.year;

return (
<section className="w-full sm:w-1/2">
<section>
<div className="flex flex-col items-center justify-center gap-2 mt-4 mb-8">
<img
src={profile_pic_url}
Expand All @@ -37,9 +37,9 @@ export default function BioSection(
alt={full_name}
/>

<h3 className="text-3xl font-semibold text-teal-500">
<h2 className="text-2xl font-semibold text-teal-500">
{full_name}
</h3>
</h2>

<p className="text-lg text-slate-500 dark:text-slate-400">
{age} years old | {nationality}
Expand All @@ -61,9 +61,9 @@ export default function BioSection(
</div>

<div>
<h4 className="text-2xl font-semibold text-teal-500">About me</h4>
<h3 className="text-xl font-semibold text-teal-500">About me</h3>

<p className="text-lg whitespace-pre-line">
<p className="text-base whitespace-pre-line">
{summary.replace(
"{{year_of_experience}}",
`${yearOfExperience}`,
Expand Down
6 changes: 3 additions & 3 deletions components/Education.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,9 @@ export default function EducationSection({ educations }: {
educations: Education[];
}) {
return (
<section className="w-full sm:w-1/2">
<h4 className="text-2xl font-semibold text-teal-500">Education</h4>
<div className="grid grid-cols-1 gap-4">
<section>
<h3 className="text-xl font-semibold text-teal-500">Education</h3>
<div className="mt-4">
{educations.map((education, i) => (
<div
className="mt-4"
Expand Down
34 changes: 18 additions & 16 deletions components/Experience.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,8 +26,8 @@ export default function ExperienceSection({ experiences }: {
}, []);

return (
<section className="w-full sm:w-1/2">
<h4 className="text-2xl font-semibold text-teal-500">Experience</h4>
<section>
<h3 className="text-xl font-semibold text-teal-500">Experience</h3>

{mappedExperiences.map((exp, i) => (
<div
Expand All @@ -36,20 +36,22 @@ export default function ExperienceSection({ experiences }: {
>
<Card>
<>
<p className="text-xl font-semibold text-slate-900 dark:text-slate-100 uppercase">
{exp.company}
</p>
<p className="text-lg text-slate-500 dark:text-slate-400">
Full time - {calculateWorkDuration(
exp.nestedExperiences[
exp.nestedExperiences.length - 1
].starts_at,
exp.nestedExperiences[0].ends_at,
)}
</p>
<p className="text-lg text-slate-500 dark:text-slate-400">
{exp.location}
</p>
<section>
<h4 className="text-lg font-semibold text-slate-900 dark:text-slate-100 uppercase">
{exp.company}
</h4>
<p className="text-base text-slate-500 dark:text-slate-400">
Full time - {calculateWorkDuration(
exp.nestedExperiences[
exp.nestedExperiences.length - 1
].starts_at,
exp.nestedExperiences[0].ends_at,
)}
</p>
<p className="text-base text-slate-500 dark:text-slate-400">
{exp.location}
</p>
</section>

<SeeMoreExperiences experiences={exp.nestedExperiences} />
</>
Expand Down
12 changes: 6 additions & 6 deletions data/linkedin-profile.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,7 @@
},
"company": "Smart Servant",
"company_linkedin_profile_url": "https://www.linkedin.com/company/smartservant/",
"title": "Full Stack Developer",
"title": "Fullstack Software Developer",
"description": "Worked as a full-stack developer focused on developing IoT solutions for delivery and room service robots. Developed a progressive web app (PWA) where a user interacts with the robots and nodejs backend API which handles interaction between the app and the robots.",
"skills": [
"Vue",
Expand All @@ -113,7 +113,7 @@
},
"company": "No1Robotics B.V",
"company_linkedin_profile_url": "https://www.linkedin.com/company/no1robotics/",
"title": "Full Stack Developer",
"title": "Fullstack Software Developer",
"description": "Migration and Improvements of Geriatrie Project: The project aims to migrate “Geriatrie Pepper” web app into Geriatrie android application with some improvements in design. And decoupling “Geriatrie Admin” from a pepper robot platform and rewriting of “Geriatrie Admin” web app into Geriatrie Content Management System (CMS) by making responsive design and improving designs.",
"skills": [
"Vue",
Expand Down Expand Up @@ -144,7 +144,7 @@
},
"company": "No1Robotics B.V",
"company_linkedin_profile_url": "https://www.linkedin.com/company/no1robotics/",
"title": "Full Stack Developer",
"title": "Fullstack Software Developer",
"description": "Migration, Improvements and Extensions of KinderPoli (PiPo) Project: The project aims to migrate “PiPo Pepper” web app into KinderPoli android application with some improvements in the design and addition of new functionalities. And decoupling “PiPo Admin” from pepper robot platform and rewriting of “PiPo Admin” web app into KinderPoli Content Management System (CMS) by making responsive design with some new functionalities.",
"skills": [
"Vue",
Expand Down Expand Up @@ -175,7 +175,7 @@
},
"company": "No1Robotics B.V",
"company_linkedin_profile_url": "https://www.linkedin.com/company/no1robotics/",
"title": "Full Stack Developer",
"title": "Fullstack Software Developer",
"description": "Migration, Improvements and Extensions of Geriatrie Project: The project aims to migrate “Geriatrie” app, which was developed during the Graduation Project, improving development workflow & designs and adding some new functionalities.",
"skills": [
"Vue",
Expand All @@ -200,7 +200,7 @@
},
"company": "No1Robotics B.V",
"company_linkedin_profile_url": "https://www.linkedin.com/company/no1robotics/",
"title": "Full Stack Developer",
"title": "Fullstack Software Developer",
"description": "Project PiPo: The project aims to develop two web apps. First, “PiPo Pepper” an app which is used by a health care professional during a training session about pee and poo problems to a kid. Second, “PiPo Admin” an app which is used by the health care professional to manage the contents that are used during the training session.",
"skills": [
"Vue",
Expand All @@ -225,7 +225,7 @@
},
"company": "No1Robotics B.V",
"company_linkedin_profile_url": "https://www.linkedin.com/company/no1robotics/",
"title": "Full Stack Developer (Graduation Internship)",
"title": "Fullstack Software developer (Graduation Internship)",
"description": "Health care, Maxima Medisch Centrum (MMC) wants to put the social humanoid robot \"Pepper\" into their working environment to solve the problems of elderly people being frustrated during the stay in health care and their care professionals were not able to be with the patients more time to make them engaged. \nTherefore, an assignment was to develop a web-based application for pepper robot which helps them to keep their patients (especially old people) entertained and engaged during the stay in health care by introducing pepper robot onto their working environment. The pepper will be a colleague of the health care professional and work with them together.",
"skills": [
"Angular",
Expand Down
14 changes: 7 additions & 7 deletions islands/SeeMoreExperiences.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,21 +43,21 @@ export default function SeeMoreExperiences(

function SeeMoreExperience({ ex }: { ex: Experience }) {
return (
<div className="mt-2">
<h5 className="text-lg font-semibold text-slate-900 dark:text-slate-100">
<section className="mt-2">
<h4 className="text-lg font-semibold text-slate-900 dark:text-slate-100">
{ex.title}
</h5>
<p className="text-lg text-slate-500 dark:text-slate-400">
</h4>
<p className="text-base text-slate-500 dark:text-slate-400">
{`${formateDate(ex.starts_at)} - ${formateDate(ex.ends_at)}`}
</p>

<p className="mt-2 text-lg text-slate-700 dark:text-slate-100 whitespace-pre-line">
<p className="mt-2 text-base text-slate-700 dark:text-slate-100 whitespace-pre-line">
{ex.description}
</p>

{ex.skills && (
<div className="mt-2 flex flex-col gap-2 text-base text-slate-500 dark:text-slate-400">
<p className="text-base font-semibold text-slate-900 dark:text-slate-100">
<p className="font-semibold text-slate-900 dark:text-slate-100">
Skills
</p>

Expand All @@ -76,7 +76,7 @@ function SeeMoreExperience({ ex }: { ex: Experience }) {
</div>
</div>
)}
</div>
</section>
);
}

Expand Down
34 changes: 18 additions & 16 deletions routes/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,22 +23,24 @@ export default function Home() {
</header>

<main className="container mx-auto px-4">
<div className="flex flex-col items-center justify-center gap-4 py-8 ">
<BioSection
birth_date={data.birth_date}
job_start_date={data.job_start_date}
profile_pic_url={data.profile_pic_url}
full_name={data.full_name}
city={data.city}
country_full_name={data.country_full_name}
nationality={data.nationality}
occupation={data.occupation}
summary={data.summary}
/>

<ExperienceSection experiences={data.experiences} />

<EducationSection educations={data.education} />
<div className="flex flex-col items-center">
<div className="flex flex-col gap-4 w-full md:w-3/5">
<BioSection
birth_date={data.birth_date}
job_start_date={data.job_start_date}
profile_pic_url={data.profile_pic_url}
full_name={data.full_name}
city={data.city}
country_full_name={data.country_full_name}
nationality={data.nationality}
occupation={data.occupation}
summary={data.summary}
/>

<ExperienceSection experiences={data.experiences} />

<EducationSection educations={data.education} />
</div>
</div>
</main>

Expand Down

0 comments on commit 419f8ca

Please sign in to comment.