The objective of this project was not only to reimagine and renovate my portfolio but also to provide myself with an opportunity to write, execute, and run HTML codes along with utilizing CSS in a more traditional way to enhance my proficiency in them. I simply loved exploring and learning about it all, and it was a fun and adventurous project.
📁 I've added some starting points of HTML docs above (Now, I've perfected web techs), which were previsouly used in portfolio V1. Feel free to review them and you can use them if interested.
📷 You can have a glimpse of how each iteration of graphic designs helped me come with a finalized appealing look of my portfolio. Feel free to access images 🔗 and have a look if interested.
- Obtained proficiency in utilizing HTML, Bootstrap, and CSS more efficiently and effectively.
- Built more knowledge and gained insights into them along with accelerating my confidence in building responsive webs and analytic apps.
As I previously used HTML, Bootstrap, Mantine, and CSS during the development of my first app using the Plotly Dash library in Python, it wasn’t much of a hassle.
However, learning about something new in its original form is what brings excitement to me, and it also keeps me motivated. So, in order to get
familiarized with HTML and CSS in a more traditional manner, I started this project with a simple and first approach to utilize
the functionality Iframe provided by Google Site and embed HTML codes in the predefined layout/blocks of the first page of this portfolio. Along the way
of this development journey, I maybe missing something here, but I figured out that embedding HTML code with the anticipated results might not work with predefined
blocks in Google Site for all devices. So, the more I dug deeper into it, the more confident I became in writing and executing this code.
Eventually, I started writing complete codes for the whole page while continuously ensuring and defining the responsiveness across various devices throughout the development.
Finally, after multiple iterations, trial runs, countless hours, and finally coming with final product, this project not only boosted my confidence but also made me feel
fulfilled as an individual equipped with the necessary tools, enabling me to build analytic apps with ease of navigation and responsiveness.
I updated this portfolio through many versions starting with basic portfolio development to a fine-grained portfolio. In each version, I perfected my skills including HTML, CSS, Grid System, Designing skills, UI/UX with intuitive design and responsiveness, and project management.
I initially used the predefined layout provided by Google Site, meaning that I used the existing base layout/foundation on which my portfolio was originally built.
So, when I initially started embedding these HTML codes in the first page of the portfolio, I encountered challenges with the predefined blocks preventing the
responsiveness across many devices. However, it was my curiosity that led me to figure this out.
So, for a better user experience, I started writing and executing codes for a whole page instead of relying on predefined layout blocks, and then embedded codes
into each desired page. This resulted in a better outcome and provided me with long-lasting experience.
Updated | Jupy 2024 : Despite the above experience which I encountered during the initial phase of the web development, I came across a few more challenging scenarios including -
integrating javascripts, modern and technical design of pages and such...However, through each version, I faced challenges, learned from them, and finally implemented
robust solutions in the portfolio.
The objective of this project was to re-imagine and revamp my portfolio while honing my HTML and CSS skills. Having previously utilized HTML, Bootstrap, and
CSS while developing my first app with Plotly Dash in Python, I aimed to deepen my understanding in a more traditional context. I started by compiling HTML
documents and embedding them throughout my portfolio using Google Site's 'Iframe' functionality. Find more details.
In this version, the goal was to highlight the key elements, re-design them with responsiveness, find colors balance and typography, and re-embed HTML codes.
The principle of Grid system, Flexbox, and Bootstrap were incorporated to create dynamic and responsive layouts along with the use of CSS animations and
transitions providing visually appealing look for most of the elements throughout this portfolio. Find more details.
The primary objective was to recreate the Projects Page and optimize space efficiency. This led me to create multiple tabs, with each tab containing
respective projects. Additionally, I aimed to add dynamic blocks with sufficient space to provide detailed information about each project, triggered
by corresponding button. In simple terms, my goal was to achieve 'less is more' with responsive layouts across various devices. Find more [details](https://sites.
In this version, I added a blogging page including blog posts and their individual pages. This page aimed at sharing my learning, data-driven insights,
stories, and updates about tools and technologies as they evolve every day. Whether it's exploring Python libraries, gaining insights into software
development, or showcasing interactive visualizations, this blogging page reflects on my commitment to Continuous Learning and Growth. Find more details.
Initially, this project started from a desire to remove clutters from the portfolio and enhance its visibility. Ultimately, this turned out to be a
comprehensive project and led me to so many ideas to redesign several components of the portfolio. This included re-designing each page, implementing
interactive UI components, cleaning codes, dedicating individual pages for projects, and advancing my skills in web technologies. Still documenting.
- HTML
- CSS
- Photoshop
- JavaScript (little bit usage)
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent