My Portfolio
Tags: vue, programming, pwa, portfolio
Published: 2022-12-01 20:52:31

A lot has been said concerning having a portfolio as an engineer, I am a self-taught website developer and Engineer. I have passion for programming and technology. I am a huge fan of mobile responsive web applications, conversant with _**Node, Vue, React, Python, MySQL, PostgreSQL, Microsoft Excel, Word, PowerPoint,** and more._

Your comment, suggestion, and constructive criticism will be highly appreciated. Feedback will go a long way to improving my performance and making necessary decisions. You can _**[check me out](http://adegbitefamosa.com.ng/)🤸‍♀️🤸‍♂️**_.

**Technologies Used:**
- Figma: _For the UI/UX design_
- HTML5
- VUE.js/Vite
- CSS
- Tailwind
- PWA
- GitHub: _For continuous integration and deployment._
- WEB SERVER FOR CHROME: _Used to text my application locally._
- Interserver.net: _For hosting the website_
- Google AdSense
- and more……

**Font:**
99% of the font used is **poppins** and it was labeled **adefam**. Poppins is a geometric `sans-serif` typeface published by Indian Type Foundry in 2014. It is highly readable, which makes it an excellent choice for both web and mobile.
![fonts](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ae5rjv8ahfs43zxq0q1e.PNG)

**Color:**
The major color theme used is the family of _**Orange, Blue, and Platinum**_:
![Color Theme](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o0598ezxwdy1qbksmb7t.PNG)

**MidNight View:** 
At midnight from 8pm to 6am, all background color changes to black and most font color changes to white or maintain their default color.
![Midnight View](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ap14x6fout17uoz288ke.PNG)

**Mobile View:**
To the best of my knowledge and testing across platforms using google chrome inspect, the website is mobile responsive.
![mobile view](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9gmkdbm1ojnn149fbche.PNG)

**Accessibility:**
The website is accessible using google search engine by typing _**Famosa Adegbite**_. Work is in progress to make it more accessible using different keywords and skills related to me.
![Famosa Adegbite Portfolio](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0lp6z2cw50npwv8vjiut.PNG)

**My Content:**
Major stress about personal portfolio website is ability to make constant update and changes without going through the code all over again. 99% of all the contents on my website are in _**JSON format**_. If there is any need for changes or update, that will be access by opening the json file.
![Json File](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rct60vg9s4chm5t2u1c6.PNG)
_Home page json file example tag `main.json`_
```javascript
{
    "mainValue": [
        {
          "id": "1",
          "greetings": "Hi! I am",
          "myName": "Famosa Adegbite",
          "status": "Self-taught website developer and engineer. I have a passion for programming and technology. I'd call myself a Jack of all trades when it comes to technology. I am open-minded and ready to learn new skills.👨‍💻👨‍💻👨‍💻",
         "image": "https://res.cloudinary.com/famosa-adegbite/image/upload/q_auto,f_auto/v1656117940/myPotfolio/WhatsApp_Image_2022-05-26_at_2.21.31_PM_2_msiyuj.jpg",
         "alt": "adefamosa"
        }
       ]
}
```

**OVERVIEW OF THE WEBSITE**
The website contains _**11 sections**_: _navigation, home, about, education, experience, blog, skills, Gallery,  project, comment, and footer._

All this section talked about myself, my experiences, academics, skills, and basic information about me.

**The Navigation:** 
The navigation was grouped into two parts: the header which contains the logo and my contact details (phone number and email address) while the left side navigation contains the logo, click button icons that lead to all the sections of the page and a contact button that leads to my WhatsApp. The Left side navigation is only visible on a big screen but hidden on a mobile screen.
![Header Navigation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5owd3goisrb6hpit8qxr.PNG)
![Side Navigation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c7o41xad46mvhyg531ge.PNG)

**Home Section:**
It explains briefly about myself as a self-taught website developer and also contains all my social media links like LinkedIn, Facebook, GitHub and more.
![Home Section](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mr126vgh912jv890lmrx.PNG)

**About Section:** 
This elaborate more about myself, my interest in both tech and non-tech life. It also contains a button label **_My CV_** that leads you to my online **CV**.
![About](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/huqeevp2z8n9ukeckdgs.PNG)

**Education & Certification:** 
This shows my academic achievement and some of the certifications I possess which include both soft and professional certifications.
![Education](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yn16y6mkyyze0836c6id.PNG)

**Work Experience:** 
This section showcases my experiences and a brief description of my job responsibilities. Clicking on the arrow button will show more of my work experience.
![Work Experience](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n1xuy8djkfhwr6z68euv.PNG)

**Blog:** 
This section was tagged _**“Knowledge base”**_ which contains a few of my tech writeup. Hoping to write more blogs on my achievement, experience, and career path.
![Blog](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zv3ficoudbys9aosefgg.PNG)

**Skills:** 
This section contains a few of my tech skills. As a self-taught individual, I learned a lot in order to achieve most of my goals, meet up with the challenging environment and also use the skills acquired to bless the life of others through training and mentoring.
![Skills](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aroanvec6kj82j62ll5n.PNG)

**Gallery:** 
They said seeing is believing, the gallery section display a few of my pictures taken during work, training and seminars.
![Gallery](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ods41ftvfmc0as0p65xa.PNG)

**My Project:** 
This section showcases a few of my web-related work which include my portfolio. An unknown author said, _“Knowledge is knowing what to say. Wisdom is knowing when to say it”._ Likewise, Skill is knowing what to do while Project is knowing how and when to do it.
![Project](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9ixusil9s1yyvaa98ip0.PNG)

**Comment:** 
The comment section is an interactive section using Facebook social media plugin. Any feedback will go a long way to improving my performance and making necessary decisions.
![Comment](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/89xm96020tipqal5iwjl.PNG)

**Footer:** 
The footer section contains my social media links, email, phone number and a communication form which at the moment is work in progress.
![footer](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pfmgyddyuqxunl7cd7yn.PNG)

**LINKS:**
1. View my [portfolio](http://adegbitefamosa.com.ng/)
2. View the [source code](https://github.com/adefam/myPortfolio)