René's URL Explorer Experiment

{"@context":"https://schema.org","@type":"DiscussionForumPosting","headline":"Portfolio Plans","articleBody":"# Portfolio Plans\n\nThis document will outline ideas for completion/polish of my personal portfolio website; *aspauldingcode.com*\n\n\n## The Plan\n\nIdeally, we have a fully functional portfolio built in Next.js which utilizes Framer Motion for animation, Next.js/React.js page router, and is optimal for mobile view as well.\n\n### Implementing a Homepage\n\nThe homepage consists of a quick and minimalistic overview/bio of myself. There will be a few buttons only: \n- Contact\n- Projects\n- Resume\n\nI prefer to use a minimalistic layout. The portfolio homepage will have a profile photo of me. I want this to be the best photo you've ever seen. Reflecting professionalism.\n\nThere is a theme toggle switch. You can select darkmode/lightmode accordingly.\nThe variants utilizes 2 seperate base16 colorschemes.\n\nThe contact button reveals a slide up/down contact card, which implements ReCaptiav3, to avoid spam from unwanted bots. This contact card should sanitize input properly, including making sure of valid email address.\n\nFooter:\nThe footer will be global - and point towards my github page, as well as linkedin.\n\n### A functional contact card\n\nThe project card will send to my personal work email, aspauldingcode@gmail.com. The way this gets sent to me is through EmailJS.com API. This means, it can send me the message from my website as an email from EmailJS.com, showcasing a notification about the message, the message sender, contents, and email.\n\n###  A rather advanced Project page\n\nThe project page is a bit more advanced. I want to utilize animation with framer motion api, as well as tailwind-css to properly style my projects in the form of \"project cards\" - a concept which allows a viewer of the projects page to see a list of projects by swiping left/right. \n\nEach project card contains the following:\n\n- Preview images slider to showcase functionality/work\n- Project Name\n- Project Date\n- Project Status (Complete, Incomplete)\n- Project Description (short)\n- View More - Opens a new page dedicated to the project.\n\nThe project cards use images with the slick-carousel module.\n\nThe project page must reliably detect if on mobile or desktop. If on mobile, the project cards will not be animated, and render a much more compact layout.\n\nproject cards are rendered dynamically, based on project data. A seperate module will be dedicated to rendering project data, including images, description, date, name, status. As more projects are added to project data, the project page will show more project cards. \n\n#### Desktop View - Project Cards\n\nThe Desktop project page renders project cards in a specific way:\n\n- Only a short few cards are visible.\n- The Desktop Viewer must press left/right buttons in the page view to activate rotation of the cards. \n    - The cards will shift left/right to reveal other project cards, previously not quite visible at first. \n    - This helps condense several projects into a compact space, readily available to showcase its potential, without having to be to obstructive of other project cards.\n- Each project card will have a uniform height.\n    - Even if more/less data is processed on the card, the project card will be the same size as all the other cards.\n- Project cards will bew animated.\n    - They will have subtle idle floating animation. This is a simple wavy animation to give them some life and style.\n    - On hover, they will stop float animation of waving/wiggling. The outline color will change.\n- Project cards will always render side by side, unless there is no more screenspace in width to do so.\n    - There will never be a card above another card.\n\n#### Mobile View - Project Cards\n\nThe Mobile project page renders project cards in a different way from Desktop View:\n\n- No floating/wiggle/wavy animation\n    - No floating cards animations. Should be smoother. \n    - No hover animation. Smoother movile view.\n- Touch optimized.\n    - Since mouse is no longer used, we will optimize mobile view for touch input.\n    - The project cards should have a swipe to next/prev function.\n        - This would animate swiping the card to the left or right, similar to iOS image cards in Messages app.\n        - This animation should be very minimal, and effecient if possible.\n    - Instead of View More on hover, it will show \"Tap to view more\" and there will be no hover features.\n- The project cards will all render in the center of the screen, based on screen size.\n- The Project cards will maintain a fixed size. Just like desktop view.\n\n### Project-Dependent Pages\n\nAfter getting each Project card in the project page, the view more or tap to view more should open a dedicated page where I can post a longer description of that project. This could be a modal, or just a new page. Not sure yet.\n\nProject dependent pages should probably house much more information about what I did on the project, not just what the project *is*.\n\nProject dependent pages will have a \"zoom-in\" animation after project card is clicked, to show more info about that project. The image slider (slick-slider) will be much more visible, show-casing an image which is the size of the screen; edge-to-edge.\\\nThe project long-description will still have a \"container\" div class, making it more stylized towards readibility.\n\nProject-dependent pages will have a \"View Source\" if the project is available on github. \n\n### Music Showcase\n\nI want to showcase all my music on my Portfolio Webpage. I want to maybe embed a custom music player, which can play some of my most curated songs. Each song will have a preview, including Song Title, Song Artwork, Song Credits, and buttons to where you can stream on your favorite platform. This will be Spotify, Apple Music, etc...\n\n### Proper Resume\n\nI want to code/program my resume. I probably will use ascii, which I want to render in hmtl. The goal here is I want to be able to easily apply changes to my resume in ascii, and use chatgpt to fix formatting, wording, etc. Then, I can use CSS to stylize the output and apply a single-page pdf style to the whole thing, so it can be published on aspauldingcode.com when you click on the RESUME homepage button.\n","author":{"url":"https://github.com/aspauldingcode","@type":"Person","name":"aspauldingcode"},"datePublished":"2025-04-28T16:43:31.000Z","interactionStatistic":{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":7},"url":"https://github.com/3/aspauldingcode/issues/3"}